/* ---------- Garden Society (js/society.js) ---------- */


.society {
  background:
    radial-gradient(circle at 12px 12px, rgba(138, 63, 209, .12) 2px, transparent 2.5px) 0 0 / 24px 24px,
    #fdf9ff;
  border-radius: 30px;
  padding: 26px 20px 20px;
  border: 5px solid #fff;
  box-shadow: 0 0 0 5px var(--purple), 0 10px 0 5px rgba(43, 26, 82, .2);
  text-align: center;
}
.society-intro { max-width: 620px; margin: 2px auto 14px; font: 400 20px/1.3 var(--f-hand); color: var(--ink); }

.society-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.society-tabs button {
  font: 700 16px var(--f-round);
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.society-tabs button[aria-selected="true"] { background: var(--yellow); transform: rotate(-2deg); }
.society-tabs button:hover { transform: translateY(-2px); }

.society-panel { text-align: left; min-height: 120px; transition: opacity .2s; }
.society-panel.is-loading { opacity: .5; }
.society-empty { margin: 18px 0; text-align: center; font: 400 20px var(--f-hand); color: #6b4a8f; }

.society-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.society-post {
  background: #fff;
  border: 1px solid #e6dcf5;
  border-radius: 6px;
  padding: 14px 14px 12px;
  box-shadow: 0 2px 8px rgba(43, 26, 82, .15);
}
.society-post:nth-child(odd) { transform: rotate(-.6deg); }
.society-post:nth-child(even) { transform: rotate(.6deg); }
.society-post h4 { margin: 0; font: 700 18px var(--f-round); color: var(--ink); }
.post-meta { margin: 2px 0 8px; font: 600 12px var(--f-round); color: #8a7aa6; }
.post-body { margin: 0 0 8px; font: 400 18px/1.3 var(--f-hand); white-space: pre-line; overflow-wrap: anywhere; }
.post-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.post-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 2px solid var(--ink); display: block; }

.society-project { background: #fff; border: 3px solid #d6c2f5; border-radius: 18px; margin-bottom: 12px; }
.society-project > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.society-project > summary::-webkit-details-marker { display: none; }
.society-project > summary::after { content: "▼"; margin-left: auto; color: var(--purple); font-size: 13px; transition: transform .2s; }
.society-project[open] > summary::after { transform: rotate(180deg); }
.society-project > .sp-desc, .society-project > .society-posts, .society-project > .society-empty { margin: 0 14px 14px; }
.sp-name { font: 700 18px var(--f-round); }
.sp-status, .sp-count { font: 700 12px var(--f-round); border-radius: 999px; padding: 2px 10px; }
.sp-status { background: #e8f7d6; color: #2e6b1f; }
.sp-done { background: #fff6b0; color: #6b4a00; }
.sp-count { background: var(--purple); color: #fff; }
.sp-desc { font: 400 18px/1.3 var(--f-hand); color: #6b4a8f; }

/* Compost */
.compost-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 3px dashed #e0c98e; border-radius: 18px; padding: 10px 16px; margin-bottom: 10px;
}
.ch-label, .ch-date { margin: 0; font: 600 13px var(--f-round); color: #6b5a3a; }
.ch-value { margin: 0; font: 700 48px/1.05 var(--f-round); color: var(--ink); }
.ch-status { margin: 0; font: 700 15px var(--f-round); border-radius: 999px; padding: 6px 14px; border: 2px solid; }
.ch-good { background: #e8f7d6; color: #2e6b1f; border-color: #7cc85a; }
.ch-ok { background: #fff6d6; color: #6b4a00; border-color: #e0c98e; }
.ch-warn { background: #ffe8cc; color: #8a3a00; border-color: #f0a35a; }
.ch-danger { background: #ffd6d6; color: #8a1010; border-color: #e8352e; }
.ch-cool { background: #e3f1ff; color: #0b4a7a; border-color: #8cc0ef; }

.compost-chart { margin: 0; background: #fff; border-radius: 18px; padding: 12px 12px 8px; border: 3px solid #eadff7; }
.compost-chart figcaption { font: 700 14px var(--f-round); color: var(--ink); margin-bottom: 4px; }
.cc-wrap { position: relative; }
.cc-svg { display: block; width: 100%; height: auto; outline-offset: 4px; }
.cc-svg:focus-visible { outline: 3px dashed var(--orange); }
.cc-grid { stroke: #ece7f2; stroke-width: 1; }
.cc-tick { font: 600 11px var(--f-round); fill: #7a6e8a; }
.cc-band { fill: #7cc85a; opacity: .14; }
.cc-limit { stroke: #e8352e; stroke-width: 1; opacity: .5; }
.cc-band-label { font: 600 11px var(--f-round); fill: #5a6e4a; }
.cc-cross { stroke: #7a6e8a; stroke-width: 1; }
.cc-hit { cursor: crosshair; }
.cc-tip {
  position: absolute; top: 6px; min-width: 150px; max-width: 240px;
  background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 6px 10px;
  box-shadow: 3px 3px 0 rgba(43, 26, 82, .25); pointer-events: none;
  font: 600 12px/1.35 var(--f-round); color: #4a3f5c;
}
.cc-tip p { margin: 0; }
.cc-tip b { color: var(--ink); font-size: 14px; }
.cc-tip i, .cc-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.cc-tip-date { color: #7a6e8a; }
.cc-tip-note { font-weight: 400; font-style: italic; }
.cc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 600 12px var(--f-round); color: #4a3f5c; margin-top: 4px; }

.compost-table { margin-top: 10px; background: #fff; border-radius: 14px; border: 3px solid #eadff7; padding: 8px 12px; }
.compost-table summary { cursor: pointer; font: 700 14px var(--f-round); color: var(--purple); }
.ct-scroll { overflow-x: auto; margin-top: 8px; }
.compost-table table { width: 100%; border-collapse: collapse; font: 600 13px var(--f-round); }
.compost-table th, .compost-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #ece7f2; font-variant-numeric: tabular-nums; }
.compost-guide { font: 600 12px/1.5 var(--f-round); color: #5a4a6e; margin: 10px 2px; }
.compost-guide a { color: var(--purple); }
.compost-photos-title { margin: 16px 0 8px; font: 700 18px var(--f-round); }

/* Submit */
.society-cta { margin: 16px 0 0; }
.society-submit {
  font: 400 22px var(--f-logo);
  background: linear-gradient(#ffd56b, #ff9a1a);
  color: #fff;
  -webkit-text-stroke: 1px #6b2d00;
  text-shadow: 0 2px 0 #6b2d00;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 8px 22px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
}
.society-submit:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.society-submit:disabled { opacity: .6; cursor: wait; }

.sf-card { width: min(520px, 100%); text-align: left; }
.sf-card h2 { margin: 0 0 2px; font: 400 30px var(--f-logo); color: var(--purple); }
.sf-sub { margin: 0 0 12px; font: 400 18px var(--f-hand); }
.sf-form { display: grid; gap: 10px; }
/* Compost temp and fertilized-a-bed fields in "Submit an entry" */
.sf-group { display: grid; gap: 12px; }
.sf-group[hidden] { display: none; }
.sf-check { display: flex; align-items: flex-start; gap: 8px; font: 600 14px var(--f-round); cursor: pointer; }
.sf-check input { margin-top: 3px; }
.sf-plan { border: 3px dashed #d6c2f5; border-radius: 14px; padding: 8px 12px; margin: 0; display: grid; gap: 6px; }
.sf-plan legend { font: 700 14px var(--f-round); padding: 0 6px; }
.sf-plan .sf-privacy { margin: 0; }
.sf-kinds { border: 3px dashed #d6c2f5; border-radius: 14px; padding: 8px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sf-kinds legend { font: 700 14px var(--f-round); padding: 0 6px; }
.sf-kinds label { font: 600 14px var(--f-round); cursor: pointer; }
.sf-row { display: grid; gap: 4px; font: 700 14px var(--f-round); color: var(--ink); }
.sf-row[hidden] { display: none; }
.sf-row input, .sf-row textarea, .sf-row select, .sf-other input[name=other] {
  font: 400 15px var(--f-body); padding: 8px 10px; border: 2px solid #c9b8f2; border-radius: 10px; background: #fff; width: 100%;
}
.sf-row textarea { resize: vertical; }
.sf-privacy { margin: 0; font: 600 13px/1.4 var(--f-round); background: #fff6d6; border-radius: 10px; padding: 8px 10px; }
.sf-status { margin: 0; min-height: 1.3em; font: 600 14px var(--f-round); }
.sf-status.is-ok { color: #2e6b1f; }
.sf-status.is-error { color: #b3261e; }

@media (max-width: 520px) {
  .society-tabs button { font-size: 14px; padding: 6px 10px; }
  .ch-value { font-size: 40px; }
}

/* ---------- Admin page (society-admin.html) ---------- */
.adm-body { background: var(--lav); }
.adm { max-width: 900px; margin: 0 auto; padding: 16px; }
.adm-back a { color: var(--purple); font: 700 14px var(--f-round); }
.adm-title { font: 400 40px var(--f-logo); color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-align: center; margin: 4px 0 16px; }
.adm-card { background: #fff; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); padding: 14px; margin-bottom: 14px; }
.adm-card h2 { margin: 0; font: 700 18px var(--f-round); grid-column: 1 / -1; }
/* Garden tab: one card per bed with its to-do checklist and feeding log */
#admBeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
#admBeds .adm-card { margin: 0; }
.adm-bed h2 { margin-bottom: 8px; }
.adm-bed-fix { margin: 0 0 4px; font-weight: 700; font-size: 13px; color: #c2410c; }
.adm-bed-todo { margin: 8px 0 4px; font-size: 13px; font-weight: 700; }
.adm-todo { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.adm-todo .sf-check { font: 400 13px/1.4 var(--f-body); }
.adm-waiting { color: #a0670a; font-size: 12px; }
.adm-todo input:checked + span { color: #8a8299; text-decoration: line-through; }
.adm-bed-next { margin: 0 0 8px; padding: 6px 10px; background: #fffaf0; border-left: 5px solid #8f5d2a; font-size: 13px; line-height: 1.6; }
.adm-feeds { font-size: 12px; }
.adm-pending { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.adm-pending li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding-bottom: 8px; border-bottom: 1px dashed #d6c2f5; }
.adm-review-btns { display: flex; gap: 6px; }
.adm-login { max-width: 380px; margin: 0 auto; display: grid; gap: 10px; }
.adm-tabs { justify-content: flex-start; }
.adm-signout { margin-left: auto; }
.adm-filter { display: flex; gap: 6px; margin-bottom: 12px; }
.adm-filter button, .adm-actions button, .adm-project button, .adm-small {
  font: 700 14px var(--f-round); border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 6px 12px; cursor: pointer;
}
.adm-filter button[aria-pressed="true"] { background: var(--purple); color: #fff; }
.adm-fields, .adm-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.adm-wide { grid-column: 1 / -1; }
.adm-emoji { max-width: 90px; }
.adm-check { font: 700 14px var(--f-round); display: flex; gap: 6px; align-items: center; }
.adm-photos { margin: 10px 0 4px; max-width: 420px; }
.adm-photos img { min-height: 60px; background: #f2eefb; }
.adm-hint { margin: 0 0 6px; font: 600 12px var(--f-round); color: #8a3a00; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.adm-ok { background: #e8f7d6 !important; }
.adm-no { background: #fff6d6 !important; }
.adm-del { background: #ffe1e1 !important; }
.adm-small { padding: 2px 8px; }
.adm-table { width: 100%; border-collapse: collapse; font: 600 13px var(--f-round); }
.adm-table th, .adm-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #ece7f2; }
.adm [hidden] { display: none !important; }

/* Almanac as the 4th Garden Society tab (the planting calendar from main.js lives in #growing) */
.society-almanac {
  margin-top: 4px;
  border-width: 4px;
  box-shadow: 0 0 0 3px var(--green-dark), 0 6px 0 3px rgba(43, 26, 82, .12);
}
.society-almanac .leaf-title span { font-size: 24px; }

/* Garden Society photos in the Journal (data.js → photos.club with a date) */
.club-post .club-photo { display: block; margin: 0 0 8px; }
.club-post .club-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 6px; border: 2px solid var(--ink); }

/* Journal: 6 entries a page between BACK / NEXT arrows (scrapbook .arrow styles) */
.journal-stage { display: flex; align-items: center; gap: 12px; }
.journal-page { flex: 1; min-width: 0; }
.journal-count { text-align: center; }
@media (max-width: 520px) {
  /* Arrows go under the entries so the cards can use the full width */
  .journal-stage { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 14px 40px; }
  .journal-page { grid-column: 1 / -1; grid-row: 1; }
}

/* Shown above the photos when the written journal entries couldn't load */
.journal-missing { margin: 0 0 12px; padding: 8px 12px; background: #fff6d6; border: 2px dashed #e0c98e; border-radius: 12px; text-align: center; font: 600 14px var(--f-round); color: #6b4a1f; }
.journal-retry { margin-left: 6px; padding: 3px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); font: 700 13px var(--f-round); cursor: pointer; }

/* ---------- Garden Map tab: the Central Garden as a pixel map (js/garden-map.js, data.js → gardenMap) ---------- */
.garden-map {
  /* 4×4 pixel tiles, drawn at 2px per pixel, in straight rows and columns only (no diagonals) */
  --t-grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%237cc85a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23a8e384'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%235fae43'/%3E%3C/svg%3E");
  --t-pave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23f3e7cb'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23ede1c4'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23ede1c4'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23ede1c4'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23ede1c4'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23ede1c4'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23ede1c4'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23ede1c4'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23ede1c4'/%3E%3C/svg%3E");
  --t-soil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%238a5a33'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%236e4426'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%236e4426'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%236e4426'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%236e4426'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23a87148'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23a87148'/%3E%3C/svg%3E");
  --t-hedge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%233f8f2e'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232c6e20'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%232c6e20'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%232c6e20'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%232c6e20'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%232c6e20'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%232c6e20'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%232c6e20'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%232c6e20'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%235fae43'/%3E%3C/svg%3E");
  --t-drain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23c3bfcf'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%238f88a3'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%238f88a3'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%238f88a3'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%238f88a3'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%238f88a3'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%238f88a3'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%238f88a3'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%238f88a3'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ece9f2'/%3E%3C/svg%3E");
  --t-succ: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%237fc0a0'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%234f9277'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%234f9277'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%234f9277'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%234f9277'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%234f9277'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%234f9277'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%234f9277'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%234f9277'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23f7a6c8'/%3E%3C/svg%3E");
  --t-mush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%233cc8c0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3C/svg%3E");
  --t-run: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23e2bf88'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%239a8a74'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%239a8a74'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%239a8a74'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%239a8a74'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%239a8a74'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%239a8a74'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%239a8a74'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%239a8a74'/%3E%3C/svg%3E");
  --t-worm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%237a6a5c'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%235c4f44'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%235c4f44'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%235c4f44'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%235c4f44'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%235c4f44'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%235c4f44'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%235c4f44'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%235c4f44'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23f4a3b5'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23f4a3b5'/%3E%3C/svg%3E");
  --t-bucket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%2343a047'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%2366bb6a'/%3E%3C/svg%3E");
  --t-plank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23b07a45'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%238f5d2a'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%238f5d2a'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%238f5d2a'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%238f5d2a'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23c9935a'/%3E%3C/svg%3E");
  --t-balls: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%23efe9f7'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%2337a0e6'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%2337a0e6'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%2337a0e6'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%2337a0e6'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%2337a0e6'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%237cc85a'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%237cc85a'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%237cc85a'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%237cc85a'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%237cc85a'/%3E%3Crect x='-1' y='4' width='1' height='1' fill='%23ff8cc6'/%3E%3Crect x='-2' y='5' width='1' height='1' fill='%23ff8cc6'/%3E%3Crect x='-1' y='5' width='1' height='1' fill='%23ff8cc6'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23ff8cc6'/%3E%3Crect x='-1' y='6' width='1' height='1' fill='%23ff8cc6'/%3E%3C/svg%3E");
  --t-storage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23e88a8a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23c85f5f'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23c85f5f'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23c85f5f'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23c85f5f'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23c85f5f'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23c85f5f'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23c85f5f'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23c85f5f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23f3b0b0'/%3E%3C/svg%3E");
  --t-compost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%236b4a2b'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%234a321c'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%234a321c'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%234a321c'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%234a321c'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%234a321c'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%234a321c'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%234a321c'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%234a321c'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%237cc85a'/%3E%3C/svg%3E");
  --t-grape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%235fae43'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%238a3fd1'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%238a3fd1'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%238a3fd1'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%238a3fd1'/%3E%3C/svg%3E");
  --t-passion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%235fae43'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23b25bd6'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23b25bd6'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3C/svg%3E");
  --t-berry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%234e9a3a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232b1a52'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%232b1a52'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%232b1a52'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%232b1a52'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e0525a'/%3E%3C/svg%3E");
  --t-trellis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23e8c28c'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23a8723f'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%23a8723f'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%23a8723f'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23a8723f'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23a8723f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23a8723f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23a8723f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23a8723f'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%235fae43'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%235fae43'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%238a3fd1'/%3E%3C/svg%3E");
  --t-fig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23c06be0'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%239a45c0'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%239a45c0'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%239a45c0'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%239a45c0'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%239a45c0'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%239a45c0'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%239a45c0'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%239a45c0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e3a8f5'/%3E%3C/svg%3E");
  --t-avocado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%236cc06a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233f8f2e'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%233f8f2e'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%233f8f2e'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%233f8f2e'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%233f8f2e'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%233f8f2e'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%233f8f2e'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%233f8f2e'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232f5a1e'/%3E%3C/svg%3E");
  --t-apple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23ff8f8f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23e0525a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffd0d0'/%3E%3C/svg%3E");
  --t-lemon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23ffd23f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23e8a90c'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23e8a90c'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23e8a90c'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23e8a90c'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23e8a90c'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23e8a90c'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23e8a90c'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23e8a90c'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff3a8'/%3E%3C/svg%3E");
  --t-citrus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23ffa94d'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23e8862a'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23e8862a'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23e8862a'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23e8862a'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23e8862a'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23e8862a'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23e8862a'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23e8862a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffd8a8'/%3E%3C/svg%3E");
  --t-water: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23a8d3f7'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23e6f4ff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e6f4ff'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%235aa8f0'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%235aa8f0'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%235aa8f0'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%235aa8f0'/%3E%3C/svg%3E");
  --t-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23ffb84d'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23e08a1e'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%23e08a1e'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%23e08a1e'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23e08a1e'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffd08a'/%3E%3C/svg%3E");
  --t-shed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23c48a4a'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%238f5d2a'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%238f5d2a'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%238f5d2a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%238f5d2a'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23d9a56a'/%3E%3C/svg%3E");
  --t-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23ff9f9f'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23f08080'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%23f08080'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%23f08080'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23f08080'/%3E%3C/svg%3E");
  --t-lav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23c4c2fb'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23bdbaf7'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23bdbaf7'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23bdbaf7'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23bdbaf7'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23bdbaf7'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23bdbaf7'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23bdbaf7'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23bdbaf7'/%3E%3C/svg%3E");
  --t-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%239db48a'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%2386a073'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%2386a073'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%2386a073'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%2386a073'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23b3c7a2'/%3E%3C/svg%3E");
}
.gm-head { margin-bottom: 12px; }
/* Garden picker (Central Garden / Middle School), only when data.js has gardenMap.otherMaps */
.gm-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.gm-switch button {
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 14px var(--f-round);
  padding: 5px 14px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.gm-switch button:hover { background: #fff3c4; }
.gm-switch button[aria-pressed="true"] { background: var(--green-dark); color: #fff; }
.gm-switch button:focus-visible { outline: 3px dashed var(--pink); outline-offset: 2px; }
.gm-season { margin: 4px 0 0; font: 10px var(--f-pixel); color: #6b4a1f; }
.gm-wrap {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  justify-content: center;
  text-align: left;
}
.gm-frame { width: 100%; }
/* js/garden-map.js sets the size: 40 × 53 squares of --c pixels (other maps set their own), plus the 6px frame */
.gm-map {
  --c: 10px;
  position: relative;
  container-type: inline-size;
  width: calc(var(--c) * 40 + 12px);
  height: calc(var(--c) * 53 + 12px);
  margin: 0 auto;
  background: var(--t-pave) 0 0 / 8px 8px;
  image-rendering: pixelated;
  border: 6px solid #c48a4a;
  outline: 3px solid var(--ink);
  box-shadow: 0 8px 0 rgba(43, 26, 82, .2);
}
.gm-spot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));
}
button.gm-spot, .gm-more { cursor: pointer; }
/* Scenery (grass, hedges, buildings, signs) can't be clicked, so the mouse goes right through it */
div.gm-spot:not(.gm-more) { pointer-events: none; }
.gm-shape { position: absolute; inset: 0; background: 0 0 / 8px 8px; image-rendering: pixelated; }
.gm-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font: 2.2cqw/1.3 var(--f-pixel);
  color: #fff;
  text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 1px 0 var(--ink);
  pointer-events: none;
}
.gm-text img.px-emoji { width: 3.6cqw !important; height: 3.6cqw !important; }

/* Ground and plants */
.gm-grass { filter: none; }
.gm-grass .gm-shape { background-image: var(--t-grass); }
.gm-hedge { filter: none; }
.gm-hedge .gm-shape { background-image: var(--t-hedge); }
.gm-mulch { filter: none; } /* wood chips */
.gm-mulch .gm-shape { background-image: var(--t-run); }
/* Hallways and walkways: just a dashed edge on the pavement */
.gm-hall { filter: none; }
.gm-hall .gm-shape { outline: 2px dashed rgba(43, 26, 82, .45); outline-offset: -3px; }
.gm-hall .gm-text { font-size: 1.6cqw; }
.gm-narrow .gm-text { font-size: 1.3cqw; padding: 0 1px; }
/* A possible future garden (shade gardens under the stairs): pale, with a dashed edge */
.gm-shade .gm-shape { background: #cfd9c3; outline: 2px dashed var(--ink); outline-offset: -4px; }
.gm-shade .gm-text { font-size: 1.6cqw; padding: 0 4px; }
.gm-fence { filter: none; }
.gm-fence .gm-shape { left: 35%; right: 35%; background: repeating-linear-gradient(var(--ink) 0 8px, transparent 8px 14px); }
.gm-bed .gm-shape { background-image: var(--t-soil); box-shadow: inset 0 0 0 2px #c48a4a, inset 0 0 0 3px #8f5d2a; }
.gm-native .gm-shape { background-image: var(--t-succ); }
.gm-native .gm-text { font-size: 1.6cqw; }
/* Oval beds: corners stepped off like pixel art */
.gm-oval .gm-shape { clip-path: polygon(20% 0, 80% 0, 80% 8%, 92% 8%, 92% 22%, 100% 22%, 100% 78%, 92% 78%, 92% 92%, 80% 92%, 80% 100%, 20% 100%, 20% 92%, 8% 92%, 8% 78%, 0 78%, 0 22%, 8% 22%, 8% 8%, 20% 8%); }
.gm-run .gm-shape { background-image: var(--t-run); }
.gm-coop .gm-shape { background-image: var(--t-wood); }
.gm-succulents .gm-shape { background-image: var(--t-succ); }
.gm-sink .gm-shape { background-image: var(--t-water); }
.gm-sink .gm-text { font-size: 2.6cqw; }
.gm-vine .gm-shape { background-image: var(--t-grape); }
.gm-passion .gm-shape { background-image: var(--t-passion); }
.gm-berry .gm-shape { background-image: var(--t-berry); }
.gm-trellis .gm-shape { background-image: var(--t-trellis); }
.gm-shed .gm-shape { background-image: var(--t-shed); }
.gm-box .gm-shape { background: var(--ink); }
.gm-building { filter: none; }
.gm-building .gm-shape { box-shadow: inset 0 0 0 1px rgba(43, 26, 82, .35); }
.gm-pink .gm-shape { background-image: var(--t-pink); }
.gm-lav .gm-shape { background-image: var(--t-lav); }
.gm-green .gm-shape { background-image: var(--t-green); }
.gm-building .gm-text { font-size: 2.6cqw; }
button.gm-building { filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); }
.gm-sign .gm-shape { background: var(--yellow); }
.gm-sign .gm-text { color: var(--ink); text-shadow: none; font-size: 1.8cqw; }
/* Trees and compost piles always sit on top of what they overhang (vines, fences, the classroom).
   Hovering never changes the stacking, so a big spot can't jump in front of a small one. */
.gm-tree, .gm-compost, .gm-faucet { z-index: 1; }
/* Trees, compost piles and the mushroom tables are round: circles stepped like pixel art */
.gm-tree .gm-shape,
.gm-compost .gm-shape,
.gm-faucet .gm-shape,
.gm-mushrooms .gm-shape {
  clip-path: polygon(30% 0, 70% 0, 70% 10%, 90% 10%, 90% 30%, 100% 30%, 100% 70%, 90% 70%, 90% 90%, 70% 90%, 70% 100%, 30% 100%, 30% 90%, 10% 90%, 10% 70%, 0 70%, 0 30%, 10% 30%, 10% 10%, 30% 10%);
}
.gm-compost .gm-shape { background-image: var(--t-compost); }
.gm-worm .gm-shape { background-image: var(--t-worm); } /* the worm bin (broken for now) */
.gm-tree .gm-shape { background-image: var(--t-avocado); } /* a tree with no tone */
.gm-faucet .gm-shape { background-image: var(--t-water); }
.gm-fig .gm-shape { background-image: var(--t-fig); }
.gm-avocado .gm-shape { background-image: var(--t-avocado); }
.gm-apple .gm-shape { background-image: var(--t-apple); }
.gm-lemon .gm-shape { background-image: var(--t-lemon); }
.gm-citrus .gm-shape { background-image: var(--t-citrus); }
/* Spots that aren't rectangles (the L-shaped YMCA Room) only catch clicks on their shape, so the
   shed and grass inside the L's corner stay clickable */
button.gm-clip { pointer-events: none; }
.gm-clip .gm-shape { pointer-events: auto; }

/* The shelf by the sink, and the picnic table we use as a garden bench (tabletop with a bench on each side) */
.gm-shelf .gm-shape { background-image: var(--t-shed); box-shadow: inset 0 0 0 2px #6b4220; }
/* the middle shelf board */
.gm-shelf .gm-shape::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #6b4220; }
.gm-table .gm-shape { inset: 30% 0; background-image: var(--t-plank); }
.gm-table::before,
.gm-table::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 18%;
  background: #8f5d2a;
  box-shadow: inset 0 -2px 0 #6b4220;
}
.gm-table::before { top: 0; }
.gm-table::after { bottom: 0; }

/* The farm cart, seen from above: brown wooden bed in a white metal frame, four wheels and a white handle */
.gm-cart .gm-shape { inset: 4% 14% 20%; background-image: var(--t-plank); box-shadow: inset 0 0 0 3px #f4f1e8, inset 0 0 0 4px #9a8f84; }
.gm-cart::before {
  content: "";
  position: absolute;
  left: 34%;
  right: 34%;
  bottom: 0;
  height: 20%;
  border: 3px solid #f4f1e8;
  border-top: 0;
  filter: drop-shadow(0 0 1px var(--ink));
}
.gm-cart::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  width: 14%;
  height: 14%;
  background: var(--ink);
  box-shadow:
    calc(var(--c) * 2.58) 0 0 var(--ink),
    0 calc(var(--c) * 2.9) 0 var(--ink),
    calc(var(--c) * 2.58) calc(var(--c) * 2.9) 0 var(--ink);
}

/* YMCA storage (crates, a darker pink than the room) and the YMCA's bin of play balls */
.gm-storage .gm-shape { background-image: var(--t-storage); }
.gm-balls .gm-shape { background: var(--t-balls) 0 0 / 16px 16px; box-shadow: inset 0 0 0 2px #9a8fb0; }

/* The green compost bucket we carry to the cafeteria: a stepped bucket shape with a square handle */
.gm-bucket .gm-shape {
  background-image: var(--t-bucket);
  box-shadow: inset 0 3px 0 #a5d6a7;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 85% 75%, 85% 100%, 15% 100%, 15% 75%, 0 75%);
}
.gm-handle {
  position: absolute;
  left: 22%;
  right: 22%;
  top: -40%;
  height: 45%;
  border: 2px solid var(--ink);
  border-bottom: 0;
  pointer-events: none;
}

/* Beyonce doing laps in the chicken run (her sprite faces left, so it flips when she runs right) */
.gm-runner { position: absolute; z-index: 2; pointer-events: none; }
/* Things buried in a bed (has in data.js): an olla (clay pot with water showing) and an in-ground worm bin (lid with a worm) */
.gm-feature { position: absolute; z-index: 2; width: var(--c); height: var(--c); pointer-events: none; }
.gm-f-olla { border-radius: 50%; box-shadow: 0 0 0 1px var(--ink); background: radial-gradient(circle, #5aa8f0 0 32%, #c8693a 34% 100%); }
/* The worm bin is its pixel 🪱 (js/pixel-emoji.js swaps the emoji for the sprite) */
.gm-f-wormbin { display: grid; place-items: center; font-size: var(--c); line-height: 1; }
.gm-has-icon.gm-f-wormbin { font-size: 13px; }
.gm-f-wormbin img.px-emoji { width: 100% !important; height: 100% !important; margin: 0 !important; }
.gm-has { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.gm-has-icon { flex: none; display: inline-block; width: 13px; height: 13px; }
/* "Olla" / "In-ground worm bin": tap to open what it is */
.gm-def-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid #e2bf88; border-radius: 999px; background: #fff7e8; color: #6b4a1f;
  font: 700 14px var(--f-round); padding: 2px 10px; cursor: pointer;
}
.gm-def-btn:hover, .gm-def-btn[aria-expanded="true"] { background: #ffe6bd; border-color: #c48a4a; }
.gm-def-btn:focus-visible { outline: 3px dashed var(--pink); outline-offset: 2px; }
.gm-def { margin: 0 0 10px; padding: 8px 10px; background: #fff7e8; border: 2px dashed #c48a4a; border-radius: 10px; font-size: 14px; line-height: 1.4; }
.gm-due { color: #a0670a; font-weight: 700; }
.gm-runner-sprite {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(var(--c) * 1.8);
  height: calc(var(--c) * 1.8);
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
  animation: gm-laps 7s linear infinite;
}
.gm-runner-sprite svg { display: block; width: 100%; height: 100%; animation: gm-hop .35s steps(2) infinite; }
@keyframes gm-laps {
  0% { left: 0; transform: scaleX(-1); }
  46% { left: calc(100% - var(--c) * 1.8); transform: scaleX(-1); }
  50% { left: calc(100% - var(--c) * 1.8); transform: scaleX(1); }
  96% { left: 0; transform: scaleX(1); }
  100% { left: 0; transform: scaleX(-1); }
}
@keyframes gm-hop { 50% { transform: translateY(-12%); } }

/* Round spots only catch clicks on the circle itself, not the empty corners of their square */
button.gm-tree, button.gm-compost, button.gm-faucet, button.gm-mushrooms { pointer-events: none; }
.gm-tree .gm-shape, .gm-compost .gm-shape, .gm-faucet .gm-shape, .gm-mushrooms .gm-shape { pointer-events: auto; }
/* Trees are drawn a little inside their squares; the small citrus tree even more */
.gm-tree .gm-shape { inset: 3px; }
.gm-tree.gm-citrus .gm-shape { inset: 7px; }
.gm-mushrooms .gm-shape { background-image: var(--t-mush); }
.gm-short .gm-shape { inset: 4px; } /* the shorter mushroom table is drawn a bit smaller */
.gm-drain .gm-shape { background-image: var(--t-drain); }

/* Hovered / picked spot: a blinking yellow outline */
button.gm-spot:hover,
.gm-more:hover,
.gm-spot.is-on {
  filter: drop-shadow(2px 0 0 var(--yellow)) drop-shadow(-2px 0 0 var(--yellow)) drop-shadow(0 2px 0 var(--yellow)) drop-shadow(0 -2px 0 var(--yellow)) drop-shadow(0 0 1px var(--ink));
}
.gm-spot.is-on .gm-shape { animation: gm-blink 1s steps(2) infinite; }
@keyframes gm-blink { 50% { opacity: .75; } }
button.gm-spot:focus-visible { outline: 3px dashed var(--pink); outline-offset: 2px; }

/* What's growing: an Animal Crossing speech box */
.gm-info {
  position: sticky;
  top: 24px;
  margin-top: 18px;
  background: #fff;
  border-radius: 34px / 28px;
  padding: 24px 24px 18px;
  box-shadow: 0 5px 0 #e8d9b0, 0 0 0 4px #e9dcb8;
  font: 500 16px/1.45 var(--f-round);
  min-height: 120px;
}
.gm-name {
  position: absolute;
  top: -16px;
  left: 24px;
  background: var(--orange);
  color: #fff;
  font: 700 16px var(--f-round);
  padding: 3px 18px;
  border-radius: 999px;
  box-shadow: 0 3px 0 #c9630c;
}
.gm-body p { margin: 0 0 8px; }
.gm-what { font: 9px var(--f-pixel); color: var(--green-dark); }
/* Plants not to pull (keep in data.js): the name is a button that shows a photo */
.gm-keep {
  border: 0;
  border-bottom: 2px dashed currentColor;
  background: #eaf7df;
  color: var(--green-dark);
  font: inherit;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}
.gm-keep::before { content: "📷 "; }
.gm-keep:hover, .gm-keep[aria-expanded="true"] { background: #bfe3a6; }
.gm-keep:focus-visible { outline: 3px dashed var(--pink); outline-offset: 2px; }
.gm-keep-photo { margin: 0 0 10px; padding: 8px; background: #f3fbea; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 #e8d9b0; }
.gm-keep-note { font-size: 14px; line-height: 1.35; }
.gm-keep-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; }
.gm-keep-pics figure { margin: 0; padding: 6px 6px 4px; background: #fff; border: 2px solid #bfe3a6; border-radius: 8px; }
.gm-keep-pics img, .gm-keep-pics .img-fallback { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 5px; background: #eaf7df; }
.gm-keep-pics .img-fallback { display: grid; place-items: center; }
.gm-keep-pics figcaption { margin-top: 5px; font-size: 13px; line-height: 1.3; }
.gm-credit { display: block; margin-top: 3px; font-size: 10px; color: #6b4a1f; }
.gm-credit a { color: inherit; }
.gm-plants { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gm-plants li { background: #eaf7df; border: 2px solid #bfe3a6; border-radius: 999px; padding: 2px 12px; font-size: 15px; }
.gm-what-fix { color: #c2410c; }
.gm-fix, .gm-todo, .gm-feed { list-style: none; margin: 0 0 10px; padding: 0; font-size: 14px; line-height: 1.4; }
.gm-fix li, .gm-todo li, .gm-feed li { position: relative; padding: 3px 0 3px 24px; }
/* Feeding calendar: each line starts with a little pixel seed bag */
.gm-what-feed { color: #8f5d2a; }
.gm-feed li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 11px;
  height: 13px;
  background: linear-gradient(#8f5d2a 0 3px, #d9a56a 3px 100%);
  border: 2px solid #5c3a17;
}
/* Feeding log: last fed / next feeding, like a little ledger card */
.gm-log {
  margin: 2px 0 10px;
  padding: 7px 10px;
  background: repeating-linear-gradient(#fffdf4 0 21px, #eadfc2 21px 22px);
  border: 2px solid #c9a96a;
  border-left: 6px solid #8f5d2a;
  font-size: 14px;
  line-height: 22px;
}
.gm-log p { margin: 0; }
.gm-log b { color: #8f5d2a; }
.gm-feed-note { margin: -4px 0 8px; font-size: 12px; color: #6b4a1f; font-style: italic; }
/* Pixel checkboxes for the to-dos, warning signs for repairs */
.gm-todo li::before,
.gm-fix li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--green-dark);
}
/* To-dos Yvy crossed off on the admin page */
.gm-todo li.is-done, .gm-fix li.is-done { color: #8a8299; text-decoration: line-through; }
.gm-todo li.is-done::before, .gm-fix li.is-done::before { content: "✓"; background: var(--green); border-color: transparent; color: #fff; font: 700 11px/12px var(--f-round); text-align: center; }
/* A member says it's done, but Yvy hasn't OK'd it yet */
.gm-todo li.is-pending, .gm-fix li.is-pending { color: #8a8299; }
.gm-todo li.is-pending::before, .gm-fix li.is-pending::before { content: "?"; background: var(--yellow); border-color: var(--ink); color: var(--ink); font: 8px/12px var(--f-pixel); text-align: center; }
.gm-waiting { font-size: 12px; color: #a0670a; }
.gm-report { margin: 0 0 10px; }
/* Submit an entry → Did a to-do: ones already done or waiting can't be checked again */
.sf-todo-done span, .sf-todo-pending span { color: #8a8299; }
.sf-todo-done span { text-decoration: line-through; }
.sf-todo-done em, .sf-todo-pending em { font-size: 12px; }
.sf-other { margin-top: 4px; display: grid; gap: 6px; }
.sf-other input[name=other] { margin-left: 24px; width: calc(100% - 24px); }
.sf-other input[name=other][hidden] { display: none; }
.gm-when { font-size: 12px; color: #8a8299; text-decoration: none; display: inline-block; }
.gm-fix li::before { content: "!"; background: var(--yellow); border-color: var(--ink); font: 8px/12px var(--f-pixel); text-align: center; color: var(--ink); }
/* The "!" quest marker on spots that need fixing */
.gm-alert {
  position: absolute;
  z-index: 5;
  margin: -8px 0 0 -9px;
  width: 13px;
  height: 15px;
  display: grid;
  place-items: center;
  background: var(--yellow);
  border: 2px solid var(--ink);
  font: 8px var(--f-pixel);
  color: var(--ink);
  pointer-events: none;
  animation: gm-bounce 1.2s steps(2) infinite;
}
.gm-alert[hidden] { display: none; } /* every repair crossed off */
@keyframes gm-bounce { 50% { transform: translateY(-2px); } }
.gm-go {
  display: inline-block;
  margin-top: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font: 700 14px var(--f-round);
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
}
.gm-go:hover { background: var(--orange); }

@media (max-width: 820px) {
  .gm-wrap { grid-template-columns: minmax(0, 500px); }
  /* On phones the speech box sits above the map. It keeps its height so the map doesn't jump
     when you tap, and it never covers the map (tapping scrolls it back into view instead) */
  .gm-info { position: relative; order: -1; margin: 18px 0 4px; min-height: 172px; padding: 20px 18px 12px; font-size: 15px; }
}
@media (max-width: 520px) {
  /* Give the map most of the phone's width */
  .garden-map { padding: 18px 6px 12px; margin-inline: -12px; }
  .gm-tree .gm-shape { inset: 2px; }
  .gm-tree.gm-citrus .gm-shape { inset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-spot.is-on .gm-shape { animation: none; }
  .gm-alert { animation: none; }
  .gm-runner-sprite, .gm-runner-sprite svg { animation: none; }
}

/* ---------- Lesson Board: its own chalkboard section under the Hall of Fame (main.js → buildLessonBoard) ---------- */
.lesson-board {
  padding: 18px 22px 22px;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, .07), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(255, 255, 255, .05), transparent 50%),
    #2f4a3a;
  border: 10px solid #c48a4a;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #8f5d2a, 0 6px 0 rgba(43, 26, 82, .25);
  color: #f4f1e8;
  text-align: left;
  font-family: var(--f-hand);
}
.lesson-board[hidden] { display: none; }
.lb-heading { margin: 0 0 12px; text-align: center; font: 400 34px var(--f-hand); color: #fff; letter-spacing: .5px; }
.lesson-board section + section { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(244, 241, 232, .35); }
.lb-label { margin: 0 0 2px; font: 9px var(--f-pixel); color: #ffd23f; }
.lb-done .lb-label { color: #a8e384; }
.lb-unit { margin: 6px 0 0; font-size: 17px; color: #cfe8d6; }
.lb-title { margin: 0; font: 400 26px/1.15 var(--f-hand); color: #fff; }
.lb-where { margin: 4px 0 8px; font: 15px/1.4 var(--f-round); color: #e6efe8; }
.lb-where b { color: #ffd6ec; }
.lb-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lb-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 2px dashed rgba(244, 241, 232, .55);
  border-radius: 10px;
  font-size: 18px;
}
.lb-mark { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; font: 700 12px var(--f-round); }
.lb-steps li.is-done { border-style: solid; border-color: #a8e384; color: #a8e384; }
.lb-steps li.is-now { border-style: solid; border-color: #ffd23f; color: #ffd23f; background: rgba(255, 210, 63, .12); }
.lb-tag { font: 8px var(--f-pixel); color: #2f4a3a; background: #ffd23f; padding: 3px 5px; border-radius: 4px; }
.lb-play { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #ffd23f; color: var(--ink); font: 700 14px var(--f-round); text-decoration: none; box-shadow: 0 3px 0 #b98d00; }
.lb-play:hover { background: #ffe27a; }
.lb-lesson + .lb-lesson { margin-top: 10px; }
@media (max-width: 520px) {
  .lesson-board { padding: 12px 12px 14px; border-width: 8px; }
  .lb-heading { font-size: 28px; }
  .lb-title { font-size: 23px; }
  .lb-steps li { font-size: 16px; }
}