/* FarmFi whitelist. Same pieces as the landing: grass tile background, Sprout Lands panels, frames, slots and buttons, game font for titles. */
@font-face{font-family:"Sprout";src:url(/img/sprout.ttf) format("truetype");font-display:block}
:root{
  --ink:#4a3428;--muted:#7e5e48;--paper:#dcb98a;--cream:#fff4d6;--gold:#f2c94c;--leaf:#2f6a2e;--bad:#a8423a;
  --display:"Sprout","Courier New",monospace;
  --body:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:#c0d470 url(/img/grass.png) 0 0/192px repeat;image-rendering:pixelated;color:var(--ink);font:600 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh}
img{image-rendering:pixelated}
a{color:inherit}
:focus-visible{outline:3px dashed var(--cream);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;letter-spacing:.02em;text-transform:uppercase}
p{margin:0}
[hidden]{display:none!important}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sign-text{color:var(--cream);text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),3px 3px var(--ink),-3px 3px var(--ink),3px -3px var(--ink),-3px -3px var(--ink),0 7px 0 rgba(0,0,0,.25)}

/* UI pack pieces */
.pnl{border:18px solid transparent;border-image:url(/img/ui-panel.png) 6 fill / 18px stretch;image-rendering:pixelated}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px 6px;border:0;
  background:url(/img/btn-big.png) center/100% 100% no-repeat;image-rendering:pixelated;
  font:400 22px/1 var(--display);letter-spacing:.04em;color:var(--ink);text-decoration:none;cursor:pointer;text-transform:uppercase;white-space:nowrap}
.btn:hover{filter:brightness(1.05)}
.btn:active{background-image:url(/img/btn-big-down.png);padding-top:4px}
.btn.play{background-image:url(/img/btn-play.png)}
.btn.play:active{background-image:url(/img/btn-play-down.png)}
.btn.sm{min-height:44px;font-size:18px;padding:0 16px 4px}
.btn[disabled]{filter:grayscale(.8) opacity(.6);cursor:default}
.btn img{width:22px;height:22px}
.slot{width:56px;height:60px;flex:none;display:grid;place-items:center;padding-bottom:4px;background:url(/img/ui-slot.png) center/100% 100% no-repeat}
.slot img{width:32px;height:32px}
.field{width:100%;min-width:0;min-height:48px;padding:4px 12px;border:9px solid transparent;border-image:url(/img/ui-slot.png) 9 fill / 9px stretch;
  font:700 16px/1.2 var(--body);color:var(--ink);background:none}
.field::placeholder{color:var(--muted);opacity:.8}
.field:focus{outline:none;filter:brightness(1.06)}
.chip{display:inline-flex;align-items:center;gap:6px;font:400 15px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.chip img{width:20px;height:20px}
.chip.ok{color:var(--leaf)}.chip.bad{color:var(--bad)}.chip.wait{color:var(--muted)}
.muted{color:var(--muted)}
.err{color:var(--bad);font-weight:800}

/* nav */
.navbar{padding-block:10px 0}
.navbar .wrap{display:flex;align-items:center;gap:12px}
.bar{flex:1;min-width:0;display:flex;align-items:center;gap:16px;border-width:15px;border-image-width:15px;padding:0 6px;filter:drop-shadow(0 4px 0 rgba(74,52,40,.35))}
.logo{display:block;line-height:0;flex:none}
.logo img{width:150px;height:45px}
.bar .acts{margin-left:auto;display:flex;gap:10px;align-items:center}
.who{font:400 17px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.xbtn{flex:none;display:grid;place-items:center;width:52px;height:56px;padding:0 0 4px 3px;background:url(/img/ui-btn.png) center/100% 100% no-repeat;font:400 26px/1 var(--display);color:var(--ink);text-decoration:none}
.xbtn:active{background-image:url(/img/ui-btn-down.png);height:52px;padding-bottom:0}
@media (max-width:560px){.logo img{width:110px;height:33px}.bar{gap:8px;border-width:12px;border-image-width:12px}.who{display:none}.xbtn{width:46px;height:50px;font-size:22px}}

.foot{padding:32px 0 40px;text-align:center;color:var(--cream);font-size:14px;font-weight:800;text-shadow:1px 0 var(--ink),-1px 0 var(--ink),0 1px var(--ink),0 -1px var(--ink),1px 1px var(--ink),-1px -1px var(--ink)}