/* Ciern OTS — bundle CSS (Plexido Games). Zbudowany 2026-09-06 09:42:00 z: basic.css ciern-modern.css — edytuj zrodla w _src-css/ i uruchom build-ciern-css.sh */

/* ===================== basic.css ===================== */
body {
  margin: 0px;
  padding:  0px;
  background-color: #3a3125;
}

img {
	border: none;
}

#ArtworkHelper {
  text-align: center;
  background-position: top center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-width: 1000px;
}

/* helper div */
.HelperDivIndicator {
  position: relative;
  cursor: help;
}
.OptionContainer {
    text-align: center;
}

#HelperDivContainer {
  display: none;
  position: absolute;
  width: 225px;
  z-index: 1000;
  color: #594b39;
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 9pt;
  text-align: left;
  padding: 10px;
  border: 1px double #594b39;
  margin-left: 8px;
}

#HelperDivContainer .HelperDivArrow {
  position: absolute;
  top: -1px;
  left: -8px;
  width: 8px;
  height: 13px;
}

#HelperDivContainer #HelperDivHeadline {
  font-size: 12pt;
  font-weight: bold;
}

#HelperDivContainer #HelperDivHeadline {
  position: relative;
  white-space: normal;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
}

#HelperDivContainer .Ornament {
  width: 220px;
}

#HelperDivContainer #HelperDivText {
  text-align: center;
}

#HelperDivContainer #HelperDivText ul {
  padding-left: 20px;
}

/* container to implement min/max width */
#Bodycontainer {
  position: relative;
  text-align: left;
  min-width: 1000px;
  max-width: 1280px;
  width: 100%;
  height: 100%;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  display: table;
  width: expression(document.body.clientWidth > 1200? '1200px': '100%');
}

#CiernHeroBrand {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  min-width: 430px;
  pointer-events: auto;
}

#CiernHeroBrand a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 116px;
  padding: 6px 34px 8px;
  color: #efe4c4;
  text-decoration: none;
  background: radial-gradient(circle at center, rgba(58, 50, 39, .84) 0%, rgba(51, 44, 34, .62) 58%, rgba(51, 44, 34, 0) 100%);
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .9));
}

#CiernHeroBrand img {
  width: 112px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(25, 196, 210, .25)) drop-shadow(0 0 9px rgba(224, 112, 26, .22));
}

#CiernHeroBrand .CiernHeroCopy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 2px 2px #000, 0 0 10px rgba(0, 0, 0, .95);
}

#CiernHeroBrand strong {
  color: #efe4c4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  line-height: 42px;
  letter-spacing: 7px;
  white-space: nowrap;
}

#CiernHeroBrand small {
  margin-top: 4px;
  color: #79d9df;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  white-space: nowrap;
}
#LoginCreateAccountBox p {
    margin: 0;
    padding: 0;
    font-size: 12pt;
}
#LoginFormButtonCell {
    width: 145px;
    vertical-align: top;
    padding-right: 0;
}

#ContentRow {
  position: relative;
  top: 155px;
}

/* "star-HTML-hack" to correct the position of the content row */
* html #ContentRow {
  display: inline-block;
}

#MenuColumn {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 180px;
  margin-right: 15px;
  margin-left: 15px;
  padding: 0px;
  font-family:  Arial, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  line-height: 12pt;
}

#ContentColumn {
  position: relative;
  margin: 0px;
  margin-left: 205px;
  margin-right: 205px;
}

#ThemeboxesColumn {
  text-align:  center;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 180px;
  margin: 0px;
  margin-right: 15px;
  margin-left: 25px;
}

#Footer {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 7pt;
  font-weight: normal;
  text-align: center;
  position: relative;
  width: 100%;
  padding-bottom: 20px;
  color: white;
}
* html #Footer {
  padding-bottom: 120px;
  margin-bottom: 50px;
}

/* Footer linkes */
#Footer a:link {
  color: white;
  text-decoration: none;
}
#Footer a:visited {
  color: white;
  text-decoration: none;
}
#Footer a:focus {
  color: white;
  text-decoration: none;
}
#Footer a:active {
  color: white;
  text-decoration: underline;
}
#Footer a:hover {
  color: white;
  text-decoration: underline;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  HEADER AREA
 *  -------------------------------
 */

#LeftArtwork {
  position: absolute;
  height: 140px;
  width: 166px;
  top: -140px;
  left: 4px;
  background-repeat: no-repeat;
  z-index:5;
}

#LeftArtwork #TibiaLogoArtworkTop {
  position: absolute;
  top: -17px;
  left: -14px;
  height: 158px;
  width: 196px;
  z-index: 5;
  cursor: pointer;
  border: 0px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .8));
}

#LeftArtwork #TibiaLogoArtworkBottom {
  position: absolute;
  top: 102px;
  left: 0px;
  height: 43px;
  width: 166px;
  z-index: 5;
}

#LeftArtwork #Statue_1{
  position: absolute;
  top: 0px;
  left: 5px;
  height: 30px;
  width: 32px;
  z-index:10;
}

#LeftArtwork #Statue_2 {
  position: absolute;
  top: 0px;
  right: 25px;
  height: 30px;
  width: 32px;
  z-index:10;
}

.SmallMenuBox#DownloadBox {
    top: 4px;
}
.SmallMenuBox {
    position: relative;
    left: 5px;
    top: 8px;
    width: 100%;
    margin-bottom: 38px;
    background-repeat: no-repeat;
}
.SmallMenuBox#DownloadBox {
    top: 4px;
}
.SmallMenuBox .SmallBoxTop {
    position: absolute;
    left: -5px;
    top: -12px;
    height: 12px;
    width: 180px;
    background-repeat: no-repeat;
}
.SmallMenuBox#DownloadBox .SmallBoxBorder {
    height: 39px;
}
.SmallMenuBox .SmallBoxBorder {
    position: absolute;
    top: 0;
    height: 52px;
    width: 8px;
    background-repeat: repeat-y;
    z-index: 10;
}
.SmallMenuBox .SmallBoxButtonContainer {
    position: relative;
	height: 39px;
    width: 160px;
    left: 5px;
    background-repeat: repeat-y;
    z-index: 1;
}
#PlayNowContainer {
    position: absolute;
    width: 150px;
    height: 37px;
    top: 1px;
    left: 5px;
    z-index: 99;
}
.SmallMenuBox .BorderRight {
    right: 9px;
}
.SmallMenuBox#DownloadBox .SmallBoxBottom {
    top: 39px;
}
.SmallMenuBox .SmallBoxBottom {
    position: absolute;
    top: 52px;
    left: -5px;
    height: 12px;
    width: 180px;
    background-repeat: no-repeat;
}

.CaptionContainer .RightArea {
	float: right;
	font-weight: 400;
	margin-right: 5px;
}

.DoNotBreak {
	white-space: nowrap;
}

#LeftArtwork #LogoLink {
  position: absolute;
  bottom: 14px;
  left: 58px;
  height: 14px;
  width: 50px;
  z-index: 99;
  cursor: pointer;
  display: none;
}

#RightArtwork {
  text-align: left;
  position: absolute;
  top: 38px;
  right: 24px;
  width: 132px;
  background-repeat: no-repeat;
  z-index: 90;
}

#RightArtwork #Creature {
  position: absolute;
  height: 64px;
  width: 64px;
  top: -136px;
  left: -15px;
  z-index: 15;
  cursor: pointer;
}

#RightArtwork #Boss {
  position: absolute;
  height: 64px;
  width: 64px;
  top: -136px;
  left: 40px;
  z-index: 15;
  cursor: pointer;
}

#PedestalAndOnline {
  position: absolute;
  left: -15px;
  top: -121px;
  width: 161px;
  height: 85px;
}
#Pedestal {
    position: absolute;
    left: -15px;
    top: -121px;
    width: 161px;
    height: 85px;
}

#RightArtwork #PlayersOnline {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 7pt;
  line-height: 8pt;
  text-align: center;
  position: absolute;
  width: 92px;
  bottom: 11px;
  left: 21px;
  color: #836e54;
  border-bottom: 1px solid #201d1a;
  cursor: pointer;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  LOGINBOX
 *  -------------------------------
 */

#Loginbox {
  position: relative;
  left: 5px;
  top: 8px;
  width: 100%;
  margin-bottom: 38px;
  background-repeat: no-repeat;
}

#Loginbox #LoginTop {
  position: absolute;
  left: -5px;
  top: -12px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#Loginbox #LoginBottom {
  position: absolute;
  top: 52px;
  left: -5px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#Loginbox .LoginBorder {
  position: absolute;
  top: 0px;
  height: 52px;
  width: 8px;
  background-repeat: repeat-y;
  z-index: 10;
}

#Loginbox #BorderRight {
  right: 9px;
}

#Loginbox .Loginstatus {
  position: relative;
  top: 0px;
  left: 5px;
  height: 13px;
  width: 160px;
}

#Loginbox .LoginstatusText {
  position: absolute;
  top: 1px;
  left: 18px;
  width: 124px;
  height: 11px;
  cursor: pointer;
}

#Loginbox #LoginstatusText_1 {
  top: 2px;
  cursor: default;
}

#Loginbox #LoginstatusText_2_1 {
  visibility: visible;
}

#Loginbox #LoginstatusText_2_2 {
  visibility: hidden;
}

#LoginBox #LoginButtonContainer {
  margin-left: 5px;
  height: 39px;
  width: 160px;
  background-repeat: repeat-y;
}

#Loginbox #LoginButton {
  position: relative;
  top: 0px;
  left: 5px;
  height: 37px;
  width: 150px;
}

#Loginbox #LoginButton .Button {
  position: relative;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 37px;
  visibility: hidden;
}

#Loginbox #LoginButton #ButtonText {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 37px;
  width: 150px;
  z-index: 15;
  cursor: pointer;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  MENU
 *  -------------------------------
 */

#Menu {
  position: relative;
  left: 5px;
  background-repeat: no-repeat;
}

#MenuTop {
  position: absolute;
  left: -5px;
  top: -12px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

#MenuBottom {
  position: relative;
  left: -5px;
  bottom: 0px;
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
}

/* Menuitems */

.MenuButton {
  position: relative;
  height: 32px;
  width: 170px;
  display: block;
  cursor: pointer;
}

.Button {
  position: relative;
  height: 32px;
  /*width: 150px;*/
  visibility: hidden;
  display: block;
}

.Extend {
  position: absolute;
  top: 20px;
  right: -2px;
  height: 12px;
  width: 12px;
  background-repeat: no-repeat;
}

.Lights {
  visibility: hidden;
}

.Light_lu {
  position: absolute;
  top: 2px;
  left: 3px;
  height: 2px;
  width: 2px;
  background-repeat: no-repeat;
}

.Light_ru {
  position: absolute;
  top: 2px;
  right: 3px;
  height: 2px;
  width: 2px;
  background-repeat: no-repeat;
}

.Light_ld {
  position: absolute;
  height: 2px;
  width: 2px;
  top: 28px;
  left: 3px;
}

.Icon {
  position: absolute;
  height: 32px;
  width: 32px;
  top: 0px;
  left: 8px;
}

.Label {
  position: absolute;
  height: 22px;
  width: 116px;
  top: 6px;
  left: 42px;
}

.CiernWikiLabel {
  color: #ffffff;
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
  text-shadow: 1px 1px 1px #1f1c19;
  white-space: nowrap;
}

/* Submenus(items) */

.LeftChain {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 33px;
  width: 7px;
  background-repeat: repeat-y;
}

.RightChain {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 33px;
  width: 7px;
  background-repeat: repeat-y;
}

.Submenu {
  position: relative;
  margin-left: 0px;
  margin-right: 5px;
  background-color: #463b2d;
  width: 170px;
}

.Submenuitem {
  position: relative;
  margin: 0px;
  padding: 0px;
}

.ActiveSubmenuItemIcon {
  position: absolute;
  top: 5px;
  left: 8px;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  visibility: hidden;
}

.SubmenuitemLabel {
  margin: 0px;
  border-top: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 22px;
  border-bottom: 1px solid #836e54;
  overflow: hidden;
}

/* Submenu links */
.Submenu a:link {
  color: #d7d7d7;
  text-decoration: none;
}
.Submenu a:visited {
  color: #d7d7d7;
  text-decoration: none;
}
.Submenu a:focus {
  color: #d7d7d7;
  text-decoration: none;
}
.Submenu a:active {
  color: white;
  text-decoration: none;
}
.Submenu a:hover {
  color: white;
  text-decoration: none;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  CONTENT AREA
 *  -------------------------------
 */

.Content .BoxContent {
  padding: 10px;
}

/* "tanhack" for correction of IE bug */
* html .Content {
  top: -5px;
}

.Content {
  position: relative;
  top: 0px;
  width: 100%;
}

/* "star-HTML-hack" to correct the position of the content area */
* html .Content {
  position: relative;
  top: 796px;
  margin: 20px;
  border: 0px dashed #3a3125;
  border-right-width: 550px;
}

#ContentHelper {
  position: relative;
}

.InfoBar {
  position: relative;
  height: 28px;
  top: 6px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 10px;
  color: #fff;
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
}
.InfoBar a {
  border: 0;
}
.InfoBarBlock {
  margin-right: 15px;
  border: 0;
}
.InfoBarBigLogo {
  margin-bottom: 0;
  border: 0;
}
.InfoBarSmallElement {
  margin-left: 5px;
  border: 0;
}
.InfoBarNumbers {
  top: -4px;
  position: relative;
}
.InfoBar a {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 7pt;
  font-weight: 400;
  color: #fff;
}
.InfoBar a:link {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}
.InfoBar a:visited {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}
.InfoBar a:focus {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}
.InfoBar a:active {
  color: #fff;
  font-weight: 400;
  text-decoration: underline;
}
.InfoBar a:hover {
	color:#fff !important;
	font-weight:400 !important;
	text-decoration: underline!important;
}
.InfoBarLinks {
	text-decoration: none;
	font-size: 10px;
}
.InfoBarLinks a:hover {
	text-decoration: none;
	font-size: 10px;
}

/* "star-HTML-hack" to to implement min-width in IE */
* html #ContentHelper {
  display: inline-block;
  position: relative;
  top: -800px;
  margin: -20px;
  margin-right: -570px;
}

.Content .Box {
  font-size: 0pt;
  position: relative;
  margin: 5px;
  margin-bottom: 18px;
  color: #594b39;
  border-left: 2px solid #5d564c;
  border-right: 2px solid #5d564c;
  background-color: #debb9d;
  background-repeat: no-repeat;
  overflow: visible;
}

.Content .BoxContent {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 9pt;
  background-color: #fff2db;
  color: #594b39;
  min-height: 367px;
  height: auto !important;
  height: 387px;
}

/* "star-HTML-hack" to correct Box width in IE */
* html .Content .Box {
  width: 100%;
}
/* "star-HTML-hack" to correct BoxContent width in IE */
* html .Content .BoxContent {
  width: 100%;
}

.Content th {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: white;
  background-color: #766d60;
}

.Content .BoxContent td {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 10pt;
  color: #594b39;
 }

/* Content Links */

.Content a {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-weight: bold;
  color: #7d6950;
  text-decoration: none;
}
.Content a:hover {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-weight: bold;
  text-decoration: underline;
  color: #836e54;
}
.Content .HelpLink {
  font-size: 7pt;
  cursor: pointer;
}

/* Corners */

