html, body {
  margin: 0;
  padding: 0;
  background: #0d0602 url("../img/bg_tile.jpg") repeat;
  color: #efe0c0;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  animation: windbg 90s linear infinite;
}
@keyframes windbg {
  from { background-position: 0 0; }
  to { background-position: 480px 80px; }
}
#wind {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  html, body { animation: none; }
  #wind { display: none; }
}
a { color: #e2b44a; text-decoration: none; }
a:hover { color: #ffe9a0; text-decoration: underline; }
img { border: 0; }

table.shell {
  width: 980px;
  margin: 16px auto 32px auto;
  border-collapse: collapse;
  background: #140800;
  border: 2px solid #c9a227;
  outline: 1px solid #5a3a10;
  position: relative;
  z-index: 2;
}
table.shell td { vertical-align: top; }
table.body3 { width: 100%; border-collapse: collapse; }
.col-l {
  width: 176px;
  background: #120700;
  border-right: 1px solid #6a4a18;
  padding: 8px 7px;
}
.col-r {
  width: 196px;
  background: #120700;
  border-left: 1px solid #6a4a18;
  padding: 8px 7px;
}
.col-m {
  padding: 10px 14px 18px 14px;
  background: #1a0c04;
}

.hero-banner {
  height: 220px;
  background: #000 url("../img/header.jpg") center 20% no-repeat;
  background-size: cover;
  position: relative;
  border-bottom: 1px solid #c9a227;
}
.hero-banner .shade {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(12,4,0,.78) 0%, rgba(12,4,0,.18) 46%, rgba(12,4,0,.45) 100%);
}
.brand {
  position: absolute;
  left: 24px;
  top: 52px;
  z-index: 2;
}
.brand h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  letter-spacing: 4px;
  color: #f6e6b8;
  text-shadow: 2px 2px 0 #3a1000, 0 0 8px rgba(201,162,39,.55);
}
.brand h1 span {
  color: #d4a017;
  font-size: 15px;
  letter-spacing: 10px;
  display: block;
  margin-top: 6px;
}
.brand p {
  margin: 10px 0 0 0;
  color: #d8c07a;
  font-size: 11px;
  letter-spacing: 0.5px;
}

