:root {
  --terra:#8A6A47; --caule:#4A8B3B; --sol:#C8901A; --barro:#A8442B;
  --fundo:#F7F7F2; --carta:#FFFFFF; --tinta:#1C2118; --tinta2:#5A6152; --linha:#DCDDD1;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo:#14170F; --carta:#1C2018; --tinta:#EDEFE6; --tinta2:#9AA18E;
          --linha:#333A2C; --sol:#E8B44A; --caule:#84C170; --barro:#E08063; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--fundo); color:var(--tinta);
       font:16px/1.5 system-ui,-apple-system,sans-serif;
       padding:env(safe-area-inset-top) 12px 40px; }
.tela[hidden] { display:none; }
h1 { font-size:32px; margin:8px 0 4px; }
.sub { color:var(--tinta2); margin:0 0 24px; }

#entrada { max-width:340px; margin:48px auto; text-align:center; }
form { display:grid; gap:10px; }
input, button { font:inherit; padding:13px; border-radius:8px; border:1px solid var(--linha); }
input { background:var(--carta); color:var(--tinta); }
button { background:var(--caule); color:#fff; border:none; font-weight:600; cursor:pointer; }
button.secundario { background:transparent; color:var(--tinta2); border:1px solid var(--linha); }
button:disabled { opacity:.5; cursor:wait; }
.erro { color:var(--barro); }

#painel { display:flex; gap:14px; flex-wrap:wrap; align-items:center;
          background:var(--carta); border:1px solid var(--linha);
          border-radius:10px; padding:10px 12px; margin-bottom:10px;
          position:sticky; top:0; z-index:2; }
.recurso { display:flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; }
.recurso img { width:22px; height:22px; }
#solo { color:var(--tinta2); font-size:14px; margin:0 0 12px; }

.canteiros { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.canteiro { background:var(--carta); border:1px solid var(--linha); border-radius:10px;
            overflow:hidden; text-align:center; cursor:pointer; }
/* Task 14: a terra passa a ocupar o CARD INTEIRO, sangrando até as bordas —
   antes disto o sprite era uma imagem pequena (max-width:80px) boiando no
   meio de um card branco com 8px de respiro em volta, e foi exatamente essa
   moldura branca que fez o usuário não reconhecer o canteiro como terreno.
   `overflow:hidden` no card acima corta a imagem quadrada nos cantos
   arredondados, em vez de vazar retângulo por cima do border-radius. */
.canteiro img { width:100%; aspect-ratio:1; display:block; margin:0; }
.canteiro.pronto { border-color:var(--sol); box-shadow:0 0 0 2px var(--sol); }
.canteiro .rotulo { font-size:12px; color:var(--tinta2); margin:4px 8px 8px;
                    font-variant-numeric:tabular-nums; }
.barra { height:4px; background:var(--linha); border-radius:2px; margin:-4px 8px 8px; overflow:hidden; }
.barra i { display:block; height:100%; background:var(--caule); }

#loja h2 { font-size:18px; margin:28px 0 10px; }
.itens { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.item { background:var(--carta); border:1px solid var(--linha); border-radius:10px; padding:10px; }
.item b { display:block; }
.item small { color:var(--tinta2); }
.item .precos { display:flex; gap:6px; margin-top:8px; }
.item button { padding:8px 10px; font-size:14px; flex:1; }

.aviso { position:fixed; left:12px; right:12px; bottom:16px; margin:0;
         background:var(--tinta); color:var(--fundo); padding:12px 14px;
         border-radius:10px; text-align:center; }
@media (prefers-reduced-motion: no-preference) {
  .canteiro { transition: box-shadow .15s, border-color .15s; }
}