.Content .Corner-tl {
  position: absolute;
  top: -4px;
  left: -5px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .Corner-tr {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .BottomCornersHelper {
  position: absolute;
  width: 100%;
}

.Content .CornerWrapper-b {
  position: absolute;
  width:100%;
}

.Content .Corner-bl {
  position: absolute;
  bottom: -4px;
  left: -6px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.Content .Corner-br {
  position: absolute;
  bottom: -4px;
  right: -6px;
  width: 17px;
  height: 17px;
  z-index: 50;
}

.SecretAchievementIcon {
	position: absolute;
	width: 44px;
	height: 20px;
	margin-left: 12px;
	margin-top: -2px;
	right: 5px;
}

/* Borders */

.Content .Border_1 {
  position: relative;
  height: 6px;
  width: 100%;
  background-repeat: repeat-x;
}

.Content .BorderTitleText {
  position: relative;
  height: 24px;
  background-repeat: repeat-x;
}

.Content .Title {
  position: absolute;
  top: 6px;
  left: 5px;
}

.Content .Border_2 {
  margin: 4px;
  padding: 0px;
  background-color: #6e5d46;
}

.Content .Border_3 {
  margin: 1px;
  border-top: 1px solid #6e5d46;
  border-bottom: 1px solid #6e5d46;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  THEMEBOXES of the Tibia
 *  website
 *  -------------------------------
 */

.Themebox {
  position: relative;
  margin-bottom: 10px;
  top: -4px;
  width: 180px;
  height: 154px;
}
#Themeboxes div {
  font-size: 10pt;
  background-repeat: no-repeat;
}
#Themeboxes .ThemeboxButton {
  position: absolute;
  bottom: 20px;
  left: 22px;
  height: 25px;
  width: 135px;
  cursor: pointer;
}
#Themeboxes .Bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 12px;
  width: 180px;
}
/* "star-HTML-hack" to correct the position of the bottom element */
* html #Themeboxes .Bottom {
  bottom: -3px;
}
#Themeboxes #NewcomerBox .ThemeboxButton {
  bottom: 15px;
}

#PremiumBox {
    position: relative;
    height: 204px;
}
#PremiumBoxDecor {
    margin: 0;
    position: absolute;
    top: -28px;
    left: 5px;
    width: 64px;
    height: 64px;
}
#PremiumBoxBg {
    margin: 0;
    position: absolute;
    top: 34px;
    left: 10px;
    width: 160px;
    height: 126px;
}
#PremiumBoxOverlay {
    margin: 0;
    position: absolute;
    top: 34px;
    left: 10px;
    width: 163px;
    height: 26px;
}
#PremiumBoxOverlayText {
    color: #fff;
    font-family: Verdana, sans-serif;
    margin-top: 3px;
    text-align: center;
    font-size: 11px;
}
#PremiumBoxButtonDecor {
    position: absolute;
    width: 114px;
    height: 26px;
    left: 33px;
    bottom: 34px;
    z-index: 25;
}
#PremiumBoxButton {
    position: absolute;
    bottom: 9px;
    left: 18px;
    text-align: center;
}

#Themeboxes #JobBox {
  height: 164px;
}
#Themeboxes #GalleryBox #GalleryContent {
  position: relative;
  height: 111px;
  width: 170px;
  top: 31px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  border: 0;
  cursor: pointer;
}
#Themeboxes #CurrentPollBox #CurrentPollText {
  font-family: Verdana, Arial, sans-serif;
  font-weight: bold;
  line-height: 11pt;
  color: #594b39;
  position: absolute;
  height: 70px;
  width: 150px;
  top: 37px;
  left: 15px;
  padding-top: 5px;
  overflow: hidden;
}
#Themeboxes #SkyscraperBanner {
  border: 0;
}

#Themeboxes #NetworksBox {
  position: relative;
  height: 204px;
}
#Themeboxes #NetworksBox #FacebookBlock {
  position: relative;
  top: 32px;
  height: 113px;
}
#Themeboxes #NetworksBox #FacebookLikeBox {
  position: relative;
  left: 27px;
  top: 3px;
  height: 60px;
  width: 115px;
  overflow: hidden;
}
#Themeboxes #NetworksBox #FacebookLikeBox div {
  position: relative;
  left: -1px;
  top: -1px;
}
#Themeboxes #NetworksBox #FacebookSendBox {
  position: absolute;
  left: 92px;
  top: 14px;
  width: 50px;
}
#Themeboxes #NetworksBox #FacebookLikes {
  position: relative;
  left: 14px;
  top: 10px;
  width: 155px;
  left: 13px;
  overflow: hidden;
}
#Themeboxes #NetworksBox #FacebookLikes div {
  position: relative;
  left: -69px;
}
#Themeboxes #NetworksBox #TwitterBlock {
  position: relative;
  top: 42px;
  text-align: center;
}

/** -------------------------------
 *  OLD Stylesheet declarations for
 *  the CONTENT AREA
 *  -------------------------------
 */

.Content .BoxContent td .white {
  color: #efefef;
  visibility: visible;
}

.Content .BoxContent td .whites {
  color: #efefef;
  visibility: visible;
  font-size: 9pt;
}

.Content .BoxContent .white {
  color: #efefef;
  visibility: visible;
}

.Content .BoxContent td .green {
  color: #836e54;
}

.Content .BoxContent td .yellow {
  color: #ffbb05;
}

.Content .BoxContent td .red {
  color: #ef0000;
}

.Content .BoxContent td .grey {
  color: #808080;
}

.Content .BoxContent td .orange {
  color: #ff9712;
}

/** -------------------------------
 *  OLD Stylesheet declarations for
 *  the CONTENT AREA (forum)
 *  -------------------------------
 */

.Content .BoxContent .ff_info {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 10pt;
  color: #594b39;
  visibility : visible;
}

.Content .ff_white a {
  color: #ffffff;
}

.Content .BoxContent .ff_white {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  color: #efefef;
  visibility : visible;
  font-size : 7pt;
  font-weight: bold;
}

.Content .BoxContent .ff_red {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  color: #ef0000;
  visibility : visible;
  font-size : 8pt;
  font-weight: bold;
}

.Content .BoxContent .ff_whitelarge {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  color: #efefef;
  visibility : visible;
  font-size : 9pt;
  font-weight: bold;
}

.Content .BoxContent .ff_info {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 8pt;
  color: #594b39;
  visibility : visible;
}

.Content .BoxContent .ff_infotext {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 8pt;
  color: #594b39;
  visibility : visible;
  line-height: 12pt;
}

.Content .BoxContent .ff_smallinfo {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 7pt;
  color: #594b39;
  visibility : visible;
}

.Content .BoxContent .ff_large {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 12pt;
  color: #594b39;
  visibility : visible;
}

.Content .BoxContent .ff_pagetext {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 9pt;
  color: #594b39;
  visibility : visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_pagetextgrey {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 9pt;
  color : #766d60;
  visibility : visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_pagetextred {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 9pt;
  color: #f00;
  visibility : visible;
  line-height: 13pt;
}

.Content .BoxContent .ff_correct {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size : 11pt;
  color: #ff0000;
  visibility : visible;
  font-weight: bold;
}

.FormFieldError {
  font-size: 8pt;
  color: red;
}
.SmallBox {
  position: relative;
  font-size: 1px;
}
.SmallBox .ErrorMessage {
  font-size: 8pt;
  position: relative;
  color: red;
  height: 100%;
  background-color: #d4c0a1;
  padding: 5px;
  padding-left: 43px;
}
.SmallBox .Message {
  font-size: 10pt;
  position: relative;
  height: 100%;
  background-color: #d4c0a1;
  padding: 10px;
}
.SmallBox .ErrorMessage ul {
  padding-left: 15px;
}
.SmallBox .BoxFrameHorizontal {
  position: relative;
  height: 4px;
}
.SmallBox .BoxFrameVerticalRight {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}
.SmallBox .BoxFrameVerticalLeft {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 3px;
  background-repeat: repeat-y;
  height: 100%;
}
.SmallBox .MessageContainer {
  position: relative;
  height: 100%;
}
.SmallBox .BoxFrameEdgeLeftTop {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeLeftBottom {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeRightTop {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .BoxFrameEdgeRightBottom {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 5px;
  height: 5px;
}
.SmallBox .AttentionSign {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 30px;
  height: 26px;
}

/** ----------------
 *  new process bars
 *  ----------------
 */

#ProgressBar #Headline {
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: 5px;
}
#ProgressBar #MainContainer {
  position: relative;
  top: 10px;
  height: 50px;
  margin-bottom: 25px;
}
#ProgressBar #BackgroundContainer {
  position: relative;
  width: 100%;
}

#ProgressBar #BackgroundContainerLeftEnd {
  position: absolute;
  float: left;
}
#ProgressBar #BackgroundContainerCenter {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 17px;
  width: 100%;
}
#ProgressBar #BackgroundContainerCenterImage {
  position: relative;
  margin-left: 25px;
  margin-right: 25px;
  height: 17px;
}
#ProgressBar #BackgroundContainerRightEnd {
  position: absolute;
  right: 0px;
  top: 0px;
  float: right;
}
#ProgressBar #TubeLeftEnd {
  position: absolute;
  left: 25px;
  top: 4px;
}
#ProgressBar #TubeRightEnd {
  position: absolute;
  right: 25px;
  top: 4px;
  z-index: 0;
}
#ProgressBar .Steps {
  position: relative;
  height: 39px;
  font-size: 9px;
  float: left;
  top: -11px;
  margin-left: -1px;
}
#ProgressBar #StepsContainer1 {
  text-align: right;
  margin-left: 92px;
  margin-right: 40px;
  height: 10px;
}
#ProgressBar #StepsContainer2 {
  width: 100%;
  height: 10px;
}
#ProgressBar .TubeContainer {
  position: relative;
  padding-right: 47px;
}
#ProgressBar .Tube {
  position: relative;
  top: 16px;
  left: 0px;
  width: 100%;
  height: 7px;
  background: #ffffff none repeat scroll 0%;
}
* html #ProgressBar .Tube {
  top: 13px;
}
#ProgressBar .SingleStepContainer {
  position: absolute;
  top: 0px;
  width: 47px;
  height: 30px;
  right: 0px;
  text-align: center;
}
#ProgressBar #FirstStep .SingleStepContainer {
  left: 45px;
  width: 47px;
  position: absolute;
}
#ProgressBar .StepIcon {
  position: absolute;
  right: 0px;
}
* html #ProgressBar .StepIcon {
  right: -1px;
}
#ProgressBar #FirstStep .StepIcon {
  top: 0px;
  left: 0px;
}
#ProgressBar .StepText {
  top: 40px;
  position: absolute;
  width: 200px;
  right: -77px;
}

/** -------------------------------
 *  Stylesheet declarations for the
 *  NEW TABLES
 *  -------------------------------
 */

.TableContainer {
  border: 1px solid black;
  position: relative;
  width: 100%;
  font-size: 1px;
}
.TableContainer .Odd {
  background-color: #f1e0c6;
}
.TableContainer .Even {
  background-color: #d5c0a1;
}
.Text {
	margin-top: 3px;
	margin-left: 4px;
	margin-bottom: 2px;
	padding: 3px;
	padding-top: 3px;
}

