/* Minecraft GUI styling for the page-level screens that appear before the game
   starts (the multiplayer access-code gate and its warnings). Measurements are
   in GUI pixels, scaled by --mc like the game's own interface: a button is
   200x20 GUI px, a text field 200x20 with a 1px #A0A0A0 border, title text is
   white, labels are #A0A0A0, hovered button text is #FFFFA0. The dirt tile is
   a procedural data URL set as --mc-dirt by turn-support.js. */

@font-face {
  font-family: 'Mother Pixel';
  src: url('fonts/PressStart2P-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.mc-screen,
.mc-toast,
.mc-button {
  --mc: 3px;
  --mc-white: #ffffff;
  --mc-text: #e0e0e0;
  --mc-grey: #a0a0a0;
  --mc-dark: #3f3f3f;
  --mc-yellow: #ffffa0;
  --mc-red: #ff5555;
  --mc-button: #8b8b8b;
  --mc-button-hover: #8a96d6;
  box-sizing: border-box;
  color: var(--mc-text);
  font-family: 'Mother Pixel', 'Courier New', Courier, monospace;
  font-size: calc(var(--mc) * 8);
  line-height: calc(var(--mc) * 10);
  text-shadow: var(--mc) var(--mc) var(--mc-dark);
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}
.mc-screen *,
.mc-toast * { box-sizing: border-box; }

/* Full-screen tinted dirt, like every options menu in the game. */
.mc-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: calc(var(--mc) * 8);
  overflow: auto;
  background-color: #2b1d13;
  background-image: var(--mc-dirt, none);
  background-size: calc(var(--mc) * 16) calc(var(--mc) * 16);
}

.mc-form {
  display: grid;
  gap: calc(var(--mc) * 4);
  width: calc(var(--mc) * 200);
  max-width: 100%;
  margin: 0;
}

.mc-title {
  margin: 0 0 calc(var(--mc) * 8);
  color: var(--mc-white);
  font: inherit;
  font-size: calc(var(--mc) * 8);
  text-align: center;
  text-wrap: balance;
}
.mc-text {
  margin: 0;
  color: var(--mc-grey);
}
.mc-text-center { text-align: center; }
.mc-text-small {
  font-size: calc(var(--mc) * 6);
  line-height: calc(var(--mc) * 8);
  text-shadow: calc(var(--mc) * .75) calc(var(--mc) * .75) var(--mc-dark);
  margin-top: calc(var(--mc) * 4);
}
.mc-label {
  display: block;
  margin-top: calc(var(--mc) * 8);
  color: var(--mc-grey);
}

/* GuiTextField: black box, 1px #A0A0A0 border, light grey text, block caret. */
.mc-field {
  display: block;
  width: 100%;
  height: calc(var(--mc) * 20);
  margin: 0;
  padding: 0 calc(var(--mc) * 4);
  border: var(--mc) solid var(--mc-grey);
  border-radius: 0;
  background: #000;
  color: var(--mc-text);
  font: inherit;
  letter-spacing: calc(var(--mc) * 1);
  text-shadow: inherit;
  caret-color: var(--mc-text);
  outline: none;
}
.mc-field:focus { border-color: var(--mc-white); }
.mc-field::placeholder { color: #707070; text-shadow: none; }

.mc-message {
  min-height: calc(var(--mc) * 10);
  margin: 0;
  color: var(--mc-red);
  text-align: center;
}
.mc-message:empty { display: none; }

/* GuiButton: grey stone face, 1px black outline, light top-left / dark
   bottom-right bevel; hover turns the face blue-grey and the text yellow. */
.mc-actions {
  display: grid;
  gap: calc(var(--mc) * 4);
  margin-top: calc(var(--mc) * 4);
}
.mc-button {
  display: block;
  width: 100%;
  height: calc(var(--mc) * 20);
  margin: 0;
  padding: 0 calc(var(--mc) * 2);
  border: var(--mc) solid #000;
  border-radius: 0;
  background-color: var(--mc-button);
  background-image: linear-gradient(#a3a3a3, #8b8b8b 45%, #7a7a7a);
  box-shadow:
    inset var(--mc) var(--mc) 0 #ffffff66,
    inset calc(var(--mc) * -1) calc(var(--mc) * -1) 0 #00000080;
  color: var(--mc-text);
  font: inherit;
  font-family: 'Mother Pixel', 'Courier New', Courier, monospace;
  font-size: calc(var(--mc) * 8);
  line-height: calc(var(--mc) * 10);
  text-align: center;
  text-shadow: var(--mc) var(--mc) var(--mc-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mc-button:hover:not(:disabled),
.mc-button:focus-visible {
  background-color: var(--mc-button-hover);
  background-image: linear-gradient(#a2ace6, #8a96d6 45%, #7580c4);
  color: var(--mc-yellow);
  text-shadow: var(--mc) var(--mc) #3f3f28;
  outline: none;
}
.mc-button:active:not(:disabled) {
  box-shadow:
    inset var(--mc) var(--mc) 0 #00000080,
    inset calc(var(--mc) * -1) calc(var(--mc) * -1) 0 #ffffff66;
}
.mc-button:disabled {
  background-image: linear-gradient(#707070, #5a5a5a);
  color: var(--mc-grey);
  box-shadow: none;
  cursor: default;
}

/* Warnings while the game runs: a small dirt panel at the top of the screen. */
.mc-toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: calc(var(--mc) * 4);
  transform: translateX(-50%);
  width: calc(var(--mc) * 220);
  max-width: calc(100vw - 32px);
  padding: calc(var(--mc) * 4);
  border: var(--mc) solid #000;
  box-shadow: inset var(--mc) var(--mc) 0 #ffffff33, inset calc(var(--mc) * -1) calc(var(--mc) * -1) 0 #00000080;
  background-color: #2b1d13;
  background-image: var(--mc-dirt, none);
  background-size: calc(var(--mc) * 16) calc(var(--mc) * 16);
  font-size: calc(var(--mc) * 6);
  line-height: calc(var(--mc) * 8);
  text-shadow: calc(var(--mc) * .75) calc(var(--mc) * .75) var(--mc-dark);
}
.mc-toast .mc-text { color: var(--mc-white); }
.mc-toast-actions {
  display: grid;
  gap: calc(var(--mc) * 2);
  margin-top: calc(var(--mc) * 4);
}
.mc-toast .mc-button {
  height: calc(var(--mc) * 16);
  font-size: calc(var(--mc) * 6);
  text-shadow: calc(var(--mc) * .75) calc(var(--mc) * .75) var(--mc-dark);
}

.mc-text-error { color: var(--mc-red); }
.mc-title-left { text-align: left; margin-bottom: calc(var(--mc) * 4); }

/* Connection-help panel and other dirt panels with mixed content. */
.mc-panel { width: auto; }
.mc-panel .mc-text {
  margin: 0 0 calc(var(--mc) * 3);
  font-size: calc(var(--mc) * 6);
  line-height: calc(var(--mc) * 8);
  text-shadow: calc(var(--mc) * .75) calc(var(--mc) * .75) var(--mc-dark);
}
.mc-button-small {
  height: calc(var(--mc) * 16);
  font-size: calc(var(--mc) * 6);
  line-height: 1;
  text-shadow: calc(var(--mc) * .75) calc(var(--mc) * .75) var(--mc-dark);
}
.mc-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--mc) * 90), 1fr));
}
.mc-pre {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: calc(var(--mc) * 120);
  margin: calc(var(--mc) * 2) 0 0;
  padding: calc(var(--mc) * 2);
  overflow: auto;
  border: var(--mc) solid var(--mc-grey);
  border-radius: 0;
  background: #000;
  color: var(--mc-text);
  font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace;
  text-shadow: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: none;
}
textarea.mc-pre { height: calc(var(--mc) * 60); }
.mc-details { margin-top: calc(var(--mc) * 3); }
.mc-details summary {
  cursor: pointer;
  color: var(--mc-yellow);
  font-size: calc(var(--mc) * 6);
  line-height: calc(var(--mc) * 8);
  text-shadow: calc(var(--mc) * .75) calc(var(--mc) * .75) var(--mc-dark);
}
.mc-details summary:focus-visible { outline: var(--mc) solid var(--mc-white); outline-offset: 2px; }

@media (max-width: 720px), (max-height: 560px) {
  .mc-screen, .mc-toast, .mc-button { --mc: 2px; }
}
@media (max-width: 440px) {
  .mc-screen { padding: 12px; }
  .mc-form { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-button { transition: none; }
}