/* Prize Marrow: game layer on top of design/garden.css. Tokens only (no new colours or fonts).
   Layout classes on <html>: .pm-lay-phone (portrait), .pm-lay-land (phone held sideways), .pm-lay-desk (wide).
   .pm-in-run while the garden is on screen. */

html, body { height: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
.pm-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pm-screen[hidden] { display: none !important; }
.pm-help-btn { font-family: var(--gg-font-display); font-weight: 800; font-size: 22px; }
.ggp-trophy svg { width: 22px; height: 22px; }

/* ===================================================================== start */
.pm-start { padding: var(--gg-s5) 0 var(--gg-s7); }
.pm-start__in { display: grid; gap: var(--gg-s5); }
.pm-start__hero h1 { margin: 4px 0 8px; }
.pm-hero { position: relative; margin: var(--gg-s4) 0 0; height: 200px; border: var(--gg-border); border-radius: var(--gg-r-xl);
  background: var(--gg-felt); background-color: var(--gg-green-700); box-shadow: var(--gg-shadow-lg); overflow: hidden; }
.pm-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-ribbonline { margin-top: var(--gg-s3); font-weight: 700; font-size: var(--gg-text-sm); color: var(--gg-ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pm-ribbonline .gg-pill { font-size: 13px; }
.pm-start__side { display: grid; gap: var(--gg-s4); align-content: start; }
.pm-playpanel { display: grid; gap: var(--gg-s3); }
.pm-seg { width: 100%; }
.pm-seg button { padding: 0 6px; }
.pm-bests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pm-best { text-align: center; padding: 6px 2px 7px; border-radius: var(--gg-r-sm); border: 1.5px solid var(--gg-line); background: var(--gg-cream); transition: background-color var(--gg-dur-md) ease, border-color var(--gg-dur-md) ease; }
.pm-best.is-on { background: var(--gg-butter-100); border-color: var(--gg-ink); }
.pm-best b { display: block; font-family: var(--gg-font-display); font-weight: 800; font-size: 22px; line-height: 1.05; }
.pm-best span { font-size: 13px; font-weight: 700; color: var(--gg-ink-3); }
.pm-shedbtn { justify-content: space-between; padding-inline: 22px 12px; }
.pm-compost-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--gg-r-pill); background: var(--gg-cream); color: var(--gg-ink); border: 2px solid var(--gg-ink); font-family: var(--gg-font-body); font-weight: 800; font-size: 15px; }
.pm-compost-pill svg { width: 22px; height: 22px; }
.pm-how ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.pm-how li { display: flex; gap: 12px; align-items: center; font-size: var(--gg-text-sm); line-height: 1.35; }
.pm-howicon { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--gg-ink); background: var(--gg-green-100); display: grid; place-items: center; overflow: hidden; }
.pm-howicon canvas { width: 40px; height: 40px; }

/* ===================================================================== the run: common */
html.pm-in-run, html.pm-in-run body { overflow: hidden; overscroll-behavior: none; }
.pm-run { position: relative; flex: 1; display: grid; min-height: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pm-boardwrap { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; }
.pm-boardframe { position: relative; }
#board { display: block; border: var(--gg-border); border-radius: 18px; box-shadow: var(--gg-shadow-lg); touch-action: none; cursor: pointer; background: var(--gg-green-500); will-change: transform; }

/* HUD */
.pm-hud { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pm-gnome { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; border: var(--gg-border); background: var(--gg-green-100); box-shadow: var(--gg-shadow-sm); }
.pm-gnome canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
.pm-bubble {
  position: absolute; left: 6px; top: calc(100% + 10px); z-index: 30; width: max-content; max-width: min(300px, 78vw);
  padding: 9px 14px; border: var(--gg-border); border-radius: 16px; background: var(--gg-paper); box-shadow: var(--gg-shadow);
  font-weight: 700; font-size: var(--gg-text-sm); line-height: 1.3; pointer-events: none;
}
.pm-bubble::before { content: ""; position: absolute; left: 14px; top: -9px; width: 14px; height: 14px; background: var(--gg-paper); border-left: var(--gg-border); border-top: var(--gg-border); transform: rotate(45deg); border-top-left-radius: 3px; }
.pm-stat { display: flex; align-items: center; gap: 6px; min-width: 0; height: 46px; padding: 0 10px; border: var(--gg-border); border-radius: var(--gg-r-pill); background: var(--gg-paper); box-shadow: var(--gg-shadow-sm); }
.pm-stat__k { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-ink-3); }
.pm-stat__v { font-family: var(--gg-font-display); font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; }
.pm-stat__icon { flex: none; width: 24px; height: 24px; display: grid; }
.pm-stat__icon svg { width: 24px; height: 24px; }
.pm-stat--hp { flex: 1 1 auto; position: relative; overflow: hidden; min-width: 74px; justify-content: center; }
.pm-stat--hp > :not(.pm-hpbar) { position: relative; z-index: 1; }
.pm-hpbar { position: absolute; inset: 0; z-index: 0; }
.pm-hpbar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 100%); background: var(--gg-green-100); border-right: 2px solid var(--gg-green-300); transition: width var(--gg-dur-lg) var(--gg-ease-out), background-color var(--gg-dur-md) ease; }
.pm-stat--hp.is-low .pm-hpbar i { background: var(--gg-pink-100); border-color: var(--gg-suit-red); }
.pm-stat--wave { flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 10px; }
.pm-stat--wave .pm-stat__k { font-size: 13px; line-height: 1; }
.pm-stat--wave .pm-stat__v { font-size: 20px; }
.pm-stat--seeds { min-width: 76px; }
.pm-stat--hp.is-bit { animation: pm-hpflash calc(520ms * var(--gg-time)) ease-out; }
@keyframes pm-hpflash { 0% { background: var(--gg-pink-100); transform: translateX(0); } 15% { transform: translateX(-4px); } 30% { transform: translateX(4px); } 45% { transform: translateX(-2px); } 100% { background: var(--gg-paper); transform: none; } }
.pm-stat--seeds.is-pop .pm-stat__v { animation: pm-numpop calc(260ms * var(--gg-time)) var(--gg-ease-spring); }
.pm-stat--seeds.is-pop .pm-stat__icon { animation: pm-numpop calc(260ms * var(--gg-time)) var(--gg-ease-spring); }
@keyframes pm-numpop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.pm-hudbtns { display: flex; gap: 6px; flex: none; }
.pm-hudbtn {
  min-width: 46px; height: 46px; padding: 0 8px; border: var(--gg-border); border-radius: 14px; background: var(--gg-paper); box-shadow: var(--gg-shadow-sm);
  font-family: var(--gg-font-display); font-weight: 800; font-size: 19px; cursor: pointer; display: grid; place-items: center; touch-action: manipulation;
  transition: transform var(--gg-dur-xs) var(--gg-ease-out), box-shadow var(--gg-dur-xs) var(--gg-ease-out), background-color var(--gg-dur-sm) ease;
}
.pm-hudbtn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--gg-ink); }
.pm-hudbtn svg { width: 22px; height: 22px; }
.pm-hudbtn[data-speed="2"], .pm-hudbtn[data-speed="3"] { background: var(--gg-butter); }
.pm-hud__extra { display: none; }

/* board overlays */
.pm-banner { position: absolute; left: 50%; top: 34%; z-index: 12; transform: translate(-50%, -50%); pointer-events: none; display: grid; justify-items: center; gap: 6px; text-align: center; width: max-content; max-width: 92%; }
.pm-banner__t { font-family: var(--gg-font-display); font-weight: 800; font-size: clamp(30px, 9vw, 50px); line-height: 1; letter-spacing: -.03em; color: var(--gg-cream);
  -webkit-text-stroke: 2px var(--gg-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--gg-ink); }
.pm-banner__s { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: var(--gg-border); border-radius: var(--gg-r-pill); background: var(--gg-butter); box-shadow: var(--gg-shadow-sm); font-weight: 800; font-size: var(--gg-text-md); }
.pm-banner__s svg { width: 22px; height: 22px; }
.pm-banner__s--warn { background: var(--gg-paper); }
.pm-bossbar { position: absolute; left: 50%; top: 10px; z-index: 11; transform: translateX(-50%); width: min(78%, 360px); display: grid; gap: 4px; padding: 6px 10px 8px; border: var(--gg-border); border-radius: 14px; background: var(--gg-paper); box-shadow: var(--gg-shadow-sm); pointer-events: none; }
.pm-bossbar[hidden] { display: none; }
.pm-bossbar__name { font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.pm-bossbar__bar { position: relative; height: 10px; border: 2px solid var(--gg-ink); border-radius: var(--gg-r-pill); background: var(--gg-sand); overflow: hidden; }
.pm-bossbar__bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 100%); background: var(--gg-suit-red); transition: width var(--gg-dur-sm) linear; }

/* the plot popover: four plant chips */
.pm-pop { position: absolute; z-index: 14; display: flex; gap: 6px; padding: 6px; border: var(--gg-border); border-radius: 18px; background: var(--gg-paper); box-shadow: var(--gg-shadow); transform-origin: 50% 100%; }
.pm-pop[hidden] { display: none; }
.pm-pop.is-below { transform-origin: 50% 0; }
.pm-pop::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -9px; width: 14px; height: 14px; margin-left: -7px; background: var(--gg-paper); border-right: var(--gg-border); border-bottom: var(--gg-border); transform: rotate(45deg); border-bottom-right-radius: 3px; }
.pm-pop.is-below::after { bottom: auto; top: -9px; transform: rotate(225deg); }
.pm-chip { position: relative; width: 60px; height: 70px; padding: 0; border: 2px solid var(--gg-ink); border-radius: 13px; background: var(--gg-green-100); cursor: pointer; display: grid; grid-template-rows: 1fr auto; overflow: hidden; touch-action: none;
  transition: transform var(--gg-dur-xs) var(--gg-ease-out), background-color var(--gg-dur-sm) ease; }
.pm-chip canvas { width: 100%; height: 44px; display: block; }
.pm-chip__cost { display: flex; align-items: center; justify-content: center; gap: 2px; height: 24px; border-top: 2px solid var(--gg-ink); background: var(--gg-paper); font-weight: 800; font-size: 14px; }
.pm-chip__cost svg { width: 15px; height: 15px; }
.pm-chip.is-preview { background: var(--gg-lime-100); transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gg-lime); }
.pm-chip.is-off { cursor: not-allowed; }
.pm-chip.is-off canvas { opacity: .45; filter: grayscale(.6); }
.pm-chip.is-off .pm-chip__cost { color: var(--gg-ink-3); background: var(--gg-sand); }
.pm-chip.is-locked .pm-chip__cost svg { width: 16px; height: 16px; }

/* tray */
.pm-tray { position: relative; display: grid; min-width: 0; }
.pm-tray__main { display: grid; gap: 8px; min-width: 0; }
.pm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.pm-card { position: relative; min-width: 0; height: 74px; padding: 0; border: var(--gg-border); border-radius: 16px; background: var(--gg-paper); box-shadow: var(--gg-shadow-sm); cursor: pointer;
  display: grid; grid-template-rows: 1fr auto; overflow: hidden; touch-action: manipulation; text-align: center;
  transition: transform var(--gg-dur-sm) var(--gg-ease-spring), box-shadow var(--gg-dur-sm) var(--gg-ease-spring), background-color var(--gg-dur-sm) ease; }
