/* ==========================================================
   Minecraft-style server selection screen
   GUI scale: change --s to resize everything (2 = "GUI scale 2")
   ========================================================== */

@font-face {
  font-family: "Mojangles";
  src: url("../fonts/Mojangles.otf") format("opentype");
  font-display: swap;
}

:root {
  --s: 2px;                       /* one Minecraft GUI pixel */
  --ls: 2px;                    /* GUI pixel inside the server list (smaller = smaller rows and text) */
  --ts: 1.75px;                   /* text pixel for header and buttons */
  --bs: 1.5px;                      /* button texture pixel: smaller = finer border (1px = 3px border, 2px = vanilla chunky) */
  --text: #ffffff;
  --text-shadow: #3f3f3f;
  --gray: #808080;
  --disabled: #a0a0a0;
  --green: #55ff55;
  --red: #ff5555;
  --font: "Mojangles", "Minecraft", ui-monospace, "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: calc(9 * var(--ts));  /* Mojangles = 9 px per em, so 1 font pixel = --ts */
  line-height: calc(9 * var(--s));
  color: var(--text);
  text-shadow: var(--s) var(--s) 0 var(--text-shadow);
  -webkit-font-smoothing: none;
  font-smooth: never;
  background: linear-gradient(155deg, #3e9d2f 0%, #7fbf2c 45%, #e6dc3c 100%) fixed;
}

/* ---------- Header ---------- */

.screen__header {
  flex: none;
  height: calc(32 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border-bottom: var(--s) solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1.5px 0 #000;
  position: relative;
  z-index: 1;
}

.screen__title { margin: 0; font: inherit; }

/* ---------- Server list ---------- */

.screen__list {
  --s: var(--ls);
  font-size: calc(9 * var(--s));
  line-height: calc(9 * var(--s));
  text-shadow: var(--s) var(--s) 0 var(--text-shadow);
  flex: 1;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.65);
  padding-top: calc(2 * var(--s));
  padding: 10px;
}

.servers {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(calc(305 * var(--s)), 100%);
}

.server {
  position: relative;
  display: flex;
  gap: calc(3 * var(--s));
  padding: calc(2 * var(--s));
  cursor: pointer;
  outline: none;
}

.server:hover { background: rgba(255, 255, 255, 0.08); }

.server.is-selected,
.server.is-selected:hover {
  background: #000;
  box-shadow: inset 0 0 0 var(--s) #FFF;
}

.server.is-selected:focus-visible,
.server:focus-visible {
  box-shadow: inset 0 0 0 var(--s) #fff;
}

.server__icon {
  /*flex: none;*/
  width: calc(32 * var(--s));
  height: calc(32 * var(--s));
  object-position: center;
/*  image-rendering: ;*/
  object-fit: cover;
  overflow: hidden;
  background:
    conic-gradient(#6b4a2e 25%, #593b22 0 50%, #6b4a2e 0 75%, #593b22 0)
    0 0 / calc(8 * var(--s)) calc(8 * var(--s));
}


.server__info {
  min-width: 0;
  padding-top: var(--s);
  padding-right: calc(24 * var(--s));
}

.server__name,
.server__status {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.server__status { color: var(--gray); text-shadow: var(--s) var(--s) 0 #202020; }
.server[data-state="online"] .server__status  { color: var(--green); text-shadow: var(--s) var(--s) 0 #153f15; }
.server[data-state="offline"] .server__status { color: var(--red);   text-shadow: var(--s) var(--s) 0 #3f1515; }

.server__ping {
  position: absolute;
  top: calc(2 * var(--s));
  right: calc(7 * var(--s));
  width: calc(10 * var(--s));
  height: calc(8 * var(--s));
  /*image-rendering: pixelated;*/
}

/* ---------- Footer ---------- */

.screen__footer {
  flex: none;
  display: flex;
  justify-content: center;
  gap: calc(4 * var(--s));
  padding: calc(10 * var(--s)) calc(8 * var(--s));
  background: rgba(0, 0, 0, 0.45);
  border-top: var(--s) solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 calc(-1 * var(--s)) 0 #000;
}

/* ---------- 9-sliced buttons ----------
   Texture is 200x20 with a 3px border: the corners stay crisp,
   edges and centre stretch, so any width works. */

.mc-button {
  --slice: 3;
  flex: 0 1 calc(100 * var(--s));
  height: calc(20 * var(--s));
  min-width: 0;
  margin: 0;
  padding: var(--s) calc(4 * var(--s)) 0;   /* top pad aligns text like vanilla */
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(var(--slice) * var(--bs)) solid transparent;
  border-image: url("../assets/button.png") var(--slice) fill / calc(var(--slice) * var(--bs)) / 0 stretch;
  background: none;
  /*image-rendering: pixelated;*/
  font: inherit;
  line-height: 1;
  color: var(--text);
  text-shadow: var(--s) var(--s) 0 var(--text-shadow);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}

.mc-button:hover,
.mc-button:focus-visible {
  border-image-source: url("../assets/button_highlighted.png");
}

.mc-button[aria-disabled="true"] {
  border-image-source: url("../assets/button_disabled.png");
  color: var(--disabled);
  text-shadow: var(--s) var(--s) 0 #282828;
  cursor: default;
}