/* Black glass + satin gold, shared by the door and the farm page.
   Plain glossy black, no shapes: soft light falling from the top-left across the pane,
   a faint lift at the opposite corner, everything else deep black. */
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 75% 65% at 0% 0%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 75%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 70%),
    linear-gradient(160deg, #141414 0%, #060606 45%, #020202 70%, #0a0a0a 100%);
  background-attachment: fixed;
  color: #d4af37;
  font-family: Arial, sans-serif;
}
/* Phones: iOS ignores fixed backgrounds and can stretch the gradient, so let it sit on the page. */
@media (hover: none) { body { background-attachment: scroll; } }

/* Frosted glass as the whole background: one pane over the black, milky at the top-left, clearing
   through the middle, a faint lift at the bottom-right, and a thin lit edge along the top. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.035) 40%,
    rgba(255, 255, 255, 0.02) 65%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.10);
}

main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.logo { width: 260px; max-width: 70vw; height: auto; display: block; margin: 0 auto 1.2em; }
.farm .logo { width: 420px; max-width: 68vw; }

/* Gold: the logo shape cut out of a satin-gold gradient (the PNG is transparent, so it works as the mask),
   a slow light sweep, a soft glow. */
.halo { filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.18)); }
.gloss {
  position: relative;
  aspect-ratio: 787 / 1200;
  overflow: hidden;
  background: linear-gradient(170deg,
    #8a6d2c 0%, #c9a858 20%, #f1dc9c 36%, #d9bc6c 50%, #b8964a 64%,
    #9a7a34 76%, #dcc078 88%, #f5e6b4 96%, #c9a858 100%);
  -webkit-mask: url(/logo.png) center / contain no-repeat;
          mask: url(/logo.png) center / contain no-repeat;
}
.sheen {
  position: absolute;
  inset: -10% -60%;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.55) 50%, transparent 56%);
  transform: translateX(-60%);
  animation: sweep 6s ease-in-out infinite;
}
@keyframes sweep {
  0%, 55% { transform: translateX(-60%); }
  85%, 100% { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) { .sheen { animation: none; opacity: 0; } }

.label { color: #e3c876; font-size: 0.95em; letter-spacing: 0.3em; margin: 0 0 1.4em; }
form { display: flex; flex-direction: column; gap: 12px; width: 280px; max-width: 80vw; }
input[type="password"] {
  background: rgba(20, 20, 20, 0.85); border: 1px solid #3a3a3a; border-radius: 4px;
  color: #f2f2f2; font-size: 16px; padding: 14px; text-align: center;
}
input[type="password"]:focus { outline: none; border-color: #d4af37; }
button {
  background: linear-gradient(180deg, #e3c876 0%, #c9a858 100%); color: #000; border: 0; border-radius: 4px;
  font-size: 15px; font-weight: bold; letter-spacing: 0.2em; padding: 14px; cursor: pointer;
}
button:hover, button:focus { background: linear-gradient(180deg, #f1dc9c 0%, #d9bc6c 100%); }
.wrong { color: #e0705a; font-size: 0.9em; margin-top: 1em; }