html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Subtle ambient Minecraft atmosphere. These fixed decorations do not take
   up layout space, capture input, or change the position of page content. */
body::before {
  content: "";
  position: fixed;
  z-index: 35;
  right: -10px;
  bottom: 12vh;
  width: 38px;
  height: 76px;
  pointer-events: none;
  image-rendering: pixelated;
  background:
    linear-gradient(#182d18 0 0) 9px 42px / 7px 34px no-repeat,
    linear-gradient(#182d18 0 0) 22px 42px / 7px 34px no-repeat,
    linear-gradient(#183718 0 0) 4px 18px / 30px 42px no-repeat,
    linear-gradient(#0d210e 0 0) 9px 28px / 7px 9px no-repeat,
    linear-gradient(#0d210e 0 0) 22px 28px / 7px 9px no-repeat,
    linear-gradient(#0d210e 0 0) 15px 42px / 8px 10px no-repeat,
    linear-gradient(#3d8a22 0 0) 4px 18px / 30px 42px no-repeat;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35));
  animation: arena-creeper-peek 7s ease-in-out infinite;
}

body::after {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle, rgba(125, 211, 92, .7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(79, 214, 224, .45) 0 1px, transparent 1.5px);
  background-position: 12% 22%, 82% 68%;
  background-size: 137px 181px, 211px 233px;
  animation: arena-particles-drift 16s linear infinite;
}

@keyframes arena-creeper-peek {
  0%, 48%, 100% { transform: translateX(0); opacity: .8; }
  56% { transform: translateX(-28px); opacity: 1; }
  65% { transform: translateX(-28px) translateY(-4px); opacity: 1; }
  74% { transform: translateX(0); opacity: .8; }
}

@keyframes arena-particles-drift {
  from { background-position: 12% 22%, 82% 68%; }
  to { background-position: 16% 18%, 78% 72%; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}

.arena-mob-popup {
  position: fixed;
  z-index: 2;
  width: var(--mob-size, 58px);
  height: auto;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
  opacity: 0;
  will-change: transform, opacity;
  animation: mob-pop var(--mob-duration, 1.9s) cubic-bezier(.22,.8,.28,1) forwards;
}

@keyframes mob-pop {
  0% { opacity: 0; transform: translate3d(var(--mob-x), 34px, 0) scale(.45) rotate(var(--mob-rotate)); }
  18% { opacity: 1; transform: translate3d(var(--mob-x), -8px, 0) scale(1.05) rotate(var(--mob-rotate)); }
  36% { transform: translate3d(var(--mob-x), 3px, 0) scale(.98) rotate(var(--mob-rotate)); }
  52% { transform: translate3d(var(--mob-x), 0, 0) scale(1) rotate(0deg); }
  78% { opacity: .9; transform: translate3d(var(--mob-x), -4px, 0) scale(1) rotate(var(--mob-rotate)); }
  100% { opacity: 0; transform: translate3d(var(--mob-x), -22px, 0) scale(.86) rotate(var(--mob-rotate)); }
}

@media (max-width: 600px) {
  .arena-mob-popup { width: min(var(--mob-size, 58px), 14vw); }
}

@media (prefers-reduced-motion: reduce) {
  .arena-mob-popup { display: none; animation: none; }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}