/*VARIABLES*/
:root {
  --blood:      #8b0000;
  --crimson:    #cc1a00;
  --gold:       #c8960c;
  --gold-light: #f0c040;
  --gold-pale:  #fde68a;
  --dark:       #0c0101;
  --dark2:      #130505;
  --board-bg:   #1a0303;
  --post-bg:    #1e0404;
  --text:       #e8d0b0;
  --text-dim:   #a08060;
  --text-muted: #6a4a35;
  --green:      #22cc44;
  --pixel: "Press Start 2P", monospace;
  --mono:  "Share Tech Mono", "Courier New", monospace;
  --retro: "VT323", monospace;
  --serif: "Cinzel", serif;
}

/*RESET*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--dark);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 8px; background: var(--dark2); }
::-webkit-scrollbar-thumb { background: var(--blood); }
::-webkit-scrollbar-thumb:hover { background: var(--crimson); }

body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.gold-rule    { height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent); }
.gold-rule-sm { height: 1px; background: linear-gradient(90deg, transparent 10%, var(--gold) 40%, var(--gold) 60%, transparent 90%); opacity: 0.3; margin: 6px 0; }

@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes levitate    { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-10px) rotate(1.2deg)} }
@keyframes dragfloat   { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-8px) rotate(3deg)} }
@keyframes msgin       { from{opacity:0;transform:translateX(-5px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes scrollmarquee { from{transform:translateX(100vw)} to{transform:translateX(-100%)} }

/*TOP BAR*/
#topbar {
  background: var(--blood);
  border-bottom: 2px solid var(--gold);
  padding: 4px 14px;
  display: flex; justify-content: center; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--gold-pale); letter-spacing: 0.04em;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
#server-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--pixel); font-size: 7px; letter-spacing: 0.07em;
  padding: 3px 9px; border: 1px solid #333; background: #0d0d0d; transition: all 0.3s;
}
#server-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #444; flex-shrink: 0; }
#server-pill.online  { border-color: #224422; color: #88ee88; }
#server-pill.online  .dot { background: var(--green); box-shadow: 0 0 6px var(--green); animation: blink 2s ease-in-out infinite; }
#server-pill.offline { border-color: #442222; color: #ee7777; }
#server-pill.offline .dot { background: #cc3333; }

/*SUB-NAV*/
#subnav {
  background: var(--dark2); border-bottom: 1px solid #260808;
  padding: 0 14px; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
#subnav a {
  font-family: var(--pixel); font-size: 7px; color: var(--text-muted);
  text-decoration: none; padding: 10px 14px;
  border-right: 1px solid #1c0404; white-space: nowrap; letter-spacing: 0.1em;
  transition: all 0.15s; min-height: 44px; display: flex; align-items: center;
}
#subnav a:hover, #subnav a:active { color: var(--gold-pale); background: rgba(139,0,0,.25); }
#subnav a.active { color: var(--gold-light); border-bottom: 2px solid var(--gold); }

/*MARQUEE*/
.marquee-bar {
  background: linear-gradient(90deg,#660000,var(--blood),#660000);
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  padding: 5px 0; overflow: hidden; white-space: nowrap;
}
.marquee-inner {
  display: inline-block; animation: scrollmarquee 40s linear infinite;
  font-family: var(--pixel); font-size: 7px; color: var(--gold-pale); letter-spacing: 0.12em;
}

/*HERO*/
#hero {
  position: relative;
  background: radial-gradient(ellipse at 50% 0%,#3d0000 0%,#1c0000 45%,var(--dark) 100%);
  padding: 44px 20px 34px; text-align: center; overflow: hidden;
}
#hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(139,0,0,.06) 31px,rgba(139,0,0,.06) 32px);
}
.hero-banner {
  width: 100%; max-width: 880px; height: auto; border: 3px solid var(--gold);
  box-shadow: 0 0 40px rgba(200,150,12,.35),0 0 100px rgba(139,0,0,.5);
  image-rendering: pixelated; display: block; margin: 0 auto 28px;
}
.hero-logo {
  width: 148px; height: 148px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 24px rgba(200,150,12,.65));
  display: block; margin: 0 auto 18px; animation: levitate 4.5s ease-in-out infinite;
}

/*TITLE ROW WITH DRAGON HEADS*/
.title-row {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-bottom: 10px; position: relative; z-index: 1;
}
.title-dragon {
  width: 90px; height: 90px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgba(0,0,0,0.9)); flex-shrink: 0;
  animation: dragfloat 3.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
