/*
 * Kentarion Elysium 2.0
 * Vollständiger visueller Child-Style für phpBB 3.3.x
 * Benötigt den installierten Standardstyle prosilver.
 */
@import url("../../prosilver/theme/stylesheet.css");

:root {
  --ely-night: #040b13;
  --ely-abyss: #071522;
  --ely-deep: #0b2236;
  --ely-panel: rgba(7, 22, 35, .94);
  --ely-panel-2: rgba(12, 35, 53, .94);
  --ely-panel-3: rgba(18, 48, 71, .92);
  --ely-line: rgba(86, 154, 198, .38);
  --ely-line-hot: #56cfff;
  --ely-cyan: #61d8ff;
  --ely-blue: #168fc9;
  --ely-gold: #d7b46a;
  --ely-gold-hi: #f6e3b6;
  --ely-gold-lo: #87632d;
  --ely-text: #e8f4fc;
  --ely-muted: #9eb9cc;
  --ely-danger: #ff7585;
  --ely-ok: #73d6ae;
  --ely-serif: Georgia, "Times New Roman", serif;
  --ely-ui: "Trebuchet MS", Arial, sans-serif;
}

html { background: var(--ely-night); }

body {
  color: var(--ely-text);
  font-family: var(--ely-ui);
  background-color: var(--ely-night);
  background-image:
    linear-gradient(180deg, rgba(3, 11, 19, .08), rgba(3, 11, 19, .72) 75rem, #030911 100%),
    url("./images/elysium-page-bg.jpg");
  background-position: top center;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 0 46%, rgba(2, 8, 14, .46) 88%);
}

#wrap {
  max-width: 1480px;
  margin: 22px auto 0;
  padding: 0 20px 30px;
  border: 1px solid rgba(215, 180, 106, .35);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(3, 13, 23, .82), rgba(3, 12, 20, .92));
  box-shadow: 0 0 0 4px rgba(3, 12, 21, .64), 0 20px 80px rgba(0, 0, 0, .72);
}

/* Banner / Portal-Kopf */
.headerbar {
  min-height: clamp(285px, 33.3vw, 480px);
  margin: 14px 0 12px;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ely-gold);
  border-radius: 13px;
  background-color: #102941;
  background-image:
    linear-gradient(180deg, transparent 68%, rgba(3, 12, 20, .64) 100%),
    url("./images/kentarion-banner.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 11px 34px rgba(0, 0, 0, .68), inset 0 0 35px rgba(0, 0, 0, .34);
}

.headerbar::before,
.headerbar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.headerbar::before {
  inset: 5px;
  z-index: 1;
  border: 1px solid rgba(246, 227, 182, .38);
  border-radius: 8px;
  box-shadow: inset 0 0 20px rgba(2, 9, 17, .58);
}

.headerbar::after {
  left: 50%;
  bottom: -13px;
  z-index: 2;
  width: 84px;
  height: 28px;
  transform: translateX(-50%);
  background: url("./images/divider-gem.svg") center/contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(80, 211, 255, .8));
}

.headerbar .inner { min-height: inherit; }
.site_logo, #site-description h1, #site-description p { display: none; }

/* Hauptnavigation */
.navbar {
  position: relative;
  margin: 0 0 18px;
  padding: 8px 16px;
  color: var(--ely-text);
  border: 1px solid rgba(215, 180, 106, .62);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(29, 67, 95, .97), rgba(6, 24, 39, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 7px 19px rgba(0, 0, 0, .42);
}

.navbar::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1px solid rgba(93, 181, 228, .15);
  border-radius: 6px;
}