.pm-card canvas { width: 100%; height: 100%; min-height: 0; display: block; background: var(--gg-green-100); }
.pm-card__foot { display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; border-top: 2px solid var(--gg-ink); font-weight: 800; font-size: 15px; line-height: 1; white-space: nowrap; }
.pm-card__foot svg { width: 16px; height: 16px; flex: none; }
.pm-card__name { position: absolute; left: 6px; top: 4px; font-size: 13px; font-weight: 800; line-height: 1; padding: 2px 5px; border-radius: 6px; background: rgba(255, 254, 246, .82); }
.pm-card:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--gg-ink); }
.pm-card.is-on { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--gg-lime), 3px 4px 0 var(--gg-ink); }
.pm-card.is-poor canvas { opacity: .5; filter: grayscale(.5); }
.pm-card.is-poor .pm-card__foot { background: var(--gg-sand); color: var(--gg-ink-3); }
.pm-card.is-locked canvas { opacity: .35; filter: grayscale(1); }
.pm-card.is-locked .pm-card__foot { background: var(--gg-sand); color: var(--gg-ink-2); font-size: 13px; }
.pm-card--new { animation: pm-glow .9s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .pm-card--new { animation: none; } }
.pm-gorow { display: flex; gap: 8px; min-width: 0; }
.pm-go { flex: 1; min-width: 0; min-height: 58px; display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 2px 12px; padding: 8px 18px; text-align: left; position: relative; overflow: hidden; }
.pm-go__title { font-family: var(--gg-font-display); font-weight: 800; font-size: 20px; line-height: 1.05; white-space: nowrap; }
.pm-go__next { display: flex; align-items: center; gap: 2px; justify-self: end; min-width: 0; overflow: hidden; font-family: var(--gg-font-body); font-weight: 800; font-size: 14px; }
.pm-go__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; display: none; background: rgba(17, 17, 17, .12); }
.pm-go__bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--gg-green-600); transition: width var(--gg-dur-md) linear; }
.pm-pchip { display: inline-flex; align-items: center; gap: 0; padding: 0 4px 0 0; border-radius: var(--gg-r-pill); background: rgba(255, 254, 246, .7); border: 1.5px solid var(--gg-ink); height: 30px; }
.pm-pchip canvas { width: 34px; height: 26px; }
.pm-pchip b { font-size: 13px; font-weight: 800; }
.pm-go.is-wave { --bg: var(--gg-paper); cursor: default; }
.pm-go.is-wave .pm-go__bar { display: block; }
.pm-go.is-boss { --bg: var(--gg-butter); }
.pm-go.is-fert { box-shadow: 0 0 0 3px var(--gg-lime), var(--gg-shadow); }
.pm-fert { flex: none; width: 58px; min-height: 58px; padding: 0; border: var(--gg-border); border-radius: 16px; background: var(--gg-lime-100); box-shadow: var(--gg-shadow-sm); cursor: pointer; display: grid; place-items: center; gap: 0; font-weight: 800; font-size: 13px; line-height: 1; touch-action: manipulation; }
.pm-fert[hidden] { display: none; }
.pm-shedgo { background: var(--gg-paper); }
.pm-fert svg { width: 26px; height: 26px; }
.pm-fert:active { transform: translate(2px, 2px); box-shadow: none; }

/* plant sheet */
.pm-sheet { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pm-sheet[hidden] { display: none; }
.pm-sheet__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-sheet__art { flex: none; width: 52px; height: 52px; border: 2px solid var(--gg-ink); border-radius: 14px; background: var(--gg-green-100); }
.pm-sheet__who { flex: 1; min-width: 0; }
.pm-sheet__name { font-family: var(--gg-font-display); font-weight: 800; font-size: 20px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-sheet__sub { font-size: 13px; font-weight: 700; color: var(--gg-ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.pm-stagepips { display: inline-flex; gap: 3px; }
.pm-stagepips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gg-ink); background: var(--gg-sand); }
.pm-stagepips i.is-on { background: var(--gg-green-500); }
.pm-stagepips i.is-evo { background: var(--gg-butter); }
.pm-sheet__x { flex: none; }
.pm-sheet__acts { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.pm-act { min-height: 62px; padding: 6px 10px; display: grid; justify-items: start; align-content: center; gap: 2px; text-align: left; border-radius: 16px; }
.pm-act__t { display: flex; align-items: center; gap: 6px; font-family: var(--gg-font-display); font-weight: 800; font-size: 17px; line-height: 1.05; }
.pm-act__t svg { width: 16px; height: 16px; }
.pm-act__s { font-family: var(--gg-font-body); font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--gg-ink-2); }
.pm-act--evolve { --bg: var(--gg-butter); animation: pm-glow calc(1600ms * var(--gg-time)) ease-in-out infinite; }
@keyframes pm-glow { 0%, 100% { box-shadow: var(--gg-shadow), 0 0 0 0 rgba(255, 224, 102, .9); } 50% { box-shadow: var(--gg-shadow), 0 0 0 7px rgba(255, 224, 102, .45); } }
.pm-act--compost { --bg: var(--gg-cream); }
.pm-act[aria-disabled="true"] { opacity: .55; }

/* ===================================================================== phone portrait (the primary layout) */
html.pm-lay-phone.pm-in-run .gg-appbar { display: none; }
html.pm-lay-phone .pm-run {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(6px + env(safe-area-inset-top)) 6px calc(6px + env(safe-area-inset-bottom));
  gap: 6px; height: 100dvh;
}
html.pm-lay-phone .pm-hud { position: relative; z-index: 20; }
html.pm-lay-phone .pm-stat { padding: 0 9px; }
html.pm-lay-phone .pm-tray { min-height: 140px; }
html.pm-lay-phone .pm-tray.is-sheet .pm-tray__main { visibility: hidden; }
html.pm-lay-phone .pm-sheet { position: absolute; inset: 0; z-index: 5; padding: 2px; background: var(--gg-cream); }
html.pm-lay-phone .pm-hudbtn { min-width: 44px; }
html.pm-lay-phone .pm-gnome { width: 44px; height: 44px; }
@media (max-width: 370px) { html.pm-lay-phone .pm-stat--wave .pm-stat__k { display: none; } }

/* ===================================================================== phone held sideways */
html.pm-lay-land.pm-in-run .gg-appbar { display: none; }
html.pm-lay-land .pm-run {
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "board hud" "board tray";
  padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  gap: 6px 10px; height: 100dvh;
}
html.pm-lay-land .pm-boardwrap { grid-area: board; }
html.pm-lay-land .pm-hud { grid-area: hud; position: relative; z-index: 20; gap: 5px; }
html.pm-lay-land .pm-tray { grid-area: tray; align-content: end; }
html.pm-lay-land .pm-hud { flex-wrap: wrap; align-content: start; }
html.pm-lay-land .pm-hud__extra { display: block; flex-basis: 100%; margin-top: 4px; }
html.pm-lay-land .pm-guide__row p > span { display: none; }   /* v3.1: only the blurb; the weather icon (a span too) stays */
html.pm-lay-land .pm-guide { grid-template-columns: 1fr 1fr; }
html.pm-lay-land .pm-guide__h { grid-column: 1 / -1; }
html.pm-lay-land .pm-stat { height: 44px; padding: 0 8px; }
html.pm-lay-land .pm-gnome { width: 44px; height: 44px; }
html.pm-lay-land .pm-hudbtn { min-width: 44px; height: 44px; }
html.pm-lay-land .pm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.pm-lay-land .pm-card { height: 70px; }
html.pm-lay-land .pm-tray.is-sheet .pm-tray__main { display: none; }

/* ===================================================================== desktop and tablets */
html.pm-lay-desk .pm-run {
  grid-template-columns: minmax(250px, 320px) auto minmax(280px, 340px); grid-template-areas: "hud board tray";
  justify-content: center; align-items: center; gap: var(--gg-s5); padding: var(--gg-s4) var(--gg-s5);
  height: calc(100dvh - 66px);
}
html.pm-lay-desk .pm-hud { grid-area: hud; flex-direction: column; align-items: stretch; gap: 10px; align-self: center; padding: var(--gg-s4); border: var(--gg-border); border-radius: var(--gg-r-lg); background: var(--gg-paper); box-shadow: var(--gg-shadow-lg); }
html.pm-lay-desk .pm-gnome { width: 96px; height: 96px; align-self: center; }
html.pm-lay-desk .pm-bubble { left: 50%; transform: translateX(-50%); top: auto; bottom: calc(100% + 12px); max-width: 260px; }
html.pm-lay-desk .pm-bubble::before { left: calc(50% - 7px); top: auto; bottom: -9px; transform: rotate(225deg); }
html.pm-lay-desk .pm-stat { box-shadow: none; height: 50px; }
html.pm-lay-desk .pm-stat__k { flex: 1; }
html.pm-lay-desk .pm-stat--wave { flex-direction: row; padding: 0 14px; }
html.pm-lay-desk .pm-stat--wave .pm-stat__v { font-size: 24px; }
html.pm-lay-desk .pm-hudbtns { justify-content: stretch; }
html.pm-lay-desk .pm-hudbtns .pm-hudbtn { flex: 1; height: 50px; }
html.pm-lay-desk .pm-hud__extra { display: block; margin-top: 4px; }
html.pm-lay-desk .pm-boardwrap { grid-area: board; height: 100%; }
html.pm-lay-desk .pm-tray { grid-area: tray; align-self: center; gap: var(--gg-s4); padding: var(--gg-s4); border: var(--gg-border); border-radius: var(--gg-r-lg); background: var(--gg-paper); box-shadow: var(--gg-shadow-lg); }
html.pm-lay-desk .pm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.pm-lay-desk .pm-card { height: 112px; }
html.pm-lay-desk .pm-card__name { font-size: 14px; }
html.pm-lay-desk .pm-gorow { flex-direction: column; }
html.pm-lay-desk .pm-fert { width: 100%; min-height: 50px; grid-auto-flow: column; gap: 8px; font-size: 15px; }
html.pm-lay-desk .pm-sheet { padding-top: var(--gg-s4); border-top: 2px dashed var(--gg-line); }
html.pm-lay-desk .pm-sheet__acts { grid-template-columns: 1fr; }
html.pm-lay-desk .pm-go { grid-template-columns: 1fr; gap: 6px; }
html.pm-lay-desk .pm-go__next { justify-self: start; flex-wrap: wrap; }
.pm-guide { display: grid; gap: 6px; }
.pm-guide__h { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gg-ink-3); }
.pm-guide__row { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.pm-guide__row canvas { flex: none; width: 46px; height: 32px; border-radius: 10px; background: var(--gg-green-100); border: 1.5px solid var(--gg-ink); }
.pm-guide__row span { color: var(--gg-ink-2); font-weight: 600; }

/* ===================================================================== the evolve moment */
.pm-evolve { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(14, 44, 14, .72); }
.pm-evolve[hidden] { display: none; }
.pm-evolve__in { display: grid; justify-items: center; gap: 10px; width: min(560px, 100%); }
.pm-evolve__eyebrow { padding: 4px 12px; border-radius: var(--gg-r-pill); background: var(--gg-butter); border: var(--gg-border); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.pm-evolve__title { color: var(--gg-cream); font-size: clamp(26px, 7vw, 40px); text-align: center; -webkit-text-stroke: 1.5px var(--gg-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--gg-ink); }
.pm-evolve__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; perspective: 900px; }
.pm-evo { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 4px; padding: 10px 10px 12px; min-height: 300px; border: var(--gg-border); border-radius: var(--gg-r-lg);
  background: var(--gg-paper); box-shadow: var(--gg-shadow-lg); text-align: center; cursor: pointer; transform-style: preserve-3d; backface-visibility: hidden; touch-action: manipulation;
  transition: transform var(--gg-dur-md) var(--gg-ease-spring), box-shadow var(--gg-dur-md) var(--gg-ease-spring); }
.pm-evo:hover { transform: translateY(-4px); }
.pm-evo:active { transform: scale(.97); }
.pm-evo__art { width: 100%; height: 138px; border: 2px solid var(--gg-ink); border-radius: 16px; background: var(--gg-felt); background-color: var(--gg-green-600); }
.pm-evo__name { font-family: var(--gg-font-display); font-weight: 800; font-size: 24px; line-height: 1.05; margin-top: 4px; }
.pm-evo__blurb { font-size: 14px; line-height: 1.3; color: var(--gg-ink-2); }
.pm-evo__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; align-self: start; }
.pm-evo__stats span { padding: 2px 8px; border-radius: var(--gg-r-pill); background: var(--gg-green-100); border: 1.5px solid var(--gg-ink); font-size: 13px; font-weight: 800; }
.pm-evo__cost { justify-self: center; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 6px 14px; border: var(--gg-border); border-radius: var(--gg-r-pill); background: var(--gg-lime); font-weight: 800; font-size: 15px; }
.pm-evo__cost svg { width: 18px; height: 18px; }
.pm-evo.is-off { cursor: not-allowed; }
.pm-evo.is-off .pm-evo__art { filter: grayscale(.8); opacity: .55; }
.pm-evo.is-off .pm-evo__cost { background: var(--gg-sand); }
.pm-evo.is-picked { box-shadow: 0 0 0 5px var(--gg-butter), var(--gg-shadow-xl); z-index: 2; }
.pm-evolve__later { color: var(--gg-cream); }
@media (max-width: 380px) { .pm-evo { min-height: 280px; } .pm-evo__art { height: 118px; } .pm-evo__name { font-size: 21px; } }

/* ===================================================================== boss card */
.pm-bosscard { position: fixed; left: 50%; top: 38%; z-index: 70; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(380px, calc(100vw - 24px));
  padding: 12px 18px 12px 12px; border: var(--gg-border); border-radius: var(--gg-r-lg); background: var(--gg-ink); color: var(--gg-cream); box-shadow: 5px 5px 0 var(--gg-suit-red); pointer-events: none; }
.pm-bosscard[hidden] { display: none; }
.pm-bosscard canvas { flex: none; width: 96px; height: 72px; border-radius: 14px; background: var(--gg-green-100); border: 2px solid var(--gg-cream); }
.pm-bosscard__k { font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gg-butter); }
.pm-bosscard__n { font-family: var(--gg-font-display); font-weight: 800; font-size: 26px; line-height: 1.05; }
.pm-bosscard__b { font-size: 14px; color: rgba(255, 250, 240, .85); line-height: 1.3; }