.title-dragon.left  { animation-delay: 0s; }
.title-dragon.right { animation-delay: -1.7s; transform: scaleX(-1); }
.title-dragon.right:hover { transform: scaleX(-1) scale(1.1); }
.title-dragon.left:hover  { transform: scale(1.1); }
.title-center { flex: 0 1 auto; }
.server-title {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(26px,5.5vw,64px); letter-spacing: 0.07em; color: var(--gold-light);
  text-shadow: 0 0 20px rgba(240,192,64,.75),0 0 70px rgba(200,150,12,.35),3px 3px 0 #3a0000;
}
.server-sub {
  font-family: var(--pixel); font-size: clamp(6px,1.2vw,9px);
  color: var(--text-dim); letter-spacing: 0.16em; margin-top: 8px;
}
.hero-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 24px; }
.badge {
  font-family: var(--pixel); font-size: 7px; padding: 5px 12px;
  border: 1px solid var(--gold); color: var(--gold-pale);
  background: rgba(100,10,10,.35); letter-spacing: 0.09em;
  clip-path: polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);
}
.badge.teal  { border-color:#22aaaa; color:#88ffff; background:rgba(0,50,60,.35); }
.badge.green { border-color:#22aa44; color:#88ffaa; background:rgba(0,50,20,.35); }
.badge.blue  { border-color:#2244aa; color:#88aaff; background:rgba(0,20,60,.35); }

.ip-box {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(5,0,0,.7); border: 2px solid var(--gold);
  padding: 12px 22px; margin: 0 auto;
  box-shadow: 0 0 24px rgba(200,150,12,.25),inset 0 0 20px rgba(0,0,0,.5);
  flex-wrap: wrap; justify-content: center;
}
.ip-label { font-family: var(--pixel); font-size: 8px; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 2px; }
.ip-value { font-family: var(--retro); font-size: 28px; color: #fff; letter-spacing: 0.08em; text-shadow: 0 0 12px rgba(255,255,255,.45); }
.copy-btn {
  font-family: var(--pixel); font-size: 7px; padding: 8px 14px;
  background: var(--blood); border: 1px solid var(--gold);
  color: var(--gold-pale); cursor: pointer; letter-spacing: 0.05em;
  transition: all 0.15s; min-height: 44px;
}
.copy-btn:hover  { background: var(--crimson); color: #fff; }
.copy-btn.copied { background: #0e3d0e; border-color: var(--green); color: var(--green); }

/*LAYOUT*/
#main-wrap { max-width: 1300px; margin: 0 auto; padding: 0 8px; }
#content-grid { display: grid; grid-template-columns: 1fr 370px; gap: 8px; padding: 8px 0; }

.board-header {
  display: flex; align-items: center; gap: 12px; padding: 8px 13px;
  background: linear-gradient(90deg,var(--blood),#5a0000);
  border-left: 4px solid var(--gold); border-bottom: 1px solid var(--gold);
  flex-wrap: wrap;
}
.board-header h2 { font-family: var(--pixel); font-size: 9px; color: var(--gold-pale); letter-spacing: 0.12em; text-transform: uppercase; }
.bhr { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-left: auto; }

.panel { background: var(--post-bg); border: 1px solid #2c0808; margin-bottom: 8px; }
.pi    { padding: 13px 15px; }

.tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tile {
  background: var(--board-bg); border: 1px solid #240606;
  border-left: 3px solid var(--crimson); padding: 11px 13px;
}
.tile.gold { border-left-color: var(--gold); }
.tile h3 { font-family: var(--pixel); font-size: 7px; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 8px; text-transform: uppercase; }
.tile p, .tile li { font-family: var(--mono); font-size: 12px; color: var(--text-dim); line-height: 1.75; }
.tile ul { padding-left: 16px; }
.tile li::marker { color: var(--crimson); }
.tile strong { color: var(--gold-pale); }
.tile .big { font-family: var(--retro); font-size: 22px; color: var(--gold-light); line-height: 1.2; }
.tile .big small { font-size: 15px; color: var(--text-dim); }

.rule-list { list-style: none; }
.rule-list li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #200606; font-size: 12.5px; color: var(--text); }
.rule-list li:last-child { border-bottom: none; }
.rn { font-family: var(--pixel); font-size: 7px; color: var(--gold); min-width: 22px; padding-top: 3px; }

/*SIDEBAR*/
.status-box {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; background: #0c0c0c; border: 1px solid #1c1c1c;
  margin-bottom: 6px; transition: all 0.3s;
}
.status-box.online  { background: #060f06; border-color: #1a3a1a; }
.status-box.offline { background: #0f0606; border-color: #3a1a1a; }
.sdot { width: 13px; height: 13px; border-radius: 50%; background: #333; flex-shrink: 0; }
.status-box.online  .sdot { background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 2s infinite; }
.status-box.offline .sdot { background: #dd4444; box-shadow: 0 0 6px #aa2222; }
.slabel { font-family: var(--pixel); font-size: 9px; }
.status-box.online  .slabel { color: #66ee66; }
.status-box.offline .slabel { color: #ee6666; }
.ssub { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.lbtn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 10px 14px; margin-bottom: 7px;
  font-family: var(--pixel); font-size: 8px; letter-spacing: 0.09em;
  text-align: center; text-decoration: none;
  border: 1px solid var(--gold); color: var(--gold-pale);
  background: linear-gradient(135deg,var(--blood) 0%,#3d0000 100%);
  transition: all 0.15s; cursor: pointer; min-height: 44px;
}
.lbtn:hover, .lbtn:active { background: linear-gradient(135deg,var(--crimson),var(--blood)); box-shadow: 0 0 14px rgba(200,150,12,.25); color: #fff; }
.lbtn.discord { border-color:#5865F2; color:#99aaff; background:linear-gradient(135deg,#17173a,#0d0d24); }
.lbtn.discord:hover { background:linear-gradient(135deg,#22225a,#17173a); color:#fff; }
.lbtn.bluemap { border-color:#3388cc; color:#77bbff; background:linear-gradient(135deg,#0a1826,#060f18); }
.lbtn.bluemap:hover { background:linear-gradient(135deg,#0f2440,#0a1826); color:#fff; }
.lbtn.store   { border-color:#886600; color:var(--gold-pale); background:linear-gradient(135deg,#1a1200,#0d0a00); }
.lbtn.store:hover { background:linear-gradient(135deg,#2a1e00,#1a1200); color:#fff; }

/*SLIDESHOW*/
#showcase { grid-column: 1 / -1; }
.view-gal-btn {
  font-family: var(--pixel); font-size: 7px; letter-spacing: 0.1em;
  padding: 5px 12px; background: var(--blood); border: 1px solid var(--gold);
  color: var(--gold-pale); text-decoration: none; white-space: nowrap;
  transition: all 0.15s; margin-left: auto;
}
.view-gal-btn:hover { background: var(--crimson); color: #fff; }
.slideshow-wrap {
  position: relative; background: #080808; border: 1px solid #2c0808;
  display: flex; align-items: center; overflow: hidden;
}
.slide-viewport {
  flex: 1; height: 340px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #050505;
}
.slide-viewport img { max-width: 100%; max-height: 340px; object-fit: contain; display: block; cursor: pointer; }
.slide-btn {
  width: 44px; height: 100%; min-height: 340px;
  background: rgba(139,0,0,.5); border: none;
  color: var(--gold-light); font-size: 18px; cursor: pointer;
  transition: all 0.15s; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.slide-btn:hover { background: rgba(204,26,0,.7); }
.slide-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 3;
}
.slide-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #333; border: 1px solid #555; cursor: pointer; transition: all 0.2s;
}
.slide-dot.active { background: var(--gold-light); border-color: var(--gold); box-shadow: 0 0 6px var(--gold); }
.slide-counter {
  position: absolute; bottom: 28px; left: 52px;
  font-family: var(--pixel); font-size: 6px; color: #888;
  background: rgba(0,0,0,.7); padding: 3px 7px;
  pointer-events: none;
}

/*FEATURED PHOTO*/
#featured-section { grid-column: 1 / -1; display: none; }
.featured-wrap { background: #080808; border: 1px solid #2c0808; padding: 10px; text-align: center; }
.featured-wrap img { max-width: 100%; max-height: 480px; object-fit: contain; cursor: zoom-in; border: 1px solid #2c0808; }

/*CHAT*/
#chat-section { grid-column: 1 / -1; }
.chat-wrap { background: var(--post-bg); border: 1px solid #2c0808; }
#chat-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 11px; background: #0a0a0a; border-bottom: 1px solid #1c0404;
  font-family: var(--pixel); font-size: 6px; color: var(--text-muted); flex-wrap: wrap; gap: 4px;
}
#chat-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #444;
  display: inline-block; margin-right: 6px;
}
#chat-live-dot.live { background: var(--green); box-shadow: 0 0 5px var(--green); animation: blink 1.5s infinite; }
#chat-live-dot.warn { background: #886600; }
#chat-log {
  height: 340px; overflow-y: auto; padding: 8px 11px;
  background: #080808; border-bottom: 1px solid #1c0404;
  font-family: var(--mono); font-size: 13px;
}
#chat-log::-webkit-scrollbar { width: 6px; }
#chat-log::-webkit-scrollbar-thumb { background: #2a0808; }
#chat-empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: #2a2a2a; font-family: var(--pixel); font-size: 8px;
  letter-spacing: 0.1em; text-align: center; padding: 20px;
}
#chat-empty .ce-icon { font-size: 36px; opacity: 0.12; }
#chat-empty .ce-sub  { font-family: var(--mono); font-size: 11px; color: #222; margin-top: 4px; line-height: 1.6; }
.chat-msg {
  padding: 2px 0; border-bottom: 1px solid rgba(40,10,10,.4);
  display: flex; flex-wrap: wrap; gap: 3px; align-items: baseline;
  animation: msgin .2s ease-out; line-height: 1.55;
}
.chat-msg:last-child { border-bottom: none; }
.msg-time { font-size: 10px; color: #444; margin-right: 2px; flex-shrink: 0; }
.msg-src { font-family: var(--pixel); font-size: 6px; padding: 1px 5px; flex-shrink: 0; border: 1px solid; vertical-align: middle; }
.msg-src.ingame { color:#77cc77; border-color:#1e4a1e; background:rgba(20,50,20,.4); }
.msg-src.system { color:#ccaa44; border-color:#4a3a00; background:rgba(40,30,0,.4); }
.msg-name { font-weight: bold; margin-right: 1px; }
.msg-body { color: #ccc; word-break: break-word; flex: 1; min-width: 0; }
.chat-notice {
  padding: 6px 11px; background: rgba(0,0,0,.4); border-top: 1px solid #180404;
  font-family: var(--mono); font-size: 11px; color: var(--text-muted); text-align: center;
}
.chat-notice a { color: var(--gold); text-decoration: none; }
.chat-notice a:hover { text-decoration: underline; }

/*LIGHTBOX*/
#lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.94); z-index: 10000;
  align-items: center; justify-content: center; cursor: zoom-out;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 94vw; max-height: 92vh; border: 2px solid var(--gold); }
#lightbox-close {
  position: fixed; top: 16px; right: 20px;
  font-family: var(--pixel); font-size: 10px; color: var(--gold-pale);
  background: rgba(100,0,0,.7); border: 1px solid var(--gold);
  padding: 6px 12px; cursor: pointer; z-index: 10001;
}

/*FOOTER*/
footer {
  background: var(--dark2); border-top: 2px solid var(--gold);
  padding: 18px 20px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
}
footer strong { font-family: var(--pixel); font-size: 8px; color: var(--gold-light); letter-spacing: 0.1em; }
.foot-links { margin-top: 6px; }
.foot-links a { color: var(--text-muted); text-decoration: none; margin: 0 8px; font-size: 10px; }
.foot-links a:hover { color: var(--gold); }

/*GALLERY PAGE*/
.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px; padding: 8px;
  max-width: 1300px; margin: 0 auto;
}
.gal-card {
  position: relative; background: var(--board-bg);
  border: 1px solid #2c0808; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 9; transition: border-color 0.2s, transform 0.2s;
}
.gal-card:hover { border-color: var(--gold); transform: scale(1.02); z-index: 1; }
.gal-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-card-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139,0,0,0); transition: background 0.2s;
}
.gal-card:hover .gal-card-overlay { background: rgba(139,0,0,.2); }
.gal-card-overlay span {
  font-family: var(--pixel); font-size: 7px; color: transparent;
  border: 1px solid transparent; padding: 5px 10px; transition: all 0.2s;
}
.gal-card:hover .gal-card-overlay span {
  color: var(--gold-pale); border-color: var(--gold); background: rgba(0,0,0,.7);
}
.gal-section-title {
  font-family: var(--pixel); font-size: 8px; color: var(--gold);
  letter-spacing: 0.12em; padding: 14px 8px 6px;
  max-width: 1300px; margin: 0 auto; border-bottom: 1px solid #2c0808;
}
.gal-loader {
  font-family: var(--pixel); font-size: 8px; color: var(--text-muted);
  letter-spacing: 0.1em; padding: 40px; text-align: center;
}

/*ADMIN PANEL*/
.admin-header-bar {
  background: linear-gradient(90deg,#3a0000,#600000,#3a0000);
  border-bottom: 2px solid var(--gold);
  padding: 16px 20px; text-align: center;
}
.admin-header-bar h1 { font-family: var(--pixel); font-size: 11px; color: var(--gold-pale); letter-spacing: 0.15em; margin-bottom: 6px; }
.admin-header-bar p  { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.tab-bar {
  display: flex; background: var(--dark2);
  border-bottom: 1px solid #2c0808; overflow-x: auto;
}
.tab-btn {
  font-family: var(--pixel); font-size: 7px; letter-spacing: 0.1em;
  padding: 12px 18px; cursor: pointer; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all 0.15s; min-height: 44px;
}
.tab-btn:hover  { color: var(--gold-pale); background: rgba(139,0,0,.2); }
.tab-btn.active { color: var(--gold-light); border-bottom-color: var(--gold); }
.tab-panel { display: none; padding: 12px; max-width: 1200px; margin: 0 auto; }
.tab-panel.active { display: block; }

.admin-gal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 8px; padding: 10px 0;
}
.admin-gal-item { background: var(--board-bg); border: 1px solid #2c0808; overflow: hidden; transition: border-color 0.2s; }
.admin-gal-item.is-main    { border-color: var(--gold); box-shadow: 0 0 10px rgba(200,150,12,.3); }
.admin-gal-item.is-disabled { opacity: 0.4; }
.admin-gal-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; cursor: zoom-in; }
.agi-name { font-family: var(--mono); font-size: 9px; color: var(--text-muted); padding: 3px 8px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.agi-tags { padding: 0 8px 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.agi-tag { font-family: var(--pixel); font-size: 5px; padding: 2px 5px; border: 1px solid; }
.agi-tag.main     { color: var(--gold);  border-color: var(--gold);  background: rgba(200,150,12,.1); }
.agi-tag.disabled { color: #cc4444; border-color: #663333; background: rgba(80,0,0,.2); }
.agi-tag.enabled  { color: #66cc66; border-color: #224422; background: rgba(0,50,0,.2); }
.agi-actions { display: flex; gap: 4px; padding: 6px 8px; flex-wrap: wrap; }
.agi-btn {
  font-family: var(--pixel); font-size: 6px; padding: 5px 8px;
  border: 1px solid; cursor: pointer; letter-spacing: 0.05em;
  transition: all 0.15s; min-height: 32px; background: transparent;
}
.agi-btn.set-main    { border-color: var(--gold);  color: var(--gold); }
.agi-btn.set-main:hover   { background: rgba(200,150,12,.2); }
.agi-btn.clear-main  { border-color: #664400; color: #cc8844; }
.agi-btn.clear-main:hover { background: rgba(100,60,0,.2); }
.agi-btn.toggle-on   { border-color: #663333; color: #cc6666; }
.agi-btn.toggle-on:hover  { background: rgba(100,0,0,.3); }
.agi-btn.toggle-off  { border-color: #224422; color: #66cc66; }
.agi-btn.toggle-off:hover { background: rgba(0,60,0,.2); }

.admin-status {
  font-family: var(--mono); font-size: 11px; color: var(--green);
  padding: 6px 10px; background: rgba(0,50,0,.2); border: 1px solid #224422;
  margin: 8px 0; display: none;
}
.admin-status.err  { color: #ff6666; background: rgba(80,0,0,.2); border-color: #553333; }
.admin-status.show { display: block; }

.admin-denied {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 40px 20px; text-align: center;
}
.admin-denied h2 { font-family: var(--pixel); font-size: 14px; color: #440000; margin-bottom: 12px; }
.admin-denied p  { color: var(--text-muted); font-family: var(--mono); font-size: 12px; }
.admin-loader { font-family: var(--pixel); font-size: 7px; color: var(--text-muted); letter-spacing: 0.1em; padding: 30px; text-align: center; }

/*MOBILE*/
@media (max-width: 920px) {
  #content-grid { grid-template-columns: 1fr; }
  #chat-section, #showcase, #featured-section { grid-column: 1; }
}
@media (max-width: 700px) {
  .title-row     { gap: 10px; }
  .title-dragon  { width: 60px; height: 60px; }
  .tile-row      { grid-template-columns: 1fr; }
  .hero-banner   { display: none; }
  .slide-viewport { height: 220px; }
  .slide-viewport img { max-height: 220px; }
  .slide-btn     { width: 36px; min-height: 220px; font-size: 14px; }
  .gal-grid      { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
  .admin-gal-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
  #chat-log      { height: 280px; }
  .ip-value      { font-size: 20px; }
}
@media (max-width: 480px) {
  .title-dragon  { width: 44px; height: 44px; }
  .server-title  { font-size: 22px; }
  .badge         { font-size: 6px; padding: 4px 8px; }
  #topbar        { font-size: 9px; padding: 4px 8px; }
  #subnav a      { padding: 10px 10px; font-size: 6px; }
  .board-header h2 { font-size: 7px; }
  .gal-grid      { grid-template-columns: 1fr 1fr; }
}

/*PLAYER COUNT BOX*/
#player-count-box {
  display: none;
  padding: 5px 13px 8px;
  background: rgba(0,20,0,.3);
}
#player-count-text {
  font-family: var(--pixel); font-size: 7px; color: #55cc55;
  letter-spacing: 0.08em;
}

/*MODLIST PURPLE BUTTON*/
.lbtn.modlist { border-color: #6633aa; color: #cc88ff; background: linear-gradient(135deg, #1a0a2a, #0d0614); }
.lbtn.modlist:hover { background: linear-gradient(135deg, #2a1244, #1a0a2a); color: #fff; }

/*BROWN BADGE (Create Mod)*/
.badge.brown { border-color: #8b5e2a; color: #d4956a; background: rgba(80,40,10,.35); }

/*BANNERS*/
#banner-bar { display: none; }
.banner-item {
  padding: 8px 40px 8px 16px;
  font-family: var(--mono); font-size: 12px; color: #fff;
  position: relative; border-bottom: 1px solid rgba(0,0,0,.2);
  line-height: 1.4;
}
.banner-item:last-child { border-bottom: none; }
.banner-dismiss {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,.5);
  cursor: pointer; font-size: 16px; padding: 4px 8px;
}
.banner-dismiss:hover { color: #fff; }

/*PLAYER HISTORY PAGE*/
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px; padding: 8px; max-width: 1300px; margin: 0 auto;
}
.player-card {
  background: var(--board-bg); border: 1px solid #2c0808;
  padding: 13px; transition: border-color 0.2s;
}
.player-card:hover { border-color: var(--gold); }
.player-card.online { border-color: #224422; }
.player-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid #200606;
}
.player-avatar {
  width: 40px; height: 40px; image-rendering: pixelated;
  border: 1px solid #2c0808; flex-shrink: 0;
}
.player-name {
  font-family: var(--pixel); font-size: 9px; color: var(--gold-pale);
  letter-spacing: 0.06em;
}
.player-badge {
  font-family: var(--pixel); font-size: 5px; padding: 2px 6px;
  border: 1px solid; margin-top: 4px; display: inline-block;
}
.player-badge.online  { border-color: #224422; color: #66ee66; background: rgba(0,50,0,.3); }
.player-badge.offline { border-color: #2c0808; color: var(--text-muted); }
.player-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pstat {
  background: var(--post-bg); border: 1px solid #1a0404;
  padding: 6px 8px;
}
.pstat-label {
  font-family: var(--pixel); font-size: 5px; color: var(--text-muted);
  letter-spacing: 0.08em; margin-bottom: 3px; text-transform: uppercase;
}
.pstat-val {
  font-family: var(--retro); font-size: 18px; color: var(--gold-light);
  line-height: 1;
}
.pstat-val.small { font-size: 14px; }
.pstat-sub { font-family: var(--mono); font-size: 9px; color: var(--text-muted); }

/*ADMIN BANNER MANAGER*/
.banner-list { margin: 10px 0; }
.banner-edit-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; background: var(--board-bg); border: 1px solid #2c0808;
  margin-bottom: 6px; flex-wrap: wrap;
}
.banner-edit-row input[type="text"] {
  flex: 1; min-width: 160px; background: var(--post-bg);
  border: 1px solid #3a0808; color: var(--text);
  padding: 6px 10px; font-family: var(--mono); font-size: 12px; outline: none;
}
.banner-edit-row input[type="text"]:focus { border-color: var(--gold); }
.banner-edit-row input[type="color"] {
  width: 34px; height: 34px; border: 1px solid #3a0808;
  background: none; cursor: pointer; padding: 2px;
}
.banner-toggle {
  font-family: var(--pixel); font-size: 6px; padding: 5px 8px;
  border: 1px solid; cursor: pointer; background: transparent;
  transition: all 0.15s; min-height: 32px;
}
.banner-toggle.on  { border-color: #224422; color: #66cc66; }
.banner-toggle.on:hover  { background: rgba(0,60,0,.2); }
.banner-toggle.off { border-color: #553333; color: #cc6666; }
.banner-toggle.off:hover { background: rgba(80,0,0,.2); }
.banner-del {
  font-family: var(--pixel); font-size: 6px; padding: 5px 8px;
  border: 1px solid #553333; color: #cc6666; cursor: pointer;
  background: transparent; transition: all 0.15s; min-height: 32px;
}
.banner-del:hover { background: rgba(100,0,0,.3); color: #ff8888; }
.add-banner-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.add-banner-input {
  flex: 1; min-width: 200px; background: var(--board-bg);
  border: 1px solid var(--gold); color: var(--text);
  padding: 8px 12px; font-family: var(--mono); font-size: 12px; outline: none;
}
.add-banner-input:focus { border-color: var(--gold-light); }

/*SITE CONFIG FORM*/
.config-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.config-row label { font-family: var(--pixel); font-size: 7px; color: var(--gold); min-width: 200px; }
.config-num {
  width: 80px; background: var(--board-bg); border: 1px solid #3a0808;
  color: var(--text); padding: 8px; font-family: var(--retro);
  font-size: 22px; outline: none; text-align: center;
}
.config-num:focus { border-color: var(--gold); }
.config-toggle-wrap { display: flex; align-items: center; gap: 10px; }

@media (max-width: 700px) {
  .player-grid { grid-template-columns: 1fr; }
  .player-stats { grid-template-columns: 1fr 1fr; }
}

/*BANNERS*/
#banner-container { position: relative; z-index: 100; }
.site-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; font-family: var(--mono); font-size: 12px;
  border-bottom: 1px solid; flex-wrap: wrap; gap: 6px;
  animation: fadeIn 0.3s ease;
}
.site-banner.info    { background:#0a1020; border-color:#224488; color:#88aadd; }
.site-banner.warning { background:#201000; border-color:#664400; color:#ddaa44; }
.site-banner.success { background:#0a2010; border-color:#225522; color:#66bb66; }
.site-banner.danger  { background:#200a0a; border-color:#660022; color:#dd4466; }
.banner-msg   { flex: 1; }
.banner-close { background:none; border:none; color:inherit; cursor:pointer; padding:2px 8px; font-size:14px; opacity:.7; }
.banner-close:hover { opacity:1; }

/*PLAYER HISTORY*/
.player-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 10px; padding: 10px 8px 40px; max-width: 1300px; margin: 0 auto;
}
.player-card {
  background: var(--post-bg); border: 1px solid #2c0808;
  padding: 14px; transition: border-color 0.2s;
}
.player-card:hover { border-color: var(--gold); }
.player-card.hidden-card { display: none; }
.pc-name {
  font-family: var(--pixel); font-size: 9px; color: var(--gold-light);
  letter-spacing: 0.08em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.pc-avatar {
  width: 28px; height: 28px; image-rendering: pixelated;
  border: 1px solid #2c0808;
}
.pc-stat {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 0; border-bottom: 1px solid #1a0404;
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
}
.pc-stat:last-child { border-bottom: none; }
.pc-stat-label { color: var(--text-muted); font-size: 10px; min-width: 100px; }
.pc-stat-val   { color: var(--text); font-weight: bold; }
.pc-last-seen  { font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-top: 8px; }
.player-search-wrap {
  max-width: 500px; margin: 14px auto; padding: 0 8px;
}
#player-search {
  display: block; width: 100%;
  background: var(--board-bg); border: 1px solid var(--gold);
  color: var(--text); padding: 9px 14px;
  font-family: var(--mono); font-size: 13px; outline: none;
}
#player-search:focus { border-color: var(--gold-light); }
.ph-empty {
  text-align: center; padding: 60px 20px;
  font-family: var(--pixel); font-size: 8px; color: var(--text-muted);
  letter-spacing: 0.1em; line-height: 2.4;
}

/*ADMIN BANNER MANAGER*/
.banner-item {
  background: var(--board-bg); border: 1px solid #2c0808;
  padding: 10px 12px; margin-bottom: 6px;
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
}
.banner-item.enabled-true  { border-left: 3px solid var(--green); }
.banner-item.enabled-false { border-left: 3px solid #553333; opacity: .65; }
.banner-item-msg { flex: 1; font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.banner-type-tag {
  font-family: var(--pixel); font-size: 5px; padding: 2px 5px; border: 1px solid;
}
.banner-type-tag.info    { color:#88aadd; border-color:#224488; }
.banner-type-tag.warning { color:#ddaa44; border-color:#664400; }
.banner-type-tag.success { color:#66bb66; border-color:#225522; }
.banner-type-tag.danger  { color:#dd4466; border-color:#660022; }

/*ADMIN ADD BANNER FORM*/
.add-banner-form {
  background: var(--board-bg); border: 1px solid #2c0808; padding: 12px;
  margin-top: 10px;
}
.add-banner-form input[type="text"],
.add-banner-form textarea,
.add-banner-form select {
  background: var(--dark2); border: 1px solid #3a0808;
  color: var(--text); padding: 7px 10px;
  font-family: var(--mono); font-size: 12px; outline: none;
  width: 100%; margin-bottom: 6px;
}
.add-banner-form input[type="text"]:focus,
.add-banner-form textarea:focus,
.add-banner-form select:focus { border-color: var(--gold); }
.add-banner-form select option { background: var(--dark2); }

/*ADMIN PLAYER MANAGER*/
.pm-input-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pm-input {
  flex: 1; min-width: 160px;
  background: var(--dark2); border: 1px solid #3a0808;
  color: var(--text); padding: 7px 10px;
  font-family: var(--mono); font-size: 12px; outline: none;
}
.pm-input:focus { border-color: var(--gold); }
.hidden-player-list { margin-top: 8px; }
.hidden-player-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--board-bg); border: 1px solid #553333;
  padding: 3px 8px; margin: 3px; font-family: var(--mono); font-size: 11px; color: #cc8888;
}
.hidden-player-item button {
  background: none; border: none; color: #cc4444;
  cursor: pointer; font-size: 12px; padding: 0;
}

@media (max-width: 600px) {
  .player-grid { grid-template-columns: 1fr; }
}

/*SCREENSHOT GALLERY BUTTON - teal so it differs from staff*/
.lbtn.gallery { border-color:#22aaaa; color:#55ffff; background:linear-gradient(135deg,#0a2020,#051414); }
.lbtn.gallery:hover { background:linear-gradient(135deg,#0f3030,#0a2020); color:#fff; }

/*ADMIN FLOAT BUTTON - shown when whitelisted*/
#admin-float-btn {
  display:none; position:fixed; bottom:20px; right:20px; z-index:8000;
  font-family:var(--pixel); font-size:7px; letter-spacing:.1em;
  padding:10px 16px; background:var(--blood); border:1px solid var(--gold);
  color:var(--gold-pale); text-decoration:none; cursor:pointer;
  box-shadow:0 0 20px rgba(200,150,12,.3);
  animation:fadeIn .4s ease;
}
#admin-float-btn:hover { background:var(--crimson); color:#fff; }

/*SITE DISABLED OVERLAY*/
#site-disabled-overlay {
  display:none; position:fixed; inset:0; z-index:99999;
  background:rgba(5,0,0,.97);
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px;
}
#site-disabled-overlay.show { display:flex; }
#site-disabled-overlay h1 {
  font-family:var(--serif); font-size:clamp(28px,6vw,56px);
  color:var(--crimson); margin-bottom:16px;
  text-shadow:0 0 30px rgba(204,26,0,.5);
}
#site-disabled-overlay .dis-reason {
  font-family:var(--mono); font-size:14px; color:var(--text-dim);
  max-width:600px; line-height:1.8; margin-bottom:12px;
}
#site-disabled-overlay .dis-sub {
  font-family:var(--pixel); font-size:7px; color:var(--text-muted);
  letter-spacing:.12em; margin-top:20px;
}
#site-disabled-overlay .dis-schedule {
  font-family:var(--mono); font-size:11px; color:#554433;
  margin-top:8px;
}

/*ENHANCED BANNERS*/
.site-banner {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; font-family:var(--mono); font-size:13px;
  border-bottom:1px solid; flex-wrap:wrap; gap:6px;
  animation:fadeIn .3s ease; position:relative;
}
.site-banner.center-text { justify-content:center; text-align:center; }
.site-banner.info    { background:#0a1020; border-color:#224488; color:#88aadd; }
.site-banner.warning { background:#201000; border-color:#664400; color:#ddaa44; }
.site-banner.success { background:#0a2010; border-color:#225522; color:#66bb66; }
.site-banner.danger  { background:#200a0a; border-color:#660022; color:#dd4466; }
.site-banner.custom  { }
.banner-msg   { flex:1; }
.site-banner.center-text .banner-msg { text-align:center; }
.banner-close {
  background:none; border:none; color:inherit; cursor:pointer;
  padding:2px 8px; font-size:16px; opacity:.6; flex-shrink:0;
}
.banner-close:hover { opacity:1; }

/*CHAT DISABLED NOTICE*/
#chat-disabled-notice {
  display:none; padding:20px; background:#0a0808;
  border-bottom:1px solid #1c0404; text-align:center;
}
#chat-disabled-notice p {
  font-family:var(--pixel); font-size:8px; color:#553333;
  letter-spacing:.1em; margin-bottom:6px;
}
#chat-disabled-notice .cdr {
  font-family:var(--mono); font-size:12px; color:#443333;
}

/*ADMIN - BANNER EDITOR*/
.banner-editor-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px;
}
@media(max-width:700px){ .banner-editor-grid{grid-template-columns:1fr;} }
.be-field { display:flex; flex-direction:column; gap:4px; }
.be-label { font-family:var(--pixel); font-size:6px; color:var(--gold); letter-spacing:.08em; }
.be-input, .be-select, .be-textarea {
  background:var(--dark2); border:1px solid #3a0808;
  color:var(--text); padding:7px 10px;
  font-family:var(--mono); font-size:12px; outline:none; width:100%;
}
.be-input:focus, .be-select:focus, .be-textarea:focus { border-color:var(--gold); }
.be-textarea { resize:vertical; min-height:60px; }
.be-select option { background:var(--dark2); }
.be-preview {
  padding:10px 14px; margin-top:6px; font-family:var(--mono);
  font-size:13px; border:1px solid; display:flex; align-items:center; gap:8px;
}

/*ADMIN - SITE DISABLE MANAGER*/
.disable-schedule-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--board-bg); border:1px solid #2c0808; margin-bottom:6px;
  font-family:var(--mono); font-size:11px; color:var(--text-dim); flex-wrap:wrap;
}
.ds-time { color:var(--gold); font-family:var(--pixel); font-size:6px; }
.ds-reason { flex:1; }
.ds-del { background:none; border:1px solid #553333; color:#cc4444; cursor:pointer; padding:3px 8px; font-family:var(--pixel); font-size:6px; }

/*ADMIN - GALLERY UPLOAD*/
.gal-upload-area {
  border:2px dashed #3a0808; background:var(--board-bg);
  padding:30px 20px; text-align:center; cursor:pointer; transition:all .2s;
}
.gal-upload-area:hover, .gal-upload-area.drag-over {
  border-color:var(--gold); background:rgba(139,0,0,.15);
}
.gal-upload-area p { font-family:var(--pixel); font-size:8px; color:var(--text-muted); letter-spacing:.1em; }
.gal-upload-queue {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:6px; margin-top:8px;
}
.gal-upload-item { position:relative; background:var(--board-bg); border:1px solid #2c0808; }
.gal-upload-item img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.gal-upload-item .uqi-name { font-family:var(--mono); font-size:8px; color:var(--text-muted); padding:2px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gal-upload-item .uqi-rm { position:absolute; top:3px; right:3px; background:rgba(139,0,0,.8); border:none; color:#fff; width:18px; height:18px; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; }
.gal-upload-progress { font-family:var(--mono); font-size:11px; color:var(--text-dim); padding:6px 0; display:none; }
.gal-progress-bar { height:4px; background:#1a0404; border:1px solid #3a0808; margin-top:4px; }
.gal-progress-fill { height:100%; background:var(--gold); width:0%; transition:width .3s; }