* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 15px/1.45 "Trebuchet MS", Verdana, sans-serif; color: #3b2a14; background: #8fd3f4; overflow-x: hidden; }
.sky { position: fixed; inset: 0; background: linear-gradient(#69c3f0, #bfe9fb 60%, #e7f7d8); z-index: -3; }
.sun { position: absolute; top: 40px; right: 9%; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(#fff6b0, #ffd23f 60%, #ffb800); box-shadow: 0 0 60px 20px rgba(255, 214, 64, .55); }
.cloud { position: absolute; background: #fff; border-radius: 60px; opacity: .92; animation: drift 70s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 55%; height: 140%; left: 12%; top: -60%; }
.cloud::after { width: 40%; height: 120%; right: 12%; top: -45%; }
.c1 { width: 170px; height: 46px; top: 90px; left: -200px; }
.c2 { width: 120px; height: 34px; top: 190px; left: -400px; animation-duration: 95s; }
.c3 { width: 210px; height: 54px; top: 40px; left: -700px; animation-duration: 120s; }
@keyframes drift { to { transform: translateX(calc(100vw + 900px)); } }
.hills { position: fixed; left: -10%; right: -10%; bottom: -60px; height: 42vh; z-index: -2;
  background: radial-gradient(120% 90% at 30% 100%, #6dbb3c 55%, transparent 56%),
              radial-gradient(110% 80% at 80% 100%, #4fa02b 55%, transparent 56%); }
.hills::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px;
  background: repeating-linear-gradient(90deg, #8a5a2b 0 14px, transparent 14px 40px); opacity: .35; }
main { max-width: 520px; margin: 0 auto; padding: 28px 16px 60px; }
header { text-align: center; }
.logo { width: 260px; max-width: 80%; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.tag { margin: 12px 0 18px; font-weight: bold; color: #24496a; text-shadow: 0 1px 0 #fff; }
.card { background: #fffdf3; border: 4px solid #c98b3c; border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 8px 0 #9b6326, 0 14px 24px rgba(0,0,0,.2); margin-bottom: 26px; }
h2 { margin: 0 0 14px; color: #3d7f1d; font-size: 22px; }
label { display: block; margin: 0 0 12px; font-weight: bold; font-size: 14px; }
input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font-size: 15px;
  border: 2px solid #d9b77f; border-radius: 10px; background: #fff; }
input:focus { outline: none; border-color: #4fa02b; box-shadow: 0 0 0 3px rgba(79,160,43,.25); }
.btn { display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font: bold 16px "Trebuchet MS", sans-serif; color: #fff; background: linear-gradient(#7ccf3f, #4b9a22);
  border-radius: 12px; padding: 10px 18px; box-shadow: 0 4px 0 #2f6c12; margin: 4px 0; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #2f6c12; }
.btn.big { width: 100%; font-size: 19px; padding: 13px; }
.btn.alt { width: 100%; background: linear-gradient(#f3b847, #d88a12); box-shadow: 0 4px 0 #9b5f07; }
.link { background: none; border: 0; color: #8a5a2b; text-decoration: underline; cursor: pointer; padding: 10px 0 0; font: inherit; }
a { color: #2f6c12; }
.small { font-size: 12.5px; color: #6f5a3a; font-weight: normal; }
.msg { border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-weight: bold; }
.err { background: #ffe1d6; border: 2px solid #e2795a; color: #8a2a10; }
.farm { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.barn { width: 58px; height: 50px; background: #c8372d; position: relative; border-radius: 3px; flex: none; }
.barn::before { content: ""; position: absolute; left: -6px; right: -6px; top: -22px; height: 24px;
  background: #8e1f18; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.barn::after { content: ""; position: absolute; left: 19px; bottom: 0; width: 20px; height: 26px;
  background: repeating-linear-gradient(45deg, #fff 0 3px, #c8372d 3px 9px); border: 2px solid #fff; }
.farmname { font-size: 19px; font-weight: bold; }
.xp { color: #6f5a3a; }
.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.info div { background: rgba(255,253,243,.9); border-radius: 12px; padding: 10px; font-size: 12.5px; border: 2px solid #c98b3c; }
.info b { display: block; font-size: 13.5px; margin-bottom: 3px; }
@media (max-width: 480px) { .info { grid-template-columns: 1fr; } }
footer { text-align: center; font-size: 11.5px; color: #24400f; margin-top: 22px; }
footer a { color: #24400f; }