/* ===================================================================== results */
.pm-results__card { padding-top: 18px; }
.pm-results__marrow { display: block; width: 210px; height: 104px; margin: 0 auto 2px; }
.pm-regrow { margin-top: 16px; padding: 16px; border: var(--gg-border); border-radius: var(--gg-r-lg); background: var(--gg-lime-100); display: grid; gap: 10px; justify-items: center; }
.pm-regrow[hidden], .pm-final[hidden] { display: none; }
.pm-regrow__t { font-family: var(--gg-font-display); font-weight: 800; font-size: 22px; }
.pm-regrow__s { font-size: 15px; color: var(--gg-ink-2); }
.pm-regrow .gg-btn svg, .pm-double svg { width: 22px; height: 22px; }
.pm-rscores { margin: 14px 0 12px; }
.pm-rcompost { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 2px dashed var(--gg-line); border-radius: var(--gg-r-md); }
.pm-rcompost__icon svg { width: 30px; height: 30px; }
.pm-rcompost__n { font-weight: 700; }
.pm-rcompost__n b { font-family: var(--gg-font-display); font-weight: 800; font-size: 28px; display: inline-block; }
.pm-double[hidden] { display: none; }
.pm-rribbon { margin: 12px 0 0; font-weight: 700; font-size: var(--gg-text-sm); color: var(--gg-ink-2); }
.pm-runlock { margin-top: 10px; padding: 8px 12px; border-radius: var(--gg-r-md); background: var(--gg-butter-100); border: 2px solid var(--gg-ink); font-weight: 800; font-size: 15px; }
.pm-runlock[hidden] { display: none; }
#r-gg { margin-top: 12px; }
.pm-ractions { margin-top: 16px; }
.pm-newbest { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--gg-r-pill); background: var(--gg-butter); border: 2px solid var(--gg-ink); font-size: 13px; font-weight: 800; vertical-align: middle; }

/* ===================================================================== rules sheet */
.pm-help { text-align: left; width: min(560px, 100%); }
.pm-help h2 { font-size: var(--gg-text-2xl); margin: 4px 0 10px; }
.pm-rules { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 8px; font-size: var(--gg-text-sm); line-height: 1.4; }
.pm-help__h { margin-top: 14px; }
.pm-field { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 16px; }
.pm-fitem { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 1.25; }
.pm-fitem canvas { flex: none; width: 50px; height: 40px; border: 1.5px solid var(--gg-ink); border-radius: 10px; background: var(--gg-green-100); }
.pm-fitem b { display: block; font-size: 14px; }
.pm-pausec .gg-result__actions { margin-top: 18px; }
.pm-pauserow { flex-wrap: nowrap; width: 100%; }
.pm-pauserow > .gg-btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }

/* ===================================================================== the Potting Shed */
.pm-shed { padding: var(--gg-s5) 0 var(--gg-s7); }
.pm-shed__in { display: grid; gap: var(--gg-s4); max-width: 980px; }
.pm-shed__head { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pm-shed__head h2 { font-size: var(--gg-text-3xl); }
.pm-shed__bal { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 10px; border: var(--gg-border); border-radius: var(--gg-r-pill); background: var(--gg-paper); box-shadow: var(--gg-shadow); font-family: var(--gg-font-display); font-weight: 800; font-size: 26px; }
.pm-shed__bal svg { width: 34px; height: 34px; }
.pm-shed__bal small { font-family: var(--gg-font-body); font-size: 13px; font-weight: 700; color: var(--gg-ink-3); }
.pm-shed__marrow { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 14px; align-items: center; padding: 14px; }
.pm-shed__marrow canvas { width: 100%; height: 112px; border-radius: 16px; border: 2px solid var(--gg-ink); background: var(--gg-felt); background-color: var(--gg-green-600); }
.pm-shed__ribbon { font-family: var(--gg-font-display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.pm-shed__rsub { font-size: 14px; color: var(--gg-ink-2); margin-top: 6px; }
.pm-ribbonbar { position: relative; height: 12px; margin-top: 8px; border: 2px solid var(--gg-ink); border-radius: var(--gg-r-pill); background: var(--gg-sand); overflow: hidden; }
.pm-ribbonbar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--gg-butter); transition: width var(--gg-dur-xl) var(--gg-ease-out); }
.pm-ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pm-up { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 4px; padding: 14px; border: var(--gg-border); border-radius: var(--gg-r-lg); background: var(--gg-paper); box-shadow: var(--gg-shadow); }
.pm-up__icon { grid-row: 1 / 3; width: 52px; height: 52px; border: 2px solid var(--gg-ink); border-radius: 14px; background: var(--gg-green-100); display: grid; place-items: center; overflow: hidden; }
.pm-up__icon canvas { width: 52px; height: 52px; }
.pm-up__icon svg { width: 34px; height: 34px; }
.pm-up__name { font-family: var(--gg-font-display); font-weight: 800; font-size: 18px; line-height: 1.1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-up__blurb { font-size: 14px; line-height: 1.3; color: var(--gg-ink-2); }
.pm-up__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pm-pips { display: inline-flex; gap: 4px; }
.pm-pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gg-ink); background: var(--gg-sand); transition: background-color var(--gg-dur-md) ease, transform var(--gg-dur-md) var(--gg-ease-spring); }
.pm-pips i.is-on { background: var(--gg-green-500); }
.pm-pips i.is-new { transform: scale(1.4); background: var(--gg-lime); }
.pm-up.is-max { background: var(--gg-green-100); }
.pm-up__buy svg { width: 18px; height: 18px; }
.pm-up.is-locked { background: var(--gg-sand); box-shadow: var(--gg-shadow-sm); }
.pm-shed__foot { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }

