/* Minecraft GUI look. One texture pixel = 2 CSS pixels (GUI scale 2). */
@font-face {
  font-family: "Minecraft";
  src: url("/static/mc/minecraft.ttf") format("truetype");
  font-display: block;
}

:root {
  --text: #ffffff;
  --text-shadow: #3f3f3f;
  --label: #a0a0a0;
  --label-shadow: #282828;
  --field-text: #e0e0e0;
  --error: #ff5555;
  --error-shadow: #3f1515;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  font-family: "Minecraft", monospace;
  font-size: 16px;
  line-height: 18px;
  color: var(--text);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

/* Classic darkened dirt menu background, pre-rendered at its final size. */
html { background: #1f160f url("/static/mc/background.png"); }
/* "You died!"-style red screen for the impostor. */
html.impostor { background-image: url("/static/mc/background_impostor.png"); }

body {
  margin: 0;
  min-height: 100vh;
  text-shadow: 2px 2px 0 var(--text-shadow);
  overflow-x: hidden;
}

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 16px;
}

.title {
  margin: 8px 0 0;
  font-size: 48px;
  line-height: 54px;
  font-weight: normal;
  text-align: center;
  text-shadow: 6px 6px 0 var(--text-shadow);
}

.subtitle {
  margin: -16px 0 0;
  color: #ffff55;
  text-shadow: 2px 2px 0 #3f3f15;
  text-align: center;
}

/* A list area like the options screens: dark textured band between two separators. */
.menu-list {
  width: 100%;
  max-width: 560px;
  padding: 20px 16px;
  background:
    url("/static/mc/header_separator.png") 0 0 repeat-x,
    url("/static/mc/footer_separator.png") 0 100% repeat-x,
    url("/static/mc/menu_list_background.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.form {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label, .label {
  color: var(--label);
  text-shadow: 2px 2px 0 var(--label-shadow);
}
.form label { margin-top: 8px; }

.error {
  margin: 0;
  min-height: 18px;
  color: var(--error);
  text-shadow: 2px 2px 0 var(--error-shadow);
  text-align: center;
}

.error.ok { color: #55ff55; text-shadow: 2px 2px 0 #153f15; }

.hidden { display: none !important; }

/* ---------- widgets ---------- */

button, input, textarea {
  font: inherit;
  line-height: 18px;
  margin: 0;
}

.btn {
  display: block;
  width: 100%;
  max-width: 400px;
  height: 40px;
  padding: 0 8px;
  color: var(--text);
  text-shadow: 2px 2px 0 var(--text-shadow);
  background: none;
  border: 6px solid transparent;
  border-image: url("/static/mc/button.png") 3 fill / 6px stretch;
  image-rendering: pixelated;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn:hover, .btn:focus-visible {
  border-image-source: url("/static/mc/button_highlighted.png");
  outline: none;
}
.btn:disabled {
  border-image-source: url("/static/mc/button_disabled.png");
  color: var(--label);
  text-shadow: none;
  cursor: default;
}
.btn.small { width: 200px; }

.row { display: flex; gap: 8px; }
.row .btn { flex: 1; min-width: 0; }

/* Host settings collapsed: just the buttons, no list background. */
.menu-list.collapsed { background: none; padding: 0; }

.field {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 8px;
  color: var(--field-text);
  caret-color: var(--field-text);
  text-shadow: 2px 2px 0 var(--text-shadow);
  background: none;
  border: 2px solid transparent;
  border-image: url("/static/mc/text_field.png") 1 fill / 2px stretch;
  image-rendering: pixelated;
  outline: none;
  border-radius: 0;
}
.field:focus { border-image-source: url("/static/mc/text_field_highlighted.png"); }
.field::placeholder { color: #808080; text-shadow: none; }
textarea.field {
  height: auto;
  min-height: 168px;
  padding: 8px;
  resize: vertical;
}

/* ---------- round card ---------- */

.card {
  width: 100%;
  max-width: 560px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.card.pop { animation: pop .35s steps(4); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }

.card img {
  width: min(320px, 80vw);
  height: min(320px, 80vw);
  object-fit: contain;
  image-rendering: pixelated;
}

/* Item tooltip, drawn with the in-game tooltip sprite (which overhangs its box by 9px). */
.tooltip {
  display: inline-block;
  margin: 18px;
  padding: 6px 8px;
  border-image: url("/static/mc/tooltip.png") 10 fill / 20px / 18px stretch;
  image-rendering: pixelated;
  font-size: 32px;
  line-height: 36px;
  text-shadow: 4px 4px 0 var(--text-shadow);
}

.card .big {
  margin: 0;
  font-size: 64px;
  line-height: 72px;
  text-shadow: 8px 8px 0 var(--text-shadow);
}
.card .muted { color: var(--label); text-shadow: 2px 2px 0 var(--label-shadow); margin: 0; }

.player-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (max-width: 480px) {
  .title { font-size: 32px; line-height: 36px; text-shadow: 4px 4px 0 var(--text-shadow); }
  .card .big { font-size: 48px; line-height: 54px; text-shadow: 6px 6px 0 var(--text-shadow); }
  .tooltip { font-size: 16px; line-height: 18px; text-shadow: 2px 2px 0 var(--text-shadow); }
}