/* tradgard-ny.css — the garden's bed, shelf and watering drill, reworked (2026-09-23).
   Loaded after app.css (index.html). Pairs with the new markup in js/garden.js
   (renderBed, shelfHTML) and js/vattna.js (header, question card, options, reveal).
   Only the look changes: every id and class the logic uses is kept. */

.garden.ny { --kort: #fff; --kort-skugga: 0 6px 20px rgba(28,29,33,.14); --ok-soft: #e6f2ea; --bad-soft: #fbe9e7; --vaxt: #4f9a5f; }
/* Dark mode: the season and weather rules in app.css can repaint the card light while the
   text vars are light — so the reworked garden keeps its own dark sky in dark mode. */
@media (prefers-color-scheme: dark) {
  .garden.ny { --kort: #1f2329; --kort-skugga: 0 6px 20px rgba(0,0,0,.45); --ok-soft: #1c3526; --bad-soft: #3a1f1d; --sky: #1d2b3a; --sky-2: #16202b; }
}

/* ---- the bed ---- */
.garden.ny { display: flex; flex-direction: column; gap: .85em; }
.garden.ny .plot { margin-bottom: 0; }
.garden.ny .gvaxt { display: flex; flex-direction: column; gap: .35em; }
.garden.ny .gvrad { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }
.garden.ny .gfas { font-family: var(--serif); font-size: 1.15rem; }
.garden.ny .gkvar { font-size: .85rem; color: var(--granite); }
.garden.ny .meter { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; margin: 0; }
.garden.ny .meter > i { display: block; height: 100%; border-radius: 5px; background: var(--vaxt); }
.garden.ny .gtick { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: rgba(255,255,255,.55); border-radius: 1px; }

.garden.ny .gstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.garden.ny .gstat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .6em .2em .55em; border-radius: 12px; background: var(--kort); border: 1px solid var(--line); text-align: center; min-width: 0; }
.garden.ny .gstat b { font-size: 1rem; line-height: 1.2; }
.garden.ny .gstat small { font-size: .7rem; color: var(--granite); line-height: 1.2; }
.garden.ny .gstat.warn { border-color: #efd87c; background: color-mix(in srgb, #f2c230 14%, var(--kort)); }

.garden.ny .vattnaBtn { position: static; display: flex; align-items: center; justify-content: center; gap: .6em; width: 100%; min-height: 52px;
  border-radius: 14px; font-size: 1.05rem; font-weight: 600; background: var(--blue); box-shadow: 0 4px 12px rgba(116, 63, 142,.25); padding: .5em 1em; }
.garden.ny .vattnaBtn.rensa { background: var(--ok); box-shadow: 0 4px 12px rgba(47,125,79,.25); }
.garden.ny .vattnaBtn .vbadge { padding: .1em .6em; border-radius: 999px; background: rgba(255,255,255,.22); font-size: .85rem; }

/* fusion: the animals (or harvests), an arrow, what they become, and one button */
.garden.ny .gforena { display: flex; align-items: center; gap: .6em; width: 100%; padding: .55em .7em; border-radius: 14px; text-align: left;
  background: color-mix(in srgb, #f2c230 16%, var(--kort)); border: 1px solid #efd87c; color: var(--ink); cursor: pointer; }
.garden.ny .gforena .gfdjur { display: grid; grid-template-columns: repeat(3, auto); gap: 1px; flex: none; }
.garden.ny .gforena .gfdjur .crop { width: 18px; height: 18px; }
.garden.ny .gforena .gfdjur .crop.big { width: 16px; height: 20px; }
.garden.ny .gforena .gfpil { color: #8a6a10; font-weight: 700; flex: none; }
.garden.ny .gforena .gfmal { flex: none; } .garden.ny .gforena .gfmal .crop.big { width: 38px; height: 44px; }
.garden.ny .gforena .gftext { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.35; }
.garden.ny .gforena .gfknapp { flex: none; padding: .45em .9em; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: .85rem; }
.garden.ny .fuserow { display: flex; flex-direction: column; gap: .4em; margin: 0; }

/* the harvest shelf */
.garden.ny .hylla { display: flex; flex-direction: column; gap: .45em; border-top: 0; margin: 0; padding: 0; }
.garden.ny .hemhylla { margin-top: .9em; } /* the animals' homes, a shelf of their own under the harvest (2026-10-02) */
.garden.ny .hhead { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }
.garden.ny .htitel { font-family: var(--serif); font-size: 1.05rem; flex: none; white-space: nowrap; } /* "The harvest shelf" wrapped to three lines (2026-09-29) */
.garden.ny .hcount { font-size: .8rem; color: var(--granite); text-align: right; }
.garden.ny .hbox { border-radius: 12px; background: linear-gradient(180deg, #f1ece2, #e9e1d2); border: 1px solid #e0d6c4; padding: .6em .6em .7em; }
@media (prefers-color-scheme: dark) { .garden.ny .hbox { background: linear-gradient(180deg, #2c2822, #25211c); border-color: #3a342b; } }
.garden.ny .hvagg { display: flex; justify-content: center; gap: 1.1em; padding-bottom: .3em; }
.garden.ny .hkrok { display: flex; flex-direction: column; align-items: center; }
.garden.ny .hkrok::before { content: ""; width: 2px; height: 6px; background: #8a6a44; }
.garden.ny .hkrok .crop.big { width: 40px; height: 40px; }
.garden.ny .hplanka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: .3em; padding: .5em .2em 0; margin: 0 -.6em .5em;
  box-shadow: inset 0 -9px 0 #a9794a, inset 0 -11px 0 #c9975f, 0 3px 4px -2px rgba(90,58,24,.35); padding-bottom: 13px; }
.garden.ny .hplanka:last-child { margin-bottom: 0; }
.garden.ny .hsak { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; position: relative; }
.garden.ny .hsak .hantal { position: absolute; top: -4px; right: 8%; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: var(--paper, #fff); font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; } /* ×n (2026-10-01) */
.garden.ny .hsak > svg { filter: drop-shadow(0 2px 2px rgba(90,58,24,.25)); }
.garden.ny .hsak .crop { width: 36px; height: 36px; }
.garden.ny .hsak .crop.big { width: 40px; height: 50px; }
.garden.ny .hsak small { font-size: .62rem; color: #5a4630; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: dark) { .garden.ny .hsak small { color: #d8c8b0; } }
.garden.ny .hnasta .hfro { width: 36px; height: 44px; border: 1.5px dashed #a9794a; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: #a9794a; background: rgba(255,255,255,.4); }

/* ---- watering: the header over the picture ---- */
.garden.ny.watering { gap: 0; }
.garden.ny.watering > .vkortwrap { display: block !important; }
/* The result box (js/vattna.js `above`): between the picture and the question card (Linh, 2026-09-23). It takes the
   card's overlap against the picture; the answered question card drops under it with a normal gap. */
.garden.ny .vrevealwrap { position: relative; z-index: 6; margin: -30px .1em 0; }
.garden.ny .vrevealwrap:empty, .garden.ny .vrevealwrap #vreveal:empty { display: none; }
.garden.ny .vrevealwrap #vreveal:not(:empty) ~ *, .garden.ny .vrevealwrap:has(#vreveal:not(:empty)) + .vkortwrap { margin-top: .7em; }
.garden.ny .vrevealwrap:has(#vreveal:not(:empty)) + .vkortwrap .vkort { box-shadow: none; border: 1.5px solid var(--line); opacity: .85; }
.garden.ny .vover { inset: .6em .6em auto .6em; color: var(--ink); text-shadow: none; }
.garden.ny .vover .vhead { gap: .4em; font-size: .85rem; opacity: 1; }
.garden.ny .vprog { display: flex; align-items: center; gap: 3px; padding: .45em .65em; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.14); margin-right: auto; color: #1c1d21; font-weight: 600; }
.garden.ny .vsr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.garden.ny .vprog i { width: 9px; height: 11px; border: 1.6px solid var(--blue); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(0deg); }
.garden.ny .vprog i.full { background: var(--blue); }
.garden.ny .vprog i.nu { background: #9CC9E6; }
.garden.ny .vprog.rensa i { border-color: var(--ok); } .garden.ny .vprog.rensa i.full { background: var(--ok); } .garden.ny .vprog.rensa i.nu { background: #a9d4b6; }
.garden.ny .vover .vlyss, .garden.ny .vover .vclose { position: relative; width: 38px; height: 38px; padding: 0; margin: 0; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ok); box-shadow: 0 1px 4px rgba(0,0,0,.14); text-decoration: none; line-height: 1; opacity: 1; }
.garden.ny .vover .vlyss.av { color: #4a4f57; background: rgba(255,255,255,.92); }
.garden.ny .vover .vlyss.av::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2.4px; margin-top: -1.2px; background: var(--bad); border-radius: 2px; transform: rotate(-40deg); }
.garden.ny .vover .vclose { background: rgba(28,29,33,.72); color: #fff; font-size: 1.25rem; }

/* ---- the question card, overlapping the soil edge ---- */
.garden.ny .vkortwrap { position: relative; z-index: 5; margin: -30px .1em 0; }
.garden.ny .vkort { background: var(--kort); border-radius: 14px; box-shadow: var(--kort-skugga); padding: .75em .9em .85em; margin: 0; font-family: var(--sans); font-size: 1rem; }
.garden.ny .vkort.rensa { box-shadow: var(--kort-skugga), inset 0 3px 0 var(--ok); }
.garden.ny .vtyp { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--granite); }
.garden.ny .vqrad { display: flex; align-items: center; gap: .6em; margin-top: .1em; }
.garden.ny .vkort .vqtext { flex: 1; min-width: 0; font-family: var(--serif); font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.garden.ny .vkort .vqtext.lucka { font-size: clamp(1.1rem, 4.4vw, 1.4rem); line-height: 1.4; max-width: none; display: block; }
.garden.ny .vkort .vqtext.ledtrad { font-size: 1.05rem; font-style: italic; color: var(--granite); }
.garden.ny .vkort .vqtext.lyssna { display: flex; align-items: center; gap: .6em; font-family: var(--sans); font-size: .9rem; color: var(--granite); cursor: pointer; }
.garden.ny .vlyssbig { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--on-blue); flex: none; box-shadow: 0 4px 12px rgba(116, 63, 142,.3); }
.garden.ny .vkort .say { flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink, var(--blue)); font-size: 1rem; }
.garden.ny .vkort.klar .vqtext small { font-family: var(--sans); font-size: .95rem; color: var(--granite); }
.garden.ny .vq.shake { animation: skak .3s; }
@media (max-width: 480px) { .garden.ny .vkort .vqtext { font-size: 1.7rem; } }

/* ---- answers ---- */
.garden.ny .vbelow { margin: .75em 0 .1em; display: flex; flex-direction: column; gap: .7em; }
.garden.ny .vbelow .vopts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6em; }
.garden.ny .vbelow .vopts.tva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.garden.ny .vbelow .vopt { min-height: 58px; padding: .7em .9em; border-radius: 12px; border: 1.5px solid var(--line); background: var(--kort); color: var(--ink);
  font-size: 1.05rem; text-align: left; box-shadow: 0 1px 0 var(--line); display: flex; align-items: center; justify-content: space-between; gap: .4em; transition: transform .12s, border-color .12s; }
.garden.ny .vbelow .vopt:not(:disabled):hover { border-color: var(--blue); }
.garden.ny .vbelow .vopt:not(:disabled):active { transform: scale(.98); }
.garden.ny .vbelow .vopt:disabled { opacity: 1; }
.garden.ny .vbelow .vopt.ratt { border: 2px solid var(--ok); background: var(--ok-soft); animation: tr-pop .35s ease; }
.garden.ny .vbelow .vopt.ratt::after { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.garden.ny .vbelow .vopt.dim { opacity: .45; }
.garden.ny .vbelow .vopt.vald:not(.ratt) { opacity: 1; border: 2px solid var(--bad); background: var(--bad-soft); }
.garden.ny .vbelow .vopt.vald:not(.ratt)::after { content: "×"; flex: none; color: var(--bad); font-weight: 700; font-size: 1.1rem; }
.garden.ny .vbelow .vopts .vopt.vskip { grid-column: 1 / -1; min-height: 44px; justify-content: center; background: transparent; box-shadow: none; border-style: dashed; color: var(--granite); font-size: .85rem; }
@keyframes tr-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* writing */
.garden.ny .vbelow form.row { gap: .5em; padding: .35em .35em .35em .9em; border-radius: 14px; border: 2px solid var(--blue); background: var(--kort); box-shadow: 0 0 0 4px var(--blue-soft); }
.garden.ny .vbelow form.row input { border: 0; padding: .35em 0; font-size: 1.2rem; background: transparent; outline: none; }
.garden.ny .vbelow form.row input:focus-visible { outline: none; }
.garden.ny .vbelow form.row button { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 12px; font-size: 1.1rem; }
.garden.ny .vbelow form.row:has(input.ratt) { border-color: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.garden.ny .vbelow form.row:has(input.fel) { border-color: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }

/* ---- the reveal ---- */
.garden.ny :is(.vbelow, .vrevealwrap) .vans { display: block; margin: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--kort); box-shadow: 0 2px 10px rgba(28,29,33,.1); }
.garden.ny :is(.vbelow, .vrevealwrap) .vband { display: flex; align-items: center; gap: .5em; padding: .5em .8em; color: #fff; font-weight: 600; font-size: .9rem; flex-wrap: wrap; }
.garden.ny :is(.vbelow, .vrevealwrap) .vband > span { white-space: nowrap; }
.garden.ny :is(.vbelow, .vrevealwrap) .vband em { margin-left: auto; font-style: normal; font-weight: 500; white-space: nowrap; }
.garden.ny :is(.vbelow, .vrevealwrap) .vans.ok .vband { background: var(--ok); }
.garden.ny :is(.vbelow, .vrevealwrap) .vans.bad .vband { background: var(--bad); }
.garden.ny :is(.vbelow, .vrevealwrap) .vbody { display: flex; gap: .8em; padding: .8em; align-items: flex-start; }
.garden.ny :is(.vbelow, .vrevealwrap) .vcre { flex: none; }
.garden.ny :is(.vbelow, .vrevealwrap) .vcre .cbtn { transform: scale(1.25); transform-origin: 0 0; margin: 0 .6em .6em 0; }
.garden.ny :is(.vbelow, .vrevealwrap) .vtxt { flex: 1; min-width: 0; }
.garden.ny :is(.vbelow, .vrevealwrap) .vord b { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; }
.garden.ny :is(.vbelow, .vrevealwrap) .vord .vbet { color: var(--granite); }
.garden.ny :is(.vbelow, .vrevealwrap) .vex { font-size: .95rem; color: var(--ink); margin-top: .3em; }
.garden.ny :is(.vbelow, .vrevealwrap) .vexen { font-size: .82rem; color: var(--granite); margin-top: .15em; }
.garden.ny :is(.vbelow, .vrevealwrap) .vnasta { display: block; width: calc(100% - 1.6em); margin: 0 .8em .8em; min-height: 48px; border-radius: 12px; font-weight: 600; font-size: 1rem; }
.garden.ny .vbelow .vres { display: flex; flex-direction: column; gap: .6em; align-items: stretch; margin: 0; color: var(--ink); }
.garden.ny .vbelow .vres p { margin: 0; }
.garden.ny .vbelow .vres .vnasta { width: 100%; margin: 0; }

@media (prefers-reduced-motion: reduce) { .garden.ny .vbelow .vopt.ratt { animation: none; } .garden.ny .vbelow .vopt { transition: none; } }

/* The second meaning on the reveal (Linh, 2026-10-03), under the word line */
.garden.ny :is(.vbelow, .vrevealwrap) .vandra { color: var(--granite); font-size: .88rem; opacity: .85; margin: 1px 0 2px; }