/* ===================================================================== the placeholder ad */
.pm-ad { z-index: 96; }
.pm-ad__card { display: grid; gap: 12px; justify-items: center; }
.pm-ad__title { font-size: 22px; }
.pm-ad__box { position: relative; width: 150px; height: 150px; display: grid; place-items: center; border: var(--gg-border); border-radius: var(--gg-r-lg); background: var(--gg-green-100); }
.pm-ad__ring { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.pm-ad__n { font-family: var(--gg-font-display); font-weight: 800; font-size: 48px; line-height: 1; }
.pm-ad__note { font-size: 14px; color: var(--gg-ink-2); max-width: 30ch; }

/* ===================================================================== screen fx + small things */
.pm-screenfx { position: fixed; inset: 0; z-index: 94; pointer-events: none; }
.pm-tip { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 13; padding: 6px 14px; border-radius: var(--gg-r-pill); background: var(--gg-ink); color: var(--gg-cream); font-weight: 700; font-size: 14px; pointer-events: none; white-space: nowrap; }
.gg-toasts { z-index: 97; }

/* landscape start/shed on short screens: keep it compact */
@media (min-width: 900px) {
  .pm-start__in { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--gg-s7); min-height: calc(100dvh - 140px); }
  .pm-hero { height: 300px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .pm-start__in { grid-template-columns: 1fr 1fr; gap: var(--gg-s4); }
  .pm-start__hero h1 { font-size: 40px; }
  .pm-hero { height: 140px; }
  .pm-how { display: none; }
}

/* reduced motion: no glowing loops */
@media (prefers-reduced-motion: reduce) {
  .pm-act--evolve { animation: none; box-shadow: var(--gg-shadow), 0 0 0 4px rgba(255, 224, 102, .7); }
}

@media (max-width: 600px) { .pm-shed__marrow { grid-template-columns: 1fr; } .pm-shed__marrow canvas { height: 130px; } }

/* the gardener talks just below the HUD, floating over the board's top edge; the HUD stays readable, input passes through */
html.pm-lay-phone .pm-bubble, html.pm-lay-land .pm-bubble { top: calc(100% + 8px); left: 2px; font-size: 14px; padding: 7px 12px; max-width: min(300px, calc(100vw - 24px)); }
html.pm-lay-land .pm-bubble { max-width: 260px; left: auto; right: calc(100% + 12px); top: 0; }
html.pm-lay-land .pm-bubble::before { left: auto; right: -9px; top: 14px; transform: rotate(135deg); }
/* Start wave: the title on top, the next wave's pests underneath */
html.pm-lay-phone .pm-go, html.pm-lay-land .pm-go { grid-template-columns: 1fr; justify-items: start; gap: 4px; min-height: 64px; padding: 7px 16px 8px; }
html.pm-lay-phone .pm-go__next, html.pm-lay-land .pm-go__next { justify-self: start; }
html.pm-lay-phone .pm-go.is-wave, html.pm-lay-land .pm-go.is-wave { grid-template-columns: auto 1fr; align-items: center; }
html.pm-lay-phone .pm-go.is-wave .pm-go__next, html.pm-lay-land .pm-go.is-wave .pm-go__next { justify-self: end; }
html.pm-lay-phone .pm-fert { min-height: 64px; }
.pm-pchip { height: 26px; }
.pm-pchip canvas { width: 32px; height: 23px; }
/* short screens (a phone held sideways): the evolve cards go compact */
.pm-evolve { overflow-y: auto; }
@media (max-height: 520px) {
  .pm-evolve { padding: 8px 16px; }
  .pm-evolve__in { gap: 6px; width: min(620px, 100%); }
  .pm-evolve__eyebrow { display: none; }
  .pm-evolve__title { font-size: 24px; }
  .pm-evo { min-height: 0; grid-template-columns: 110px 1fr; grid-template-rows: auto auto auto auto; column-gap: 10px; row-gap: 2px; text-align: left; padding: 8px; }
  .pm-evo__art { grid-row: 1 / 5; height: 100%; min-height: 120px; }
  .pm-evo__name { font-size: 20px; margin-top: 0; }
  .pm-evo__blurb { font-size: 13px; }
  .pm-evo__stats { justify-content: flex-start; }
  .pm-evo__cost { justify-self: start; padding: 4px 12px; margin-top: 2px; }
  .pm-evolve__later { min-height: 44px; }
}
#help { z-index: 88; }
@media (max-width: 520px) { .pm-field { grid-template-columns: 1fr; } }
/* the guided first run */
.pm-hand { position: fixed; left: 0; top: 0; z-index: 93; width: 46px; height: 46px; pointer-events: none; filter: drop-shadow(2px 3px 0 rgba(17, 17, 17, .35)); }
.pm-hand[hidden] { display: none; }
.pm-hand svg { width: 100%; height: 100%; }
.pm-coachskip { position: absolute; right: 8px; bottom: 8px; z-index: 13; min-height: 44px; }
.pm-coachskip[hidden] { display: none; }
/* a gentle "try x2" pulse on the speed button in the first waves */
.pm-hudbtn.is-hint { animation: pm-speedhint calc(1400ms * var(--gg-time)) ease-in-out infinite; }
@keyframes pm-speedhint { 0%, 100% { box-shadow: var(--gg-shadow-sm), 0 0 0 0 rgba(255, 224, 102, .9); } 50% { box-shadow: var(--gg-shadow-sm), 0 0 0 7px rgba(255, 224, 102, .5); background: var(--gg-butter-100); } }
/* portrait phones: the Shed sits beside Play so both are in the first screen */
@media (max-width: 559px) and (orientation: portrait) {
  .pm-start { padding-top: var(--gg-s4); }
  .pm-hero { height: 150px; margin-top: var(--gg-s3); }
  .pm-playpanel { grid-template-columns: 1.5fr 1fr; grid-auto-flow: row dense; }
  .pm-shedbtn .pm-long { display: none; }
  .pm-playpanel > * { grid-column: 1 / -1; }
  .pm-playpanel > #go-play { grid-column: 1; }
  .pm-playpanel > #go-shed { grid-column: 2; min-height: 100%; padding-inline: 16px 10px; gap: 8px; }
}
/* short landscape: the pause card keeps every button on screen */
@media (max-height: 500px) {
  .pm-pausec .gg-result__line { display: none; }
  .pm-pausec h2 { font-size: 30px; margin-bottom: 4px; }
  .pm-pausec .gg-result__actions { gap: 8px; }
  .pm-pausec .gg-btn--lg { min-height: 48px; }
}

/* ===================================================================== The Lawn (DESIGN-LAWN.md) */
/* the start screen's map picker */
.pm-maps { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; }
.pm-map { position: relative; min-width: 0; display: grid; grid-template-rows: auto auto auto; gap: 2px; padding: 6px 6px 8px; border: 2px solid var(--gg-ink); border-radius: var(--gg-r-md); background: var(--gg-cream); cursor: pointer; text-align: left; touch-action: manipulation;
  transition: transform var(--gg-dur-sm) var(--gg-ease-spring), box-shadow var(--gg-dur-sm) var(--gg-ease-spring), background-color var(--gg-dur-sm) ease; }
.pm-map canvas { width: 100%; height: 58px; display: block; border-radius: 9px; border: 1.5px solid var(--gg-ink); }
.pm-map__name { font-family: var(--gg-font-display); font-weight: 800; font-size: 15px; line-height: 1.1; margin-top: 4px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pm-map__pill { padding: 1px 6px; border-radius: var(--gg-r-pill); background: var(--gg-lime); border: 1.5px solid var(--gg-ink); font-family: var(--gg-font-body); font-size: 13px; line-height: 1.2; }
.pm-map__line { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--gg-ink-2); }
.pm-map[aria-pressed="true"] { background: var(--gg-butter-100); box-shadow: 0 0 0 3px var(--gg-lime), 3px 3px 0 var(--gg-ink); transform: translateY(-2px); }
.pm-map:active { transform: translate(1px, 1px); }

/* five cards in the tray (four plants and the Hurdle) */
.pm-cards.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pm-cards.is-five .pm-card__name { left: 4px; padding: 2px 4px; }
html.pm-lay-land .pm-cards.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html.pm-lay-desk .pm-cards.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.pm-lay-desk .pm-cards.is-five .pm-card[data-k="hurdle"] { grid-column: 1 / -1; height: 78px; }
.pm-pop.is-five { gap: 5px; padding: 5px; }
.pm-pop.is-five .pm-chip { width: 56px; }

/* the walk pill: how many steps the pests have to walk, and what your next block would make it */
.pm-walk { position: absolute; right: 8px; top: 8px; z-index: 11; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 7px; border: var(--gg-border); border-radius: var(--gg-r-pill);
  background: var(--gg-paper); box-shadow: var(--gg-shadow-sm); font-weight: 800; font-size: 14px; line-height: 1; pointer-events: none; }
.pm-walk[hidden] { display: none; }
.pm-walk svg { width: 20px; height: 20px; flex: none; }
.pm-walk b { font-family: var(--gg-font-display); font-size: 18px; font-variant-numeric: tabular-nums; }
.pm-walk__new { padding: 1px 7px; border-radius: var(--gg-r-pill); background: var(--gg-lime); border: 2px solid var(--gg-ink); }
.pm-walk__arrow, .pm-walk__k { font-size: 13px; color: var(--gg-ink-2); }
.pm-walk.is-wave { opacity: .85; }
html.pm-lay-phone .pm-walk { top: auto; bottom: 8px; right: auto; left: 8px; }
/* the step tag by the tile you are about to build on */
.pm-steptag { position: absolute; z-index: 15; padding: 5px 11px; border: var(--gg-border); border-radius: var(--gg-r-pill); background: var(--gg-paper); box-shadow: var(--gg-shadow-sm);
  font-family: var(--gg-font-display); font-weight: 800; font-size: 16px; line-height: 1; white-space: nowrap; pointer-events: none; }
.pm-steptag[hidden] { display: none; }
.pm-steptag.is-up { background: var(--gg-lime); }
.pm-steptag.is-bad { background: var(--gg-pink-100); color: var(--gg-suit-red); border-color: var(--gg-suit-red); }
/* four-digit seed counts still fit beside the speed button */
.pm-stat--seeds.is-long .pm-stat__v { font-size: 18px; letter-spacing: -.02em; }
html.pm-lay-phone .pm-stat--seeds.is-long { padding: 0 7px; gap: 4px; }
/* 360 px phones: the HUD keeps every number whole (the wave label already hides below 370) */
@media (max-width: 370px) {
  html.pm-lay-phone .pm-hud { gap: 4px; }
  html.pm-lay-phone .pm-stat { padding: 0 7px; gap: 4px; }
  html.pm-lay-phone .pm-stat--hp { min-width: 62px; }
  html.pm-lay-phone .pm-stat--seeds { min-width: 64px; }
  html.pm-lay-phone .pm-stat__v { font-size: 20px; }
  html.pm-lay-phone .pm-stat__icon, html.pm-lay-phone .pm-stat__icon svg { width: 20px; height: 20px; }
}
/* portrait phones: a compact map picker so Play and the Shed stay in the first screen */
@media (max-width: 559px) and (orientation: portrait) {
  .pm-map { padding: 5px 5px 6px; }
  .pm-map canvas { height: 40px; }
  .pm-map__line { display: none; }
  .pm-map__name { font-size: 14px; }
}
@media (max-width: 559px) and (orientation: portrait) {
  .pm-hero { height: 118px; }
  .pm-start__hero .gg-lede { font-size: 16px; margin-bottom: 0; }
  .pm-start__in { gap: var(--gg-s4); }
}

/* ============================================================ v2: the endless garden (DESIGN-V2.md) */
/* start screen: the best garden wave on each map card, the head-start picker */
.pm-map__best { font-size: 13px; font-weight: 700; color: var(--gg-ink-2); line-height: 1.2; }
.pm-map__best b { font-family: var(--gg-font-display); font-size: 15px; color: var(--gg-ink); }
.pm-starts { display: grid; gap: 6px; }
.pm-starts[hidden] { display: none; }
.pm-startseg button { padding: 0 4px; font-size: 14px; white-space: nowrap; }

/* the tray with the new plants: six or seven cards still fit a 360 px phone (44 px targets and up) */
.pm-cards.is-six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.pm-cards.is-seven { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pm-cards.is-six .pm-card__name, .pm-cards.is-seven .pm-card__name { left: 3px; padding: 2px 3px; font-size: 13px; }
.pm-cards.is-seven .pm-card__foot { font-size: 13px; gap: 1px; padding-inline: 2px; }
.pm-cards.is-seven .pm-card__foot svg { width: 13px; height: 13px; }
html.pm-lay-land .pm-cards.is-six, html.pm-lay-land .pm-cards.is-seven { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.pm-lay-land .pm-cards.is-six .pm-card, html.pm-lay-land .pm-cards.is-seven .pm-card { height: 52px; }
html.pm-lay-desk .pm-cards.is-six, html.pm-lay-desk .pm-cards.is-seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.pm-lay-desk .pm-cards.is-seven .pm-card, html.pm-lay-desk .pm-cards.is-six .pm-card { height: 92px; }
.pm-pop.is-six, .pm-pop.is-seven { gap: 4px; padding: 5px; flex-wrap: wrap; justify-content: center; max-width: 252px; }
.pm-pop.is-six .pm-chip, .pm-pop.is-seven .pm-chip { width: 54px; height: 66px; }

/* weather: a chip on Start wave, a pill on the board while the wave is on, a row in the guide */
.pm-pchip--wx { padding: 0 4px; background: var(--gg-paper); }
.pm-pchip--wx svg { width: 22px; height: 22px; display: block; }
.pm-pchip--wx.is-bad { background: var(--gg-butter-100); }
.pm-wx { position: absolute; left: 8px; top: 8px; z-index: 11; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: var(--gg-border); border-radius: var(--gg-r-pill);
  background: var(--gg-paper); box-shadow: var(--gg-shadow-sm); font-weight: 800; font-size: 14px; line-height: 1; pointer-events: none; }
.pm-wx[hidden] { display: none; }
.pm-wx svg { width: 22px; height: 22px; flex: none; }
.pm-wx.is-bad { background: var(--gg-butter-100); }
.pm-wx.is-good { background: var(--gg-lime-100); }
html.pm-lay-land .pm-wx { top: auto; bottom: 8px; }
html.pm-lay-phone .pm-wx { top: auto; left: auto; bottom: 8px; right: 8px; }
.pm-wxicon { flex: none; display: grid; place-items: center; width: 46px; height: 32px; border-radius: 10px; background: var(--gg-paper); border: 1.5px solid var(--gg-ink); }
.pm-wxicon svg { width: 24px; height: 24px; }
.pm-fitem--wx .pm-wxicon { width: 50px; height: 40px; }
.pm-banner__s svg { flex: none; }

/* the name card for new pests and plants (the boss card's sibling) */
.pm-bosscard.is-new .pm-bosscard__k { color: var(--gg-lime); }

/* results: three numbers, the next milestone, your place on the board */
.pm-rscores { gap: 8px; }
.pm-rscores .gg-result__score { min-width: 0; flex: 1 1 0; }
.pm-rnext { margin: -4px 0 6px; font-size: var(--gg-text-sm); font-weight: 600; color: var(--gg-ink-2); }
.pm-rnext:empty { display: none; }
.pm-rank { margin: 8px 0 0; font-weight: 700; font-size: 15px; }
.pm-rank b { font-family: var(--gg-font-display); font-size: 18px; }

/* the Shed v2: levels, the next step, head-start gates, marrow looks, old records */
.pm-up__lvl { font-family: var(--gg-font-body); font-size: 13px; font-weight: 700; color: var(--gg-ink-3); }
.pm-up__next { display: block; margin-top: 2px; font-weight: 700; color: var(--gg-green-700); }
.pm-gatesp, .pm-lookp { display: grid; gap: 8px; padding: 14px; }
.pm-gates__sub { font-size: 14px; color: var(--gg-ink-2); margin: 0; }
.pm-gates { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 2px 2px 4px; }
.pm-gate { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 2px solid var(--gg-ink); border-radius: var(--gg-r-md); background: var(--gg-sand); }
.pm-gate b { font-family: var(--gg-font-display); font-size: 16px; line-height: 1.1; }
.pm-gate span { font-size: 13px; font-weight: 700; color: var(--gg-ink-2); }
.pm-gate.is-open { background: var(--gg-lime-100); box-shadow: 2px 2px 0 var(--gg-ink); }
.pm-gate.is-open span { color: var(--gg-green-700); }
.pm-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.pm-look { display: grid; gap: 6px; justify-items: center; padding: 10px; border: 2px solid var(--gg-ink); border-radius: var(--gg-r-md); background: var(--gg-cream); text-align: center; }
.pm-look canvas { width: 100%; height: 62px; border-radius: 10px; background: var(--gg-green-600); border: 1.5px solid var(--gg-ink); }
.pm-look__name { font-weight: 800; font-size: 14px; line-height: 1.15; margin: 0; }
.pm-look.is-on { background: var(--gg-butter-100); box-shadow: 0 0 0 3px var(--gg-lime), 3px 3px 0 var(--gg-ink); }
.pm-look .gg-btn { min-height: 44px; }
.pm-oldrec { font-size: 14px; color: var(--gg-ink-3); font-weight: 600; margin: 0; }
.pm-oldrec[hidden] { display: none; }
@media (max-width: 420px) { .pm-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v2 look round 2: a sideways phone keeps all seven cards in one row under a shorter guide; the desk bubble
   sits below Bert (a two-line line no longer slides under the app bar); short portrait phones drop the lede */
html.pm-lay-land .pm-cards.is-six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
html.pm-lay-land .pm-cards.is-seven { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
html.pm-lay-land .pm-cards.is-six .pm-card, html.pm-lay-land .pm-cards.is-seven .pm-card { height: 58px; }
html.pm-lay-land .pm-cards.is-seven .pm-card__name { display: none; }
html.pm-lay-desk .pm-bubble { top: calc(100% + 10px); bottom: auto; max-width: 300px; z-index: 30; }
html.pm-lay-desk .pm-bubble::before { top: -9px; bottom: auto; transform: rotate(45deg); }
@media (max-width: 559px) and (orientation: portrait) and (max-height: 800px) {
  .pm-start__hero .gg-lede { display: none; }
  .pm-start__hero h1 { margin-bottom: 0; }
  .pm-hero { height: 104px; }
  .pm-ribbonline { margin-top: 8px; }
}

/* ============================================================ v2 polish (CRITIQUE-V2.md) */
/* what's new, for a returning v1 player (once) */
.pm-news { position: relative; display: grid; gap: 4px; padding: 10px 52px 10px 14px; background: var(--gg-lime-100); }
.pm-news[hidden] { display: none; }
.pm-news__t { margin: 0; font-size: 14.5px; line-height: 1.3; }
.pm-news__s { margin: 0; font-size: 13.5px; line-height: 1.3; color: var(--gg-ink-2); }
.pm-news__x { position: absolute; right: 6px; top: 6px; }
/* a phone keeps Play and the Shed in the first screen while the news shows: the hero steps aside */
@media (max-width: 559px) and (orientation: portrait) { html.pm-news-on .pm-hero, html.pm-news-on .pm-start__hero .gg-lede { display: none; } }
/* every open head start, wrapping */
.pm-startseg.is-many { display: flex; flex-wrap: wrap; border-radius: var(--gg-r-lg); padding: 4px; gap: 2px; }
.pm-startseg.is-many button { flex: 1 0 52px; min-height: 44px; }
.pm-credit { margin: 0; font-size: 13px; font-weight: 700; color: var(--gg-green-700); }
.pm-credit[hidden] { display: none; }
#go-play { white-space: nowrap; }
/* Feed the marrow, beside Start wave */
.pm-feed { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pm-feed > svg { width: 24px; height: 24px; }
.pm-feed span { font-size: 13px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.pm-feed b { display: inline-flex; align-items: center; gap: 1px; }
.pm-feed b svg { width: 13px; height: 13px; }
.pm-feed.is-poor { opacity: .6; }
/* the weather chip says what it is */
.pm-pchip--wx { gap: 3px; padding: 0 7px 0 4px; }
.pm-pchip--wx b { font-size: 13px; }
/* name cards dock over the tray on phones (the board stays clear), and over the board's top edge on a desk */
html.pm-lay-phone .pm-bosscard, html.pm-lay-land .pm-bosscard { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); }
html.pm-lay-land .pm-bosscard { left: calc(100% - 172px); width: 330px; }
html.pm-lay-desk .pm-bosscard { top: 6px; padding-block: 8px; }
html.pm-lay-desk .pm-bosscard canvas { width: 80px; height: 60px; }
/* (Bert's bubble and the boss bar: on phones placeBubble() in ui.js docks it below the bar, see the mobile round) */
/* the Shed: old records near the top, looks in two headed rows */
.pm-oldrec { padding: 10px 14px; border: 2px dashed var(--gg-line); border-radius: var(--gg-r-md); background: var(--gg-cream); }
.pm-looks__h { grid-column: 1 / -1; margin: 4px 0 -2px; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gg-ink-3); }
.pm-look__name small { display: block; font-size: 12.5px; font-weight: 600; color: var(--gg-ink-3); }
.pm-look { cursor: pointer; }
.pm-rulechip { font-size: 12px; font-weight: 800; }
.pm-fitem--wx .pm-wxicon canvas { width: 26px; height: 26px; }
/* small phones: the app bar keeps every button whole */
@media (max-width: 370px) {
  .gg-appbar__actions { gap: 6px; }
  .gg-wordmark span { font-size: 19px; }
  .gg-wordmark svg { width: 34px; height: 34px; }
}
/* a sideways phone: Play and the Shed in the first screen */
@media (orientation: landscape) and (max-height: 500px) {
  .pm-hero, .pm-start__hero .gg-lede, .pm-start__hero .gg-eyebrow { display: none; }
  .pm-start { padding-top: 10px; }
  .pm-start__in { align-items: start; min-height: 0; }
  .pm-start__hero h1 { font-size: 34px; }
  .pm-map { padding: 5px; }
  .pm-map canvas { height: 34px; }
  .pm-map__line { display: none; }
  .pm-playpanel { gap: 8px; padding-block: 12px; }
}
.pm-pchip--rule { background: var(--gg-lavender-100); padding: 0 8px; }
.pm-start__hero .pm-news { margin-top: var(--gg-s3); }
@media (orientation: landscape) and (max-height: 500px) {
  .pm-playpanel { grid-template-columns: 1.5fr 1fr; grid-auto-flow: row dense; }
  .pm-playpanel > * { grid-column: 1 / -1; }
  .pm-playpanel > #go-play { grid-column: 1; }
  .pm-playpanel > #go-shed { grid-column: 2; min-height: 100%; padding-inline: 14px 10px; gap: 6px; }
  .pm-shedbtn .pm-long { display: none; }
  .pm-credit { display: none; }
  .pm-playpanel .gg-eyebrow { margin: 0; }
}
.pm-feed { width: auto; min-width: 62px; padding: 2px 8px; }
.pm-feed > b { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 800; }
.pm-feed > b svg { width: 13px; height: 13px; }
.pm-wx__rule { padding: 2px 8px; border-radius: var(--gg-r-pill); background: var(--gg-lavender-100); border: 1.5px solid var(--gg-ink); font-size: 13px; }

/* ===================================================================== v3: the 9 and 10-card tray (DESIGN-V3.md section 5)
   Phones and sideways phones: one row that scrolls sideways with snap, a soft edge and a chevron while more cards wait,
   and on the Lawn the Hurdle pinned at the left (it never scrolls away). A desk: a three-column grid, nothing hidden. */
.pm-cards.is-many { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: 0; overscroll-behavior-x: contain; scrollbar-width: none; padding: 6px 2px 5px; margin: -6px -2px -5px; position: relative; }
.pm-cards.is-many::-webkit-scrollbar { display: none; }
.pm-cards.is-many .pm-card { flex: 0 0 66px; width: 66px; scroll-snap-align: start; }
.pm-cards.is-many .pm-card__name { left: 3px; top: 3px; padding: 2px 3px; font-size: 12px; letter-spacing: -.2px; max-width: calc(100% - 6px); overflow: hidden; text-overflow: clip; white-space: nowrap; }
.pm-cards.is-many .pm-card__foot { font-size: 13px; gap: 2px; }
.pm-cards.is-many .pm-card__foot svg { width: 14px; height: 14px; }
.pm-cards.is-many .pm-card--pin { position: sticky; left: 0; z-index: 3; box-shadow: 3px 3px 0 var(--gg-ink), 8px 0 10px -4px var(--gg-cream); }
.pm-cards.is-many.has-pin .pm-card--pin + .pm-card { margin-left: 2px; }
/* the scroll hint: a fade and a chevron on the right edge while there are more cards */
.pm-tray__main { position: relative; }
.pm-cards.is-many.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), rgba(0, 0, 0, .25)); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), rgba(0, 0, 0, .25)); }
.pm-traymore { position: absolute; right: 0; top: 22px; z-index: 4; width: 26px; height: 30px; border: 2px solid var(--gg-ink); border-radius: 10px; background: var(--gg-butter); display: grid; place-items: center; pointer-events: none; font-weight: 800; box-shadow: 2px 2px 0 var(--gg-ink); }
.pm-traymore[hidden] { display: none; }
.pm-traymore svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) { .pm-traymore { animation: pm-nudge 1.6s ease-in-out infinite; } }
@keyframes pm-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
html.pm-lay-land .pm-cards.is-many .pm-card { flex-basis: 58px; width: 58px; height: 62px; }
html.pm-lay-land .pm-cards.is-many .pm-card__name { font-size: 11px; }
html.pm-lay-desk .pm-cards.is-many { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0; gap: 8px; -webkit-mask-image: none; mask-image: none; }
html.pm-lay-desk .pm-cards.is-many .pm-card { width: auto; height: 86px; }
html.pm-lay-desk .pm-cards.is-many .pm-card__name { font-size: 13px; }
html.pm-lay-desk .pm-cards.is-many .pm-card--pin { position: relative; grid-column: 1 / -1; height: 64px; box-shadow: var(--gg-shadow-sm); }
html.pm-lay-desk .pm-traymore { display: none; }
/* the plot popover: what you can plant now, wrapping to two rows */
.pm-pop.is-many { gap: 4px; padding: 5px; flex-wrap: wrap; justify-content: center; max-width: 300px; }
.pm-pop.is-many .pm-chip { width: 52px; height: 64px; }
html.pm-lay-phone .pm-pop.is-many { max-width: 284px; }

