@font-face {
  font-family: 'Monocraft';
  src: url('/assets/Monocraft.ttf') format('truetype');
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Monocraft', monospace;
  background: #3b2d1f;
  background-image: repeating-conic-gradient(#3e2f20 0% 25%, #35281b 0% 50%);
  background-size: 64px 64px;
  color: #fff;
  padding: 16px;
  image-rendering: pixelated;
}
.wrap { max-width: 720px; margin: 0 auto; }
.panel {
  background: #c6c6c6;
  border: 4px solid;
  border-color: #ffffff #555555 #555555 #ffffff;
  padding: 12px;
  margin-bottom: 16px;
  color: #3f3f3f;
  box-shadow: 0 0 0 2px #000;
}
.panel h2 {
  font-size: 14px;
  color: #404040;
  margin-bottom: 10px;
  text-transform: lowercase;
}
.motd-box {
  background: #000;
  border: 2px solid;
  border-color: #555 #fff #fff #555;
  padding: 12px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: #aaa;
}
.serverline { font-size: 11px; color: #555; margin-top: 6px; }
.players { display: flex; flex-direction: column; gap: 6px; }
.player {
  display: flex; align-items: center; gap: 10px;
  background: #8b8b8b;
  border: 2px solid;
  border-color: #555 #fff #fff #555;
  padding: 6px 8px;
}
.player img { width: 32px; height: 32px; image-rendering: pixelated; }
.player .pname { flex: 1; font-size: 13px; color: #fff; text-shadow: 2px 2px #3f3f3f; }
.player.offline { opacity: 0.55; }
.bell { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #2b2b2b; cursor: pointer; user-select: none; }
.bell input { width: 16px; height: 16px; accent-color: #3fb950; cursor: pointer; }
#chatfeed {
  background: #000;
  border: 2px solid;
  border-color: #555 #fff #fff #555;
  height: 260px;
  overflow-y: auto;
  padding: 8px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 8px;
}
#chatfeed .t { color: #555; }
#chatfeed .n { color: #55ffff; }
#chatfeed .msg { color: #fff; }
#chatfeed .ev { color: #ffff55; }
.chatrow { display: flex; gap: 6px; }
#chatinput {
  flex: 1;
  font-family: 'Monocraft', monospace;
  font-size: 13px;
  background: #000;
  color: #fff;
  border: 2px solid;
  border-color: #555 #fff #fff #555;
  padding: 8px;
  outline: none;
}
.mcbtn {
  font-family: 'Monocraft', monospace;
  font-size: 12px;
  color: #fff;
  text-shadow: 2px 2px #3f3f3f;
  background: #6c6c6c;
  border: 3px solid;
  border-color: #aaa #2b2b2b #2b2b2b #aaa;
  padding: 8px 14px;
  cursor: pointer;
}
.mcbtn:hover { background: #7f8caf; }
.mcbtn:active { border-color: #2b2b2b #aaa #aaa #2b2b2b; }
.toggles { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #2b2b2b; }
.statusdot { display:inline-block; width:10px; height:10px; margin-right:6px; }
.on { background: #3fb950; } .off { background: #d33; }

/* --- title banner --- */
#water { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; }
body { background: #2d96a8; }
.titlebox {
  position: relative; text-align: center; padding: 26px 12px 20px;
  margin-bottom: 20px; color: #fff;
  font-size: 30px; text-shadow: 3px 3px #2b2b2b;
}
.splash {
  position: absolute; top: 4px; right: 8%; color: #ffff00;
  font-size: 14px; text-shadow: 2px 2px #3f3f00;
  transform: rotate(-15deg);
  animation: splash .4s infinite alternate ease-in-out;
  pointer-events: none;
}
@keyframes splash { from { transform: rotate(-15deg) scale(1); } to { transform: rotate(-15deg) scale(1.13); } }

/* --- server row w/ icon --- */
.servrow { display: flex; gap: 10px; align-items: stretch; }
.servrow img { align-self: stretch; height: auto; width: auto; aspect-ratio: 1/1; min-height: 84px;
  image-rendering: pixelated; border: 2px solid #555; background:#000; }

/* --- whitelist header row --- */
.panelhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.panelhead h2 { margin: 0; }

/* --- slideshow --- */
.slidebox { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden;
  border: 2px solid; border-color: #555 #fff #fff #555; background: #000; }
.slidebox img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.slidebox img.show { opacity: 1; }

/* --- request page --- */
.reqform { display: flex; flex-direction: column; gap: 12px; }
.reqform input[type=text] {
  font-family: 'Monocraft', monospace; font-size: 14px; padding: 10px;
  background: #000; color: #fff; border: 2px solid; border-color: #555 #fff #fff #555; outline: none;
}
.bigbtn { font-size: 15px; padding: 14px; }
.filename { font-size: 11px; color: #2b2b2b; }

/* --- tiled bg image (when present) --- */
body.tiledbg { background-image: url('/assets/bg.png'); background-size: 128px; image-rendering: pixelated; }
body.tiledbg #water { display: none; }

/* --- title image --- */
.titlebox img.titleimg { max-width: 100%; height: auto; image-rendering: pixelated; display: block; margin: 0 auto; }
.titlebox { position: relative; }
.titlebox .splash { top: auto; bottom: 6px; right: 10%; }

/* --- slideshow: slower fade --- */
.slidebox img { transition: opacity 2.5s; }

/* --- inner section divider inside merged panels --- */
.inner-h { font-size: 12px; color: #404040; margin: 12px 0 8px; border-top: 2px solid #999; padding-top: 10px; }

/* --- draggable popup window --- */
#reqwin {
  position: fixed; top: 12%; left: 50%; transform: translateX(-50%);
  width: 340px; max-width: 92vw; z-index: 50;
  background: #c6c6c6; border: 4px solid;
  border-color: #ffffff #555555 #555555 #ffffff;
  box-shadow: 0 0 0 2px #000, 8px 8px 0 rgba(0,0,0,.35);
  display: none;
}
#reqwin.open { display: block; }
#reqwin .winbar {
  display: flex; justify-content: space-between; align-items: center;
  background: #6c6c6c; color: #fff; text-shadow: 2px 2px #3f3f3f;
  padding: 6px 8px; font-size: 12px; cursor: move; user-select: none;
}
#reqwin .winbar button {
  font-family: 'Monocraft', monospace; background: #a00; color: #fff;
  border: 2px solid; border-color: #f88 #500 #500 #f88;
  cursor: pointer; font-size: 11px; padding: 1px 7px;
}
#reqwin .winbody { padding: 12px; color: #3f3f3f; }

/* === revision: bg.gif, splash-on-motd, motd fidelity === */
body.tiledbg { background-image: url('/assets/bg.gif'); background-size: 128px; }
.titlebox { display: none; }
.servrow { position: relative; }
.splash2 {
  position: absolute; bottom: -6px; right: 6px; color: #ffff00;
  font-size: 17px; text-shadow: 2px 2px #3f3f00; z-index: 5;
  transform: rotate(-15deg);
  animation: splash .4s infinite alternate ease-in-out;
  pointer-events: none;
}
.motd-box {
  white-space: pre;            /* never wrap: 2 lines, like in-game */
  overflow-x: hidden;
  font-size: clamp(8px, 2.6vw, 15px);
  line-height: 1.4;
  word-spacing: -0.18em;       /* tighten toward in-game feel */
  letter-spacing: -0.02em;
}

/* === revision 2 === */
/* square close button */
#reqwin .winbar button {
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #6c6c6c; color: #fff;
  border: 2px solid; border-color: #aaa #2b2b2b #2b2b2b #aaa;
}
#reqwin .winbar button:active { border-color: #2b2b2b #aaa #aaa #2b2b2b; }

/* splash: middle of motd's right side, bouncier */
.splash2 {
  bottom: auto; top: 50%; right: 10px;
  font-size: 17px;
  transform: translateY(-50%) rotate(-15deg);
  animation: splash2 .38s infinite alternate ease-in-out;
}
@keyframes splash2 {
  from { transform: translateY(-50%) rotate(-15deg) scale(1); }
  to   { transform: translateY(-50%) rotate(-15deg) scale(1.19); }
}

/* background: base colour + smaller, flipped tiles */
body.tiledbg { background: #477BA9; }
body.tiledbg::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background-image: url('/assets/bg.gif');
  background-size: 96px; image-rendering: pixelated;
  transform: scaleY(-1);
}

/* === revision 3 === */
body.tiledbg::before {
  transform: none;          /* back to normal orientation */
  opacity: 0.55;            /* gif slightly transparent over the blue */
}
.splash2 { animation: splash2 .25s infinite alternate ease-in-out; }
@keyframes splash2 {
  from { transform: translateY(-50%) rotate(-15deg) scale(1); }
  to   { transform: translateY(-50%) rotate(-15deg) scale(1.11); }
}

/* === revision 4 === */
/* one continuous sine-like pulse: smooth curve through both extremes, gentler size range */
.splash2 { animation: splash3 .5s infinite ease-in-out; }
@keyframes splash3 {
  0%, 100% { transform: translateY(-50%) rotate(-15deg) scale(1); }
  50%      { transform: translateY(-50%) rotate(-15deg) scale(1.06); }
}
#reqwin .winbar button { width: 30px; height: 30px; font-size: 13px; }

/* === revision 5 === */
#reqwin .winbar button {
  background: #d33; color: transparent;
  border-color: #f88 #711 #711 #f88;
}
#reqwin .winbar button:active { border-color: #711 #f88 #f88 #711; }

/* === revision 6 === */
#reqwin .winbar button { background: #8e1010; border-color: #c66 #400 #400 #c66; }
#reqwin .winbar button:active { border-color: #400 #c66 #c66 #400; }

/* === revision 7: brighter buttons === */
.mcbtn { background: #828282; border-color: #c8c8c8 #3d3d3d #3d3d3d #c8c8c8; }
.mcbtn:hover { background: #93a0c4; }

/* === revision 8 === */
.serverline { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* === revision 9 === */
#chatfeed .ng { color: #FFAA00; }   /* in-game player names, MOTD gold */