/* TABLEHEADER DECORATION */
.TableContainer .CaptionContainer {
  position: relative;
  font-size: 1pt;
  background-color: #7f6e57 !important;
  height: auto;
  width: 100%;
  text-align: left;
}
.TableContainer .CaptionContainer .CaptionInnerContainer {
	position: relative;
  background-color: #7f6e57;
  width: 100%;
  height: auto;
  padding-top: 3px;
  padding-bottom: 4px;
}
.TableContainer .CaptionContainer .Text {
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: left;
  color: white;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftTop {
	position: absolute;
  width: 5px;
  height: 5px;
	top: -2px;
  left: -2px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeRightTop {
	position: absolute;
  width: 5px;
  height: 5px;
	top: -2px;
  right: -2px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
	position: absolute;
  width: 5px;
  height: 5px;
	left: -2px;
	bottom: -3px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionEdgeRightBottom {
	position: absolute;
  width: 5px;
  height: 5px;
	right: -2px;
	bottom: -3px;
  z-index: 50;
}
.TableContainer .CaptionContainer .CaptionBorderTop {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  top: -1px;
}
.TableContainer .CaptionContainer .CaptionBorderBottom {
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0px;
  bottom: -2px;
}
.TableContainer .CaptionContainer .CaptionVerticalLeft {
  position: absolute;
  height: 100%;
  width: 3px;
  left: -1px;
  top: 0px;
}
.TableContainer .CaptionContainer .CaptionVerticalRight {
  position: absolute;
  height: 100%;
  width: 3px;
  right: -1px;
  top: 0px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightTop {
  right: -3px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeLeftBottom {
  bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionEdgeRightBottom {
  right: -3px;
  bottom: -4px;
}
* html .TableContainer .CaptionContainer .CaptionBorderBottom {
  bottom: -3;
}
* html .TableContainer .CaptionContainer .CaptionVerticalRight {
  right: -2px;
}
/* TABLE CONTENT */
.TableContentContainer {
  border: 1px solid #7f6e57;
  position: relative;
  margin-right: 4px;
  height: 100%;
  background-color: #d4c0a1;
  padding: 0px;
}
.TableContent {
  width: 100%;
  border-collapse: collapse;
}
.TableContent td {
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}
/* INNERLYOUT 1 */
.TableContainer .Table1 {
  width: 100%;
  background-color: #d4c0a1;
  border: 2px solid #786d5e;
}
.TableContainer .Table1 .InnerTableContainer {
  padding: 5px;
}
/* INNERLYOUT 2 */
.TableContainer .Table2 {
  width: 100%;
  border: 2px solid #786d5e;
  background-color: #f1e0c5;
  padding: 0px;
  margin: 0px;
  border-collapse: collapse;
}
.TableContainer .Table2 td {
  padding: 0px;
  margin: 0px;
}
.TableContainer .Table2 .InnerTableContainer {
  margin-top: 1px;
}
.TableContainer .Table2 .InnerTableContainer table {
  border-collapse: collapse;
}
.TableContainer .Table2 .InnerTableContainer td {
  padding-top: 2px;
  padding-left: 5px;
  padding-bottom: 2px;
  padding-right: 5px;
  border: 1px solid #faf0d7;
}
/* INNERLYOUT 3 */
.TableContainer .Table3 {
  width: 100%;
  border: 2px solid #786d5e;
  background-color: #f1e0c5;
}
.TableContainer .Table3 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table3 .TableContentAndRightShadow td {
  border: 1px solid #faf0d7;
}
/* INNERLYOUT 4 */
.TableContainer .Table4 {
  width: 100%;
  border: 2px solid #786d5e;
  background-color: #f1e0c5;
}
.TableContainer .Table4 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 3px;
}
.TableContainer .Table4 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* INNERLYOUT 5 */
.TableContainer .Table5 {
  width: 100%;
  border: 2px solid #786d5e;
  background-color: #f1e0c5;
}
.TableContainer .Table5 .InnerTableContainer {
  width: 100%;
  position: relative;
  margin-top: 5px;
  margin-left: 3px;
}
.TableContainer .Table5 .TableContentAndRightShadow .TableContent td {
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* SHADOWS */
.TableShadowContainerRightTop {
  position: relative;
  top: 0px;
  right: 3px;
  margin-right: 0px;
  font-size: 1px;
  float: right;
  z-index: 99;
}
.TableShadowRightTop {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 4px;
  height: 5px;
  z-index: 99;
}
.TableContentAndRightShadow {
  position: relative;
  background-repeat: repeat-y;
  background-position: top right;
  margin-right: 3px;
  font-size: 1px;
  /*box-shadow: 3px 3px 2px #836e54;*/
}
.TableShadowContainer {
  position: relative;
  margin-right: 5px;
}
.TableBottomShadow {
  position: relative;
  font-size: 1px;
  height: 5px;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.TableBottomLeftShadow {
  position: relative;
  height: 5px;
  width: 4px;
  float: left;
  padding: 0px;
  margin: 0px;
}
.TableBottomRightShadow {
  position: relative;
  float: right;
  right: -2px;
  top: 0px;
  height: 5px;
  width: 4px;
}
/* HEADLESS CONTENT TABLE */
.HeadlessTable {
  border: 0px;
  border-style: solid;
  border-color: #766d60;
  border-top-width: 1px;
  border-top-color: white;
  border-left-width: 1px;
  border-left-color: white;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-right-color: #766d60;
  margin-left: 15px;
}
/* LABELS */
.InnerTableContainer .TableContentContainer {
    box-shadow: 3px 3px 2px #836e54;
}
.TableContentContainer {
    border: 1px solid #7f6e57;
    position: relative;
    margin-right: 7px;
    margin-bottom: 5px;
    height: 100%;
    background-color: #d4c0a1;
    padding: 0;
}
.TableContainer .Table3 .TableContent td {
    border: 1px solid #faf0d7;
}

.TableContainer .GreedyCell {
    width: 80%;
}
.LabelV80{
	font-weight:700;
	padding-right:10px;
	white-space:nowrap;
	vertical-align:top;
	width:80px;
}
.LabelV100{
	font-weight:700;
	padding-right:10px;
	white-space:nowrap;
	vertical-align:top;
	width:100px;
}
.LabelV120{
	font-weight:700;
	padding-right:10px;
	white-space:nowrap;
	vertical-align:top;
	width:120px;
}
.LabelV150{
	font-weight:700;
	padding-right:10px;
	white-space:nowrap;
	vertical-align:top;
	width:150px;
}
.LabelV175{
	font-weight:700;
	padding-right:10px;
	white-space:nowrap;
	vertical-align:top;
	width:175px;
}
.LabelV200{
	font-weight:700;
	padding-right:10px;
	white-space:nowrap;
	vertical-align:top;
	width:200px;
}
.LabelV250{
	font-weight:700;
	padding-right:10px;
	white-space:nowrap;
	vertical-align:top;
	width:250px;
}

.LabelV {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: top;
}
.LabelH {
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  background-color: #d5c0a1;
}
.LabelH td {
  background-color: #d5c0a1;
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
}

/* BUTTONS */
.InnerTableButtonRow {
  width: 100%;
  padding-left: 1px;
  padding-right: 0px;
  padding-bottom: 4px;
  border: 0px;
}
.InnerTableButtonRow td {
  padding-right: 4px;
}
.BigButton {
  position: relative;
  width: 135px;
  height: 25px;
  z-index: 10;
}
.BigButtonOver {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 137px;
  height: 25px;
  visibility: hidden;
  z-index: 15;
}
.ButtonText {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 25px;
  width: 135px;
  z-index: 20;
}
.BigButtonText {
    position: absolute;
    top: 0;
    left: 0;
    width: 135px;
    height: 25px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: none;
    text-align: center;
    color: #ffd18c;
  font-family:
    Verdana,
    Arial,
    Times New Roman,
    sans-serif;
    font-size: 12px;
    font-weight: 400;
    z-index: 20;
  text-shadow:
    -1px -1px 0 #000,
    0 -1px 0 #000,
    1px -1px 0 #000,
    1px 0 0 #000,
    1px 1px 0 #000,
    0 1px 0 #000,
    -1px 1px 0 #000,
    -1px 0 0 #000;
}
.BigButtonText:hover{
	top:1px;
	left:1px;
}
.TopButtonContainer {
  position: relative;
  right: 4px;
  top: 4px;
  z-index: 60;
}
* html .TopButtonContainer {
  right: 27px;
}
.TopButtonContainer .TopButton {
  position: absolute;
  right: 0;
  z-index: 55;
  cursor: pointer;
}

.Content .BoxContent .Odd {
  background-color: #d4c0a1;
  padding: 2px;
}

.Content .BoxContent .Even {
  background-color: #f1e0c6;
  padding: 2px;
}

.Content .NewsCategoryIconSmall {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

/* News Ticker */

.Content #NewsTicker .BoxContent {
  padding: 5px;
  min-height: 90px;
  height: auto !important;
  height: 100px;
}

.Content #NewsTicker .BoxContent .Row {
  position: relative;
  width: 100%;
}

.Content #NewsTicker .NewsTickerIcon {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
}

.Content #NewsTicker .NewsTickerText {
  font-size: 9pt;
  position: relative;
  margin-left: 20px;
}

.Content #NewsTicker .NewsTickerDate {
  font-size: 7pt;
  position: absolute;
  top: 0px;
  float: left;
}

.Content #NewsTicker .NewsTickerShortText {
  margin-left: 85px;
  height: 14px;
}

.Content #NewsTicker .NewsTickerFullText {
  margin-left: 85px;
  margin-right: 20px;
  display: none;
}

.Content #NewsTicker .NewsTickerExtend {
  position: relative;
  right: 0px;
  top: 1px;
  right: 1px;
  height: 12px;
  width: 12px;
  background-repeat: no-repeat;
  float: right;
  cursor: pointer;
  z-index: 10;
}

/* Featured Article */

.Content #FeaturedArticle .BoxContent {
  position:relative;
  height: 100px;
  padding: 5px;
  padding-left: 10px;
  min-height: 100px;
  height: auto !important;
  height: 110px;
  line-height: 10.5pt;
}
.Content #FeaturedArticle .NewsHeadline {
  margin-top: 5px;
}

.Content #FeaturedArticle #TeaserThumbnail {
  position: relative;
  top: 0px;
  right: 0px;
  height: 100px;
  width: 150px;
  margin-left: 10px;
  background-color: black;
  z-index: 90;
  float: right;
}

#ContentHelper #FeaturedArticle:first-child .BoxContent {
  padding: 10px;
}

.Content #FeaturedArticle #TeaserText {
  height: 100px;
  overflow: hidden;
  z-index: 0;
}

.Content #FeaturedArticle #Link {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 89 165 0 0;
  z-index: 99;
}

.Content #FeaturedArticle .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #1f1c19;
  border-right: 1px solid #1f1c19;
}

.Content #FeaturedArticle .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  float:left;
}

.Content #FeaturedArticle .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #FeaturedArticle .NewsHeadlineText {
  position: relative;
  top: 8px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News */

.Content #News .BoxContent {
  min-height: 100px;
  height: auto !important;
  height: 110px;
}

.Content #News .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #1f1c19;
  border-right: 1px solid #1f1c19;
}

.Content #News .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

.Content #News .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 10px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #News .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

/* News Archive */

.Content #NewsArchive .NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #1f1c19;
  border-right: 1px solid #1f1c19;
}

.Content #NewsArchive .NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
}

.Content #NewsArchive .NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}

.Content #NewsArchive .NewsHeadlineText {
  position: relative;
  top: 7px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}

.Content #News .NewsHeadlineAuthor {
  position: absolute;
  top: 7px;
  right: 10px;
  font-size: 10pt;
  color: white;
}

/* BUTTONS */
.MediumButtonText {
  position: absolute;
  top: 0;
  left: 0;
  height: 37px;
  width: 150px;
  z-index: 20;
}
.MediumButtonBackground {
  position: relative;
  top: 0;
  left: 0;
  width: 150px;
  height: 37px;
  z-index: 10;
}
.MediumButtonOver {
  position: relative;
  top: 0;
  left: 0;
  width: 150px;
  height: 37px;
  visibility: hidden;
  z-index: 15;
}
.MediumButtonForm {
  margin: 0;
  padding: 0;
}

/* ========================================================================== */
/* Ciern 2026 — autorski uklad portalu inspirowany czytelnoscia RubinOT       */
/* ========================================================================== */

:root {
  --ciern-ink: #31291f;
  --ciern-coal: #3d3427;
  --ciern-panel: rgba(66, 57, 44, .96);
  --ciern-panel-soft: rgba(75, 65, 52, .94);
  --ciern-gold: #c79a52;
  --ciern-gold-light: #efd39a;
  --ciern-amber: #d98224;
  --ciern-cyan: #5fc7cf;
  --ciern-paper: #d8ccb5;
  --ciern-muted: #a99f8e;
  --ciern-line: rgba(199, 154, 82, .42);
}

html,
body {
  min-width: 0 !important;
  color: var(--ciern-paper);
  background-color: var(--ciern-ink);
}

body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background-position: top center !important;
}

#ArtworkHelper {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(46, 40, 31, .18) 0, rgba(46, 40, 31, .28) 180px, rgba(46, 40, 31, .76) 720px),
    radial-gradient(circle at 50% 145px, rgba(199, 154, 82, .13), transparent 360px);
}

#Bodycontainer {
  display: block;
  box-sizing: border-box;
  width: min(1380px, calc(100% - 32px));
  min-width: 0;
  max-width: 1380px;
  padding: 0 8px 48px;
}

#CiernHeroBrand {
  top: 18px;
  min-width: 0;
  width: min(680px, calc(100% - 32px));
}

#CiernHeroBrand a {
  min-height: 170px;
  padding: 4px 20px 8px;
  background: radial-gradient(ellipse at center, rgba(49, 42, 33, .86), rgba(49, 42, 33, .30) 62%, transparent 73%);
}

#CiernHeroBrand img {
  width: min(520px, 100%);
  height: auto;
  max-height: 174px;
  object-fit: contain;
}

#CiernHeroBrand strong {
  color: var(--ciern-gold-light);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  letter-spacing: 8px;
}

#CiernHeroBrand small {
  color: var(--ciern-cyan);
  font-size: 12px;
  letter-spacing: 3px;
}

#ContentRow {
  top: 205px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 220px;
  align-items: start;
  gap: 18px;
}

#MenuColumn,
#ContentColumn,
#ThemeboxesColumn {
  position: static;
  width: auto;
  min-width: 0;
  margin: 0;
}

#MenuColumn { grid-column: 1; }
#ContentColumn { grid-column: 2; }
#ThemeboxesColumn { grid-column: 3; }

#LeftArtwork,
#RightArtwork {
  display: none;
}

/* Glowna belka statusu */
.Content > .Box:first-child {
  margin-bottom: 14px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
}

.Content > .Box:first-child .BorderTitleText {
  height: 42px !important;
  border: 1px solid rgba(199, 154, 82, .65);
  background: linear-gradient(180deg, #5b4d3b, #42382a) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 -3px 0 rgba(217, 130, 36, .16);
}

.InfoBar {
  box-sizing: border-box;
  height: 42px;
  padding: 7px 12px;
  color: var(--ciern-paper);
  font-size: 12px;
}

.InfoBarBigLogo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.InfoBarLinks,
.InfoBarLinks:link,
.InfoBarLinks:visited {
  color: var(--ciern-gold-light) !important;
  text-decoration: none;
}

.InfoBarLinks:hover { color: var(--ciern-cyan) !important; }

/* Nawigacja po lewej — zachowuje logike MyAAC, ale dostaje jeden jezyk wizualny. */
#MenuColumn > div,
#Menu {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .34));
}

#MenuTop,
#MenuBottom {
  opacity: .8;
}

.MenuButton {
  border-left: 1px solid var(--ciern-line);
  border-right: 1px solid var(--ciern-line);
  background-image: linear-gradient(180deg, #5b4f3f, #40372a) !important;
}

.MenuButton .Button {
  background-image: linear-gradient(90deg, rgba(95, 199, 207, .16), rgba(217, 130, 36, .18)) !important;
}

.Submenu {
  background: rgba(55, 47, 37, .94);
  border-left: 1px solid var(--ciern-line);
  border-right: 1px solid var(--ciern-line);
}

.Submenuitem {
  min-height: 24px;
  color: var(--ciern-paper);
  background: rgba(66, 56, 44, .92) !important;
  transition: color .15s ease, background-color .15s ease, padding-left .15s ease;
}

.Submenuitem:hover {
  color: var(--ciern-gold-light);
  background: rgba(95, 81, 63, .88) !important;
}

.SubmenuitemLabel { color: inherit !important; }

.CiernWikiLabel {
  color: var(--ciern-gold-light) !important;
  letter-spacing: .7px;
}

/* Zawartosc i newsy */
.Content .Box,
#NewsTicker,
#FeaturedArticle,
#News {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .34));
}

.Content .BoxContent,
.Content #NewsTicker .BoxContent,
.Content #FeaturedArticle .BoxContent,
.Content #News .BoxContent {
  color: #564938;
  background-color: #d8cbb3 !important;
  background-blend-mode: soft-light;
}

.Content .BorderTitleText,
.Content .NewsHeadlineBackground,
.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer {
  background-color: #524739 !important;
  background-image: linear-gradient(180deg, #625543, #42382b) !important;
}

.Content .NewsHeadlineText,
.Content .NewsHeadlineDate,
.Content .NewsHeadlineAuthor,
.TableContainer .CaptionContainer .Text {
  color: var(--ciern-gold-light) !important;
}

.Content a,
.Content a:link,
.Content a:visited {
  color: #78654c;
}

.Content a:hover { color: #836e54; }

#Footer {
  margin-top: 18px;
  padding: 18px 10px 28px;
  color: var(--ciern-muted);
  border-top: 1px solid var(--ciern-line);
  background: rgba(49, 42, 33, .72);
}

/* Prawa kolumna w stylu portalu: najwazniejsze akcje sa widoczne od razu. */
.CiernQuickPanel {
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgba(202, 157, 84, .62);
  border-radius: 6px;
  background: linear-gradient(155deg, rgba(82, 70, 55, .98), rgba(55, 47, 37, .98));
  box-shadow: 0 14px 30px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(255, 239, 203, .035);
}

.CiernPanelTitle {
  position: relative;
  padding: 13px 12px 12px;
  color: #f1d7a5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  border-bottom: 1px solid rgba(202, 157, 84, .46);
  background: linear-gradient(180deg, #6b5d4b, #493e2f);
}

.CiernPanelTitle::before,
.CiernPanelTitle::after {
  display: inline-block;
  width: 24px;
  height: 1px;
  margin: 0 9px 4px;
  content: "";
  background: linear-gradient(90deg, transparent, #c99b54);
}

.CiernPanelTitle::after {
  background: linear-gradient(90deg, #c99b54, transparent);
}

.CiernQuickCard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 7px 13px 7px 9px;
  color: var(--ciern-paper) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(202, 157, 84, .20);
  background: linear-gradient(90deg, rgba(101, 192, 198, .035), transparent 64%);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.CiernQuickCard:last-child { border-bottom: 0; }
.CiernQuickCard::after {
  position: absolute;
  top: 16px;
  right: 12px;
  width: 5px;
  height: 5px;
  content: "";
  border-top: 1px solid rgba(222, 180, 106, .65);
  border-right: 1px solid rgba(222, 180, 106, .65);
  transform: rotate(45deg);
  opacity: .65;
}
.CiernQuickCard:hover {
  color: #f3d79f !important;
  background: linear-gradient(90deg, rgba(202, 157, 84, .13), rgba(83, 181, 190, .055));
  transform: translateX(3px);
}

.CiernQuickCardStore {
  background: linear-gradient(90deg, rgba(202, 157, 84, .09), rgba(83, 181, 190, .035));
}

.CiernQuickIcon {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
}

.CiernQuickIcon img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .68)) drop-shadow(0 0 5px rgba(78, 188, 198, .10));
  transition: filter .18s ease, transform .18s ease;
}

.CiernQuickCard:hover .CiernQuickIcon img {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .72)) drop-shadow(0 0 7px rgba(218, 168, 83, .28));
  transform: scale(1.045);
}