/* compost on the Shed button, and the "+N" float when a cleared wave pays it */
.pm-shedgo { position: relative; overflow: visible; }
.pm-shedgo__n { position: absolute; top: -9px; right: -8px; min-width: 22px; height: 20px; padding: 0 5px; border: 2px solid var(--gg-ink); border-radius: 10px; background: var(--gg-butter); font-size: 11px; line-height: 16px; text-align: center; font-weight: 800; }
html.pm-lay-desk .pm-shedgo__n { position: static; height: auto; padding: 1px 6px; }
.pm-cfloat { position: absolute; left: 50%; top: -6px; z-index: 6; padding: 2px 7px; border: 2px solid var(--gg-ink); border-radius: 10px; background: var(--gg-lime); font-size: 14px; font-weight: 800; pointer-events: none; white-space: nowrap; }
.pm-stars { color: var(--gg-butter); -webkit-text-stroke: 1px var(--gg-ink); font-size: 14px; letter-spacing: -1px; }
.pm-stars b { color: var(--gg-ink); -webkit-text-stroke: 0; font-size: 12px; margin-left: 3px; }

.pm-cards.is-many .pm-card__name.is-long { font-size: 10.5px; letter-spacing: -.3px; padding: 2px 2px; }
html.pm-lay-land .pm-cards.is-many .pm-card__name.is-long { font-size: 9.5px; }
.pm-cards.is-many .pm-card.is-locked .pm-card__foot { font-size: 11.5px; gap: 1px; letter-spacing: -.2px; }
.pm-cards.is-many .pm-card.is-locked .pm-card__foot svg { width: 12px; height: 12px; }
.pm-cards.is-many .pm-card--pin { box-shadow: 3px 3px 0 var(--gg-ink), 9px 0 8px -3px var(--gg-cream), -6px 0 0 2px var(--gg-cream); }
.pm-pop.is-many { max-width: 298px; }
.pm-pop.is-many .pm-chip { width: 52px; height: 70px; }
html.pm-lay-phone .pm-pop.is-many { max-width: 298px; }
.pm-cfloat { top: -30px; }
html.pm-lay-desk .pm-cards.is-many .pm-card__name.is-long { font-size: 12px; }
/* snapping lands each card just right of the pinned Hurdle, never under it */
.pm-cards.is-many.has-pin { scroll-padding-left: 74px; }
.pm-cards.is-many .pm-card--pin { scroll-snap-align: none; }
html.pm-lay-land .pm-cards.is-many.has-pin { scroll-padding-left: 66px; }
html.pm-lay-land .pm-cards.is-many .pm-card { flex-basis: 62px; width: 62px; }
.pm-nw { white-space: nowrap; }
.pm-pop.is-many, html.pm-lay-phone .pm-pop.is-many { max-width: 312px; }
.pm-nw { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.pm-act--prize .pm-act__t { flex-wrap: wrap; row-gap: 2px; }

/* lead polish 10-23: the seed pill never shrinks (4-digit counts were clipped), the Prize line stays on one line,
   and Bert's bubble drops below the boss bar while a boss is up */
.pm-stat--seeds { flex: none; }
.pm-act--prize .pm-act__t { flex-wrap: nowrap; white-space: nowrap; }
.pm-nw svg { width: 16px; height: 16px; flex: none; }

/* ===================================================================== clarity round (DESIGN-CLARITY.md)
   Target chips (what a plant can hit), the 5-pip meters, the card strip, the sheet's plain-words block, the evolution
   comparison, the name card's best answer, the Garden Guide and the weather / rule card. */
.pm-tg { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px 0 3px; border: 1.5px solid var(--gg-ink); border-radius: var(--gg-r-pill); background: var(--gg-paper);
  font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap; vertical-align: middle; }
.pm-tg svg { width: 18px; height: 18px; flex: none; }
.pm-tg small { font-size: 13px; font-weight: 700; color: var(--gg-ink-3); margin-left: 1px; }
.pm-tg--ground { background: var(--gg-green-100); }
.pm-tg--air, .pm-tg--grounds { background: var(--gg-lavender-100); }
.pm-tg--under { background: var(--gg-sand); }
.pm-tg--boss { background: var(--gg-butter); }
.pm-tg--helper { background: var(--gg-butter-100); }
.pm-tg--fence { background: var(--gg-sand); }
.pm-tg.is-new { box-shadow: 0 0 0 2px var(--gg-lime); }
.pm-tg.is-lost { padding: 0 8px; background: var(--gg-cream); color: var(--gg-ink-3); border-style: dashed; }
/* icon-only chips on the tray card */
.pm-card__tg { position: absolute; left: 3px; bottom: 29px; display: flex; gap: 2px; pointer-events: none; }
.pm-tgi { display: grid; place-items: center; width: 17px; height: 17px; border: 1.5px solid var(--gg-ink); border-radius: 6px; }
.pm-tgi svg { width: 14px; height: 14px; }
.pm-card.is-locked .pm-card__tg { opacity: .6; }
html.pm-lay-desk .pm-card__tg { bottom: 31px; left: 5px; gap: 3px; }
html.pm-lay-desk .pm-tgi { width: 20px; height: 20px; }
html.pm-lay-desk .pm-tgi svg { width: 16px; height: 16px; }
html.pm-lay-land .pm-cards.is-many .pm-card__tg { bottom: 27px; }
html.pm-lay-land .pm-tgi { width: 15px; height: 15px; border-radius: 5px; }
html.pm-lay-land .pm-tgi svg { width: 12px; height: 12px; }
html.pm-lay-desk .pm-card--pin .pm-card__tg { bottom: auto; top: 4px; left: auto; right: 6px; }

/* meters: five dots each */
.pm-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
.pm-meter { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; font-size: 13px; font-weight: 800; line-height: 1; }
.pm-meter__k { color: var(--gg-ink-2); white-space: nowrap; }
.pm-dots { display: inline-flex; gap: 2px; flex: none; vertical-align: middle; }
.pm-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--gg-ink); background: var(--gg-paper); }
.pm-dots i.is-on { background: var(--gg-green-600); }
.pm-dots i.is-up { background: var(--gg-lime); }
.pm-delta { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pm-delta b { font-weight: 800; }

/* the armed (or refused) tray card: what it is for, what it hits, and the Guide */
.pm-cardinfo { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 15; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: var(--gg-border); border-radius: 18px;
  background: var(--gg-paper); box-shadow: var(--gg-shadow); pointer-events: none; }
.pm-cardinfo[hidden] { display: none; }
.pm-cardinfo__in { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pm-cardinfo__t { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--gg-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-cardinfo__t b { font-family: var(--gg-font-display); font-size: 17px; color: var(--gg-ink); }
.pm-cardinfo__c { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-cardinfo__s { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--gg-ink-3); }
.pm-cardinfo__s svg { width: 15px; height: 15px; flex: none; }
.pm-cardinfo__s.is-warn { color: var(--gg-ink); }
.pm-cardinfo .pm-ibtn { pointer-events: auto; }
.pm-ibtn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--gg-border); border-radius: 50%; background: var(--gg-butter); box-shadow: var(--gg-shadow-sm); cursor: pointer;
  font-family: var(--gg-font-display); font-weight: 800; font-size: 20px; font-style: italic; line-height: 1; color: var(--gg-ink); }
.pm-ibtn:active { transform: translate(2px, 2px); box-shadow: none; }
.pm-guidebtn { gap: 10px; }
.pm-guidebtn__i { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--gg-ink); border-radius: 50%; background: var(--gg-butter); font-family: var(--gg-font-display); font-style: italic; font-weight: 800; font-size: 15px; }
.pm-how .pm-guidebtn { margin-top: 12px; }
.pm-help__guide { margin: 6px 0 12px; }

