/* MakiCraft retro panel */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: #f0f0f0;
  min-height: 100vh;
  image-rendering: pixelated;
  background-color: #2b1d10;
}

/* Tiled backgrounds via CSS gradients mimicking dirt/stone */
.dirt {
  background-image:
    radial-gradient(rgba(0,0,0,.25) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(135deg, #6b4a2b 0%, #5a3e23 100%);
  background-size: 8px 8px, 12px 12px, 100% 100%;
}
.stone {
  background-image:
    radial-gradient(rgba(0,0,0,.3) 1px, transparent 1px),
    linear-gradient(180deg, #5a5a5a 0%, #444 100%);
  background-size: 6px 6px, 100% 100%;
}

h1, h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  margin: 0 0 12px 0;
  color: #ffdc55;
  text-shadow: 2px 2px 0 #3e2a00;
  letter-spacing: 1px;
}
h1 { font-size: 18px; }

/* Header */
.mc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 4px solid #1a1205;
  background: rgba(0,0,0,.35);
}
.mc-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  color: #ffdc55;
  text-shadow: 3px 3px 0 #3e2a00;
}
.mc-subtitle {
  flex: 1;
  font-size: 20px;
  color: #c7f3ff;
  opacity: .9;
}
.mc-nav { display: flex; gap: 8px; }

.mc-footer {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  color: #d0d0d0;
  border-top: 4px solid #1a1205;
  background: rgba(0,0,0,.35);
}

