:root{
  --bg:#f6fff0;
  --panel:#e4f4d9;
  --panel2:#ffffff;
  --accent:#6aa84f;
  --border:#7a9b6d;
  --ink:#223322;
}

*{ box-sizing:border-box; }

body{
  margin:0; font-family:system-ui, Arial, sans-serif; color:var(--ink); background:var(--bg);
}

#login{
  min-height:100vh; display:grid; place-items:center;
}
.login-card{
  background:var(--panel); padding:24px; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.1);
  display:flex; gap:8px; flex-direction:column; width:320px; border:1px solid var(--border);
}
.login-card input{ padding:10px; border:1px solid var(--border); border-radius:8px; }
.login-card button{
  padding:10px 14px; border:none; border-radius:10px; background:var(--accent); color:white;
  cursor:pointer; font-weight:700;
}

#topBar{
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--border);
}
#playerInfo{ font-weight:600; }
#leaderboard{
  background:var(--panel2); padding:8px; border-radius:12px; border:1px solid var(--border);
  max-width:420px; min-width:240px;
}

#layout{
  display:grid; grid-template-columns: 280px 1fr 320px; gap:12px; padding:12px;
}

#leftCol, #rightCol{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px;
}
#centerCol{
  display:flex; flex-direction:column; gap:10px;
}

#factory{
  background:#e9f7de; border:2px solid var(--border); border-radius:12px; display:block; margin:0 auto;
}

#clickerPanel{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:8px 10px;
}
#produceBtn{
  padding:12px 18px; border:none; border-radius:12px; background:var(--accent); color:white; font-size:16px; font-weight:800; cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.1);
}
#produceBtn:disabled{ filter:grayscale(0.6); opacity:0.6; cursor:not-allowed; }

#vegList .veg{
  display:flex; justify-content:space-between; align-items:center; background:var(--panel2);
  border:1px solid var(--border); border-radius:10px; padding:6px 8px; margin-bottom:6px;
}
#vegList .veg button{ padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:white; cursor:pointer; }
#vegList .locked{ opacity:0.6; }
#vegList .unlock{ background:#ffd966; border-color:#c1a300; }

#shop .card{
  margin-top:10px; background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:8px;
}
.shop-line{
  display:flex; justify-content:space-between; gap:8px; align-items:center; padding:4px 0; border-top:1px dashed #c9dbbf;
}
.shop-line:first-child{ border-top:none; }
.shop-line button{ padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:white; cursor:pointer; }
.shop-line button:disabled{ opacity:0.5; cursor:not-allowed; }

#chatLog{
  height:360px; overflow:auto; background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:6px; margin-bottom:6px;
}