/* the plot popover says what the highlighted plant is for */
.pm-pop { flex-wrap: wrap; }
.pm-pop__cap { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 2px 0; font-size: 13px; font-weight: 700; color: var(--gg-ink-2); white-space: nowrap; overflow: hidden; }
.pm-pop__cap b { color: var(--gg-ink); }
.pm-pop__icons { display: inline-flex; gap: 2px; }
.pm-pop__icons .pm-tgi { width: 18px; height: 18px; }

/* the plant sheet: chips, meters and one special line between the name and the buttons */
.pm-sheet__info { display: grid; gap: 6px; min-width: 0; }
.pm-sheet__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-sheet__sp, .pm-sheet__note { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--gg-ink-2); }
.pm-sheet__note { color: var(--gg-ink); padding: 3px 8px; border-radius: 8px; background: var(--gg-butter-100); border: 1.5px dashed var(--gg-ink-3); justify-self: start; }
.pm-sheet__role { color: var(--gg-ink); }
.pm-sheet__head .pm-ibtn { width: 44px; height: 44px; font-size: 19px; }
.pm-act__s .pm-delta { color: var(--gg-ink); }
html.pm-lay-phone .pm-sheet { top: auto; bottom: 0; min-height: 100%; gap: 6px; box-shadow: 0 -8px 10px -6px rgba(17, 17, 17, .18); border-radius: 16px 16px 0 0; }
html.pm-lay-phone .pm-sheet__art { width: 44px; height: 44px; }
html.pm-lay-phone .pm-sheet__name { font-size: 18px; }
html.pm-lay-phone .pm-sheet__kills { display: none; }
html.pm-lay-phone .pm-act { min-height: 52px; padding: 5px 10px; }
html.pm-lay-phone .pm-sheet__sp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pm-lay-land .pm-sheet__sp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.pm-lay-land .pm-act { min-height: 50px; }
html.pm-lay-land .pm-sheet__kills { display: none; }

