main{padding:14px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:520px;margin:0 auto}
.plot{aspect-ratio:1;border-radius:14px;border:1px dashed var(--border);background:rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;transition:transform .08s ease}
.plot.locked{background:rgba(0,0,0,.06);border-style:solid;opacity:.8}
.plot:active{transform:scale(.98)}
.plot .stage{position:absolute;bottom:6px;right:8px;font-size:12px;color:var(--hint)}
.seedling,.sprout,.ready{font-size:26px}
.ready{filter: drop-shadow(0 0 6px rgba(255, 204, 0, .6))}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px auto}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;padding:10px 14px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:5}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
dialog{border:none;border-radius:16px;padding:0;width:min(92vw,520px);background:var(--bg);color:var(--text);border:1px solid var(--border)}
dialog::backdrop{background:rgba(0,0,0,.4)}
.sheet{padding:12px}
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.item{border:1px solid var(--border);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.muted{color:var(--hint)}
.card.locked{filter:grayscale(1) brightness(.8);position:relative;cursor:pointer}
.card.locked .lock{position:absolute;top:8px;right:10px;font-size:18px;opacity:.9}
.card.locked .hint{opacity:.8}
/* --- Mobile tweaks --- */
@media (max-width: 480px){
  .grid5{
    gap: 8px;                /* чуть больше воздуха между клетками */
    max-width: 100%;         /* сетка тянется во всю ширину */
    padding: 0 10px;
  }

  .plot{
    border-radius: 12px;
  }

  /* центр-эмодзи поменьше на мобильных */
  .seedling, .sprout, .ready{
    font-size: 22px;
  }

  /* бейдж статуса — компактный, с фоном и всегда поверх */
  .plot .stage{
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    background: rgba(0,0,0,.55);
    color: #fff;             /* контрастный цвет текста */
    border-radius: 999px;
    z-index: 2;              /* всегда поверх эмодзи */
    pointer-events: none;    /* не мешает клику по клетке */
  }
}

/* очень узкие экраны — ещё компактнее;
   при желании можно вообще скрыть подписи статуса */
@media (max-width: 360px){
  .seedling, .sprout, .ready{ font-size: 18px; }
  .plot .stage{ font-size: 10px; padding: 2px 6px; right: 5px; bottom: 5px; }
  /* если нужно — раскомментируй следующую строку, чтобы прятать текст статуса
  .plot .stage{ display:none; }
  */
}