@font-face{font-family:DM Sans;src:url('/assets/fonts/dm-sans-regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Outfit;src:url('/assets/fonts/outfit-bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',system-ui,sans-serif;color:#3d3923;background:#3a361a}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:3px solid #ffd679;outline-offset:5px}input:focus-visible{outline:2px solid #756b4f;outline-offset:2px}.welcome-icons{position:absolute;width:0;height:0;overflow:hidden}.wi{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#welcome{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;padding:0 clamp(24px,4.7vw,90px)}.welcome-landscape{position:fixed;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}#welcome:before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(0deg,#2a2812f5 0%,#373315b3 22%,#34301800 68%),linear-gradient(90deg,#38351930,#39341614 55%,#322e1438);pointer-events:none}
.welcome-layout{width:100%;max-width:1320px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,420px);gap:clamp(40px,6vw,110px);align-items:center;padding:8px 0 48px}.welcome-story{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;min-height:600px}.hero-logo{position:relative;display:block;width:min(100%,570px);height:300px;margin-top:-24px;align-self:center;filter:drop-shadow(0 12px 20px #332b1b46)}.hero-logo img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.story-copy{max-width:580px;color:#fffdee;text-shadow:0 2px 14px #302d174d}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;line-height:1.6}.welcome-story h1{font-family:Outfit,'DM Sans',sans-serif;font-size:clamp(38px,4.2vw,64px);line-height:1.06;letter-spacing:-.04em;margin:13px 0 14px;font-weight:700}.welcome-story h1 em{font-style:normal;color:#f9d97e}.hero-copy{font-size:16px;line-height:1.75;max-width:425px;color:#ece6dd;margin:0 0 24px}
.account-card{position:relative;border:1px solid #fffdf2;background:#fffdf6;border-radius:26px;box-shadow:0 22px 80px #2d2c114d,0 3px 0 #ded1c8;padding:32px;width:100%;scroll-margin-top:20px}.card-top{display:flex;align-items:center;gap:9px;color:#7d6f58}.small-sprout{display:grid;place-items:center;color:#846b4b;background:#efe4da;width:36px;height:36px;border-radius:12px}.account-card h2{font:600 32px/1.14 Outfit,'DM Sans',sans-serif;letter-spacing:-.035em;margin:20px 0 8px}.account-card>p{font-size:14px;color:#7f796e;line-height:1.65;margin:0 0 20px}.account-tabs{display:flex;background:#f0ebe6;border:1px solid #e8e0d9;border-radius:12px;padding:4px;margin:23px 0 21px}.account-tabs button{flex:1;border:0;background:none;border-radius:8px;padding:11px 6px;color:#776e62;font-size:13px;font-weight:700}.account-tabs button[aria-pressed=true]{background:#fffef8;color:#504931;box-shadow:0 2px 6px #493c2412}label{display:block;font-size:12px;font-weight:800;margin:16px 0 8px}input{width:100%;border:1px solid #e1d9d0;border-radius:10px;background:#fffef9;padding:13px 14px;font-size:16px;color:#4c452b;min-height:49px}input::placeholder{color:#a69d94;font-size:14px}input:hover{border-color:#b4a593}small{display:block;font-size:11px;color:#857d70;margin-top:6px}.form-message{color:#a13c25;font-size:13px;line-height:1.6;margin:12px 0}.form-message:empty{display:none}.primary{min-height:51px;padding:13px 20px;border-radius:11px;font-size:14px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:14px;border:1px solid #5b5133;background:#685e3f;color:#fffdf0;box-shadow:0 3px 0 #494125;transition:background .15s,transform .15s}.primary:hover{background:#5b5134}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #494125}.account-card .primary{width:100%;margin-top:23px}#account-submit:after{content:'→';font-size:20px;line-height:1}.account-card .account-note{display:flex;gap:8px;justify-content:center;align-items:flex-start;font-size:11px;text-align:start;line-height:1.6;margin:25px 0 0;padding-top:20px;border-top:1px solid #e7e0d9;color:#8e8374}.account-note .wi{width:17px;height:17px;margin-top:2px}.new-farmer-note{display:flex;gap:9px;margin-top:20px;padding:13px 14px;border-radius:12px;background:#f3efdc;color:#796639;font-size:11px;line-height:1.5}.new-farmer-note .wi{color:#ba9240;width:20px;height:20px}.new-farmer-note strong{display:block;color:#5b562f;font-size:12px}.text-button{background:none;border:0;color:#5b5336;font-weight:700;padding:12px;font-size:14px}.loading-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f3e8e0;z-index:10;text-align:center;padding:24px}.loading-screen img{object-fit:contain}.loading-screen h1{font-size:22px;margin:24px 0 0}.loading-screen p{color:#7e7362}.spinner{width:26px;height:26px;border:3px solid #d9caba;border-top-color:#6e6344;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#farm-host{position:fixed;inset:0;background:#c2a17c}
/* The installed app on some iOS versions: the layout ends a status bar above the bottom of the screen (app-mode.js), and iOS does
   not draw a fixed element below it (seen on an iPhone, 26 Sep 2026: screen 874, layout 812). The game frame is then part of the page,
   a strip taller than the layout, so the farm fills the screen; inside, the buttons stay above the strip (--frame-strip). */
html[data-app-mode=standalone][data-viewport-short] #farm-host{position:absolute;top:0;inset-inline-end:0;bottom:auto;inset-inline-start:0;height:calc(100% + var(--viewport-shortfall,0px))}
/* The same for the loading screen before the farm opens (26 Sep 2026: the game filled the screen, the loading screen did not yet). */
html[data-app-mode=standalone][data-viewport-short] #loading-screen{position:absolute;top:0;inset-inline-end:0;bottom:auto;inset-inline-start:0;height:calc(100% + var(--viewport-shortfall,0px));min-height:0}
html[data-app-mode=standalone][data-viewport-short] body:is([data-phase=checking],[data-phase=authenticated]){overflow:hidden}#farm-host iframe{border:0;width:100%;height:100%;display:block}#connection-actions{margin-top:18px}#connection-actions .text-button{display:block;margin:14px auto 0}body[data-phase=authenticated]{overflow:hidden}
@media(min-width:1550px){.welcome-story{min-height:670px}.hero-logo{width:620px;height:345px}.welcome-layout{grid-template-columns:minmax(0,1fr) 440px}}
@media(max-width:950px){#welcome{padding:0 28px}.welcome-layout{gap:30px;grid-template-columns:minmax(0,1fr) 360px}.hero-logo{height:245px}.welcome-story{min-height:565px}.account-card{padding:25px}.welcome-story h1{font-size:42px}}
@media(max-width:720px){#welcome{padding:0 20px}.welcome-layout{grid-template-columns:1fr;gap:28px;padding:0 0 32px;max-width:450px}.welcome-story{min-height:0;align-items:center;text-align:center}.hero-logo{width:350px;max-width:100%;height:214px;margin-top:0}.welcome-story h1{font-size:40px;line-height:1.05;margin-top:10px}.hero-copy{font-size:14px;line-height:1.6;margin:0 auto 18px;max-width:350px}.welcome-landscape{object-position:35% center}#welcome:before{background:linear-gradient(0deg,#312e14f2 0%,#312e14d9 53%,#38331635 100%)}.account-card{padding:26px;border-radius:22px}.account-card h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.spinner{animation:none}}
/* Decorative logo artwork must never intercept taps on the header or form. */
.hero-logo,.hero-logo img{pointer-events:none;user-select:none;-webkit-user-select:none}


/* Mobile players reach the account form before promotional content. */
@media(max-width:720px){
 #welcome{padding:12px 16px}.welcome-layout{display:flex;flex-direction:column;gap:12px;margin:0 auto;padding:0}.welcome-story{display:contents}.hero-logo{order:0;width:210px;height:122px;flex:0 0 122px;margin:0;overflow:hidden}.hero-logo img{width:210px;margin-top:13px}.account-card{order:1;padding:18px 20px;border-radius:20px}.story-copy{order:2;padding:26px 0 4px}.card-top{display:none}.account-card h2{font-size:25px;margin:0 0 5px}.account-card>p{font-size:13px;margin-bottom:10px}.account-tabs{margin:12px 0}.account-card label{font-size:12px}.account-card input{font-size:16px;min-height:44px}.account-card .form-row{margin-bottom:10px}.account-card{scroll-margin-top:12px}
}
@media(max-width:720px) and (max-height:700px){.hero-logo{height:88px;flex-basis:88px;width:150px}.hero-logo img{width:150px;margin-top:9px}.account-card{padding:14px 18px}.account-card>p{display:none}.account-card h2{font-size:23px}.account-tabs{margin:10px 0}}
/* Sign-up funnel improvements: field errors, password toggle, link buttons, promise line, confirmation panel. */
.field-error{color:#a13c25;font-size:12px;line-height:1.5;margin-top:6px}.field-error:empty{display:none}
input[aria-invalid=true]{border-color:#c4634b;background:#fff8f5}
.optional{font-weight:600;color:#9a9083;font-size:11px;margin-inline-start:4px}
.password-wrap{position:relative}.password-wrap input{padding-inline-end:74px}
.password-toggle{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);min-width:60px;min-height:40px;border:0;background:none;border-radius:8px;color:#6a5f3f;font-size:13px;font-weight:800;touch-action:manipulation}
.password-toggle:hover{background:#f0ebe6}
.link-button{display:inline-block;border:0;background:none;padding:10px 0;min-height:44px;color:#5b5336;font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:3px;touch-action:manipulation}
.link-button:hover{color:#3d3922}
#forgot-link{display:block;margin-top:2px;padding:12px 0 0}
#name-toggle{display:block;margin-top:6px}
.account-card .mode-switch{text-align:center;font-size:13px;color:#7f796e;margin:14px 0 0}
.account-card .mode-switch .link-button{padding:10px 4px}
.register-promise{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#f3efdc;color:#796639;font-size:12px;line-height:1.5}
.register-promise .wi{color:#ba9240;width:20px;height:20px;margin-top:1px}.register-promise strong{display:block;color:#5b562f;font-size:13px}
.confirm-panel{margin-top:6px}.confirm-copy{font-size:15px;line-height:1.6;color:#4c452b;margin:0 0 4px;overflow-wrap:anywhere}
.confirm-panel .primary{width:100%;margin-top:16px}.confirm-panel .primary:after{content:none}
.confirm-help{font-size:12px;line-height:1.4;color:#7f796e;margin:14px 0 0;text-align:center}.confirm-help .link-button{padding:8px 2px;min-height:36px}
.account-tabs button{min-height:44px}
@media(max-width:720px){.account-card input{min-height:48px}.account-card .register-promise{margin-top:12px;padding:10px 12px}.account-card .account-note{margin-top:14px;padding-top:12px}}
@media(max-width:720px) and (max-height:700px){.register-promise{display:none}}
/* Installed app on iPhone ("black-translucent" status bar): the sign-in page keeps clear of the notch and the home indicator.
   The game frame fills the whole screen; the game itself keeps its buttons clear of them (see pwa-layout.css). */
#welcome{padding-top:env(safe-area-inset-top)}
@media(max-width:720px){#welcome{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
/* Installed app: when the page's layout height is short of the screen (see app-mode.js), the strip below it shows the colour of the game's bottom bar. */
/* The installed app on iOS: fixed layers (the game frame) stop one status-bar height above the bottom of the screen, and the page
   shows below them. With the farm open that strip is the game's own cream, so it reads as the bottom bar running to the edge. Both
   html and body: the body is what fills the strip. */
html[data-app-mode=standalone]:has(body[data-phase=authenticated]),html[data-app-mode=standalone] body[data-phase=authenticated]{background:#fffdf5}
/* "New game" banner above the headline of the sign-in page: small, calm and dated. */
.launch-banner{display:inline-flex;align-items:center;gap:11px;margin:0 0 18px;padding:4px 15px 4px 4px;border:1px solid #ffffff40;border-radius:99px;background:#fffdf121;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px #1f1c0d33;color:#fbf5df;font-size:13px;font-weight:600;line-height:1}
.launch-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px 7px 9px;border-radius:99px;background:linear-gradient(135deg,#fbe39a,#e6b445);color:#3d3822;font-size:10px;font-weight:800;letter-spacing:.11em}
.launch-chip .wi{width:13px;height:13px}
.launch-banner time{color:#fff;font-weight:700}
.launch-banner,.launch-chip{white-space:nowrap}
@media(max-width:360px){.launch-banner{gap:8px;padding-inline-end:12px;font-size:11px}.launch-chip{font-size:9px;letter-spacing:.08em;padding:6px 9px 6px 7px}}
/* Clean sign-in page. Desktop and tablet: the logo and one promise on the left, one calm card on the right. */
.card-top{display:none}
@media(min-width:721px){
 #welcome{justify-content:center}
 #welcome:before{background:linear-gradient(90deg,#2b2913e8 0%,#2f2c14bd 40%,#3430142e 72%),linear-gradient(0deg,#2a2812d9 0%,#37331500 38%)}
 .welcome-layout{margin:0 auto;padding:40px 0}
 .welcome-story{align-self:center;align-items:center;justify-content:center;min-height:0;text-align:center}
 .hero-logo{width:min(100%,540px);height:auto;aspect-ratio:19/10;margin:0 0 6px}
 .story-copy{max-width:500px}
 .launch-banner{margin:0 0 22px}
 .welcome-story h1{margin:0 0 14px}
 .hero-copy{margin:0 auto}
 .account-card h2{margin-top:0}
 #mode-switch-row{display:none}
}
/* Phones: the banner sits right under the logo, above the form. */
@media(max-width:720px){
 .story-copy{display:contents}
 .launch-banner{order:0;align-self:center;margin:0;font-size:12px}
 .launch-chip{font-size:9.5px;padding:6px 10px 6px 8px}
 .story-copy h1{order:2;margin:26px 0 0}
 .story-copy .hero-copy{order:2}
}
/* Painted game art from the game's own sprite sheets, used sparingly on the sign-in page. */
.wart{display:inline-block;flex:0 0 auto;aspect-ratio:1;background-image:var(--sheet);background-repeat:no-repeat;background-size:var(--size) var(--size);background-position:var(--pos)}
.wart-wheat{--sheet:url('/assets/icons/crops-v2.webp');--size:300%;--pos:0% 0%}
.wart-bread{--sheet:url('/assets/icons/goods-v2.webp');--size:400%;--pos:66.667% 66.667%}
.wart-market{--sheet:url('/assets/icons/interface-v2.webp');--size:400%;--pos:100% 0%}
.wart-diamonds{--sheet:url('/assets/icons/interface-v2.webp');--size:400%;--pos:33.333% 66.667%}
.loop-icons{display:flex;justify-content:center;align-items:center;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.loop-icons li:not(.loop-arrow){display:inline-flex;align-items:center;gap:8px;padding:5px 17px 5px 8px;border:1px solid #ffffff40;border-radius:99px;background:#fffdf121;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px #1f1c0d33;color:#fbf5df;font-size:14px;font-weight:700;letter-spacing:.02em}
.loop-icons .wart{width:34px;filter:drop-shadow(0 3px 5px #1f1c0d55)}
.loop-arrow svg{display:block;width:7px;height:12px;fill:none;stroke:#f3e2a6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.register-promise{align-items:center}
.register-promise .wart{width:30px;margin:0}
@media(max-width:720px){
 .loop-icons{order:2;margin:20px 0 0;gap:7px}
 .loop-icons li:not(.loop-arrow){gap:6px;padding:4px 13px 4px 5px;font-size:12.5px}
 .loop-icons .wart{width:30px}
 .player-counts{order:2;align-self:center;margin:16px 0 0}
}
/* Live numbers for visitors, as quiet as possible: "2 218 players   1 online" (src/player-counts.js). */
.player-counts{display:inline-flex;align-items:center;gap:22px;margin:22px 0 0;color:#f3ecd6c2;font-size:12.5px;line-height:1;letter-spacing:.02em;text-shadow:0 1px 8px #1f1c0dcc}
.pc-item{display:inline-flex;align-items:center;gap:7px}
.pc-item strong{font-weight:600}
.pc-dot{width:6px;height:6px;border-radius:50%;background:#78dd6c;box-shadow:0 0 8px #78dd6c99}
.welcome-story h1,.hero-copy{text-wrap:balance}
.account-card .account-note{align-items:center}

/* Sign in with Google or Facebook: two small buttons side by side (only the providers that are switched on), then a thin
   "or use your email" line. */
.social-login{margin:0 0 2px}
.social-buttons{display:flex;gap:8px}
.social-button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #e2d9cf;border-radius:11px;background:#fff;color:#3d3923;font:700 14px 'DM Sans',system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 0 #e7e0d9}
.social-button[hidden]{display:none}
.social-button svg{flex:none;width:18px;height:18px}
.social-button:hover:not(:disabled){background:#faf7f2}
.social-button:disabled{opacity:.6;cursor:default}
.social-button:focus-visible{outline:3px solid #d6ae4b;outline-offset:2px}
.social-divider{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:11px;color:#9a8f80}
.social-divider::before,.social-divider::after{content:'';flex:1;height:1px;background:#e7e0d9}
/* Privacy link on the sign-in card, and three small legal links at the foot of the page. */
.account-card .account-legal{margin:10px 0 0;text-align:center;font-size:11px;line-height:1.5;color:#9a8f80}
.account-legal a{color:#7d6f58}
/* The language switch under the sign-up form: a small flag button that opens a little menu of languages above it. */
.language-switch{position:relative;display:flex;justify-content:center;margin:10px 0 0}
.language-switch[hidden]{display:none}
.language-button{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 5px;border:1px solid #e7e0d9;border-radius:999px;background:#fffef9;color:#7d6f58;font-size:12px;font-weight:700;line-height:1.2;transition:background .15s,border-color .15s}
.language-button:hover,.language-button[aria-expanded=true]{background:#f6f0e6;border-color:#d9cdbf}
.language-button img{width:22px;height:22px;object-fit:contain}
.language-chevron{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.language-button[aria-expanded=true] .language-chevron{transform:rotate(180deg)}
.language-menu{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:5;display:grid;gap:1px;min-width:156px;max-width:calc(100vw - 32px);max-height:min(300px,60vh);overflow-y:auto;margin:0;padding:4px;list-style:none;background:#fffdf6;border:1px solid #eadfd3;border-radius:13px;box-shadow:0 14px 40px #2d2c1138,0 2px 0 #e3d8cc;animation:language-menu-in .14s ease-out}
.language-menu.is-wide{grid-template-columns:1fr 1fr;width:300px}
.language-menu[hidden]{display:none}
.language-menu li{display:flex;align-items:center;gap:7px;padding:5px 8px 5px 6px;border-radius:8px;color:#4c452b;font-size:12.5px;font-weight:700;line-height:1.2;cursor:pointer;outline:none}
.language-menu li img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.language-menu li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.language-menu li:hover,.language-menu li:focus-visible{background:#f3ede4}
.language-menu li[aria-selected=true]{background:#efe8d8;color:#3d3923}
.language-check{width:13px;height:13px;flex-shrink:0;fill:none;stroke:#5c7a34;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes language-menu-in{from{opacity:0;transform:translate(-50%,4px)}}
/* In other languages the three chips under the title keep their words whole on a phone. */
.loop-icons li{white-space:nowrap}
@media(max-width:420px){:root:not([lang=en]) .loop-icons{gap:5px}:root:not([lang=en]) .loop-icons li:not(.loop-arrow){gap:5px;padding:3px 9px 3px 3px;font-size:12px}:root:not([lang=en]) .loop-icons .wart{width:24px}}
.site-legal{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:auto;padding:14px 0 18px;font-size:12px;color:#efe6cfcc}
.site-legal a{color:#fff5da}
@media(max-width:720px){.site-legal{padding:44px 0 24px}}

/* The cookie choice (public/cookie-consent.js): a small card over the page and the game. Accept is the filled button; Decline is
   the same size, outlined and clearly readable. */
.cookie-banner{position:fixed;z-index:1000;inset-inline-start:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:min(410px,calc(100vw - 32px));display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px 16px 14px;border:1px solid #e3d5b4;border-radius:18px;background:#fffaf0;color:#4d4531;box-shadow:0 18px 40px #1f1a0d45,0 2px 0 #fff inset;font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.45;animation:cookie-in .35s ease-out both}
.cookie-banner .cookie-art{--sheet:url('/assets/icons/goods-v2.webp');--size:400%;--pos:100% 66.667%;width:48px;margin:0;filter:drop-shadow(0 3px 4px #5a45202e)}
.cookie-banner h2{margin:2px 0 4px;font:750 16px/1.2 Outfit,'DM Sans',sans-serif;color:#3b3422;letter-spacing:-.2px}
.cookie-banner p{margin:0}
.cookie-banner a{color:#5f5330;font-weight:700}
.cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cookie-button{min-height:42px;padding:9px 12px;border:1px solid #5b5133;border-radius:11px;background:#685e3f;color:#fffdf0;font:800 14px 'DM Sans',sans-serif;box-shadow:0 3px 0 #494125;cursor:pointer;transition:background .15s,transform .15s}
.cookie-button:hover{background:#5b5236}
.cookie-button.is-decline{background:#fffaf0;color:#4d4531;border:1.5px solid #8f8261;box-shadow:none}
.cookie-button.is-decline:hover{background:#f3ead5}
.cookie-button.is-decline:active{transform:translateY(1px);box-shadow:none}
.cookie-button:active{transform:translateY(2px);box-shadow:0 1px 0 #494125}
.cookie-button:focus-visible{outline:3px solid #e8b94a;outline-offset:2px}
.site-legal-button{padding:0;border:0;background:none;color:#fff5da;font:inherit;text-decoration:underline;cursor:pointer}
@keyframes cookie-in{from{opacity:0;transform:translateY(14px)}}
@media(max-width:720px){.cookie-banner{inset-inline-start:10px;inset-inline-end:10px;width:auto;bottom:calc(10px + env(safe-area-inset-bottom));padding:14px 14px 12px;gap:10px}.cookie-banner .cookie-art{width:40px}}
@media(prefers-reduced-motion:reduce){.cookie-banner{animation:none}}

/* Invite a friend: "Tony invited you to Harvest Tycoon" on the sign-up card (src/invite-link.js). */
.account-invite{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:12px 14px;border:1px solid #d9e3c6;border-radius:14px;background:#f1f6e8}
.account-invite[hidden]{display:none}
.account-invite img{flex:none;width:48px;height:48px;object-fit:contain}
.account-invite strong{display:block;font:700 15px/1.3 Outfit,'DM Sans',sans-serif;color:#3b4a2c}
.account-invite span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#63714f}
/* Playing inside Instagram, Facebook or TikTok: a one-time tip to open the game in the phone's own browser (src/browser-tip.js). */
.browser-tip{position:fixed;inset-inline-start:12px;inset-inline-end:12px;top:calc(env(safe-area-inset-top) + 64px);z-index:60;box-sizing:border-box;max-width:420px;margin:0 auto;padding:14px 16px;border:1px solid #d9e3c6;border-radius:16px;background:#fffdf5;box-shadow:0 10px 30px #3d321c33;color:#3f3827;font:14px/1.45 'DM Sans',sans-serif}
.browser-tip p{margin:0 0 10px}
.browser-tip div{display:flex;gap:8px}
.browser-tip button{min-height:44px;padding:8px 14px;border-radius:12px;font:700 14px 'DM Sans',sans-serif;cursor:pointer}
.browser-tip-go{flex:1;border:0;background:#5f573f;color:#fffdf5}
.browser-tip-later{border:1px solid #d8ccba;background:#fff;color:#5f573f}
/* "Forgot your password?": a way back at the top of the card. */
.account-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 10px -6px;padding:6px 10px 6px 6px;min-height:36px;border:0;border-radius:10px;background:none;color:#5b5336;font:800 14px 'DM Sans',sans-serif;cursor:pointer;touch-action:manipulation}
.account-back:hover{background:#f3ece2}
.account-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.account-back[hidden]{display:none}

/* Our Facebook page: a small "f" at the end of the footer, in the footer's own colour. */
.footer-social{display:inline-flex;align-items:center;justify-content:center;align-self:center;width:20px;height:20px;border-radius:50%;opacity:.85;text-decoration:none}
.footer-social:hover,.footer-social:focus-visible{opacity:1}
.footer-social svg{display:block}

/* Signed in, the page around the game frame does not zoom either (src/page-zoom.js); the home page stays zoomable. */
html:has(body[data-phase=authenticated]),body[data-phase=authenticated]{touch-action:pan-x pan-y}
/* The footer links, the Cookie settings button and the Facebook icon on one line, centred (27 Sep 2026: the button sat lower). */
.site-legal{align-items:center}
.site-legal-button{min-height:0;height:auto;margin:0;line-height:inherit}
.site-legal .footer-social{display:inline-flex;align-items:center}
/* Inside the Facebook, Instagram or TikTok app (28 Sep 2026): before the account form, one step to the phone's own browser (src/main.js browserGate). */
.browser-gate{display:none;text-align:center}
.account-card[data-gate]>:not(.card-top):not(.browser-gate){display:none!important}
.account-card[data-gate]>.browser-gate{display:grid;justify-items:center;gap:10px;padding:6px 0 4px}
.browser-gate-art{width:64px;height:64px}
.browser-gate h2{margin:0;font-size:25px}
.browser-gate p{margin:0;font-size:14px;line-height:1.5;color:#6f6450}
.browser-gate .primary{width:100%;margin-top:6px}.browser-gate .primary:after{content:none}
.browser-gate .gate-help{padding:10px 12px;border-radius:12px;background:#f6eed9;color:#5d5236;font-size:13px}
.browser-gate .link-button{margin-top:2px}
/* Arabic letters join: never spaced apart (1 Oct 2026). */
:lang(ar) *{letter-spacing:0!important}