/* the evolution picker: role, chips (new ones in lime), meters against the bloom, the plain specials */
.pm-evo__role { font-size: 14px; font-weight: 800; line-height: 1.2; }
.pm-evo__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pm-evo .pm-meters { grid-template-columns: 1fr; gap: 3px; padding: 0 4px; }
.pm-evo__sp { font-size: 13px; line-height: 1.3; color: var(--gg-ink-2); font-weight: 600; }
.pm-evo.is-locked .pm-evo__cost { font-size: 13px; padding: 6px 10px; text-align: left; line-height: 1.15; }
@media (max-height: 520px) {
  .pm-evo { grid-template-rows: auto auto auto auto auto auto; }
  .pm-evo__art { grid-row: 1 / 7; }
  .pm-evo__role { font-size: 13px; }
  .pm-evo__chips { justify-content: flex-start; }
  .pm-evo .pm-meters { grid-template-columns: repeat(3, auto); justify-content: start; gap: 2px 8px; padding: 0; }
  .pm-evo .pm-meter { gap: 3px; }
  .pm-evo .pm-dots i { width: 7px; height: 7px; }
  .pm-evo__sp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* the name card: the best answer, and the Guide */
.pm-bosscard__best { margin-top: 6px; padding-top: 6px; border-top: 1.5px dashed rgba(255, 250, 240, .35); font-size: 14px; line-height: 1.3; color: var(--gg-cream); }
.pm-bosscard__best b { color: var(--gg-butter); margin-right: 4px; }
.pm-bosscard__best[hidden] { display: none; }
.pm-bosscard__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: middle; }
.pm-bosscard__chips .pm-tg { color: var(--gg-ink); }
.pm-bosscard > div { flex: 1; min-width: 0; }
.pm-bosscard__i { pointer-events: auto; align-self: start; }

/* the weather / rule pill on the board: each part is a button */
.pm-wx { padding: 0; gap: 0; border: 0; background: none; box-shadow: none; pointer-events: none; }
.pm-wx__k { align-self: center; margin-right: 4px; padding: 3px 7px; border-radius: var(--gg-r-pill); background: var(--gg-ink); color: var(--gg-cream); font-size: 13px; font-weight: 800; }
.pm-wx__b { position: relative; pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; height: 36px; margin: 4px 0; padding: 0 12px 0 6px; border: var(--gg-border); border-radius: var(--gg-r-pill);
  background: var(--gg-paper); box-shadow: var(--gg-shadow-sm); font: inherit; font-weight: 800; font-size: 14px; color: var(--gg-ink); cursor: pointer; white-space: nowrap; }
.pm-wx__b + .pm-wx__b { margin-left: 4px; }
.pm-wx__b::before { content: ""; position: absolute; inset: -6px -2px; }
.pm-wx__b svg { width: 22px; height: 22px; flex: none; }
.pm-wx__b.is-bad { background: var(--gg-butter-100); }
.pm-wx__b.is-good { background: var(--gg-lime-100); }
.pm-wx__b.pm-wx__rule { background: var(--gg-lavender-100); font-size: 14px; }
.pm-wx__b:active { transform: translate(1px, 1px); box-shadow: none; }
.pm-pchip--rule svg { width: 22px; height: 22px; display: block; }
.pm-pchip--rule { padding: 0 4px; }
.pm-pchip--wx b, .pm-pchip--rule b { margin: 0 4px 0 2px; }
button.pm-guide__row { width: 100%; padding: 4px; margin: 0; border: 1.5px solid transparent; border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: inherit; text-align: left; cursor: pointer; min-height: 44px; }
button.pm-guide__row:hover { border-color: var(--gg-ink); background: var(--gg-cream); }

