/* ===== Flumen World — early 2000s style ===== */

body {
  margin: 0;
  padding: 10px 0 20px;
  background-color: #0b0b0b;
  background-image:
    linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%),
    linear-gradient(45deg, #141414 25%, transparent 25%, transparent 75%, #141414 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  color: #c8c8c8;
  font: 11px/1.5 Verdana, Tahoma, Arial, sans-serif;
}

a { color: #ffb400; }
a:hover { color: #fff; background: #7a3b00; }

p { margin: 0 0 8px; }
.small { font-size: 10px; color: #808080; }
.center { text-align: center; }

#wrap {
  width: 780px;
  max-width: 100%;
  margin: 0 auto;
  background: #1c1c1c;
  border: 1px solid #000;
  outline: 1px solid #3a3a3a;
  box-sizing: border-box;
}

/* ===== header ===== */
#header {
  display: block;
  text-decoration: none;
  padding: 22px 16px 14px;
  text-align: center;
  background: linear-gradient(#3a2200, #120a00 70%, #000);
  border-bottom: 2px solid #ff9c00;
}
.logo {
  font: bold 46px/1 Impact, "Arial Black", sans-serif;
  letter-spacing: 3px;
  color: #ff9c00;
  text-shadow: 2px 2px 0 #000, 0 0 12px #ff6a00;
}
.logo span { color: #fff; text-shadow: 2px 2px 0 #000, 0 0 12px #6af; }
.slogan {
  margin-top: 6px;
  color: #a08a60;
  font-size: 10px;
  letter-spacing: 2px;
}

/* ===== nav ===== */
#nav {
  padding: 5px;
  text-align: center;
  background: linear-gradient(#4a4a4a, #262626);
  border-top: 1px solid #6a6a6a;
  border-bottom: 1px solid #000;
  color: #777;
  font-weight: bold;
}
#nav a {
  color: #eee;
  text-decoration: none;
  padding: 2px 8px;
}
#nav a:hover { color: #000; background: #ff9c00; }
#nav a.active { color: #ff9c00; }

.ticker {
  display: block;
  background: #000;
  color: #7cfc00;
  font: 11px "Courier New", monospace;
  padding: 3px 0;
  border-bottom: 1px solid #333;
}

/* ===== boxes ===== */
.box {
  margin: 12px;
  border: 2px outset #555;
  background: #222;
}
.box-title {
  padding: 3px 8px;
  background: linear-gradient(90deg, #8a4b00, #2a1700);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.box-body { padding: 10px; }

/* ===== games / servers ===== */
.game { margin-bottom: 14px; }
.game-title {
  font: bold 13px Tahoma, Verdana, sans-serif;
  color: #ffd27a;
  border-bottom: 1px dashed #555;
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.game-tag {
  display: inline-block;
  padding: 0 4px;
  background: #ff9c00;
  color: #000;
  font-size: 10px;
  border: 1px outset #ffcc66;
}

.srv {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6px;
  background: #2b2b2b;
  border: 1px solid #000;
}
.srv td {
  padding: 6px 8px;
  border: 1px solid #3c3c3c;
  vertical-align: middle;
}
.srv-name b { color: #fff; }
.srv-status { width: 150px; text-align: center; }
.srv-info { background: #242424; }
.srv-soon { opacity: .8; }
.addr { font-family: "Courier New", monospace; color: #8fb8ff; }

.btn-mini {
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10px;
  text-decoration: none;
  color: #000;
  background: #c0c0c0;
  border: 2px outset #eee;
}
.btn-mini:hover { color: #000; background: #ffd27a; }
.btn-mini:active { border-style: inset; }

/* status badges */
.badge {
  display: inline-block;
  padding: 1px 6px;
  font-weight: bold;
  font-size: 10px;
  border: 1px solid #000;
  white-space: nowrap;
}
.badge-online  { background: #0a4; color: #fff; }
.badge-online::before { content: "\25CF  "; animation: blink 1s steps(1) infinite; }
.badge-offline { background: #a00; color: #fff; }
.badge-wait    { background: #444; color: #aaa; }
.badge-soon    { background: #2050a0; color: #fff; }
.badge-tba     { background: #555; color: #ddd; }
.badge-dev     { background: #ff9c00; color: #000; }

/* players bar */
.bar {
  height: 8px;
  margin-top: 4px;
  background: #111;
  border: 1px inset #444;
}
.bar-fill {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #3c3 0 6px, #191 6px 8px);
  transition: width .5s;
}

.plist { margin-top: 6px; }
.plist summary { cursor: pointer; color: #ffb400; }
.plist table { margin-top: 4px; border-collapse: collapse; width: 100%; }
.plist th, .plist td { padding: 1px 6px; border: 0; text-align: left; }
.plist th { color: #888; font-weight: normal; border-bottom: 1px solid #444; }
.plist tr:nth-child(even) td { background: #2e2e2e; }

/* ===== MMORPG highlight ===== */
.mmo {
  position: relative;
  margin-top: 18px;
  padding: 18px 16px 14px;
  text-align: center;
  color: #e8dcc0;
  background:
    radial-gradient(ellipse at top, rgba(255,156,0,.25), transparent 70%),
    linear-gradient(#2a1a40, #10081c);
  border: 3px double #ffcc33;
  box-shadow: 0 0 14px #ff9c00, inset 0 0 20px #000;
  animation: glow 2.5s ease-in-out infinite alternate;
}
.mmo-title {
  font: bold 30px/1.1 "Times New Roman", Georgia, serif;
  color: #ffcc33;
  text-shadow: 2px 2px 0 #000, 0 0 10px #ff6a00;
  letter-spacing: 1px;
}
.mmo-title span { color: #fff; font-style: italic; }
.mmo-sub {
  margin: 2px 0 10px;
  color: #b39ddb;
  font-style: italic;
}
.mmo p { max-width: 560px; margin: 0 auto 10px; font-size: 12px; }
.mmo-status .badge { margin: 0 3px; font-size: 11px; }
.mmo-ribbon {
  position: absolute;
  top: -10px;
  left: -10px;
  padding: 2px 8px;
  background: #d00;
  color: #ff0;
  font-weight: bold;
  border: 1px solid #000;
  transform: rotate(-10deg);
}

/* ===== buttons ===== */
.btn {
  display: inline-block;
  margin: 4px 0;
  padding: 5px 18px;
  font: bold 12px Tahoma, Verdana, sans-serif;
  text-decoration: none;
  border: 3px outset;
}
.btn:active { border-style: inset; }
.btn-discord { background: #5865f2; color: #fff; border-color: #8891f7; }
.btn-discord:hover { background: #4752c4; color: #fff; }
.btn-youtube { margin-left: 6px; background: #e00; color: #fff; border-color: #ff5a5a; }
.btn-youtube:hover { background: #b00; color: #fff; }
.btn-disabled { background: #555; color: #999; border-color: #777; cursor: not-allowed; }

/* ===== footer ===== */
#footer {
  padding: 10px;
  text-align: center;
  font-size: 10px;
  color: #777;
  border-top: 1px solid #333;
  background: #141414;
}
.buttons88 { margin-bottom: 8px; }
.b88 {
  display: inline-block;
  width: 88px;
  height: 31px;
  box-sizing: border-box;
  padding-top: 3px;
  margin: 0 2px;
  font: bold 9px/12px Verdana, sans-serif;
  vertical-align: middle;
  border: 1px solid #000;
}
.b88-a { background: linear-gradient(#ff9c00, #8a4b00); color: #000; }
.b88-b { background: linear-gradient(#3a6ea5, #0a246a); color: #fff; }
.b88-c { background: linear-gradient(#c00, #500); color: #ff0; }
.b88-d { background: linear-gradient(#090, #030); color: #cfc; }

/* ===== wall of glory ===== */
.glory-intro { color: #a08a60; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-left: 6px;
  border-bottom: 2px solid #ff9c00;
}
.tab {
  padding: 4px 12px;
  font: bold 11px Tahoma, Verdana, sans-serif;
  color: #bbb;
  text-decoration: none;
  background: linear-gradient(#4a4a4a, #2a2a2a);
  border: 2px outset #666;
  border-bottom: 0;
  position: relative;
  top: 2px;
}
.tab:hover { color: #fff; background: linear-gradient(#5a5a5a, #3a3a3a); }
.tab.active {
  color: #000;
  background: linear-gradient(#ffcc66, #ff9c00);
  border-color: #ffd27a;
}

.tab-panel {
  padding: 12px 10px 4px;
  background: #262626;
  border: 1px solid #000;
  border-top: 0;
}

.glory-block { margin-bottom: 14px; }
.glory-block + .glory-block { padding-top: 12px; border-top: 1px dashed #555; }
#glory-sponsors {
  margin: 0 0 14px;
  padding: 10px 8px 2px;
  background: linear-gradient(#2a1a00, #1a1000);
  border: 1px solid #5a3a00;
}
.glory-sponsors-names {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #ffd27a;
  text-shadow: 1px 1px 0 #000;
}
.glory-title {
  font: bold 14px "Times New Roman", Georgia, serif;
  color: #ffcc33;
  text-align: center;
  text-shadow: 1px 1px 0 #000, 0 0 6px #ff6a00;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.glory-table td.glory-empty { padding: 14px 0; text-align: center; color: #888; font-weight: normal; }
.glory-note { padding: 14px 0; text-align: center; font-size: 12px; color: #a08a60; }

.glory-table {
  width: 100%;
  table-layout: fixed; /* same column widths in every season */
  border-collapse: collapse;
  background: #2b2b2b;
  border: 1px solid #000;
}
.glory-table th, .glory-table td {
  padding: 3px 8px;
  border: 1px solid #3c3c3c;
  text-align: left;
}
.glory-table th {
  color: #fff;
  background: linear-gradient(#5a3200, #2a1700);
  font-size: 10px;
  text-transform: uppercase;
}
.glory-table td:first-child, .glory-table th:first-child { width: 28px; text-align: center; }
.glory-table thead th:nth-child(2) { width: 50%; }
.glory-table td { overflow-wrap: anywhere; }
.glory-table tbody tr:nth-child(even) { background: #303030; }
.glory-table tbody tr:hover { background: #3a3020; }

/* top 3 rows: gold / silver / bronze (rank cell is th) */
.glory-table tbody th { width: 28px; text-align: center; font-size: 11px; text-transform: none; background: none; color: inherit; }
.glory-table tbody tr:nth-child(-n+3) { font-weight: bold; }
.glory-table tbody tr:nth-child(1) { color: #ffd700; }
.glory-table tbody tr:nth-child(2) { color: #e0e0e0; }
.glory-table tbody tr:nth-child(3) { color: #e0995e; }
.glory-table tbody tr:nth-child(1) th { background: #8a6d00; color: #fff; }
.glory-table tbody tr:nth-child(2) th { background: #6a6a6a; color: #fff; }
.glory-table tbody tr:nth-child(3) th { background: #7a4a20; color: #fff; }

/* ===== effects ===== */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
@keyframes glow {
  from { box-shadow: 0 0 8px #ff9c00, inset 0 0 20px #000; }
  to   { box-shadow: 0 0 22px #ffcc33, inset 0 0 20px #000; }
}

@media (prefers-reduced-motion: reduce) {
  .blink, .badge-online::before, .mmo { animation: none; }
}