.navbar ul { position: relative; z-index: 1; }
.navbar a, .nav-link { color: #dceefa; font-weight: 700; letter-spacing: .015em; }
.navbar a:hover, .nav-link:hover { color: var(--ely-gold-hi); text-decoration: none; text-shadow: 0 0 10px rgba(246, 227, 182, .4); }
.navbar .icon, .nav-link .icon, .dropdown .icon { color: var(--ely-cyan); }
.navbar .badge { color: #081622; background: linear-gradient(#f7dea6, #c79442); box-shadow: 0 0 8px rgba(246, 212, 141, .54); }

.dropdown .dropdown-contents {
  color: var(--ely-text);
  border: 1px solid var(--ely-gold-lo);
  border-radius: 8px;
  background: rgba(6, 22, 36, .98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .58);
}
.dropdown .pointer-inner { border-bottom-color: #071725; }
.dropdown-contents a { color: #dceefa; }
.dropdown-contents li:hover { background: rgba(37, 93, 128, .44); }

/* Breadcrumbs */
.breadcrumbs .crumb::before { color: var(--ely-gold); }
.breadcrumbs .crumb a { color: #b8d5e7; }
.breadcrumbs .crumb a:hover { color: var(--ely-gold-hi); }

/* Foren- und Themenrahmen */
.forabg, .forumbg {
  position: relative;
  margin: 0 0 20px;
  padding: 1px;
  overflow: visible;
  border: 1px solid rgba(215, 180, 106, .74);
  border-radius: 12px;
  background: linear-gradient(135deg, #8b672f, #59b7e5 46%, #80602d 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(246, 227, 182, .2);
}

.forabg::after, .forumbg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 4;
  width: 54px;
  height: 22px;
  transform: translateX(-50%);
  background: url("./images/divider-gem.svg") center/contain no-repeat;
}

.forabg > .inner, .forumbg > .inner {
  overflow: hidden;
  border-radius: 10px;
  background: var(--ely-panel);
}

.forabg li.header, .forumbg li.header {
  padding: 11px 16px 10px;
  border-bottom: 1px solid rgba(246, 227, 182, .56);
  background:
    linear-gradient(90deg, rgba(5, 26, 44, .99), rgba(24, 79, 113, .97) 48%, rgba(5, 26, 44, .99));
  box-shadow: inset 0 -10px 28px rgba(0, 0, 0, .24);
}

.forabg li.header dt, .forumbg li.header dt,
.forabg li.header a, .forumbg li.header a {
  color: var(--ely-gold-hi);
  font-family: var(--ely-serif);
  font-size: 1.28em;
  letter-spacing: .075em;
  text-shadow: 0 2px 4px #000;
}

.forabg li.header dd, .forumbg li.header dd {
  color: #a8c6d8;
  font-size: .92em;
  letter-spacing: .035em;
}

ul.topiclist li.row {
  position: relative;
  color: var(--ely-text);
  border-top: 1px solid rgba(103, 175, 217, .16);
  border-bottom: 1px solid rgba(0, 0, 0, .6);
  background: linear-gradient(90deg, rgba(9, 28, 44, .97), rgba(12, 36, 55, .95));
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

ul.topiclist li.row:nth-child(even) {
  background: linear-gradient(90deg, rgba(11, 33, 51, .97), rgba(15, 42, 63, .95));
}

ul.topiclist li.row:hover {
  z-index: 2;
  background: linear-gradient(90deg, rgba(17, 51, 75, .98), rgba(20, 61, 87, .97));
  box-shadow: inset 4px 0 var(--ely-cyan), inset 0 0 26px rgba(56, 178, 228, .08);
}

ul.topiclist li.row:last-child { border-radius: 0 0 9px 9px; }
ul.topiclist dd { border-left-color: rgba(84, 146, 185, .2); }

/* Eigene Statusgrafiken */
dl.row-item { background-position: 12px 50%; background-size: 50px 50px; }
.forum_read, .forum_read_subforum { background-image: url("./images/forum-read.svg"); }
.forum_unread, .forum_unread_subforum { background-image: url("./images/forum-unread.svg"); }
.forum_read_locked, .forum_unread_locked { background-image: url("./images/forum-locked.svg"); }
.forum_link { background-image: url("./images/forum-link.svg"); }
.topic_read, .topic_read_mine, .sticky_read, .announce_read, .global_read { background-image: url("./images/topic-read.svg"); }
.topic_unread, .topic_unread_mine, .sticky_unread, .announce_unread, .global_unread { background-image: url("./images/topic-unread.svg"); }
.topic_read_hot, .topic_unread_hot, .topic_read_hot_mine, .topic_unread_hot_mine { background-image: url("./images/topic-hot.svg"); }
.topic_read_locked, .topic_unread_locked, .topic_read_locked_mine, .topic_unread_locked_mine { background-image: url("./images/topic-locked.svg"); }
.topic_moved { background-image: url("./images/topic-moved.svg"); }

a { color: #6bd3ff; }
a:hover { color: var(--ely-gold-hi); }
a.forumtitle, a.topictitle {
  color: #f0f8fd;
  font-family: var(--ely-serif);
  font-size: 1.2em;
  letter-spacing: .015em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
a.forumtitle:hover, a.topictitle:hover { color: var(--ely-gold-hi); text-decoration: none; }
.forum-description, .topic-poster, .topic-time, .responsive-show { color: var(--ely-muted); }
.lastpost, .lastpost a { color: #c0d5e2; }

/* Überschriften / Seitenleisten */
h2, h2.solo, .panel h2, .stat-block h3 {
  color: var(--ely-gold-hi);
  font-family: var(--ely-serif);
  letter-spacing: .045em;
  border-bottom-color: rgba(215, 180, 106, .48);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}

h2.topic-title a { color: var(--ely-gold-hi); }
h3 { color: #dceefa; border-bottom-color: rgba(91, 160, 202, .3); }

.panel {
  color: var(--ely-text);
  border: 1px solid rgba(83, 150, 193, .52);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(13, 39, 59, .96), rgba(5, 20, 33, .97));
  box-shadow: 0 7px 20px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .025);
}
.panel.bg2 { background: linear-gradient(145deg, rgba(16, 44, 65, .97), rgba(7, 23, 37, .97)); }
.panel-container .panel li.row { border-bottom-color: rgba(92, 150, 188, .22); }

/* Aktionsleiste und Fantasy-Buttons */
.action-bar { margin: 15px 0; }
.button, .button1, .button2, input.button1, input.button2, a.button {
  min-height: 34px;
  padding: 6px 13px;
  color: #f3faff;
  font-family: var(--ely-ui);
  font-weight: 800;
  letter-spacing: .025em;
  border: 1px solid #59c8f4;
  border-radius: 5px 11px 5px 11px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 34%),
    linear-gradient(180deg, #208dbf, #0b4c73 72%, #07344f);
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), inset 0 -1px rgba(0, 0, 0, .45), 0 3px 9px rgba(0, 0, 0, .42);
  text-shadow: 0 1px 2px #00334e;
  transition: all .16s ease;
}

.button:hover, .button1:hover, .button2:hover,
input.button1:hover, input.button2:hover, a.button:hover {
  color: #152030;
  border-color: #ffe7ae;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .34), transparent 36%),
    linear-gradient(180deg, #f1d58d, #b88435);
  box-shadow: 0 0 15px rgba(244, 207, 125, .38), inset 0 1px rgba(255, 255, 255, .45);
  text-shadow: 0 1px rgba(255, 255, 255, .34);
  transform: translateY(-1px);
}

.button:active, .button1:active, .button2:active { transform: translateY(1px); }
.button .icon, .button1 .icon, .button2 .icon { color: #dff7ff; text-shadow: 0 0 7px rgba(97, 216, 255, .85); }
.button:hover .icon, .button1:hover .icon, .button2:hover .icon { color: #1a3550; text-shadow: none; }

.action-bar .button .icon.fa-pencil,
.action-bar .button .icon.fa-reply,
.action-bar .button .icon.fa-lock {
  width: 22px;
  color: transparent;
  background: url("./images/action-crystal.svg") center/20px 20px no-repeat;
  text-shadow: none;
}

.action-bar .button:hover .icon.fa-pencil,
.action-bar .button:hover .icon.fa-reply { filter: brightness(.58) saturate(1.4); }

.search-box .inputbox {
  min-height: 34px;
  border: 1px solid #417da5;
  border-radius: 9px 0 0 4px;
  background: rgba(3, 18, 30, .94);
}

/* Beiträge */
.post {
  position: relative;
  overflow: hidden;
  color: var(--ely-text);
  border: 1px solid rgba(76, 140, 180, .56);
  border-radius: 11px;
  background:
    linear-gradient(110deg, rgba(16, 44, 65, .98), rgba(7, 23, 37, .98) 34%, rgba(6, 19, 31, .98));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .035);
}

.post::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ely-gold) 22%, var(--ely-cyan) 50%, var(--ely-gold) 78%, transparent);
  opacity: .75;
}

.post.bg2 { background: linear-gradient(110deg, rgba(13, 38, 58, .98), rgba(5, 20, 33, .98) 34%, rgba(4, 17, 28, .98)); }
.postbody { color: var(--ely-text); }
.postbody h3, .postbody h3 a { color: var(--ely-gold-hi); font-family: var(--ely-serif); }
.postprofile { color: var(--ely-muted); border-color: rgba(95, 160, 201, .32); background: linear-gradient(90deg, rgba(31, 75, 104, .16), transparent); }
.postprofile strong, .postprofile a { color: #9ee5ff; }
.postprofile .avatar img { border: 1px solid var(--ely-gold); border-radius: 50%; box-shadow: 0 0 0 3px rgba(6, 23, 37, .8), 0 0 16px rgba(74, 198, 244, .28); }
.content { color: #e2edf5; font-size: 1.08em; line-height: 1.65; }
.signature { color: #8faabd; border-top-color: rgba(77, 142, 183, .3); }
.post-buttons .button { min-height: 28px; padding: 4px 8px; }
.post-number { color: var(--ely-gold); }

blockquote {
  color: #d5e7f2;
  border: 1px solid rgba(90, 164, 207, .35);
  border-left: 3px solid var(--ely-cyan);
  border-radius: 7px;
  background: rgba(7, 28, 44, .78);
}
blockquote blockquote { background: rgba(12, 38, 57, .82); }
.codebox { border-color: #3d7194; background: #040f19; }
.codebox p { border-bottom-color: #315c79; }
.codebox code { color: #b8e8ff; }
.attachbox { color: var(--ely-text); border-color: #3e7699; background: rgba(4, 18, 29, .84); }

/* Formulare, Editor, Benutzerbereich */
input.inputbox, textarea.inputbox, select,
.message-box textarea {
  color: #eef8fe;
  border: 1px solid #3c7296;
  border-radius: 5px;
  background: #061827;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .38);
}
input.inputbox:focus, textarea.inputbox:focus, select:focus {
  border-color: var(--ely-cyan);
  box-shadow: 0 0 0 2px rgba(97, 216, 255, .15), inset 0 2px 7px rgba(0, 0, 0, .35);
}
fieldset.fields1, fieldset.fields2 { background: transparent; }
fieldset dl:hover dt label { color: var(--ely-gold-hi); }
label { color: #dcecf6; }
.tabs .tab > a, .minitabs .tab > a { color: #c9dce8; background: rgba(13, 43, 65, .9); }
.tabs .activetab > a, .minitabs .activetab > a { color: #172334; background: linear-gradient(#f3d99b, #c49749); }
#tabs .tab > a:hover, #minitabs .tab > a:hover { color: var(--ely-gold-hi); background: #123e5d; }
#cp-menu hr { border-color: rgba(84, 149, 190, .32); }
.cp-mini { color: var(--ely-muted); background: rgba(8, 26, 41, .8); }

/* Meldungen */
.rules { color: #ffe1e5; border: 1px solid rgba(255, 117, 133, .55); background: rgba(83, 23, 35, .78); }
.rules a { color: #ffb8c1; }
.successbox { color: #d8fff0; border: 1px solid rgba(115, 214, 174, .54); background: rgba(17, 74, 55, .72); }
.errorbox { color: #ffe1e6; border: 1px solid rgba(255, 117, 133, .6); background: rgba(91, 21, 36, .76); }
.information { color: #d6f3ff; background: rgba(19, 65, 91, .68); }

/* Pagination */
.pagination li a, .pagination li span {
  color: var(--ely-text);
  border: 1px solid #376d92;
  border-radius: 4px 8px 4px 8px;
  background: linear-gradient(#174361, #0b2d45);
}
.pagination li a:hover { color: #152030; border-color: var(--ely-gold-hi); background: var(--ely-gold); }
.pagination li.active span { color: #142232; border-color: #f8dfa7; background: linear-gradient(#f5dda3, #bd8d3c); }

/* Online- und Statistikblöcke */
.stat-block {
  margin-top: 16px;
  padding: 15px 18px;
  border: 1px solid rgba(76, 142, 183, .44);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(12, 37, 56, .92), rgba(4, 18, 30, .94));
  box-shadow: 0 7px 19px rgba(0, 0, 0, .32);
}
.stat-block p { color: #bfd3df; }

/* Footer */
.page-footer {
  margin: 25px -20px -30px;
  padding: 24px 20px 28px;
  border-top: 1px solid rgba(215, 180, 106, .48);
  background: linear-gradient(180deg, rgba(6, 23, 37, .96), rgba(2, 8, 14, .99));
}
.copyright { color: #738fa2; }
.copyright a { color: #abc7d8; }
.footer-row, .footer-row a { color: #91adbf; }

/* Scrollbar */
* { scrollbar-color: #2f7aa5 #06131f; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #06131f; }
::-webkit-scrollbar-thumb { border: 2px solid #06131f; border-radius: 9px; background: linear-gradient(#4bb8e9, #8a682f); }

/* Mobil */
@media (max-width: 900px) {
  body { background-size: auto 1000px; }
  #wrap { margin-top: 0; padding-inline: 10px; border-radius: 0; }
  .headerbar { min-height: 310px; margin-top: 8px; }
  .page-footer { margin-inline: -10px; }
}

@media (max-width: 700px) {
  .headerbar { min-height: 235px; background-size: auto 100%; }
  .navbar { padding-inline: 10px; }
  .forabg li.header dt, .forumbg li.header dt { font-size: 1.1em; }
  dl.row-item { background-position: 7px 50%; background-size: 42px 42px; }
  a.forumtitle, a.topictitle { font-size: 1.08em; }
  .post { border-radius: 7px; }
  .postprofile { background: rgba(19, 56, 81, .18); }
}

@media (max-width: 430px) {
  #wrap { padding-inline: 5px; }
  .headerbar { min-height: 190px; border-radius: 8px; }
  .navbar { border-radius: 7px; }
  .forabg, .forumbg { border-radius: 8px; }
  .page-footer { margin-inline: -5px; }
  .button, .button1, .button2 { padding-inline: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}