/* the Garden Guide */
.pm-guidem { z-index: 88; }
.pm-gd { width: min(620px, 100%); text-align: left; padding: 18px 16px 16px; display: grid; gap: 10px; grid-template-rows: auto auto 1fr; overflow: hidden; height: min(780px, calc(100dvh - 40px)); }
.pm-gd__head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.pm-gd__head h2 { font-size: var(--gg-text-2xl); margin-top: 2px; }
.pm-gd__tabs { width: 100%; }
.pm-gd__body { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; align-content: start; padding: 2px 2px 8px; margin: 0 -2px; }
.pm-gd__key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.pm-gd__key span { display: inline-flex; align-items: center; gap: 4px; }
.pm-gd__key svg { width: 18px; height: 18px; }
.pm-gd__picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.pm-gpick { display: grid; grid-template-rows: 40px auto; gap: 2px; padding: 3px 2px 4px; min-height: 60px; border: 2px solid var(--gg-ink); border-radius: 12px; background: var(--gg-green-100); cursor: pointer; font: inherit; color: var(--gg-ink); }
.pm-gpick canvas { width: 100%; height: 40px; display: block; }
.pm-gpick span { font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.2px; }
.pm-gpick.is-on { background: var(--gg-butter); box-shadow: var(--gg-shadow-sm); transform: translateY(-2px); }
.pm-gpick.is-boss { background: var(--gg-pink-100); }
.pm-gpick.is-boss.is-on { background: var(--gg-butter); }
.pm-gpick.is-unmet { background: var(--gg-sand); }
.pm-gpick.is-unmet canvas, .pm-gd__art.is-sil { filter: brightness(0) opacity(.42); }
.pm-gd__card { display: grid; gap: 8px; padding: 12px; border: var(--gg-border); border-radius: var(--gg-r-md); background: var(--gg-cream); }
.pm-gd__top { display: flex; gap: 12px; align-items: center; }
.pm-gd__art { flex: none; width: 84px; height: 72px; border: 2px solid var(--gg-ink); border-radius: 14px; background: var(--gg-green-100); }
.pm-gd__badge { display: grid; place-items: center; background: var(--gg-paper); }
.pm-gd__badge canvas { width: 44px; height: 44px; }
.pm-gd__who { min-width: 0; display: grid; gap: 4px; }
.pm-gd__who h3 { font-family: var(--gg-font-display); font-size: 22px; line-height: 1.05; }
.pm-gd__role { font-weight: 800; font-size: 15px; }
.pm-gd__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-gd__sp { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; line-height: 1.3; }
.pm-gd__open { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--gg-green-700); }
.pm-gd__open.is-locked { color: var(--gg-ink-3); }
.pm-gd__open svg { width: 15px; height: 15px; flex: none; }
.pm-gd__h { margin-top: 4px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gg-ink-3); }
.pm-gd__grow { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-weight: 800; }
.pm-gd__evos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-gev { display: grid; grid-template-rows: auto 1fr; gap: 6px; padding: 8px; border: 2px solid var(--gg-ink); border-radius: 14px; background: var(--gg-paper); }
.pm-gev canvas { width: 100%; height: 64px; border-radius: 10px; background: var(--gg-green-600); border: 1.5px solid var(--gg-ink); }
.pm-gev > div { display: grid; gap: 5px; align-content: start; }
.pm-gev__n { font-family: var(--gg-font-display); font-weight: 800; font-size: 17px; line-height: 1.1; }
.pm-gev__b { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 2px 7px; border-radius: var(--gg-r-pill); background: var(--gg-sand); border: 1.5px solid var(--gg-ink); font-family: var(--gg-font-body); font-size: 13px; font-weight: 700; }
.pm-gev__b.is-own { background: var(--gg-lime-100); }
.pm-gev__b svg { width: 13px; height: 13px; }
.pm-gev__r { font-size: 13px; font-weight: 800; }
.pm-gev__s { font-size: 13px; line-height: 1.3; color: var(--gg-ink-2); }
.pm-gev .pm-meters { grid-template-columns: 1fr; gap: 3px; }
.pm-gd__txt { font-size: 14px; line-height: 1.35; }
.pm-gd__blurb { color: var(--gg-ink-3); font-style: italic; }
.pm-gd__traits { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-gd__traits span { padding: 3px 8px; border-radius: var(--gg-r-pill); border: 1.5px solid var(--gg-ink); background: var(--gg-paper); font-size: 13px; font-weight: 700; }
.pm-gd__best { display: grid; gap: 2px; padding: 8px 10px; border: 2px solid var(--gg-ink); border-radius: 12px; background: var(--gg-lime-100); font-size: 14px; font-weight: 700; line-height: 1.3; }
.pm-gd__best b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gg-green-700); }
.pm-gd__elite { font-size: 13px; line-height: 1.3; color: var(--gg-ink-2); }
.pm-gd__card.is-unmet { background: var(--gg-sand); }
.pm-gd__list { display: grid; gap: 6px; }
.pm-gw { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px 6px 6px; border: 2px solid var(--gg-ink); border-radius: 14px; background: var(--gg-cream); font: inherit; color: var(--gg-ink); text-align: left; cursor: pointer; }
.pm-gw.is-static { cursor: default; }
button.pm-gw:active { transform: translate(1px, 1px); }
.pm-gw__i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--gg-ink); background: var(--gg-paper); }
.pm-gw__i svg { width: 26px; height: 26px; }
.pm-gw__i canvas { width: 30px; height: 30px; }
.pm-gw__t { font-size: 13px; line-height: 1.3; color: var(--gg-ink-2); font-weight: 600; }
.pm-gw__t b { display: block; font-size: 15px; color: var(--gg-ink); }
.pm-gw__t em { font-style: normal; font-weight: 800; color: var(--gg-green-700); }
@media (max-width: 420px) {
  .pm-gd { padding: 14px 10px 12px; }
  .pm-gd__evos { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pm-gev { padding: 6px; }
  .pm-gd__art { width: 72px; height: 62px; }
  .pm-gd__picks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-height: 520px) {
  .pm-gd { height: calc(100dvh - 20px); padding: 10px 14px; gap: 6px; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; }
  .pm-gd__head h2 { display: none; }
  .pm-gd__tabs { grid-column: 2; grid-row: 1; width: auto; }
  .pm-gd__head { grid-column: 1; grid-row: 1; align-items: center; }
  .pm-gd__head .gg-eyebrow { margin: 0; }
  .pm-gd__body { grid-column: 1 / -1; }
  .pm-gd__picks { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .pm-guidem { padding: 10px; }
}

/* the weather / garden rule card */
.pm-infom { z-index: 89; }
.pm-info { display: grid; justify-items: center; gap: 6px; width: min(360px, 100%); }
.pm-info__icon { display: grid; place-items: center; width: 64px; height: 64px; border: var(--gg-border); border-radius: 18px; background: var(--gg-butter-100); box-shadow: var(--gg-shadow-sm); }
.pm-infom.is-good .pm-info__icon { background: var(--gg-lime-100); }
.pm-info__icon svg { width: 42px; height: 42px; }
.pm-info__n { font-size: var(--gg-text-2xl); }
.pm-info__l { font-size: var(--gg-text-md); line-height: 1.35; }
.pm-info__do { display: grid; gap: 2px; width: 100%; margin: 4px 0 8px; padding: 10px 12px; border: 2px solid var(--gg-ink); border-radius: 14px; background: var(--gg-lime-100); font-weight: 700; line-height: 1.3; }
.pm-info__do b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gg-green-700); }
/* clarity round, look round 1 fixes */
.pm-card__tg { left: 3px; top: 19px; bottom: auto; flex-direction: column; gap: 2px; }
.pm-tgi { width: 16px; height: 16px; border-radius: 5px; background-clip: padding-box; }
.pm-tgi svg { width: 13px; height: 13px; }
html.pm-lay-desk .pm-card__tg { top: 24px; bottom: auto; left: 5px; flex-direction: column; }
html.pm-lay-land .pm-cards.is-many .pm-card__tg { top: 17px; bottom: auto; }
html.pm-lay-desk .pm-card--pin .pm-card__tg { top: 6px; right: 8px; left: auto; flex-direction: row; }
.pm-meters { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 4px 12px; }
.pm-meter { justify-content: flex-start; }
.pm-meter__k { min-width: 52px; }
.pm-act .pm-dots i.is-up, .pm-evo__cost .pm-dots i.is-up { background: var(--gg-butter); }
.pm-act--grow .pm-dots i.is-on:not(.is-up) { background: var(--gg-green-700); }
.pm-evo__up, .pm-gev__up { font-size: 13px; font-weight: 800; color: var(--gg-green-700); line-height: 1.25; }
.pm-gpick span.is-long { font-size: 11.5px; letter-spacing: -.4px; text-overflow: clip; }
.pm-gd__picks--pests { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; }
.pm-gd__picks--pests .pm-gpick { grid-template-rows: 1fr; min-height: 46px; padding: 2px; position: relative; }
.pm-gd__picks--pests .pm-gpick canvas { height: 40px; }
.pm-gpick__q { position: absolute; right: 4px; bottom: 2px; font-family: var(--gg-font-display); font-size: 15px; color: var(--gg-ink-2); }
@media (max-width: 420px) { .pm-gd__picks--pests { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
/* the weather / rule pill stacks, so it never runs into the steps pill */
.pm-wx { flex-direction: column; align-items: flex-start; }
.pm-wx__b + .pm-wx__b { margin-left: 0; margin-top: 0; }
.pm-wx__k { margin: 0 0 -2px 6px; position: relative; z-index: 1; }
html.pm-lay-phone .pm-wx { align-items: flex-end; }
html.pm-lay-phone .pm-wx__k { margin: 0 6px -2px 0; }
/* on a phone the name card keeps to the answer (the blurb stays on a desk, and for an elite boss's new trick) */
html.pm-lay-phone .pm-bosscard.has-best .pm-bosscard__b, html.pm-lay-land .pm-bosscard.has-best .pm-bosscard__b { display: none; }
html.pm-lay-phone .pm-bosscard canvas, html.pm-lay-land .pm-bosscard canvas { align-self: center; }
/* look round 3: the sheet must fit a sideways phone and the desk tray; meters stack (label over dots) where narrow */
.pm-meters.is-stack, html.pm-lay-land .pm-sheet .pm-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
html.pm-lay-land .pm-sheet .pm-meter { flex-direction: column; align-items: flex-start; gap: 2px; }
html.pm-lay-land .pm-sheet .pm-meter__k { min-width: 0; }
html.pm-lay-land.pm-sheet-open .pm-hud__extra { display: none; }
html.pm-lay-land .pm-sheet { gap: 5px; }
html.pm-lay-land .pm-sheet__art { width: 44px; height: 44px; }
html.pm-lay-land .pm-sheet__name { font-size: 18px; }
html.pm-lay-desk.pm-sheet-open .pm-gorow .pm-fert { display: none; }
html.pm-lay-desk .pm-sheet .pm-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
html.pm-lay-desk .pm-sheet .pm-meter { flex-direction: column; align-items: flex-start; gap: 3px; }
html.pm-lay-desk .pm-sheet .pm-meter__k { min-width: 0; }
@media (max-height: 520px) {
  .pm-evo .pm-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 0; }
  .pm-evo .pm-meter { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pm-evo .pm-meter__k { min-width: 0; }
  .pm-evo__up { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-height: 520px) {
  .pm-evo .pm-meters { grid-template-columns: repeat(3, auto); justify-content: start; gap: 2px 10px; }
  .pm-evo__up { -webkit-line-clamp: 2; }
}
/* look round 6: the unmet silhouette keeps its frame; the phone sheet stacks its meters in three tidy columns */
.pm-gd__art.is-sil { background: transparent; border-style: dashed; border-color: var(--gg-ink-3); }
html.pm-lay-phone .pm-sheet .pm-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
html.pm-lay-phone .pm-sheet .pm-meter { flex-direction: column; align-items: flex-start; gap: 3px; }
html.pm-lay-phone .pm-sheet .pm-meter__k { min-width: 0; }
/* v3.1 (gv 2): the next wave's weather / rule pops in once when the build phase starts, so it is noticed before Start */
@media (prefers-reduced-motion: no-preference) {
  .pm-wx.is-new .pm-wx__b { animation: pm-wxpop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
  .pm-wx.is-new .pm-wx__k { animation: pm-wxpop .5s ease-out both; }
}
@keyframes pm-wxpop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
/* v3.1: on phones a plant's sheet rises over the board's foot; the weather / rule pill steps aside until it closes */
html.pm-lay-phone.pm-sheet-open .pm-wx { display: none; }

/* ---------------------------------------------------------------- the Lawn extension (DESIGN-BIGLAWN.md) */
/* the start screen's Lawn size picker: the name over the size, two lines in a 50 px pill */
.pm-sizeseg button { display: grid; place-content: center; gap: 0; min-height: 50px; padding: 2px 4px; line-height: 1.1; }
.pm-sizeseg button b { font-size: 14px; font-weight: 800; }
.pm-sizeseg button small { font-size: 13px; font-weight: 600; opacity: .8; }
/* the Shed card's drawn preview: the lawn now, and the next size with its new row and column in lime */
.pm-up__lawn { grid-column: 1 / -1; width: 100%; height: 96px; display: block; margin-top: 4px; }
/* the board zoom (grown lawn, small phone, build phase): the clip is the unzoomed board; the canvas moves inside it */
.pm-boardclip { position: relative; display: block; }
.pm-boardclip.is-zoomed { overflow: hidden; border-radius: 18px; box-shadow: var(--gg-shadow-lg); }
.pm-boardclip.is-zoomed #board { transform-origin: 0 0; box-shadow: none; }
#board { transition: translate var(--gg-dur-md) var(--gg-ease-out), scale var(--gg-dur-md) var(--gg-ease-out); }
.pm-boardclip.is-panning #board { transition: none; }
.pm-zoombtn { position: absolute; right: 8px; bottom: 8px; z-index: 6; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: var(--gg-border); border-radius: 50%; background: var(--gg-paper); box-shadow: var(--gg-shadow-sm); cursor: pointer; touch-action: manipulation; }
.pm-zoombtn[hidden] { display: none; }
.pm-zoombtn svg { width: 26px; height: 26px; }
.pm-zoombtn.is-in { background: var(--gg-lime); }
.pm-zoombtn:active { transform: translate(1px, 1px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { #board { transition: none; } }
/* ===================================================================== mobile round (10-23): Bert, the sheet, small screens
   Phones and sideways phones: ui.js placeBubble() docks the bubble with inline position (low in the board's foot, top under
   Bert, or the side column), so it never covers the coach's target, the hand or the entrance. A tap puts it away. */
.pm-bubble[hidden] { display: none !important; }
.pm-bubble .pm-bubble__face { display: none; }
html.pm-lay-phone .pm-bubble, html.pm-lay-land .pm-bubble { pointer-events: auto; cursor: pointer; touch-action: manipulation; }
html.pm-lay-phone .pm-bubble.is-low, html.pm-lay-land .pm-bubble { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; max-width: min(330px, calc(100vw - 44px)); }
html.pm-lay-land .pm-bubble { max-width: min(300px, calc(100vw - 40px)); }
html.pm-lay-phone .pm-bubble.is-low::before, html.pm-lay-land .pm-bubble::before { display: none; }
html.pm-lay-phone .pm-bubble.is-low .pm-bubble__face, html.pm-lay-land .pm-bubble .pm-bubble__face { display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gg-ink); background: var(--gg-green-100); }
/* the plant sheet sits above every board overlay (steps, weather, Skip tips, the card strip), and the pills under it step aside */
html.pm-lay-phone .pm-tray.is-sheet, html.pm-lay-land .pm-tray.is-sheet { z-index: 16; }
html.pm-lay-phone.pm-sheet-open .pm-walk, html.pm-lay-phone.pm-sheet-open .pm-coachskip, html.pm-lay-phone.pm-sheet-open .pm-cardinfo, html.pm-lay-phone.pm-sheet-open .pm-steptag { display: none; }
/* sideways, the armed card's strip keeps to one corner of the short board (its chips are on the card already) */
html.pm-lay-land .pm-cardinfo { left: auto; max-width: min(78%, 420px); }
html.pm-lay-land .pm-cardinfo__c { display: none; }
/* a sideways phone: the results card goes two columns (the marrow and the verdict, then the scores and the buttons),
   so Grow again is on the first screen instead of three scrolls down */
@media (orientation: landscape) and (max-height: 500px) {
  .pm-results { padding: 8px 12px; }
  .pm-results__card { width: min(800px, 100%); max-height: calc(100dvh - 16px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr; column-gap: 20px; align-content: start; align-items: start; padding: 14px 18px; }
  .pm-results__card > .pm-results__marrow { margin-top: 18px; }
  .pm-results__card > .pm-results__marrow, .pm-results__card > .gg-result__title, .pm-results__card > .gg-result__line { grid-column: 1; }
  .pm-results__card > .pm-results__marrow { width: 170px; height: 84px; }
  .pm-results__card > .gg-result__title { font-size: 30px; line-height: 1.05; margin: 2px 0 6px; }
  .pm-results__card > #r-regrow, .pm-results__card > #r-final { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  #r-final:not([hidden]) { display: flex; flex-direction: column; gap: 6px; }
  #r-final > * { order: 2; margin-top: 0; }
  #r-final > .pm-rscores { order: 0; }
  #r-final > .pm-ractions { order: 1; margin: 2px 0 6px; }
}
/* the zoom button (grown lawn, small phone) shares the board's bottom-right corner with Skip tips and the weather pill:
   on a phone it steps up to the top-right corner (hedge, clear of the gate) while either is up; sideways it steps left */
html.pm-lay-phone .pm-boardframe:has(> .pm-coachskip:not([hidden]), > .pm-wx:not([hidden])) .pm-zoombtn { bottom: auto; top: 8px; }
html.pm-lay-land .pm-boardframe:has(> .pm-coachskip:not([hidden])) .pm-zoombtn { right: 128px; }