/* One loading screen for the sign-in check (play.html) and the farm (farm.html), the same on both pages so it reads as one:
   the farm illustration, darkened, with the logo in the middle, one slim bar, the step it is on and a tip that changes. */
.farm-loading.loading,.farm-loading.loading-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;min-height:100svh;padding:24px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));overflow:hidden;text-align:center;color:#fffdf2;background:#27402b url('/assets/farm-welcome.webp') center/cover no-repeat;isolation:isolate;transition:opacity .45s ease}
.farm-loading::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 42%,#18301f66,#0e1c15d9 72%),linear-gradient(180deg,#0e1c1533,#0e1c15b3)}
.farm-loading .farm-loading-stage{display:flex;flex-direction:column;align-items:center;width:min(100%,380px);animation:farm-stage-arrive .5s ease-out both}
.farm-loading .farm-loading-logo{display:block;width:min(300px,72vw);height:auto;aspect-ratio:1;object-fit:contain;margin:-28px 0 -34px;filter:drop-shadow(0 14px 26px #00000080);animation:farm-logo-breathe 3.4s ease-in-out infinite}
.farm-loading .farm-loading-progress{width:min(100%,320px);margin-top:14px}
.farm-loading progress{display:block;width:100%;height:8px;border:0;border-radius:99px;overflow:hidden;background:#ffffff2e;appearance:none;-webkit-appearance:none;box-shadow:inset 0 0 0 1px #ffffff1a}
.farm-loading progress::-webkit-progress-bar{background:#ffffff2e;border-radius:99px}
.farm-loading progress::-webkit-progress-value{border-radius:99px;background:linear-gradient(90deg,#e9b53f,#ffe08a);transition:width .5s ease-out}
.farm-loading progress::-moz-progress-bar{border-radius:99px;background:linear-gradient(90deg,#e9b53f,#ffe08a)}
.farm-loading .farm-loading-status{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 2px 0;color:#fffdf2eb;font:600 13.5px/1.4 'DM Sans',sans-serif;text-shadow:0 1px 3px #0000008c}
.farm-loading #load-percent,.farm-loading #loading-percent{flex:none;color:#ffe08a;font-weight:800;font-variant-numeric:tabular-nums}
.farm-loading .farm-loading-tip{display:flex;align-items:center;gap:10px;max-width:100%;min-height:46px;margin:30px 0 0;padding:7px 16px 7px 7px;border:1px solid #ffffff24;border-radius:999px;background:#0e1c1566;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fffdf2e6;font:500 13px/1.4 'DM Sans',sans-serif;text-align:start;text-wrap:pretty;transition:opacity .35s ease}
.farm-loading .farm-loading-tip img{flex:none;width:32px;height:32px;padding:3px;border-radius:50%;background:#fffdf2;object-fit:contain;box-sizing:border-box}
.farm-loading .farm-loading-tip.is-changing{opacity:0}
.farm-loading.fade{opacity:0;pointer-events:none}
@keyframes farm-stage-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes farm-logo-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(max-width:520px){.farm-loading.loading,.farm-loading.loading-screen{padding:20px;background-position:42% center}.farm-loading .farm-loading-logo{width:min(260px,74vw)}.farm-loading .farm-loading-tip{font-size:12.5px}}
@media(max-height:560px){.farm-loading .farm-loading-logo{width:190px;margin:-20px 0 -24px}.farm-loading .farm-loading-tip{margin-top:18px}}
@media(max-height:420px){.farm-loading .farm-loading-logo{width:130px;margin:-14px 0 -16px}.farm-loading .farm-loading-tip{display:none}}
@media(prefers-reduced-motion:reduce){.farm-loading .farm-loading-stage,.farm-loading .farm-loading-logo{animation:none}.farm-loading.loading,.farm-loading.loading-screen,.farm-loading .farm-loading-tip,.farm-loading progress::-webkit-progress-value{transition:none}}