table.nav {
  width: 100%;
  border-collapse: collapse;
  background: #5a140c;
  background-image: linear-gradient(#7a2216, #4a100a);
  border-top: 1px solid #e0c060;
  border-bottom: 1px solid #2a0804;
  height: 30px;
}
table.nav td {
  border-right: 1px solid #2a0804;
  border-left: 1px solid #8a3a22;
  text-align: center;
  padding: 0;
  vertical-align: middle;
}
table.nav td:first-child { border-left: 0; }
table.nav td:last-child { border-right: 0; }
table.nav a {
  display: block;
  padding: 7px 0 6px 0;
  color: #f3e2b8;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 0.2px;
  text-decoration: none;
  text-shadow: 1px 1px 0 #1a0400;
}
table.nav a:hover {
  background: #9a2c18;
  color: #fff8dc;
  text-decoration: none;
}
table.nav a.on {
  background: #c9a227;
  color: #2a1004;
  text-shadow: none;
}

.box {
  border: 1px solid #8a6a22;
  background: #160900;
  margin: 0 0 8px 0;
}
.box h3 {
  margin: 0;
  padding: 5px 8px;
  background: #6b1810;
  background-image: linear-gradient(#8a2218, #5a140c);
  border-bottom: 1px solid #c9a227;
  color: #f3e6c4;
  font-size: 11px;
  letter-spacing: 1px;
}
.box .in { padding: 7px; }
.status-line { font-size: 11px; line-height: 1.5; }
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #c9a227;
  background: #7a1a12;
  vertical-align: middle;
  margin-right: 5px;
}
.dot.on {
  background: #3dcc4a;
  box-shadow: 0 0 5px #3dcc4a;
}

.dl-btn {
  display: block;
  width: 148px;
  height: 148px;
  margin: 4px auto 2px auto;
  background: url("../img/download.jpg") center no-repeat;
  background-size: cover;
  text-align: center;
  color: #fff4cc !important;
  font-weight: bold;
  text-decoration: none !important;
  text-shadow: 0 0 6px #000, 1px 1px 0 #4a0000;
  line-height: 148px;
  font-size: 15px;
  letter-spacing: 2px;
  border: 1px solid #c9a227;
}
.dl-btn:hover { filter: brightness(1.12); }

.news, .rankmini, .datagrid {
  width: 100%;
  border-collapse: collapse;
  background: #120800;
  font-size: 11px;
}
.news th, .datagrid th {
  background: #6b1810;
  color: #e8c36a;
  font-size: 11px;
  padding: 5px 6px;
  border: 1px solid #8a6a22;
  text-align: left;
}
.news td, .rankmini td, .datagrid td {
  padding: 5px 6px;
  border: 1px solid #4a3010;
}
.news tr:nth-child(even) td,
.rankmini tr:nth-child(odd) td,
.datagrid tr:nth-child(even) td {
  background: #1c0c06;
}
.badge-new {
  color: #ffe14a;
  font-weight: bold;
  font-size: 10px;
}

.ticker {
  background: #000;
  color: #e8c36a;
  border: 1px solid #6a4a18;
  overflow: hidden;
  white-space: nowrap;
  height: 20px;
  line-height: 20px;
  margin: 0 0 10px 0;
  font-size: 11px;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.zhuang { color: #e8c36a; }
.shao { color: #c9a0ff; }

.thumbs { text-align: center; }
.thumbs a { display: block; margin: 0 0 6px 0; }
.thumbs img {
  width: 170px;
  height: 96px;
  object-fit: cover;
  border: 1px solid #c9a227;
}
.shot {
  width: 100%;
  max-width: 540px;
  border: 1px solid #c9a227;
  display: block;
  margin: 8px 0;
}

.classgrid { width: 100%; border-collapse: collapse; }
.classgrid td { width: 50%; padding: 8px; text-align: center; }
.classgrid img {
  width: 210px;
  height: 280px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid #8a6a22;
  background: #000;
}
.classgrid h4 { margin: 8px 0 4px 0; color: #e8c36a; font-size: 14px; }
.classgrid p { margin: 0; font-size: 11px; line-height: 1.5; }

.faction {
  width: 100%;
  height: 72px;
  background-size: cover;
  background-position: center;
  border: 1px solid #8a6a22;
  margin: 5px 0 0 0;
  position: relative;
}
.faction b {
  position: absolute;
  left: 8px; bottom: 6px;
  color: #fff4cc;
  text-shadow: 1px 1px 2px #000;
  font-size: 13px;
}
.f-zhuang { background-image: url("../img/banner_zhuang.jpg"); }
.f-shao { background-image: url("../img/banner_shao.jpg"); }

.page-title {
  margin: 0 0 8px 0;
  color: #e8c36a;
  font-size: 15px;
  border-bottom: 1px solid #6a4a18;
  padding-bottom: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
}
.muted { color: #a89068; }
.error { color: #d08070; }

.searchrow { margin: 8px 0; }
.searchrow input {
  background: #2a1408;
  border: 1px solid #8a6a22;
  color: #f3e6c4;
  padding: 4px 6px;
  width: 220px;
  font-family: Tahoma, sans-serif;
}
.searchrow button, .pager a, .pager button {
  background: #6b1810;
  border: 1px solid #c9a227;
  color: #f3e6c4;
  padding: 4px 10px;
  font-weight: bold;
  cursor: pointer;
  font-family: Tahoma, sans-serif;
}

.site-foot {
  background: #0a0400;
  border-top: 1px solid #c9a227;
  text-align: center;
  color: #a89068;
  font-size: 10px;
  padding: 10px 8px 12px 8px;
  line-height: 1.5;
}

ul.faq { margin: 0; padding-left: 18px; line-height: 1.7; }
hr.gold { border: 0; border-top: 1px solid #6a4a18; margin: 10px 0; }
p { line-height: 1.55; }

.formgrid { width: 100%; border-collapse: collapse; }
.formgrid td { padding: 4px 6px 4px 0; vertical-align: middle; }
.formgrid input, .formgrid textarea {
  background: #2a1408;
  border: 1px solid #8a6a22;
  color: #f3e6c4;
  padding: 4px 6px;
  font-family: Tahoma, sans-serif;
  width: 96%;
}
.formgrid textarea { height: 80px; width: 96%; }
.auth-col { width: 48%; vertical-align: top; padding: 0 8px 0 0; }
.charcard {
  border: 1px solid #8a6a22;
  background: #120800;
  padding: 8px;
  margin: 0 0 8px 0;
}
.charcard h4 { margin: 0 0 6px 0; color: #e8c36a; }
.st-open { color: #e8c36a; }
.st-answered { color: #7ecb7e; }
.st-closed { color: #a89068; }
.msg {
  border: 1px solid #4a3010;
  margin: 0 0 6px 0;
  padding: 6px 8px;
  background: #120800;
}
.msg.staff { border-color: #c9a227; background: #1c1004; }
.msg .who { font-size: 10px; color: #a89068; margin-bottom: 4px; }

.side-login label { display: block; margin: 4px 0 2px 0; font-size: 11px; }
.side-login input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #2a1408;
  border: 1px solid #8a6a22;
  color: #f3e6c4;
  padding: 3px 4px;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  margin: 0 0 4px 0;
}
.side-login button {
  background: #6b1810;
  border: 1px solid #c9a227;
  color: #f3e6c4;
  padding: 3px 8px;
  font-weight: bold;
  cursor: pointer;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  margin-top: 2px;
}
.side-login .muted { margin-top: 6px; display: block; }

.tabs { margin: 0 0 10px 0; }
.tabs a {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 4px 10px;
  border: 1px solid #8a6a22;
  background: #2a1008;
  color: #e8c36a;
  font-weight: bold;
  font-size: 11px;
  text-decoration: none;
}
.tabs a.on, .tabs a:hover {
  background: #6b1810;
  border-color: #c9a227;
  color: #fff4cc;
  text-decoration: none;
}
.statgrid { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.statgrid td {
  border: 1px solid #8a6a22;
  background: #120800;
  padding: 8px;
  width: 20%;
  text-align: center;
}
.statgrid b { display: block; color: #e8c36a; font-size: 18px; font-family: Georgia, serif; }