/* life.css — the life-skill window (H) and the mentors' windows (js/life.js), the garden's seed menu (js/life_farm.js).
   Sizes in --u like style.css; colours like shop.css. */

.card.life { width: min(96vw, calc(1120 * var(--u))); max-height: 96vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a88a55 transparent; }
.card.life .ptitle { gap: calc(14 * var(--u)); }
.lf-title { margin-right: auto; }
.lf-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.lf-tabs button {
  cursor: pointer; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(8 * var(--u));
  border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #4a4555; color: #f4efe6;
  font: 500 calc(19 * var(--u)) / 1.7 'Mitr', sans-serif;
}
.lf-tabs button img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); object-fit: contain; }
.lf-tabs button em { font-style: normal; font-weight: 600; color: #ffd873; }
.lf-tabs button.on { background: #ffd873; color: var(--ink); }
.lf-tabs button.on em { color: #7a4a10; }
.lf-wrap { display: grid; grid-template-columns: calc(420 * var(--u)) 1fr; gap: calc(18 * var(--u)); }
@media (max-aspect-ratio: 7/5) { .lf-wrap { grid-template-columns: 1fr; } }
.lf-box {
  padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(20, 18, 30, 0.45);
  border: calc(3 * var(--u)) solid var(--ink); font-size: calc(18 * var(--u)); line-height: 1.5; display: flex; flex-direction: column; gap: calc(8 * var(--u));
}
.lf-col { display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-width: 0; }
.lf-head { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.lf-head img { width: calc(84 * var(--u)); height: calc(84 * var(--u)); object-fit: contain; flex: none; }
.lf-name { font: 700 calc(28 * var(--u)) / 1.2 'Mitr', sans-serif; color: #fff3cf; }
.lf-rank { font-size: calc(16 * var(--u)); color: #9fe0ff; }
.lf-bar { position: relative; height: calc(20 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #2b2836; overflow: hidden; }
.lf-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffe58f, #f0b93c); }
.lf-bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(14 * var(--u)) 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; }
.lf-h { font: 600 calc(19 * var(--u)) 'Mitr', sans-serif; color: #ffd873; }
.lf-tool { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.lf-tool img { width: calc(58 * var(--u)); height: calc(58 * var(--u)); object-fit: contain; flex: none; }
.lf-tool .t { font: 600 calc(20 * var(--u)) 'Mitr', sans-serif; color: #fff3cf; }
.lf-next { font-size: calc(16 * var(--u)); color: #cfc6b8; }
.lf-next b { color: #ffd873; font-weight: 600; }
.lf-cost { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.lf-cost span {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(2 * var(--u)); border-radius: calc(8 * var(--u));
  background: rgba(255, 255, 255, 0.06); font-size: calc(15 * var(--u)); color: #f4efe6;
}
.lf-cost span img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.lf-cost span.short { color: #ff9a8a; }
.lf-cost span.ok { color: #9fe89a; }
.lf-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); font-size: calc(16 * var(--u)); color: #8d8698; }
.lf-perks li.on { color: #f4efe6; }
.lf-perks li b { display: inline-block; min-width: calc(62 * var(--u)); color: #8d8698; font-weight: 600; }
.lf-perks li.on b { color: #9fe89a; }
.lf-list { display: flex; flex-direction: column; gap: calc(6 * var(--u)); max-height: calc(520 * var(--u)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a88a55 transparent; }
.lf-row { display: grid; grid-template-columns: calc(52 * var(--u)) 1fr auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255, 255, 255, 0.04); }
.lf-row img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); object-fit: contain; }
.lf-row .n { font: 600 calc(18 * var(--u)) / 1.3 'Mitr', sans-serif; color: #fff3cf; }
.lf-row .w { font-size: calc(15 * var(--u)); color: #cfc6b8; line-height: 1.35; }
.lf-row .r { font: 600 calc(15 * var(--u)) 'Mitr', sans-serif; color: #9fe89a; white-space: nowrap; text-align: right; }
.lf-row.lock { opacity: 0.55; }
.lf-row.lock .r { color: #ff9a8a; }
.lf-row.unseen img { filter: brightness(0); opacity: 0.4; }
.lf-row.night .n::after { content: ' ☾'; color: #9fc8ff; }
.lf-plots { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(6 * var(--u)); max-width: calc(560 * var(--u)); } /* (6 across, like the garden) */
.lf-plot { position: relative; aspect-ratio: 1.2; border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #5a4636; display: grid; place-items: center; }
.lf-plot img { width: 70%; height: 70%; object-fit: contain; }
.lf-plot b { position: absolute; left: 0; right: 0; bottom: calc(-2 * var(--u)); text-align: center; font: 700 calc(13 * var(--u)) 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; }
.lf-plot.ripe { box-shadow: 0 0 calc(10 * var(--u)) rgba(255, 216, 115, 0.7); background: #6b5238; }
.lf-plot.locked { background: #2b2836; opacity: 0.5; }
.lf-hint { font-size: calc(16 * var(--u)); color: #cfc6b8; }

/* the mentors' windows */
.card.mentor { width: min(96vw, calc(900 * var(--u))); max-height: 96vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a88a55 transparent; }
.mt-top { display: flex; gap: calc(16 * var(--u)); align-items: flex-end; margin-bottom: calc(10 * var(--u)); }
.mt-top img { height: calc(150 * var(--u)); width: auto; flex: none; }
.mt-say {
  position: relative; flex: 1; padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff3cf; color: var(--ink);
  border: calc(3 * var(--u)) solid var(--ink); font: 500 calc(19 * var(--u)) / 1.5 'Mitr', sans-serif; margin-bottom: calc(20 * var(--u));
}
.mt-sec { display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.mt-item { display: grid; grid-template-columns: calc(58 * var(--u)) 1fr auto; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(20, 18, 30, 0.45); border: calc(3 * var(--u)) solid var(--ink); }
.mt-item img { width: calc(54 * var(--u)); height: calc(54 * var(--u)); object-fit: contain; }
.mt-item .n { font: 600 calc(19 * var(--u)) / 1.3 'Mitr', sans-serif; color: #fff3cf; }
.mt-item .w { font-size: calc(15 * var(--u)); color: #cfc6b8; }
.mt-item button {
  cursor: pointer; padding: calc(2 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
  background: #ffd873; color: var(--ink); font: 700 calc(17 * var(--u)) / 1.6 'Mitr', sans-serif; white-space: nowrap;
}
.mt-item button:disabled { opacity: 0.4; cursor: default; }
.mt-btns { display: flex; gap: calc(6 * var(--u)); }

/* the seed / plot menu over the garden */
.lf-pop {
  position: fixed; z-index: 40; min-width: calc(260 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(12 * var(--u));
  background: linear-gradient(#3d3848, #2e2a38); border: calc(4 * var(--u)) solid var(--ink); box-shadow: inset 0 0 0 calc(3 * var(--u)) #a88a55, 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.3);
  display: flex; flex-direction: column; gap: calc(4 * var(--u)); transform: translate(-50%, -100%);
}
.lf-pop[hidden] { display: none; }
.lf-pop .h { font: 600 calc(17 * var(--u)) 'Mitr', sans-serif; color: #ffd873; padding: 0 calc(4 * var(--u)); }
.lf-pop button {
  cursor: pointer; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u));
  border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #4a4555; color: #f4efe6; font: 500 calc(17 * var(--u)) / 1.6 'Mitr', sans-serif; text-align: left;
}
.lf-pop button:hover { background: #5b5568; }
.lf-pop button:disabled { opacity: 0.45; cursor: default; }
.lf-pop button img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); object-fit: contain; }
.lf-pop button em { margin-left: auto; font-style: normal; color: #ffd873; font-weight: 600; }