.CiernQuickCard span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  text-align: left;
}

.CiernQuickCard strong {
  color: inherit;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: .15px;
}

.CiernQuickCard small {
  overflow: hidden;
  color: #b8c2c4;
  font-size: 10px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#Themeboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#Themeboxes > div,
#Themeboxes .Themebox,
#Themeboxes .discord,
#Themeboxes .donate,
#Themeboxes .rank,
#Themeboxes .rashid,
#Themeboxes .serversave,
#Themeboxes .searchchar {
  max-width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .36));
}

@media (max-width: 1080px) {
  #Bodycontainer { width: min(960px, calc(100% - 20px)); }
  #ContentRow { grid-template-columns: 180px minmax(0, 1fr); }
  #ThemeboxesColumn {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  #Themeboxes { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 720px) {
  #Bodycontainer {
    width: 100%;
    padding: 0 10px 36px;
  }
  #CiernHeroBrand { top: 6px; }
  #CiernHeroBrand a { min-height: 120px; padding: 2px 8px 6px; }
  #CiernHeroBrand img { width: min(360px, 100%); height: auto; max-height: 120px; }
  #CiernHeroBrand strong { font-size: 28px; letter-spacing: 4px; }
  #CiernHeroBrand small { font-size: 9px; letter-spacing: 1.4px; }
  #ContentRow {
    top: 145px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  #MenuColumn,
  #ContentColumn,
  #ThemeboxesColumn { width: 100%; }
  #MenuColumn { order: 1; }
  #ContentColumn { order: 2; }
  #ThemeboxesColumn {
    order: 3;
    display: block;
  }
  #MenuColumn > #Menu { display: none; }
  #MenuColumn > #LoginBox,
  #MenuColumn > #DownloadBox { margin: 0 auto 8px; }
  .InfoBar { font-size: 10px; }
  .InfoBarSmallElement { white-space: nowrap; }
  #Themeboxes { grid-template-columns: 1fr; }
  .Content #News .NewsHeadlineDate { display: none; }
  .Content #News .NewsHeadlineText { left: 48px; }
}

/* Ciern logo V3: genuine alpha logo plus separate HTML credit, GM and flag. */
#CiernHeroBrand {
  width: min(650px, calc(100% - 32px));
}

#CiernHeroBrand a {
  position: relative;
  min-height: 174px;
  padding: 0 18px 8px;
  background: transparent;
  filter: none;
}

#CiernHeroBrand .CiernHeroLogo {
  width: min(520px, 100%);
  height: auto;
  max-height: 176px;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 5px 11px rgba(0, 0, 0, .78));
}

.CiernHeroCredit {
  position: absolute;
  right: 42px;
  bottom: 3px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  color: #f1ce78;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 3px #000, 0 0 7px rgba(0, 0, 0, .9);
  white-space: nowrap;
}

.CiernHeroStaff {
  position: relative;
  display: block;
  width: 62px;
  height: 66px;
}

#CiernHeroBrand .CiernHeroStaff img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 58px;
  max-height: none;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .9));
}

.CiernPolishFlag {
  position: absolute;
  top: 0;
  right: -2px;
  width: 28px;
  height: 18px;
  background: linear-gradient(to bottom, #fff 0 50%, #dc143c 50% 100%);
  border: 1px solid rgba(20, 20, 20, .75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  transform: rotate(5deg);
}

.CiernPolishFlag::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -2px;
  width: 2px;
  height: 48px;
  background: #d6af58;
  box-shadow: 1px 0 1px rgba(0, 0, 0, .7);
}

#ContentRow {
  top: 205px;
}

@media (max-width: 720px) {
  #CiernHeroBrand {
    width: calc(100% - 20px);
  }

  #CiernHeroBrand a {
    min-height: 126px;
    padding: 0 6px 4px;
  }

  #CiernHeroBrand .CiernHeroLogo {
    width: min(340px, 100%);
    max-height: 120px;
  }

  .CiernHeroCredit {
    right: 8px;
    bottom: 0;
    gap: 3px;
    font-size: 9px;
  }

  .CiernHeroStaff {
    width: 42px;
    height: 45px;
  }

  #CiernHeroBrand .CiernHeroStaff img {
    width: 40px;
    height: 40px;
  }

  .CiernPolishFlag {
    width: 20px;
    height: 13px;
  }

  .CiernPolishFlag::before {
    height: 34px;
  }

  #ContentRow {
    top: 145px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .CiernQuickCard { transition: none; }
}

.moduleRow {
}

.moduleRowOver {
  background-color: #d4c0a1;
	cursor: pointer;
	cursor: hand;
}
/* Ciern Wiki: internal, visual guide to game systems */
.CiernWikiPage {
	--wiki-gold: #d7a84d;
	--wiki-gold-soft: #f0d18a;
	--wiki-ink: #3c3730;
	--wiki-panel: #4b4338;
	--wiki-panel-2: #594e3f;
	--wiki-line: rgba(215, 168, 77, .38);
	--wiki-copy: #d9dedf;
	color: var(--wiki-copy);
	font-family: Verdana, Arial, sans-serif;
	margin: 0;
}

.CiernWikiPage * { box-sizing: border-box; }

.CiernWikiHero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	min-height: 310px;
	padding: 38px 42px;
	overflow: hidden;
	border: 1px solid rgba(215, 168, 77, .56);
	background:
		radial-gradient(circle at 82% 45%, rgba(122, 105, 82, .26), transparent 25%),
		linear-gradient(115deg, rgba(54, 46, 36, .96) 0%, rgba(73, 63, 49, .94) 58%, rgba(72, 61, 48, .93) 100%),
		url('images/ciern-wiki/wiki-hero.jpg') center/cover;
	box-shadow: inset 0 0 50px rgba(0,0,0,.62), 0 12px 28px rgba(0,0,0,.32);
}

.CiernWikiHero:after {
	content: '';
	position: absolute;
	inset: 12px;
	pointer-events: none;
	border: 1px solid rgba(240, 209, 138, .18);
}

.CiernWikiHeroCopy { position: relative; z-index: 2; max-width: 700px; }
.CiernWikiKicker {
	display: block;
	margin-bottom: 9px;
	color: var(--wiki-gold-soft);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .19em;
}

.CiernWikiHero h1 {
	margin: 0 0 10px;
	color: #f3e6c8;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(42px, 7vw, 72px);
	font-weight: 700;
	line-height: .98;
	text-shadow: 0 3px 14px #000;
}

.CiernWikiHero p {
	max-width: 620px;
	margin: 0;
	color: #cbd4d6;
	font-size: 17px;
	line-height: 1.6;
}

.CiernWikiHeroActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.CiernWikiHeroActions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 43px;
	padding: 0 20px;
	border: 1px solid var(--wiki-gold);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .03em;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease;
}
.CiernWikiHeroActions a:hover { transform: translateY(-2px); }
.CiernWikiPrimary { color: #3a3329 !important; background: linear-gradient(#edcc81, #c48a31); }
.CiernWikiSecondary { color: #eadfc8 !important; background: rgba(58, 50, 39, .72); }

.CiernWikiHeroMark { position: relative; z-index: 2; display: grid; place-items: center; }
.CiernWikiHeroMark img {
	max-width: 178px;
	max-height: 210px;
	filter: drop-shadow(0 8px 18px #000) drop-shadow(0 0 14px rgba(30, 188, 202, .2));
}

.CiernWikiFilters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 14px 0;
	padding: 1px;
	border: 1px solid #776d5f;
	background: #352e25;
}
.CiernWikiFilters button {
	min-height: 54px;
	padding: 10px 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	color: #aeb8bb;
	background: linear-gradient(#5b5144, #4b4338);
	font: 700 13px/1.2 Verdana, Arial, sans-serif;
	cursor: pointer;
}
.CiernWikiFilters button:hover { color: #fff0ca; background: #605648; }
.CiernWikiFilters button.is-active { color: #f5d58a; border-bottom-color: var(--wiki-gold); background: #50473c; }

.CiernWikiIntro {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 14px;
	padding: 13px 18px;
	border-left: 3px solid #836e54;
	background: rgba(86, 74, 57, .76);
	color: #bdc7ca;
	font-size: 13px;
}
.CiernWikiIntro strong { color: #e9d3a3; white-space: nowrap; }

.CiernWikiSystems { display: grid; gap: 10px; }
.CiernWikiSystem {
	border: 1px solid #766d60;
	background: linear-gradient(140deg, #433c33, #4d453a);
	box-shadow: 0 4px 16px rgba(0,0,0,.24);
}
.CiernWikiSystem[hidden] { display: none; }
.CiernWikiSystem[open] { border-color: rgba(215, 168, 77, .62); }
.CiernWikiSystem summary {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto 22px;
	align-items: center;
	gap: 16px;
	min-height: 96px;
	padding: 13px 20px;
	list-style: none;
	cursor: pointer;
	background: linear-gradient(90deg, rgba(103, 92, 77, .9), rgba(76, 68, 58, .94));
}
.CiernWikiSystem summary::-webkit-details-marker { display: none; }
.CiernWikiSystem summary:hover { background: linear-gradient(90deg, rgba(109, 100, 88, .95), rgba(80, 71, 61, .95)); }
.CiernWikiNumber {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid var(--wiki-line);
	color: var(--wiki-gold-soft);
	background: #41392e;
	font: 700 21px Georgia, serif;
}
.CiernWikiSummaryCopy { display: grid; gap: 4px; min-width: 0; }
.CiernWikiSummaryCopy small { color: #59c2cc; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.CiernWikiSummaryCopy strong { color: #f1e1bd; font: 700 21px/1.2 Georgia, serif; }
.CiernWikiSummaryCopy > span { color: #aeb8ba; font-size: 12px; line-height: 1.45; }
.CiernWikiStatus {
	padding: 6px 10px;
	border: 1px solid rgba(215, 168, 77, .45);
	color: #ddbd78;
	background: rgba(58, 49, 39, .52);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
}
.CiernWikiChevron {
	width: 11px;
	height: 11px;
	border-right: 2px solid #d5b56e;
	border-bottom: 2px solid #d5b56e;
	transform: rotate(45deg) translateY(-3px);
	transition: transform .2s ease;
}
.CiernWikiSystem[open] .CiernWikiChevron { transform: rotate(225deg) translate(-2px, -2px); }

.CiernWikiSystemBody {
	display: grid;
	grid-template-columns: minmax(340px, 1.15fr) minmax(300px, .85fr);
	gap: 26px;
	padding: 24px;
	border-top: 1px solid rgba(215, 168, 77, .26);
	background: radial-gradient(circle at 20% 10%, rgba(122, 105, 82, .09), transparent 30%), #3e372e;
}
.CiernWikiVisual { margin: 0; align-self: start; }
.CiernWikiVisual img {
	display: block;
	width: 100%;
	max-height: 470px;
	object-fit: contain;
	border: 1px solid #766d60;
	background: #312b22;
	box-shadow: 0 8px 20px rgba(0,0,0,.42);
}
.CiernWikiVisual figcaption { padding: 8px 3px 0; color: #7f8b8f; font-size: 10px; }
.CiernWikiGuide { align-self: center; }
.CiernWikiLead { margin: 0 0 18px; color: #d6ddde; font-size: 14px; line-height: 1.65; }
.CiernWikiSteps { display: grid; gap: 10px; }
.CiernWikiStep {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 11px;
	align-items: start;
	padding: 10px;
	border: 1px solid #63594d;
	background: rgba(90, 80, 67, .68);
}
.CiernWikiStep > span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #39342e;
	background: var(--wiki-gold);
	font-size: 12px;
	font-weight: 900;
}
.CiernWikiStep p { margin: 0; color: #bfc8ca; font-size: 12px; line-height: 1.55; }
.CiernWikiFacts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.CiernWikiFacts span {
	padding: 6px 9px;
	border: 1px solid rgba(57, 177, 190, .3);
	color: #86d2d9;
	background: rgba(102, 88, 68, .25);
	font-size: 10px;
	font-weight: 700;
}

.CiernWikiFooter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 14px;
	padding: 18px 20px;
	border: 1px solid #786d5e;
	background: #4e453a;
}
.CiernWikiFooter div { display: grid; gap: 4px; }
.CiernWikiFooter strong { color: #ead6aa; font-size: 14px; }
.CiernWikiFooter span { color: #9eaaad; font-size: 11px; }
.CiernWikiFooter a { padding: 9px 13px; border: 1px solid var(--wiki-gold); color: #f0d18a; text-decoration: none; white-space: nowrap; }

@media (max-width: 900px) {
	.CiernWikiHero { grid-template-columns: 1fr; }
	.CiernWikiHeroMark { display: none; }
	.CiernWikiSystemBody { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
	.CiernWikiHero { min-height: 0; padding: 28px 23px; }
	.CiernWikiHero p { font-size: 14px; }
	.CiernWikiFilters { grid-template-columns: 1fr 1fr; }
	.CiernWikiIntro { align-items: flex-start; flex-direction: column; gap: 4px; }
	.CiernWikiSystem summary { grid-template-columns: 46px minmax(0, 1fr) 16px; gap: 10px; padding: 12px; }
	.CiernWikiNumber { width: 42px; height: 42px; font-size: 17px; }
	.CiernWikiSummaryCopy strong { font-size: 17px; }
	.CiernWikiSummaryCopy > span, .CiernWikiStatus { display: none; }
	.CiernWikiSystemBody { padding: 13px; }
	.CiernWikiFooter { align-items: flex-start; flex-direction: column; }
}
/* ==========================================================
   Biblioteka Ciernia — wspólne style dla podstron:
   Bestiariusz, Czary, Komendy, Task Board.
   Dopisać na końcu basic.css szablonu.
   ========================================================== */

.CiernLib {
	--lib-bg: #443d33;
	--lib-bg2: #4e453a;
	--lib-edge: #5d5447;
	--lib-ink: #e9e3d3;
	--lib-muted: #9d9585;
	--lib-gold: #c9a45c;
	--lib-amber: #e2a93f;
	color: var(--lib-ink);
	font-family: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- nagłówek ---------- */
.CiernLibHead { padding: 4px 0 20px; border-bottom: 1px solid var(--lib-edge); margin-bottom: 20px; }
.CiernLibKicker {
	font-size: 11px; letter-spacing: .2em; color: var(--lib-muted);
	text-transform: uppercase; font-weight: 700;
}
.CiernLibHead h1 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 30px; color: var(--lib-gold); margin: 6px 0 8px; letter-spacing: .02em;
}
.CiernLibHead p { color: var(--lib-muted); margin: 0; max-width: 70ch; line-height: 1.6; }
.CiernLibHead strong { color: var(--lib-ink); }

/* ---------- narzędzia: szukajka + filtry ---------- */
.CiernLibTools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.CiernLibSearch { display: flex; gap: 8px; flex: 1 1 320px; }
.CiernLibSearch input {
	flex: 1; min-width: 0; padding: 9px 12px;
	background: #3a342c; border: 1px solid var(--lib-edge); border-radius: 6px;
	color: var(--lib-ink); font-size: 14px; font-family: inherit;
}
.CiernLibSearch input:focus { outline: none; border-color: var(--lib-gold); }
.CiernLibSearch input::placeholder { color: #6b7280; }
.CiernLibSearch button {
	padding: 9px 18px; background: linear-gradient(180deg, #605547 0%, #50473b 100%);
	border: 1px solid var(--lib-gold); border-radius: 6px;
	color: var(--lib-gold); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
}
.CiernLibSearch button:hover { background: #695d4e; }

.CiernLibFilters { display: flex; gap: 6px; flex-wrap: wrap; }
.CiernLibFilters--solo { margin-bottom: 14px; }
.CiernLibFilters a {
	padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 700;
	background: var(--lib-bg); border: 1px solid var(--lib-edge);
	color: var(--lib-muted); text-decoration: none;
}
.CiernLibFilters a:hover { border-color: #776c5e; color: var(--lib-ink); }
.CiernLibFilters a.is-active {
	color: var(--lib-gold); border-color: rgba(201,164,92,.45); background: rgba(201,164,92,.1);
}

.CiernLibVocs {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	margin-bottom: 14px; font-size: 12.5px; color: var(--lib-muted);
}
.CiernLibVocs a {
	padding: 4px 10px; border-radius: 4px; text-decoration: none;
	color: var(--lib-muted); border: 1px solid transparent;
}
.CiernLibVocs a:hover { color: var(--lib-ink); }
.CiernLibVocs a.is-active { color: var(--lib-gold); border-color: rgba(201,164,92,.35); background: rgba(201,164,92,.08); }

.CiernLibCount { font-size: 13px; color: var(--lib-muted); margin-bottom: 12px; }
.CiernLibCount strong { color: var(--lib-ink); }

.CiernLibHint {
	background: var(--lib-bg); border-left: 3px solid var(--lib-gold);
	border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 16px; font-size: 14px;
}
.CiernLibHint strong { color: var(--lib-gold); display: block; margin-bottom: 3px; }
.CiernLibHint span { display: block; color: var(--lib-muted); line-height: 1.55; }

.CiernLibEmpty {
	background: var(--lib-bg); border: 1px dashed var(--lib-edge); border-radius: 8px;
	padding: 26px; text-align: center; margin: 16px 0;
}
.CiernLibEmpty strong { display: block; color: var(--lib-ink); margin-bottom: 5px; }
.CiernLibEmpty span { color: var(--lib-muted); font-size: 14px; }

/* ---------- bestiariusz: rozwijane wiersze ---------- */
.CiernLibList { display: flex; flex-direction: column; gap: 6px; }
.CiernLibItem { background: var(--lib-bg); border: 1px solid var(--lib-edge); border-radius: 8px; overflow: hidden; }
.CiernLibItem.is-boss { border-color: rgba(201,164,92,.35); }
.CiernLibItem > summary {
	display: flex; align-items: center; gap: 14px; padding: 11px 16px;
	cursor: pointer; list-style: none; user-select: none;
}
.CiernLibItem > summary::-webkit-details-marker { display: none; }
.CiernLibItem > summary:hover { background: var(--lib-bg2); }
.CiernLibName { flex: 1; font-weight: 700; font-size: 14.5px; }
.CiernLibName em {
	display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 20px;
	font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--lib-gold);
	background: rgba(201,164,92,.12); border: 1px solid rgba(201,164,92,.3);
}
.CiernLibStat {
	font-size: 13px; color: var(--lib-muted); white-space: nowrap;
	font-variant-numeric: tabular-nums; min-width: 92px; text-align: right;
}
.CiernLibLootCount { font-size: 12px; color: #6f7683; white-space: nowrap; min-width: 100px; text-align: right; }
.CiernLibBody { padding: 4px 16px 14px; border-top: 1px solid var(--lib-edge); }
.CiernLibNote { color: var(--lib-muted); font-size: 13.5px; margin: 12px 0 4px; }

.CiernLibLoot { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.CiernLibLoot th {
	text-align: left; padding: 7px 10px; font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--lib-muted); border-bottom: 1px solid var(--lib-edge);
}
.CiernLibLoot td { padding: 6px 10px; border-bottom: 1px solid rgba(98, 89, 76, .5); }
.CiernLibLoot td:nth-child(2), .CiernLibLoot td:nth-child(3) {
	text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.CiernLibLoot .is-common    { color: #82b366; }
.CiernLibLoot .is-uncommon  { color: #6fa8c4; }
.CiernLibLoot .is-rare      { color: var(--lib-amber); }
.CiernLibLoot .is-veryrare  { color: #c9756b; }

/* ---------- tabele: czary, komendy, kontrakty ---------- */
.CiernLibTableWrap { overflow-x: auto; }
.CiernLibTable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.CiernLibTable th {
	text-align: left; padding: 9px 12px; font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--lib-muted);
	border-bottom: 1px solid var(--lib-gold); white-space: nowrap;
}
.CiernLibTable td { padding: 9px 12px; border-bottom: 1px solid var(--lib-edge); vertical-align: middle; }
.CiernLibTable tbody tr:hover { background: var(--lib-bg); }
.CiernLibTable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.CiernLibTable code {
	background: #3a342c; border: 1px solid var(--lib-edge); border-radius: 4px;
	padding: 2px 7px; color: var(--lib-amber); font-size: 12.5px;
}
.CiernLibSpellName { font-weight: 700; color: var(--lib-ink); }
.CiernLibVocList { color: var(--lib-muted); font-size: 12.5px; }

.CiernLibTag {
	display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 20px;
	font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	border: 1px solid var(--lib-edge); color: var(--lib-muted);
}
.CiernLibTag.is-atak     { color: #c9756b; border-color: rgba(201,117,107,.35); background: rgba(201,117,107,.1); }
.CiernLibTag.is-leczenie { color: #82b366; border-color: rgba(130,179,102,.35); background: rgba(130,179,102,.1); }
.CiernLibTag.is-wsparcie { color: #6fa8c4; border-color: rgba(111,168,196,.35); background: rgba(111,168,196,.1); }
.CiernLibTag.is-prem     { color: var(--lib-gold); border-color: rgba(201,164,92,.35); background: rgba(201,164,92,.1); }
.CiernLibTag.is-easy     { color: #82b366; border-color: rgba(130,179,102,.35); background: rgba(130,179,102,.1); }
.CiernLibTag.is-mid      { color: var(--lib-amber); border-color: rgba(226,169,63,.35); background: rgba(226,169,63,.1); }
.CiernLibTag.is-hard     { color: #c9756b; border-color: rgba(201,117,107,.35); background: rgba(201,117,107,.1); }

/* ---------- komendy ---------- */
.CiernCmdGroup { margin-bottom: 26px; }
.CiernCmdGroup h2 {
	font-family: Georgia, serif; font-size: 19px; color: var(--lib-gold);
	margin: 0 0 4px; letter-spacing: .01em;
}
.CiernCmdNote { color: var(--lib-muted); font-size: 13.5px; margin: 0 0 10px; }
.CiernCmd { font-weight: 700; white-space: nowrap; }
.CiernCmdTable td:first-child { width: 168px; }

/* ---------- kontrakty ---------- */
.CiernTaskName { font-weight: 700; }
.CiernTaskTarget { color: var(--lib-muted); }
.CiernTaskVariants {
	display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
	font-size: 10.5px; color: #6f7683; border: 1px solid var(--lib-edge); cursor: help;
}
.CiernTaskTokens { white-space: nowrap; }
.CiernToken {
	display: inline-block; margin-right: 5px; padding: 2px 7px; border-radius: 4px;
	font-size: 11.5px; font-weight: 700; border: 1px solid var(--lib-edge);
}
.CiernToken.is-white  { color: #cfd3d9; }
.CiernToken.is-silver { color: #a8c0d0; border-color: rgba(168,192,208,.3); }
.CiernToken.is-gold   { color: var(--lib-gold); border-color: rgba(201,164,92,.35); }

/* ---------- stronicowanie i stopka ---------- */
.CiernLibPager {
	display: flex; align-items: center; justify-content: center; gap: 18px;
	margin: 20px 0 6px; font-size: 13.5px; color: var(--lib-muted);
}
.CiernLibPager a { color: var(--lib-gold); text-decoration: none; font-weight: 700; }
.CiernLibPager a:hover { text-decoration: underline; }

.CiernLibFoot {
	margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--lib-edge);
	font-size: 12.5px; color: #6f7683; line-height: 1.55;
}

/* ---------- telefon ---------- */
@media (max-width: 640px) {
	.CiernLibHead h1 { font-size: 24px; }
	.CiernLibItem > summary { flex-wrap: wrap; gap: 6px 12px; }
	.CiernLibName { flex: 1 1 100%; }
	.CiernLibStat, .CiernLibLootCount { min-width: 0; text-align: left; }
	.CiernCmdTable td:first-child { width: auto; }
}

/* ---------- obrazki potworów i łupu ---------- */
.CiernMonImg {
	flex: none; width: 40px; height: 40px; display: flex;
	align-items: center; justify-content: center;
	/* Sprite'y Tibii są ciemne (jasność ~50/255) — na ciemnym tle ginęły.
	   Jasna nisza daje kontrast, jak sloty ekwipunku w kliencie. */
	background: radial-gradient(circle at 50% 40%, #6e7684 0%, #776d5f 78%);
	border: 1px solid #50473b; border-radius: 6px; overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.CiernMonImg img {
	/* jawne wymiary: bez nich element ma 0x0 i loading=lazy go nie pobierze */
	width: 34px; height: 34px; object-fit: contain;
	image-rendering: pixelated;
}
.CiernMonImg__none {
	font-family: Georgia, serif; font-size: 17px; font-weight: 700;
	color: #584f43; user-select: none;
}
.CiernLibItem.is-boss .CiernMonImg { border-color: rgba(201,164,92,.4); }

.CiernLootCell { display: flex; align-items: center; gap: 9px; }
.CiernLootImg {
	flex: none; width: 26px; height: 26px; display: flex;
	align-items: center; justify-content: center;
	background: linear-gradient(180deg, #6e7684 0%, #766d60 100%);
	border: 1px solid #50473b; border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.CiernLootImg img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }

@media (max-width: 640px) {
	.CiernMonImg { width: 32px; height: 32px; }
	.CiernMonImg img { width: 28px; height: 28px; }
}

/* ---------- orientacyjny poziom na polowanie ---------- */
.CiernLibLvl {
	flex: none; min-width: 78px; text-align: right;
	font-size: 12px; font-weight: 700; white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.CiernLibLvl.is-easy { color: #82b366; }
.CiernLibLvl.is-mid  { color: #e2a93f; }
.CiernLibLvl.is-hard { color: #c9756b; }

@media (max-width: 640px) {
	.CiernLibLvl { min-width: 0; text-align: left; }
}
/* ==========================================================
   Cierń OTS — themebox „Siły Dnia" (Boosted Creature + Boss)
   Dołączyć do arkusza prawej kolumny albo wczytać osobno.
   Zmienne z motywu Ciernia; fallbacki dla bezpieczeństwa.
   ========================================================== */

.cb{
  width:100%;max-width:300px;
  background:linear-gradient(180deg,#473f35 0%,#41392e 100%);
  border:1px solid var(--edge,#5d5447);border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  font-family:'Alegreya Sans','Segoe UI',system-ui,sans-serif;
  color:var(--ink,#e9e3d3);
}

.cb__head{
  position:relative;padding:14px 16px 12px;text-align:center;
  background:linear-gradient(180deg,#53493b 0%,#483f33 100%);
  border-bottom:1px solid var(--edge,#5d5447);
}
.cb__head::after{
  content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold,#c9a45c),transparent);
}
.cb__title{
  font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:15px;letter-spacing:.18em;
  color:var(--gold,#c9a45c);text-transform:uppercase;margin:0;
}
.cb__sub{font-size:11px;color:var(--muted,#9d9585);letter-spacing:.06em;margin-top:3px}

.cb__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge,#5d5447)}
.cb--stack .cb__grid{grid-template-columns:1fr}

.cb__cell{background:#443d33;padding:14px 12px 15px;text-align:center;transition:background .2s}
.cb__cell:hover{background:#4e453a}

.cb__label{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#9d9585);
  margin-bottom:10px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;
}
.cb__label svg{width:12px;height:12px;opacity:.75}

.cb__portrait{
  width:76px;height:76px;margin:0 auto 10px;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#595043 0%,#423b31 72%);
  border:1px solid #675c4e;border-radius:8px;
}
.cb--stack .cb__portrait{width:96px;height:96px}
.cb__portrait::before{
  content:"";position:absolute;inset:3px;border-radius:6px;
  border:1px solid rgba(201,164,92,.16);pointer-events:none;
}
.cb__cell--exp  .cb__portrait{box-shadow:inset 0 -15px 24px -15px rgba(226,169,63,.6)}
.cb__cell--loot .cb__portrait{box-shadow:inset 0 -15px 24px -15px rgba(79,179,196,.6)}
.cb__portrait img{max-width:64px;max-height:64px;image-rendering:pixelated}
.cb--stack .cb__portrait img{max-width:84px;max-height:84px}

.cb__glyph{
  font-family:'Cinzel',Georgia,serif;font-size:30px;font-weight:700;color:#776d5f;
  text-shadow:0 1px 0 rgba(0,0,0,.6);user-select:none;
}
.cb--stack .cb__glyph{font-size:38px}

.cb__name{
  font-size:13.5px;line-height:1.25;font-weight:700;color:var(--ink,#e9e3d3);
  min-height:34px;display:flex;align-items:center;justify-content:center;padding:0 2px;
}
.cb--stack .cb__name{font-size:15px;min-height:0;margin-bottom:2px}

.cb__bonuses{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:8px}
.cb__bonus{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;
}
.cb__bonus svg{width:12px;height:12px;flex:none}
.cb__bonus--exp {color:var(--amber,#e2a93f);background:rgba(226,169,63,.1);border:1px solid rgba(226,169,63,.28)}
.cb__bonus--loot{color:#4fb3c4;          background:rgba(79,179,196,.1); border:1px solid rgba(79,179,196,.28)}
.cb__bonus--star{color:var(--gold,#c9a45c);background:rgba(201,164,92,.1);border:1px solid rgba(201,164,92,.3)}

.cb__foot{
  padding:9px 14px;text-align:center;font-size:11px;color:var(--muted,#9d9585);
  border-top:1px solid var(--edge,#5d5447);background:#41392e;
}
.cb__foot b{color:var(--gold,#c9a45c);font-variant-numeric:tabular-nums}

/* wąska kolumna / telefon — kafle jeden pod drugim */
@media (max-width:420px){
  .cb__grid{grid-template-columns:1fr}
}

/* --- Siły Dnia w wąskiej kolumnie themeboxów: zawsze pionowo --- */
#Themeboxes .cb,
#ciern-boosted {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
#Themeboxes .cb__grid { grid-template-columns: 1fr; }
#Themeboxes .cb__portrait { width: 88px; height: 88px; }
#Themeboxes .cb__portrait img { max-width: 76px; max-height: 76px; }
#Themeboxes .cb__glyph { font-size: 34px; }
#Themeboxes .cb__name { font-size: 14px; min-height: 0; margin-bottom: 2px; }
#Themeboxes .cb__bonus { font-size: 11px; padding: 3px 9px; }
#Themeboxes .cb__title { font-size: 14px; letter-spacing: .14em; }
#Themeboxes .cb__sub { font-size: 10.5px; }

/* --- kafle „Sił Dnia" są klikalne: prowadzą do Bestiariusza --- */
#Themeboxes a.cb__cell,
a.cb__cell {
	text-decoration: none; color: inherit; display: block;
	transition: background .15s, box-shadow .15s;
}
a.cb__cell:hover { background: #544b3e; }
a.cb__cell:hover .cb__portrait { box-shadow: 0 0 0 1px rgba(201,164,92,.5), inset 0 -15px 24px -15px rgba(226,169,63,.6); }
a.cb__cell:hover .cb__name { color: #e2a93f; }
a.cb__cell:focus-visible { outline: 2px solid #c9a45c; outline-offset: -2px; }

/* ==========================================================
   NISZE POD SPRITE'Y — zawsze jasne, niezależnie od palety.
   Sprite'y Tibii mają jasność ~50/255; na ciepłym, średnio
   ciemnym tle znikają. Ten blok idzie na końcu arkusza,
   więc wygrywa z paletą motywu.
   ========================================================== */
.CiernMonImg,
#Themeboxes .cb__portrait,
.cb__portrait {
	background: radial-gradient(circle at 50% 40%, #7d8794 0%, #59616d 78%) !important;
	border-color: #2a2f38 !important;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.4) !important;
}
.CiernLootImg {
	background: linear-gradient(180deg, #7d8794 0%, #626b78 100%) !important;
	border-color: #2a2f38 !important;
}
.CiernMonImg__none,
.cb__glyph {
	color: #333a44 !important;
}

/* ==========================================================
   WARSTWA CZYTELNOSCI — dopisana 2026-08-29 (wieczor)
   Motyw wymusza kremowy tekst na CALEJ stronie (`html, body
   { color: ... !important }`), a MyAAC ma wlasne tabele na
   jasnym tle (#f1e0c6, #d4c0a1, bialy). Efekt: naglowki tabel,
   nazwy dzialow forum i linki byly praktycznie niewidoczne.
   Regula: JASNE TLO -> CIEMNY TEKST. Blok jest na koncu
   arkusza, wiec wygrywa z paleta motywu.
   ========================================================== */

:root {
	--cm-onlight:         #2f2820;  /* tekst na jasnym tle      */
	--cm-onlight-soft:    #574c3d;  /* podpisy, drobny druk     */
	--cm-onlight-link:    #7a4410;  /* link na jasnym tle       */
	--cm-onlight-link-hi: #a8600f;  /* link najechany           */
	--cm-ok:              #4f8f3f;  /* zielony: latwe / online  */
	--cm-warn:            #c07a1e;  /* pomaranczowy: srednie    */
	--cm-bad:             #b34432;  /* czerwony: trudne         */
}

/* --- 1. Jasne powierzchnie MyAAC dostaja ciemny tekst --- */
.TableContentContainer,
.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5,
.TableContainer .Odd,
.TableContainer .Even,
.Content .BoxContent .Odd,
.Content .BoxContent .Even,
[bgcolor="#F1E0C6"], [bgcolor="#f1e0c6"],
[bgcolor="#D4C0A1"], [bgcolor="#d4c0a1"],
[bgcolor="#FFFFFF"], [bgcolor="#ffffff"] {
	color: var(--cm-onlight) !important;
}

.TableContentContainer b,
.TableContentContainer strong,
.TableContentContainer small,
.TableContentContainer td,
.TableContentContainer th,
.TableContentContainer label,
.TableContentContainer .Text,
.TableContentContainer .white,
.TableContentContainer .whites,
.Content .BoxContent td .white,
.Content .BoxContent .white {
	color: var(--cm-onlight) !important;
}
.TableContentContainer small,
.TableContentContainer .LabelV {
	color: var(--cm-onlight-soft) !important;
}

/* --- 2. Linki na jasnym tle: ciemny bursztyn zamiast kremu --- */
.TableContentContainer a,
.TableContentContainer a:link,
.TableContentContainer a:visited,
[bgcolor="#F1E0C6"] a, [bgcolor="#f1e0c6"] a,
[bgcolor="#D4C0A1"] a, [bgcolor="#d4c0a1"] a,
[bgcolor="#FFFFFF"] a, [bgcolor="#ffffff"] a {
	color: var(--cm-onlight-link) !important;
	text-decoration: none;
}
.TableContentContainer a:hover,
[bgcolor="#F1E0C6"] a:hover, [bgcolor="#f1e0c6"] a:hover,
[bgcolor="#D4C0A1"] a:hover, [bgcolor="#d4c0a1"] a:hover {
	color: var(--cm-onlight-link-hi) !important;
	text-decoration: underline;
}

/* --- 3. Wyjatek: belka tytulowa tabeli zostaje jasna na ciemnym --- */
.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .Text,
.TableContainer .CaptionContainer .CaptionInnerContainer,
.TableContainer .CaptionContainer b {
	color: var(--ciern-gold-light, #efd39a) !important;
}

/* --- 4. Status: online zielony, offline stonowany --- */
.CiernOnline,
.TableContentContainer .Online,
.TableContentContainer font[color="green"] {
	color: var(--cm-ok) !important;
	font-weight: 700;
}
.CiernOffline,
.TableContentContainer .Offline {
	color: #8a7f6c !important;
}

/* --- 5. Latwe/srednie/trudne: zielony, pomaranczowy, czerwony --- */
.CiernLibTag.is-easy, .ciern-diff.is-easy, .CiernLibLvl.is-easy,
.CiernLibVocs a.ciern-lvl-easy {
	color: #eaf5e5 !important;
	background: rgba(79, 143, 63, .88) !important;
	border-color: rgba(79, 143, 63, .95) !important;
}
.CiernLibTag.is-mid, .ciern-diff.is-mid, .CiernLibLvl.is-mid,
.CiernLibVocs a.ciern-lvl-mid {
	color: #fff4e2 !important;
	background: rgba(192, 122, 30, .90) !important;
	border-color: rgba(192, 122, 30, .95) !important;
}
.CiernLibTag.is-hard, .ciern-diff.is-hard, .CiernLibLvl.is-hard,
.CiernLibVocs a.ciern-lvl-hard {
	color: #ffeae5 !important;
	background: rgba(179, 68, 50, .90) !important;
	border-color: rgba(179, 68, 50, .95) !important;
}
.ciern-diff, .CiernLibVocs a[class*="ciern-lvl"] {
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 4px 14px;
	font-weight: 700;
}
.ciern-diff.is-active, .CiernLibVocs a[class*="ciern-lvl"].is-active {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55) inset;
}

/* --- 6. Tlo strony: jasniejszy pergamin zamiast czarnego key artu --- */
body {
	background-image: url(/plugins/theme-canary/themes/canary/images/header/ciern-background-pergamin.jpg) !important;
	background-color: #6d6152 !important;
}

/* ==========================================================
   BESTIARIUSZ — statystyki potwora, odpornosci, lokalizacje
   ========================================================== */

.CiernMonStats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
	margin: 4px 0 14px;
}
.CiernStatCard {
	background: rgba(38, 33, 26, .55);
	border: 1px solid rgba(224, 180, 95, .28);
	border-radius: 8px;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.csc__k {
	font-size: 10.5px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: #bdae90;
}
.csc__v { font-size: 16px; font-weight: 700; color: #f6efdc; }

.CiernWhere { margin: 0 0 14px; }
.CiernWhere h4, .CiernResist h4 {
	margin: 0 0 7px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #e0b45f;
}
.CiernWhere h4 small, .CiernResist h4 small {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
	color: #bdae90;
	font-weight: 400;
}
.CiernWhere ul {
	list-style: none;
	margin: 0 0 7px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.CiernWhere li {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	background: rgba(38, 33, 26, .55);
	border: 1px solid rgba(224, 180, 95, .28);
	border-radius: 999px;
	padding: 4px 12px;
}
.cw__town { font-weight: 700; color: #f6efdc; }
.cw__n    { font-size: 11.5px; color: #bdae90; }
.CiernWhere__note { margin: 0; font-size: 12.5px; color: #c9bb9f; }

.CiernResist { margin: 0 0 14px; }
.CiernResist ul {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 6px;
}
.CiernResist li {
	display: flex; align-items: center; gap: 8px;
	padding: 5px 10px;
	border-radius: 7px;
	border: 1px solid transparent;
	font-size: 12.5px;
}
.CiernResist li i {
	width: 11px; height: 11px; border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.cr__n { font-weight: 600; color: #efe6d0; }
.cr__v { margin-left: auto; font-variant-numeric: tabular-nums; }
/* zielony = tu boli, czerwony = odbija sie */
.CiernResist li.is-weak   { background: rgba(79, 143, 63, .22);  border-color: rgba(79, 143, 63, .55); }
.CiernResist li.is-weak   .cr__v { color: #9fdc8a; font-weight: 700; }
.CiernResist li.is-resist { background: rgba(192, 122, 30, .18); border-color: rgba(192, 122, 30, .45); }
.CiernResist li.is-resist .cr__v { color: #e5b76d; }
.CiernResist li.is-immune { background: rgba(179, 68, 50, .22);  border-color: rgba(179, 68, 50, .55); }
.CiernResist li.is-immune .cr__v { color: #f0a08f; font-weight: 700; }

.CiernImmune { color: #d9c8a6; }

/* Filtr zywiolow */
.CiernElemFilter a.CiernElemPill {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--pill, #7d8794);
	border-radius: 999px;
	padding: 4px 13px;
}
.CiernElemPill i {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--pill, #7d8794);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.CiernElemPill.is-active {
	background: var(--pill, #7d8794);
	color: #1f1c17 !important;
	font-weight: 700;
}
.CiernElemPill.is-active i { background: rgba(0, 0, 0, .45); }

/* ==========================================================
   LOOT — statystyki i podglad po najechaniu
   ========================================================== */

.CiernLootStats { white-space: normal; }
.CiernLootStats__none { color: #8d8471; }
.CiernChip {
	display: inline-block;
	margin: 1px 4px 1px 0;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid rgba(224, 180, 95, .35);
	background: rgba(38, 33, 26, .5);
	color: #e8dcc0;
}
.CiernChip.is-atk  { border-color: rgba(199, 92, 60, .6);  color: #f0b49c; }
.CiernChip.is-def  { border-color: rgba(90, 140, 190, .6); color: #a8cbe8; }
.CiernChip.is-arm  { border-color: rgba(150, 140, 100, .7);color: #ded2a8; }
.CiernChip.is-lvl  { border-color: rgba(224, 180, 95, .5); color: #e5c785; }
.CiernChip.is-kind { border-color: rgba(160, 150, 130, .4);color: #c6bba3; }

/* Dymek: czysty CSS, bez JS — dziala tez z klawiatury (tabindex + :focus). */
.CiernLootName.has-tip {
	position: relative;
	border-bottom: 1px dotted rgba(224, 180, 95, .55);
	cursor: help;
	outline: none;
}
.CiernTip {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: 40;
	display: none;
	width: 268px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(224, 180, 95, .5);
	background: #2b2721;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
	text-align: left;
	white-space: normal;
	font-weight: 400;
}
.CiernLootName.has-tip:hover .CiernTip,
.CiernLootName.has-tip:focus .CiernTip,
.CiernLootName.has-tip:focus-within .CiernTip { display: block; }
.CiernTip__head {
	display: flex; align-items: center; gap: 9px;
	padding-bottom: 7px; margin-bottom: 7px;
	border-bottom: 1px solid rgba(224, 180, 95, .25);
}
.CiernTip__head img {
	width: 32px; height: 32px;
	border-radius: 5px;
	background: linear-gradient(180deg, #7d8794 0%, #626b78 100%);
	border: 1px solid #2a2f38;
	padding: 1px;
}
.CiernTip__head strong { color: #f6efdc; font-size: 13px; }
.CiernTip__rows { display: block; }
.CiernTip__row {
	display: flex; justify-content: space-between; gap: 12px;
	font-size: 12px; padding: 2px 0;
	color: #c9bb9f;
}
.CiernTip__row b { color: #f2d79a; font-variant-numeric: tabular-nums; }
.CiernTip__desc {
	display: block; margin-top: 7px; padding-top: 7px;
	border-top: 1px solid rgba(224, 180, 95, .22);
	font-size: 11.5px; font-style: italic;
	color: #a89b80;
}

/* ==========================================================
   CZARY — ikona przy nazwie
   ========================================================== */

.CiernSpellIconCell { width: 44px; }
.CiernSpellImg {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border-radius: 7px;
	border: 1px solid #2a2f38;
	background: radial-gradient(circle at 50% 40%, #7d8794 0%, #59616d 78%) !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}
.CiernSpellImg img { image-rendering: pixelated; }
.CiernSpellImg__none { font-weight: 800; font-size: 15px; color: #333a44; }

/* ==========================================================
   TASK BOARD — cel jako link z miniatura
   ========================================================== */

a.CiernTaskMon {
	display: inline-flex; align-items: center; gap: 9px;
	text-decoration: none; color: inherit;
}
a.CiernTaskMon:hover .CiernTaskMonName { color: #e2a93f; text-decoration: underline; }
.CiernMonImg--sm { width: 34px; height: 34px; }
.CiernMonImg--sm img { max-width: 28px; max-height: 28px; }
.CiernTaskMonName { font-weight: 600; }

/* ==========================================================
   PODGLAD EKWIPUNKU NA PROFILU POSTACI
   Kazdy slot dostaje dymek z nazwa i statystykami przedmiotu.
   ========================================================== */

.CiernEqSlot { position: relative; display: inline-block; }
.CiernEqSlot .CiernTip { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.CiernEqSlot:hover .CiernTip,
.CiernEqSlot:focus-within .CiernTip { display: block; }

/* ==========================================================
   WARSTWA CZYTELNOSCI — POPRAWKA SPECYFICZNOSCI (2026-08-29)

   Pierwsze podejscie nie zadzialalo na linki, bo paleta motywu
   ma regule `.Content .BoxContent td a { color: ... !important }`
   o specyficznosci (0,3,2), a nasza `[bgcolor] a` miala (0,1,1).
   Wsrod deklaracji !important wygrywa wyzsza specyficznosc, wiec
   ponizej wchodzimy na ten sam poziom zagniezdzenia.

   Celujemy WYLACZNIE w powierzchnie, o ktorych wiemy, ze sa jasne
   (wiersze z atrybutem bgcolor, .Odd/.Even, .TableContentContainer).
   Wlasne komponenty Ciernia maja ciemne tlo, wiec na koncu
   przywracamy im jasny link.
   ========================================================== */

.Content .BoxContent .TableContentContainer a,
.Content .BoxContent .TableContentContainer a:link,
.Content .BoxContent .TableContentContainer a:visited,
.Content .BoxContent tr[bgcolor] a,
.Content .BoxContent td[bgcolor] a,
.Content .BoxContent .Odd a,
.Content .BoxContent .Even a,
.Content .BoxContent .Table1 a,
.Content .BoxContent .Table2 a,
.Content .BoxContent .Table3 a,
.Content .BoxContent .Table4 a,
.Content .BoxContent .Table5 a {
	color: var(--cm-onlight-link, #7a4410) !important;
	font-weight: 600;
}
.Content .BoxContent .TableContentContainer a:hover,
.Content .BoxContent tr[bgcolor] a:hover,
.Content .BoxContent .Odd a:hover,
.Content .BoxContent .Even a:hover {
	color: var(--cm-onlight-link-hi, #a8600f) !important;
	text-decoration: underline;
}

/* Tekst niebedacy linkiem na tych samych jasnych powierzchniach. */
.Content .BoxContent .TableContentContainer,
.Content .BoxContent .TableContentContainer td,
.Content .BoxContent .TableContentContainer th,
.Content .BoxContent .TableContentContainer b,
.Content .BoxContent .TableContentContainer small,
.Content .BoxContent tr[bgcolor] td,
.Content .BoxContent td[bgcolor] {
	color: var(--cm-onlight, #2f2820) !important;
}

/* Belka tytulowa tabeli zostaje jasna na ciemnym tle. */
.Content .BoxContent .TableContainer .CaptionContainer .Text,
.Content .BoxContent .TableContainer .CaptionContainer b {
	color: var(--ciern-gold-light, #efd39a) !important;
}

/* --- Wlasne komponenty maja ciemne tlo: link zostaje jasny --- */
.Content .BoxContent .CiernLib a,
.Content .BoxContent .CiernLib a:link,
.Content .BoxContent .CiernLib a:visited {
	color: var(--cm-gold-hi, #f2cc7d) !important;
	font-weight: inherit;
}
.Content .BoxContent .CiernLib .CiernElemPill.is-active { color: #1f1c17 !important; }
.Content .BoxContent .CiernLib .ciern-diff.is-easy,
.Content .BoxContent .CiernLib a.ciern-lvl-easy { color: #eaf5e5 !important; }
.Content .BoxContent .CiernLib .ciern-diff.is-mid,
.Content .BoxContent .CiernLib a.ciern-lvl-mid  { color: #fff4e2 !important; }
.Content .BoxContent .CiernLib .ciern-diff.is-hard,
.Content .BoxContent .CiernLib a.ciern-lvl-hard { color: #ffeae5 !important; }
.Content .BoxContent .CiernLib a.CiernTaskMon { color: #efe6d0 !important; }

/* --- Stopka MyAAC: licznik odwiedzin i „Powered by" --- */
body #Footer,
html body #Footer,
div#Footer {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* --- Status online na zielono --- */
.Content .BoxContent .TableContentContainer .Online,
.Content .BoxContent font[color="green"],
.Content .BoxContent b[style*="green"],
.CiernOnline {
	color: #2f7d1f !important;
	font-weight: 700;
}

/* ==========================================================
   TLO — ostatnia warstwa (2026-08-29)
   #ArtworkHelper przykrywal cala strone ciemnym gradientem
   (do 76% czerni przy 720px), przez co nowe, jasniejsze tlo
   i tak wygladalo na czarne. Zamieniamy je na ciepla, lekka
   mgielke: gora rozjasniona, dol tylko delikatnie przygaszony,
   zeby tresc nadal odcinala sie od tla.
   ========================================================== */
#ArtworkHelper {
	background:
		linear-gradient(180deg,
			rgba(246, 234, 208, .10) 0,
			rgba(120, 104, 82, .10) 240px,
			rgba(74, 64, 50, .34) 900px) !important;
}

/* ==========================================================
   WIZUALNA INSTRUKCJA ULEPSZANIA (Ciern Wiki)
   Sprite'y sa wyciagniete z klienta, wiec gracz widzi dokladnie
   ten obrazek, ktory bedzie mial w plecaku.
   Nisze pod sprite'ami MUSZA byc jasne — sprite'y Tibii maja
   jasnosc ~50/255 i na ciemnym tle znikaja.
   ========================================================== */

.CiernCraftDemo {
	margin: 16px 0 4px;
	padding: 16px 18px;
	border-radius: 12px;
	border: 1px solid rgba(224, 180, 95, .30);
	background: rgba(38, 33, 26, .55);
}
.CiernCraftDemo h4 {
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #e0b45f;
}

/* --- sciezka: krysztal -> bron -> efekt --- */
.ccd__flow {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.ccd__step { margin: 0; text-align: center; width: 96px; }
.ccd__slot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 9px;
	border: 1px solid #2a2f38;
	background: radial-gradient(circle at 50% 40%, #7d8794 0%, #59616d 78%);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}
.ccd__slot img { image-rendering: pixelated; width: 32px; height: 32px; }
.ccd__slot--target { box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 2px rgba(224,180,95,.45); }
.ccd__slot--done   { box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 2px rgba(79,143,63,.75); }

.ccd__plus {
	position: absolute;
	right: -6px; bottom: -6px;
	font-style: normal;
	font-size: 11px;
	font-weight: 800;
	color: #eaf5e5;
	background: #4f8f3f;
	border-radius: 999px;
	padding: 1px 7px;
	box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.ccd__step figcaption { display: block; margin-top: 7px; line-height: 1.35; }
.ccd__step figcaption b { display: block; font-size: 12.5px; color: #f6efdc; }
.ccd__step figcaption small { display: block; font-size: 11px; color: #bdae90; }

.ccd__arrow {
	align-self: center;
	margin-top: -18px;
	font-size: 20px;
	color: #e0b45f;
	opacity: .75;
}

/* --- podglad opisu z gry --- */
.ccd__look {
	margin-bottom: 14px;
	padding: 10px 12px;
	border-radius: 9px;
	border: 1px solid rgba(224, 180, 95, .22);
	background: #14120f;
}
.ccd__lookLabel {
	display: block;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #bdae90;
	margin-bottom: 6px;
}
/* Zielony tekst to kolor, ktory gracz widzi w kliencie przy komendzie Look. */
.ccd__lookText {
	display: block;
	font-family: Consolas, "Courier New", monospace;
	font-size: 12.5px;
	line-height: 1.55;
	color: #6fdc4a;
	background: none;
	padding: 0;
	white-space: normal;
}
.ccd__lookText b { color: #b6ff8f; }

/* --- kroki --- */
.ccd__how {
	margin: 0 0 12px;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.7;
	color: #d9cdb4;
}
.ccd__how b { color: #f2d79a; }

.ccd__note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #c9bb9f;
}
.ccd__note b { color: #f6efdc; }
.ccd__inline {
	vertical-align: -4px;
	image-rendering: pixelated;
	background: radial-gradient(circle at 50% 40%, #7d8794 0%, #59616d 78%);
	border: 1px solid #2a2f38;
	border-radius: 4px;
	padding: 1px;
}

@media (max-width: 560px) {
	.ccd__arrow { transform: rotate(90deg); margin-top: 0; }
	.ccd__flow { gap: 6px; }
}


/* ==========================================================
   DYMEK EQ — WZMOCNIENIE KONTRASTU (30.08)

   Reguly `.CiernTip` byly poprawne, ale na stronie postaci dymek
   wychodzil szary na szarym: motyw MyAAC ma wlasne reguly dla tresci
   w `.Content .BoxContent`, ktore wygrywaly specyficznoscia.

   To ta sama lekcja, co przy naprawie kontrastu bestiariusza: przy
   rownej wadze `!important` decyduje SPECYFICZNOSC, wiec zamiast
   dokladac kolejne `!important` na plaskim selektorze, schodzimy na
   ten sam poziom zagniezdzenia co motyw i dopiero tam wymuszamy swoje.
   ========================================================== */

.Content .BoxContent .CiernEqSlot .CiernTip,
.Content .BoxContent .CiernLootName .CiernTip {
	background: #211d18 !important;
	border: 1px solid rgba(224, 180, 95, .65) !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .65) !important;
}
.Content .BoxContent .CiernTip .CiernTip__head strong { color: #ffe9b8 !important; }
.Content .BoxContent .CiernTip .CiernTip__row,
.Content .BoxContent .CiernTip .CiernTip__row span { color: #ded2b6 !important; }
.Content .BoxContent .CiernTip .CiernTip__row b     { color: #ffd77a !important; }
.Content .BoxContent .CiernTip .CiernTip__desc      { color: #b9ac90 !important; }

/* ==========================================================
   TERENY ŁOWIECKIE — lista + mapa świata (30.08)

   Okno mapy pokazuje wycinek 1:1 zamiast całości. Mapa ma 2269 px
   szerokości; wciśnięta w stronę byłaby nieczytelna, a znacznik na niej
   niewidoczny. Przesuwamy więc obrazek pod nieruchomym celownikiem.
   ========================================================== */

.CiernHunt { display: block; }
.CiernHuntIntro h2 { margin: 0 0 6px; color: #f0dcae; font-size: 20px; }
.CiernHuntIntro p { margin: 0 0 4px; color: #3f382c; }
.CiernHuntNote { font-size: 12px; font-style: italic; opacity: .85; }

.CiernHuntGrid {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: 16px;
	margin-top: 14px;
	align-items: start;
}
@media (max-width: 900px) { .CiernHuntGrid { grid-template-columns: 1fr; } }

.CiernHuntFilters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#huntSearch {
	width: 100%; box-sizing: border-box;
	padding: 7px 10px; border-radius: 8px;
	border: 1px solid rgba(224, 180, 95, .45);
	background: #2b2721; color: #efe3c8; font-size: 13px;
}
.CiernHuntLevels, .CiernHuntKinds { display: flex; flex-wrap: wrap; gap: 5px; }
.CiernHuntLvl, .CiernHuntKind {
	padding: 4px 10px; font-size: 12px; cursor: pointer;
	border-radius: 999px; border: 1px solid rgba(224, 180, 95, .4);
	background: rgba(43, 39, 33, .85); color: #cbbb99;
}
.CiernHuntLvl.is-active, .CiernHuntKind.is-active {
	background: linear-gradient(#edcc81, #c48a31); color: #2b2005; font-weight: 700;
	border-color: #edcc81;
}

.CiernHuntList {
	max-height: 560px; overflow-y: auto;
	border: 1px solid rgba(224, 180, 95, .3); border-radius: 10px;
	background: rgba(28, 25, 21, .92);
}
.CiernHuntRow {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	width: 100%; box-sizing: border-box;
	padding: 7px 11px; cursor: pointer; text-align: left;
	background: none; border: 0; border-bottom: 1px solid rgba(224, 180, 95, .12);
	color: #ded2b6; font-size: 13px;
}
.CiernHuntRow:hover { background: rgba(224, 180, 95, .10); }
.CiernHuntRow.is-sel { background: rgba(224, 180, 95, .20); color: #fff0cd; }
.CiernHuntName { display: flex; align-items: center; gap: 7px; }
.CiernHuntBoss {
	font-style: normal; font-size: 10px; letter-spacing: .04em;
	padding: 1px 6px; border-radius: 999px;
	background: rgba(179, 68, 50, .85); color: #ffeae5;
}
.CiernHuntMeta { display: flex; align-items: center; gap: 9px; font-size: 12px; white-space: nowrap; }
.CiernHuntMeta b { color: #ffd77a; }
.CiernHuntEmpty { margin-top: 8px; font-style: italic; color: #8a7f6c; }

.CiernHuntMap {
	position: relative; overflow: hidden;
	width: 100%; height: 560px;
	border: 1px solid rgba(224, 180, 95, .45); border-radius: 10px;
	background: #0d0b09;
}
.CiernHuntMap img {
	position: absolute; left: 0; top: 0;
	max-width: none;                 /* motyw skaluje obrazki — tu tego nie chcemy */
	image-rendering: pixelated;      /* mapa jest rastrowa 1:1, wygładzanie ją rozmywa */
	transition: left .18s ease, top .18s ease;
}
/* Celownik stoi nieruchomo na środku, to mapa się pod nim przesuwa. */
.CiernHuntPin {
	position: absolute; left: 50%; top: 50%;
	width: 26px; height: 26px; margin: -13px 0 0 -13px;
	border: 2px solid #ffd77a; border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 215, 122, .8);
	pointer-events: none;
}
.CiernHuntPin::before, .CiernHuntPin::after {
	content: ''; position: absolute; background: #ffd77a;
}
.CiernHuntPin::before { left: 50%; top: -10px; width: 2px; height: 8px; margin-left: -1px; }
.CiernHuntPin::after  { left: 50%; bottom: -10px; width: 2px; height: 8px; margin-left: -1px; }

.CiernHuntInfo {
	margin-top: 9px; padding: 8px 11px;
	border: 1px solid rgba(224, 180, 95, .3); border-radius: 8px;
	background: rgba(28, 25, 21, .92);
	color: #ded2b6; font-size: 13px;
}
.CiernHuntInfo b { color: #ffd77a; }
.CiernHuntPos { opacity: .7; font-variant-numeric: tabular-nums; }


/* === [Ciern 30.08] Tabele w wiki ===
   Sekcja moze podac pole `table` z `head` i `rows`. Pole jest opcjonalne —
   sekcje bez niego wygladaja tak jak dotad.
   Kontener z przewijaniem w poziomie, zeby szeroka tabela nie rozpychala
   strony na telefonie. */
.Content .BoxContent .CiernWikiTableWrap {
	overflow-x: auto;
	margin: 14px 0 4px;
	border: 1px solid #3a3f45 !important;
	border-radius: 4px;
	background: #1b1f23 !important;
}
.Content .BoxContent .CiernWikiTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	color: #d6dde2 !important;
}
.Content .BoxContent .CiernWikiTable th {
	text-align: left;
	padding: 7px 10px;
	background: #23282d !important;
	color: #f2c14e !important;
	font-weight: bold;
	white-space: nowrap;
	border-bottom: 1px solid #3a3f45 !important;
}
.Content .BoxContent .CiernWikiTable td {
	padding: 6px 10px;
	border-bottom: 1px solid #2a2f34 !important;
	color: #d6dde2 !important;
}
.Content .BoxContent .CiernWikiTable tbody tr:last-child td {
	border-bottom: none !important;
}
.Content .BoxContent .CiernWikiTable tbody tr:nth-child(even) td {
	background: #1f2429 !important;
}


/* ===================== ciern-modern.css ===================== */
/* Ciern OTS — globalny motyw 2026.08.27
   Ciemny portal fantasy: grafit/petrol + bursztyn + kosc sloniowa. */
:root {
  --cm-void: #1f1c17;
  --cm-ink: #2b2721;
  --cm-panel: #3a352c;
  --cm-panel-2: #453f34;
  --cm-panel-3: #524b3e;
  --cm-gold: #e0b45f;
  --cm-gold-hi: #f2cc7d;
  --cm-cyan: #7fc3d6;
  --cm-text: #f5eeda;
  --cm-muted: #c0b49a;
  --cm-line: rgba(224, 180, 95, .46);
  --cm-line-soft: rgba(224, 180, 95, .20);
  --cm-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}

html, body { color: var(--cm-text) !important; }
body { font-family: "Segoe UI", Inter, Arial, sans-serif !important; }
a, a:link, a:visited { color: var(--cm-gold-hi); }
a:hover { color: var(--cm-cyan); }

/* Usuniecie starych lancuchow i bitmapowych ramek. */
.LoginBorder, .SmallBoxBorder, .LeftChain, .RightChain,
.Corner-tl, .Corner-tr, .Corner-bl, .Corner-br,
.Border_1, .Border_2, .Border_3, .Border_4,
.Border_5, .Border_6, .Border_7, .Border_8,
.BorderTitleText + .Border_2, .BorderTitleText ~ .Border_2 {
  background-image: none !important;
}
.LeftChain, .RightChain { display: none !important; }

/* Dwa najwazniejsze CTA po lewej. */
#Loginbox, #DownloadBox {
  position: relative !important;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 92px;
  margin: 0 0 13px !important;
  padding: 11px !important;
  overflow: hidden;
  border: 1px solid var(--cm-line) !important;
  border-radius: 6px;
  background: linear-gradient(155deg, rgba(93, 80, 62, .98), rgba(58, 49, 39, .98)) !important;
  box-shadow: var(--cm-shadow), inset 0 0 0 1px rgba(255,255,255,.035);
}
#LoginTop, #LoginBottom, #DownloadBox .SmallBoxTop, #DownloadBox .SmallBoxBottom,
#Loginbox .LoginBorder, #DownloadBox .SmallBoxBorder { display: none !important; }
#LoginButtonContainer, #DownloadBox .SmallBoxButtonContainer,
#Loginbox .Loginstatus {
  position: static !important;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
}
#LoginButton, #DownloadBox .MediumButtonBackground {
  position: relative !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e0b564;
  border-radius: 4px;
  background: linear-gradient(180deg, #74634c 0%, #504433 52%, #3e3528 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 -3px rgba(210,163,84,.18), 0 4px 12px rgba(0,0,0,.35);
}
#LoginButton:hover, #DownloadBox .MediumButtonBackground:hover {
  border-color: var(--cm-gold-hi);
  background: linear-gradient(180deg, #806e56, #5c4d3b 55%, #463b2d) !important;
}
#LoginButton .Button, #DownloadBox .MediumButtonOver { display: none !important; }
.CiernActionButtonText, #LoginButton #ButtonText, #DownloadBox .MediumButtonText {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  height: 42px !important;
  padding: 0 10px !important;
  color: #fff5df !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px;
  text-align: center;
  text-shadow: 0 2px 3px #000;
  background: none !important;
}
#Loginbox .Loginstatus { padding-top: 7px; }
#LoginstatusText_2 {
  position: static !important;
  width: 100% !important;
  height: 20px !important;
  cursor: pointer;
  background: none !important;
}
.CiernActionSubtext {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  color: var(--cm-muted) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  background: none !important;
}
#LoginstatusText_2_2 { display: none !important; }

/* Menu glowne — tekst zamiast starych obrazkow. */
#Menu { overflow: hidden; border: 1px solid var(--cm-line); border-radius: 6px; background: rgba(55, 47, 37, .96); }
#MenuTop, #MenuBottom { display: none !important; }
.menuitem { margin: 0 !important; }
.MenuButton {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 48px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cm-line-soft) !important;
  background: linear-gradient(180deg, #61523e, #473c2d) !important;
}
.MenuButton:hover { background: linear-gradient(90deg, rgba(210,163,84,.24), rgba(89, 76, 59, .98)) !important; }
.MenuButton .Button { display: none !important; }
.MenuButton .Icon { left: 9px !important; top: 7px !important; transform: scale(.83); transform-origin: center; }
.MenuButton .Lights { display: none !important; }
.MenuButton .Label.CiernMenuLabel {
  position: absolute !important;
  top: 0 !important;
  left: 46px !important;
  display: flex !important;
  align-items: center;
  width: calc(100% - 73px) !important;
  height: 47px !important;
  color: var(--cm-text) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-shadow: 0 2px 2px #000;
  background: none !important;
}
.MenuButton .Extend { right: 9px !important; filter: sepia(1) saturate(.7) hue-rotate(350deg) brightness(1.4); }
.Submenu { border: 0 !important; background: #3a3125 !important; }
.Submenuitem {
  box-sizing: border-box;
  min-height: 31px !important;
  padding: 7px 12px 6px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.035);
  background: #3f3528 !important;
}
.Submenuitem:hover { padding-left: 23px !important; background: linear-gradient(90deg, rgba(210,163,84,.20), #473c2d) !important; }
.SubmenuitemLabel { position: static !important; color: #d7dddd !important; font-size: 11px !important; }
.Submenuitem:hover .SubmenuitemLabel { color: var(--cm-gold-hi) !important; }

/* Wszystkie glowne panele i ich naglowki. */
.Content .Box, .Content #NewsTicker, .Content #FeaturedArticle, .Content #News,
.TableContainer, .CiernWikiPage { box-shadow: var(--cm-shadow); }
.Content .BoxContent, .Content #NewsTicker .BoxContent,
.Content #FeaturedArticle .BoxContent, .Content #News .BoxContent,
.TableContainer .TableContentContainer, .TableContentContainer {
  color: var(--cm-text) !important;
  border-color: var(--cm-line-soft) !important;
  background: linear-gradient(145deg, rgba(87, 75, 58, .98), rgba(61, 52, 41, .98)) !important;
}
.Content .BorderTitleText, .Content .NewsHeadlineBackground,
.TableContainer .CaptionContainer, .TableContainer .CaptionContainer .CaptionInnerContainer,
.CaptionContainer, .CaptionInnerContainer {
  border-color: var(--cm-line) !important;
  background: linear-gradient(180deg, #726049, #4b3f30) !important;
  box-shadow: inset 0 -2px rgba(210,163,84,.16);
}
.Content .BorderTitleText, .Content .NewsHeadlineText,
.Content .NewsHeadlineDate, .Content .NewsHeadlineAuthor,
.CaptionContainer .Text, .TableContainer .CaptionContainer .Text {
  color: var(--cm-gold-hi) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  text-shadow: 0 2px 2px #000;
}
.Content .BoxContent, .Content .BoxContent p, .Content .BoxContent div,
.Content .BoxContent span, .Content .BoxContent td, .Content .BoxContent th,
.Content .BoxContent label { color: inherit; }
.Content .BoxContent a { color: var(--cm-gold-hi) !important; }
.Content .BoxContent a:hover { color: var(--cm-cyan) !important; }

/* Tabele, listy, karty postaci i potworow. */
.TableContent, table.TableContent, .TableContainer table { color: var(--cm-text) !important; background: transparent !important; }
.TableContent td, .TableContent th, .TableContainer td, .TableContainer th {
  border-color: rgba(210,163,84,.14) !important;
}
.Odd, tr.Odd > td, .TableContent tr:nth-child(odd) > td { color: var(--cm-text) !important; background: rgba(74, 63, 49, .96) !important; }
.Even, tr.Even > td, .TableContent tr:nth-child(even) > td { color: var(--cm-text) !important; background: rgba(87, 75, 58, .96) !important; }
.LabelV, .LabelH, .LabelV150, .LabelH150 { color: var(--cm-gold-hi) !important; background: rgba(102, 88, 68, .92) !important; }
.Content img { max-width: 100%; }

/* Formularze i kontrolki. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], select, textarea, .form-control, .form-select {
  color: var(--cm-text) !important;
  border: 1px solid rgba(210,163,84,.42) !important;
  border-radius: 3px !important;
  background: #393024 !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.42) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--cm-gold) !important;
  box-shadow: 0 0 0 2px rgba(210,163,84,.15) !important;
  outline: none !important;
}
button, input[type="submit"], input[type="button"], .btn,
.BigButton, .BigButtonText, .MediumButtonBackground {
  color: #fff5df !important;
  border-color: var(--cm-gold) !important;
  border-radius: 3px !important;
  background-color: #5c4d3b !important;
  background-image: linear-gradient(180deg, #75634b, #493d2e) !important;
  text-shadow: 0 1px 2px #000;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover,
.BigButton:hover, .BigButtonText:hover { color: #fff !important; background-image: linear-gradient(180deg, #7d6e59, #62533f) !important; }

/* Belka statusu i prawa kolumna. */
.Content > .Box:first-child .BorderTitleText { border-radius: 5px; }
.InfoBar { color: var(--cm-text) !important; }
#Themeboxes > div, #Themeboxes .Themebox {
  overflow: hidden;
  border: 1px solid var(--cm-line-soft);
  border-radius: 5px;
  background-color: rgba(63, 54, 42, .95) !important;
}
#Themeboxes img { max-width: 100%; }
.CiernQuickPanel { border-color: var(--cm-gold) !important; }
.CiernPanelTitle { font-size: 14px !important; color: #fff2d7 !important; }
.CiernQuickCard { min-height: 86px !important; }
.CiernQuickIcon, .CiernQuickIcon img { width: 66px !important; height: 66px !important; }
.CiernQuickCard strong { color: #fff !important; font-size: 14px !important; }
.CiernQuickCard small { color: #d2dadb !important; font-size: 10px !important; }

/* Stopka i zaznaczenie. */
::selection { color: #352d22; background: var(--cm-gold); }
#Footer { color: var(--cm-muted) !important; }

@media (max-width: 1080px) {
  #Loginbox, #DownloadBox { width: 180px !important; }
}
@media (max-width: 720px) {
  #Loginbox, #DownloadBox { width: min(360px, 100%) !important; }
  .Content .BoxContent { padding-left: 8px !important; padding-right: 8px !important; }
  .TableContentContainer { overflow-x: auto; }
  .CiernQuickCard { min-height: 76px !important; }
}

/* === Ciern topbar (2026-08-28): statystyki + Power Gamers === */
.ciern-topbar {
	margin: 0 0 10px 0;
	border: 1px solid #836e54;
	border-radius: 6px;
	background: linear-gradient(180deg, #463e34 0%, #3d352b 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	font-family: Verdana, sans-serif;
}
.ciern-topbar-stats {
	display: flex;
	border-bottom: 1px solid #5c4f3e;
}
.ciern-stat {
	flex: 1 1 25%;
	text-align: center;
	padding: 8px 4px 7px;
	border-right: 1px solid #5c4f3e;
	text-decoration: none;
	display: block;
}
.ciern-stat:last-child { border-right: 0; }
a.ciern-stat:hover { background: #50473b; text-decoration: none; }
.ciern-stat-label {
	display: block;
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #9b8a6c;
}
.ciern-stat-value {
	display: block;
	margin-top: 2px;
	font-size: 16px;
	font-weight: bold;
	color: #f0e3c0;
	text-shadow: 0 0 6px rgba(217, 164, 65, 0.35);
}
.ciern-topbar-pg {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	flex-wrap: wrap;
}
.ciern-pg-title {
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #d9a441;
	font-weight: bold;
	white-space: nowrap;
}
.ciern-pg-list {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	flex: 1 1 auto;
}
.ciern-pg-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px;
	border: 1px solid #6c5c46;
	border-radius: 4px;
	background: #4b4338;
	text-decoration: none;
	font-size: 11px;
	color: #e8dcc0;
}
.ciern-pg-item:hover { border-color: #d9a441; text-decoration: none; }
.ciern-pg-rank { color: #d9a441; font-weight: bold; }
.ciern-pg-name { color: #f0e3c0; font-weight: bold; }
.ciern-pg-gain { color: #7fc76a; }
.ciern-pg-empty { font-size: 11px; color: #9b8a6c; }
.ciern-pg-full {
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #9b8a6c;
	text-decoration: none;
	white-space: nowrap;
	margin-left: auto;
}
.ciern-pg-full:hover { color: #d9a441; text-decoration: none; }

/* === Ciern poprawki wizualne 2026-08-28 v2: news, przycisk Pobierz gre, InfoBar === */
/* 1. Pobierz gre: przycisk wycentrowany, bez pustki pod spodem */
#DownloadBox { min-height: 0 !important; display: flex; align-items: center; }
#DownloadBox .SmallBoxButtonContainer { display: flex !important; justify-content: center; align-items: center; }
#DownloadBox .SmallBoxButtonContainer > a { display: block; width: 100%; }
#PlayNowContainer { position: static !important; float: none !important; width: 100% !important; height: auto !important; margin: 0 !important; }

/* 2. News i panele: neutralny grafit zamiast niebieskiego + czytelny tekst */
.Content .BoxContent, .Content #NewsTicker .BoxContent,
.Content #FeaturedArticle .BoxContent, .Content #News .BoxContent,
.TableContainer .TableContentContainer, .TableContentContainer {
  background: linear-gradient(150deg, rgba(77, 72, 64, .98), rgba(59, 53, 45, .98)) !important;
}
.Content .BoxContent td, .Content .BoxContent p, .Content .BoxContent li {
  color: #e7e2d6 !important;
}
.Content .BoxContent strong, .Content .BoxContent b { color: #f0d18a !important; }
.Content .BoxContent td a, .Content .BoxContent p a { color: var(--cm-gold-hi) !important; }
.NewsHeadlineDate { color: #b8af9b !important; }

/* 3. Belka "Pobierz klienta / gracze online": wyrownanie w pionie */
.InfoBar {
  top: 0 !important;
  height: 28px !important;
  margin: 0 8px !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.InfoBar .InfoBarNumbers { top: 0 !important; }
.InfoBar > span[style*="float: right"] {
  float: none !important;
  margin: 0 0 0 auto !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.InfoBarBigLogo { margin-bottom: 0 !important; vertical-align: middle; }

/* === Ciern 2026-08-28 v3: grafit naglowkow sekcji + ciemny kalendarz eventow === */
/* Naglowki sekcji (news itd.): grafit zamiast granatu */
.Content .BorderTitleText, .Content .NewsHeadlineBackground,
.TableContainer .CaptionContainer, .TableContainer .CaptionContainer .CaptionInnerContainer,
.CaptionContainer, .CaptionInnerContainer {
  background: linear-gradient(180deg, #665e53, #413b34) !important;
  box-shadow: inset 0 -2px rgba(210,163,84,.22) !important;
}
.Content .NewsHeadlineDate { color: #b8af9b !important; }
.Content .NewsHeadlineText { color: #f0d18a !important; }

/* Kalendarz Event Schedule: ciemny motyw */
#eventscheduletable {
  background: #3c362d !important;
  border: 1px solid #836e54 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
}
#eventscheduletable td { border: 1px solid #554e45 !important; }
#eventscheduletable tr:first-child td {
  background: #51493f !important;
  color: #d9a441 !important;
  letter-spacing: 1px;
}
#eventscheduletable td#default { background-color: #4c4439 !important; color: #cfd6d8 !important; }
#eventscheduletable td#today {
  background-color: #5f503d !important;
  color: #ffe9b0 !important;
  outline: 1px solid #d9a441;
  outline-offset: -1px;
}
#eventscheduletable td#other_day { background-color: #3a342c !important; color: #766d60 !important; }
#eventscheduletable .day { color: #9b8a6c !important; }
#eventscheduletable td#today .day { color: #ffd66b !important; }
#eventscheduletable .event_name { border-radius: 3px; font-size: 11px; }

/* CIERN WIKI PLACEHOLDER 20260829 */
/* ==========================================================
   Ciern Wiki — dopisek do arkusza szablonu (29.08.2026)
   Kafel zastępczy dla sekcji, które nie mają jeszcze zrzutu z gry.
   Dopisać na końcu basic.css szablonu (albo tam, gdzie reszta
   reguł .CiernWiki*).
   ========================================================== */

.CiernWikiVisual--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 190px;
	background:
		radial-gradient(circle at 50% 40%, rgba(201, 164, 92, .07) 0%, transparent 65%),
		linear-gradient(180deg, #4b4235 0%, #41392e 100%);
	border: 1px solid #5d5447;
	border-radius: 8px;
	position: relative;
}

.CiernWikiVisual--empty::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(201, 164, 92, .14);
	border-radius: 5px;
	pointer-events: none;
}

.CiernWikiVisualMark {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: #6d6356;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
	user-select: none;
}

.CiernWikiVisual--empty figcaption {
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: .06em;
	color: #6f7683;
}