:root {
  color-scheme: dark;
  font-family: Georgia, 'Times New Roman', serif;
  --cream: #f6e8b1;
  --ink: #272117;
  --rust: #a94824;
  --rust-dark: #71301f;
  --green: #263b30;
}

* { box-sizing: border-box; }

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

body {
  overflow: hidden;
  color: var(--ink);
  background: #d5bd82;
}

.yard {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  isolation: isolate;
}

.game-bg {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
  transform: none;
  z-index: -1;
}

.game-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(42 31 20 / 12%);
}

.game-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gate {
  position: relative;
  width: min(590px, 100%);
  padding: clamp(30px, 6vw, 56px);
  border: 10px solid #51392a;
  border-radius: 9px 18px 7px 14px;
  background:
    linear-gradient(94deg, transparent 0 49%, rgb(70 42 25 / 24%) 49.3% 50.5%, transparent 51%),
    repeating-linear-gradient(2deg, #d39b50 0 39px, #b87839 41px 44px);
  box-shadow: 0 18px 0 #30291e, 0 28px 45px rgb(22 29 22 / 48%);
  transform: rotate(-.35deg);
}

.gate::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 2px dashed rgb(61 38 23 / 32%);
  pointer-events: none;
}

.bolts { position: absolute; inset: 18px; pointer-events: none; }
.bolts i { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #4b5451; box-shadow: inset 2px 2px #8e9993, 1px 2px 2px #4c2d20; }
.bolts i:nth-child(1) { top: 0; left: 0; }
.bolts i:nth-child(2) { top: 0; right: 0; }
.bolts i:nth-child(3) { bottom: 0; left: 0; }
.bolts i:nth-child(4) { right: 0; bottom: 0; }

.eyebrow { margin: 0 0 5px; color: var(--rust-dark); font: 700 15px/1.2 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 420px; margin: 0; font-size: clamp(34px, 7vw, 57px); line-height: .95; text-wrap: balance; }
.intro { max-width: 430px; margin: 22px 0 30px; font-size: 18px; line-height: 1.45; }
label { display: block; margin-bottom: 7px; font: 700 14px Arial, sans-serif; text-transform: uppercase; }
.password-row { display: flex; gap: 10px; }

input, button {
  min-height: 48px;
  border: 3px solid #30291e;
  border-radius: 4px;
  font: 700 18px Arial, sans-serif;
}

input { min-width: 0; flex: 1; padding: 8px 13px; color: var(--ink); background: var(--cream); box-shadow: inset 3px 3px #c7ad68; }
input:focus { outline: 4px solid rgb(255 244 177 / 65%); outline-offset: 2px; }
button { padding: 8px 17px; color: #fff9d5; background: var(--rust); box-shadow: inset 0 -5px var(--rust-dark); cursor: pointer; }
button:hover { filter: brightness(1.09); transform: translateY(-1px); }
button:active { transform: translateY(2px); box-shadow: inset 0 -2px var(--rust-dark); }
button:disabled { cursor: wait; opacity: .7; }
.status { min-height: 24px; margin: 12px 0 0; color: #702218; font: 700 15px Arial, sans-serif; }
.miel-line { margin: 22px 0 0; color: #533923; font-size: 15px; font-style: italic; }

.scrap { position: absolute; right: 4vw; bottom: 3vh; display: flex; gap: 8px; align-items: end; color: #392f27; font-size: clamp(35px, 6vw, 70px); transform: rotate(7deg); filter: sepia(.5); z-index: -1; }
.scrap span:nth-child(2) { font-size: .7em; transform: rotate(-27deg); }

@media (max-width: 560px) {
  .password-row { flex-direction: column; }
  .gate { padding: 38px 30px; }
  .scrap { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}