/* MC-style panel */
.panel {
  background: #c6c6c6;
  color: #202020;
  padding: 14px 16px;
  border: 4px solid #000;
  box-shadow:
    inset -4px -4px 0 0 #555,
    inset  4px  4px 0 0 #fff;
  position: relative;
}
.panel h2 { color: #3b3b3b; text-shadow: 1px 1px 0 #fff; }
.panel-subtitle { font-size: 16px; color: #666; margin: -6px 0 8px 0; font-family: 'VT323', monospace; }

/* Buttons */
.mc-btn, .mc-btn-sm {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  padding: 10px 14px;
  color: #fff;
  background: #6b8f3c;
  border: 3px solid #000;
  box-shadow:
    inset -3px -3px 0 0 #3f5a1c,
    inset  3px  3px 0 0 #9fc56a;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  display: inline-block;
}
.mc-btn-sm { font-size: 9px; padding: 6px 10px; }
.mc-btn:hover, .mc-btn-sm:hover { filter: brightness(1.08); }
.mc-btn:active, .mc-btn-sm:active {
  box-shadow:
    inset  3px  3px 0 0 #3f5a1c,
    inset -3px -3px 0 0 #9fc56a;
}

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.preset-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* Grid layout */
.grid {
  display: grid;
  gap: 14px;
  padding: 14px;
  grid-template-columns: repeat(12, 1fr);
}
.tile-status  { grid-column: span 4; }
.tile-players { grid-column: span 4; }
.tile-chat    { grid-column: span 4; grid-row: span 2; }
.tile-world   { grid-column: span 4; }
.tile-events  { grid-column: span 4; }
.tile-map     { grid-column: span 6; }
.tile-backup  { grid-column: span 6; }
@media (max-width: 900px) {
  .grid > section { grid-column: span 12 !important; grid-row: auto !important; }
}

.admin-grid {
  display: grid;
  gap: 14px;
  padding: 14px;
  grid-template-columns: repeat(12, 1fr);
}
.admin-grid > .panel { grid-column: span 6; }
.admin-grid > .panel.wide { grid-column: span 12; }
@media (max-width: 900px) {
  .admin-grid > .panel { grid-column: span 12; }
}

/* Key-value lists */
.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.kv dt { color: #555; }
.kv dd { margin: 0; color: #111; }

/* Status dot */
.status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dot {
  width: 14px; height: 14px; border: 2px solid #000;
  background: #888;
}
.dot.online { background: #55dd33; box-shadow: 0 0 6px #55dd33; }
.dot.offline { background: #cc2222; }

/* Player sparkline */
#player-sparkline {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 50px;
  margin-top: 10px;
  border: 2px solid #000;
  background: #0a0a0a;
  image-rendering: pixelated;
}

/* NAS backup status dot */
.nas-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  vertical-align: middle;
  margin-left: 4px;
}
.nas-dot.ok { background: #55dd33; }
.nas-dot.stale { background: #ffaa00; }
.nas-dot.missing { background: #cc6600; }
.nas-dot.dangerous { background: #cc2222; }
.nas-dot.error { background: #cc2222; }
.nas-dot.unknown { background: #888; }

/* Player list */
.player-list { list-style: none; padding: 0; margin: 0; max-height: 260px; overflow-y: auto; }
.player-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 2px;
  border-bottom: 1px dashed #888;
}
.player-list li:last-child { border-bottom: none; }
.player-list img {
  width: 32px; height: 32px;
  image-rendering: pixelated;
  border: 2px solid #000;
}
.player-list .name { font-size: 22px; color: #000; }

/* Chat */
.chat {
  background: #0a0a0a;
  color: #f0f0f0;
  padding: 10px;
  height: 460px;
  overflow-y: auto;
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 0 #222, inset -3px -3px 0 0 #555;
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.25;
}
.chat .msg { margin: 0; }
.chat .name { color: #ffdc55; }
.chat .time { color: #888; font-size: 16px; }
.chat .sys { color: #87cefa; }

/* Events */
.events { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow-y: auto; font-size: 20px; }
.events li { padding: 3px 0; border-bottom: 1px dotted #888; }
.events li:last-child { border-bottom: none; }
.events .kind { display: inline-block; width: 88px; font-size: 10px; font-family: 'Press Start 2P', monospace; }
.events .kind.join { color: #2a8f2a; }
.events .kind.leave { color: #8a8a8a; }
.events .kind.death { color: #cc2222; }
.events .kind.advancement { color: #d89b10; }

/* Map placeholder */
.map-link { display: block; text-decoration: none; }
.map-placeholder {
  height: 220px;
  display: flex; align-items: center; justify-content: center;
  background: #3b5a2a;
  border: 3px solid #000;
  color: #ffdc55;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  box-shadow: inset 3px 3px 0 0 #77a04c, inset -3px -3px 0 0 #1e3812;
}

/* Console output */
.console {
  background: #0a0a0a;
  color: #9dff7a;
  padding: 10px;
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 0 #222, inset -3px -3px 0 0 #555;
  font-family: 'VT323', monospace;
  font-size: 18px;
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 8px 0 0 0;
}
.console.tall { max-height: 420px; }

/* RCON form */
.rcon-form { display: flex; gap: 6px; }
.rcon-form input {
  flex: 1; font-family: 'VT323', monospace; font-size: 20px;
  padding: 6px 10px; border: 3px solid #000; background: #e8e8e8;
}

/* Login page */
.centered { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-panel { min-width: 320px; }
.login-panel form { display: grid; gap: 10px; }
.login-panel label { display: grid; gap: 4px; font-size: 14px; font-family: 'Press Start 2P', monospace; color: #222; }
.login-panel input {
  font-family: 'VT323', monospace; font-size: 22px;
  padding: 6px 10px; border: 3px solid #000; background: #e8e8e8;
}
.err { color: #cc2222; min-height: 1.4em; }

/* Mods table */
table.mods { width: 100%; border-collapse: collapse; }
table.mods th, table.mods td { text-align: left; padding: 4px 8px; border-bottom: 1px dashed #888; font-size: 18px; }
table.mods th { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #333; }

/* Announcements list */
.ann-list { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; }
.ann-list li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; border-bottom: 1px dotted #888; font-size: 18px; }
.ann-list li:last-child { border-bottom: none; }
.ann-list .ann-time { color: #888; min-width: 60px; font-size: 16px; }
.ann-list .ann-player { color: #3b5a2a; font-weight: bold; min-width: 80px; }
.ann-list .ann-text { flex: 1; color: #222; word-break: break-word; }
.ann-list .ann-del { background: none; border: 2px solid #000; color: #cc2222; cursor: pointer; font-family: 'Press Start 2P', monospace; font-size: 8px; padding: 4px 6px; box-shadow: inset -2px -2px 0 0 #5a1111, inset 2px 2px 0 0 #ffaaaa; }
.ann-list .ann-del:hover { filter: brightness(1.2); }
.ann-list .ann-del:active { box-shadow: inset 2px 2px 0 0 #5a1111, inset -2px -2px 0 0 #ffaaaa; }

/* WS indicator */
.ws-off { color: #cc2222; }
.ws-on { color: #55dd33; }

.muted { color: #777; }

/* Mobile: move nav to footer, hide header nav */
@media (max-width: 600px) {
  .mc-nav { display: none; }
  #footer-admin-btn { display: inline-block; }
}
@media (min-width: 601px) {
  #footer-admin-btn { display: none; }
}