@font-face {
  font-family: 'Minecraft';
  src: url('../fonts/Minecraft-font.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body.server-selector {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Minecraft', monospace;
  background: url('../assets/dirt.jpg') repeat;
  background-size: 100px;
  background-attachment: fixed;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.server-selector .panel {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
  border: 4px solid;
  border-color: #373737 #555 #555 #373737;
  border-radius: 4px;
  padding: 20px 24px;
  max-width: 580px;
  width: 90%;
  box-shadow: inset 0 0 0 2px #1a1a1a, 0 4px 12px rgba(0, 0, 0, 0.5);
}

.server-selector h1 {
  font-family: 'Minecraft', monospace;
  font-size: 26px;
  font-weight: normal;
  color: white;
  text-align: center;
  margin: 0 0 12px 0;
  text-shadow: 2px 2px 0 #555;
}

.server-selector hr {
  border: none;
  height: 2px;
  background: #373737;
  margin: 0 0 16px 0;
}

.server-selector .server-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #2a2a2a;
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.server-selector .server-entry:hover {
  background: rgba(60, 60, 60, 0.5);
  border-color: #404040;
}

.server-selector .favicon {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
  border: 2px solid #555;
}

.server-selector .server-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.server-selector .server-info .name {
  font-size: 18px;
  color: white;
}

.server-selector .server-info .motd {
  font-size: 14px;
  color: #ffaa00;
}

.server-selector .server-info .address {
  font-size: 12px;
  color: #8b8b8b;
}

.server-selector .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.server-selector .players {
  font-size: 14px;
  color: white;
}

.server-selector .signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.server-selector .signal span {
  width: 3px;
  background: #55ff55;
  border-radius: 1px;
}

.server-selector .signal span:nth-child(1) { height: 4px; }
.server-selector .signal span:nth-child(2) { height: 7px; }
.server-selector .signal span:nth-child(3) { height: 10px; }
.server-selector .signal span:nth-child(4) { height: 12px; }

.server-selector .connect-area {
  margin-top: 20px;
  text-align: center;
}

.server-selector .mc-button {
  display: inline-block;
  background-image: url('../assets/button-texture.png');
  background-repeat: repeat-x;
  background-size: auto 100%;
  color: white;
  text-decoration: none;
  padding: 12px 32px;
  border: 3px solid #1a1a1a;
  font-family: 'Minecraft', monospace;
  font-size: 16px;
  text-shadow: 2px 2px 0 #1a1a1a;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: color 0.15s, background-image 0.15s;
}

.server-selector .mc-button:hover {
  background-image: url('../assets/button-texture-hover.png');
  color: #ffff9b;
}