/* Planter drawing (js/planter.js): a planter frame with soil, one tile per slot.
   Each planter type sets its own frame colours; soil and tiles are shared. The planter is its own size
   container so gene chips stay one row of six and shrink with the tile. */

.planter {
  --soil: #3b2a1c;
  --soil-2: #281c12;
  --frame: #7a5433;
  --frame-2: #553921;
  --frame-edge: rgba(0, 0, 0, .45);
  --tile: rgba(22, 18, 13, .8);
  --tile-line: rgba(255, 255, 255, .13);
  --on-soil: rgba(255, 255, 255, .55);
  --dash: rgba(255, 255, 255, .26);
  --order-bg: var(--warn);
  --order-text: #1a1408;
  --chip: 18px;
  --chip-font: 14px;          /* ~.78 of the circle, so the letters read */
  --chip-gap: 2px;
  --tile-pad: 6px;
  --slot-gap: 8px;
  --frame-w: 12px;
  container: planter / inline-size;
  display: block;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}
:root[data-theme="light"] .planter {
  --soil: #5a4230;
  --soil-2: #432f20;
  --tile: rgba(250, 246, 238, .95);
  --tile-line: rgba(70, 50, 30, .3);
  --order-text: #fff;
}

.planter.cols-2 { max-width: 330px; }
.planter.cols-1 { max-width: 190px; }
.planter.is-tri { max-width: 470px; }

/* ---- frame + soil (rectangular planters) ---- */
.planter .pl-frame {
  position: relative;
  padding: var(--frame-w);
  border-radius: 6px;
  border: 1px solid var(--frame-edge);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .13) 0 2px, transparent 2px 41px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px),
    linear-gradient(var(--frame), var(--frame-2));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.planter .pl-slots {
  list-style: none;
  margin: 0;
  padding: var(--slot-gap);
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--slot-gap);
  border-radius: 3px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .05) 0 1.5px, transparent 2px) 0 0 / 17px 17px,
    radial-gradient(circle, rgba(0, 0, 0, .3) 0 2px, transparent 2.5px) 6px 9px / 23px 23px,
    linear-gradient(var(--soil), var(--soil-2));
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .6);
}
.planter.cols-3 .pl-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.planter.cols-2 .pl-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.planter.cols-1 .pl-slots { grid-template-columns: minmax(0, 1fr); }

/* Railroad planters: bolted steel. */
.planter.look-rail {
  --frame: #5e5c58;
  --frame-2: #393835;
}
.planter.look-rail .pl-frame {
  border-radius: 2px;
  background:
    radial-gradient(circle at 7px 7px, #8b8780 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 7px) 7px, #8b8780 0 2.5px, transparent 3px),
    radial-gradient(circle at 7px calc(100% - 7px), #8b8780 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #8b8780 0 2.5px, transparent 3px),
    linear-gradient(90deg, rgba(160, 80, 40, .18), transparent 30%, transparent 70%, rgba(160, 80, 40, .22)),
    linear-gradient(var(--frame), var(--frame-2));
}
/* Bathtub: old white enamel. */
.planter.look-tub {
  --frame: #e6e1d6;
  --frame-2: #b3ada1;
}
.planter.look-tub .pl-frame {
  border-radius: 28px;
  padding: calc(var(--frame-w) + 2px) calc(var(--frame-w) + 4px);
  background: linear-gradient(#ece8df, #b4aea2);
}
.planter.look-tub .pl-slots { border-radius: 20px; }
/* Minecart: riveted rusty iron. */
.planter.look-cart {
  --frame: #7c4a2b;
  --frame-2: #45281a;
}
.planter.look-cart .pl-frame {
  border-radius: 4px 4px 12px 12px;
  background:
    radial-gradient(circle, #a8764f 0 2px, transparent 2.5px) 4px 3px / 18px 100% repeat-x,
    linear-gradient(var(--frame), var(--frame-2));
}
/* Plant pot: terracotta. */
.planter.look-pot {
  --frame: #b0603a;
  --frame-2: #7d3f22;
}
.planter.look-pot .pl-frame { border-radius: 6px 6px 26px 26px; }
.planter.look-pot .pl-slots { border-radius: 4px 4px 18px 18px; }

/* ---- slot tiles ---- */
.planter .pl-cell { display: flex; min-width: 0; }
.planter .pl-tile {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--tile-pad);
  border: 1px solid var(--tile-line);
  border-radius: 4px;
  background: var(--tile);
  color: var(--text);
  font: inherit;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
.planter .pl-vis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.planter .pl-top {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 16px;
}
.planter .pl-badge {
  font-family: var(--head-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 0 4px;
  border-radius: 2px;
  white-space: nowrap;
}
.planter .pl-center { background: var(--accent); color: var(--on-accent); }
.planter .pl-order { background: var(--order-bg); color: var(--order-text); }
.planter .pl-label {
  margin-left: auto;
  font-family: var(--head-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.planter .pl-label-gen { color: var(--info); }
.planter .pl-label-custom { color: var(--muted); font-weight: 400; }
.planter .pl-cap {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-family: var(--head-font);
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
/* a tipped label or caption (short words: #n, Step n, GEN.n, Any spare plant) must not clip its own tooltip */
.planter :is(.pl-label, .pl-cap)[data-tip] { overflow: visible; }
.planter .pl-none {
  font-family: var(--head-font);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-soil);
}

/* Gene chips sized by the planter: always one row of six (Sean), shrinking with the tile. */
.planter .genes {
  --gap: var(--chip-gap);
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--chip-gap);
  max-width: 100%;
}
.planter .gene {
  flex: 0 0 var(--chip);
  width: var(--chip);
  min-width: var(--chip);
  height: var(--chip);
  font-size: var(--chip-font);
  line-height: var(--chip);
}

/* Roles. Empty slots are dashed holes in the soil; the bred plant gets the accent frame. */
.planter .pl-tile.is-empty {
  background: rgba(0, 0, 0, .12);
  border: 1.5px dashed var(--dash);
  box-shadow: none;
}
.planter .pl-tile.is-center {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 12px rgba(205, 65, 43, .35);
}
.planter .pl-tile.is-any .gene.q { opacity: .8; }
/* No chain dashes in flat planter tiles: the gaps there are too tight. */
.planter .gene::before { display: none; }
.planter .pl-tile.is-dim > .pl-vis { opacity: .5; }   /* not the tile itself: its tooltip must stay solid */
.planter .pl-tile.is-selected { box-shadow: 0 0 0 3px var(--focus); }

/* Interactive (Planter Lab): tiles are buttons. */
.planter button.pl-tile { cursor: pointer; }
.planter button.pl-tile:hover { border-color: var(--accent-2); }
.planter button.pl-tile.is-empty:hover { background: rgba(255, 255, 255, .07); }
.planter button.pl-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .planter button.pl-tile { transition: border-color .12s, background-color .12s; }
}

/* ---- triangle planters: three corners and an inner slot, drawn on a triangular frame ---- */
.planter.is-tri .pl-frame {
  aspect-ratio: 11 / 10;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.planter.is-tri .pl-frame::before,
.planter.is-tri .pl-frame::after {
  content: "";
  position: absolute;
  inset: 0;
}
.planter.is-tri .pl-frame::before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(60deg, rgba(0, 0, 0, .13) 0 2px, transparent 2px 41px),
    linear-gradient(var(--frame), var(--frame-2));
}
.planter.is-tri .pl-frame::after {
  clip-path: polygon(50% 8%, 94% 96%, 6% 96%);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .05) 0 1.5px, transparent 2px) 0 0 / 17px 17px,
    radial-gradient(circle, rgba(0, 0, 0, .3) 0 2px, transparent 2.5px) 6px 9px / 23px 23px,
    linear-gradient(var(--soil), var(--soil-2));
}
.planter.is-tri .pl-slots {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  padding: 0;
  background: none;
  box-shadow: none;
}
.planter.is-tri .pl-cell {
  position: absolute;
  width: 30%;
  transform: translate(-50%, -50%);
}
/* Corner-to-inner spacing follows the game (inner slot sits at the centroid). */
.planter.is-tri .pl-s0 { left: 50%; top: 23%; }
.planter.is-tri .pl-s1 { left: 16.7%; top: 81%; }
.planter.is-tri .pl-s2 { left: 83.3%; top: 81%; }
.planter.is-tri .pl-s3 { left: 50%; top: 59%; }
/* Corner tiles overhang the frame edges, so empty ones get their own soil instead of showing the edge through. */
.planter.is-tri .pl-tile.is-empty { background: linear-gradient(var(--soil), var(--soil-2)); }

/* ---- compact (result cards) ---- */
.planter.is-compact {
  --chip: 13px;
  --chip-font: 10px;
  --chip-gap: 1px;
  --tile-pad: 3px;
  --slot-gap: 4px;
  --frame-w: 6px;
  max-width: 230px;
}
.planter.is-compact.cols-2 { max-width: 160px; }
.planter.is-compact.cols-1 { max-width: 90px; }
.planter.is-compact.is-tri { max-width: 250px; }
.planter.is-compact .pl-frame { border-radius: 4px; }
.planter.is-compact.look-tub .pl-frame { border-radius: 16px; }
.planter.is-compact.is-tri .pl-frame { border-radius: 0; }
.planter.is-compact .pl-tile { min-height: 44px; border-radius: 3px; }
.planter.is-compact .pl-tile.is-center { border-width: 1.5px; }
.planter.is-compact .pl-vis { gap: 2px; }
.planter.is-compact .pl-top { min-height: 12px; gap: 2px; }
.planter.is-compact .pl-badge { font-size: 9px; line-height: 12px; padding: 0 2px; }
.planter.is-compact .pl-label { font-size: 10px; line-height: 12px; }

/* ---------- overhead planter scene (js/planter.js renderPlanterScene) ----------
   Our own top-down drawing (inline SVG) with the clone sprites standing on it. The box is its own size container, so
   every size inside is in cqw and the whole scene scales from a 330px phone to the ~620px "blown up" card view.
   The scene looks the same in both themes (it's a picture of the game), so the plates keep Rust's in-game colours. */
.plscene {
  --scene-max: 620px;
  --lift-ease: cubic-bezier(.3, 1.5, .5, 1);
  --plate: rgba(39, 36, 29, .9);
  --plate-hi: rgba(62, 57, 46, .95);
  --plate-text: #d8cfbe;
  --gG: #53731c; --gY: #53731c; --gH: #53731c; --gW: #8d3f2f; --gX: #8d3f2f;
  --gene-text: #c8c8c8; --gX-text: #c8c8c8; --gene-link: rgba(200, 200, 200, .45); --gene-q: #3d3a35;
  /* The scene is dark in both themes, so keep the dark theme's amber ring here: the light theme's blue (#1f5fbf) is
     only ~1.5:1 on the soil; amber is ~4.6:1 on the soil and more on the plates (covers button.pls-plant in the Lab). */
  --focus: #f5a742;
  display: block;
  width: 100%;
  max-width: var(--scene-max);
  margin-inline: auto;
}
.plscene.size-md { --scene-max: 380px; }
.pls-box {
  container: plscene / inline-size;
  position: relative;
  aspect-ratio: var(--ar, 1);
  isolation: isolate;
}
.pls-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.pls-slots {
  --spr: 13cqw;                 /* clone sprite */
  --chip: min(3.6cqw, 19px);    /* gene circle on the plate (sizes: see "Plates" below) */
  --gap: max(1px, .25cqw);
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pls-cell {
  position: absolute;
  left: calc(var(--x) - var(--cw) / 2);
  top: calc(var(--y) - var(--ch) / 2);
  width: var(--cw);
  height: var(--ch);
  display: grid;
  place-items: center;
}

/* One plant: a focusable unit (button in interactive mode). The stage is its footprint on the soil. */
.pls-plant {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 1.6cqw;
  -webkit-tap-highlight-color: transparent;
}
button.pls-plant {
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pls-plant:hover, .pls-plant:focus-visible { z-index: 3; }
.pls-plant:focus { outline: none; }
.pls-plant:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pls-stage { position: relative; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.pls-lift {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 70%;
  transition: transform .18s var(--lift-ease);
}
.pls-sprite { position: relative; display: block; width: var(--spr); height: var(--spr); }
/* The image sits over the sprite's box, so it can grow on hover without moving the plate (see the pop below). */
.pls-sprite .pls-img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 .2cqw .15cqw rgba(0, 0, 0, .5));
  transition: width .18s var(--lift-ease), height .18s var(--lift-ease), left .18s var(--lift-ease), top .18s var(--lift-ease);
}
.pls-sprite.is-ghost .pls-img { opacity: .36; filter: grayscale(.6) brightness(1.25); }

/* Contact shadow straight under the plant; the light is overhead, so it is round and soft. */
.pls-shadow {
  position: absolute;
  left: 50%;
  top: calc(var(--spr) * .6);
  width: calc(var(--spr) * 1.08);
  height: calc(var(--spr) * .8);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .72), rgba(0, 0, 0, .38) 50%, rgba(0, 0, 0, 0));
  transform: translate(-50%, -50%);
  transition: transform .18s var(--lift-ease), opacity .18s;
}
/* The bred plant: a warm ring of light on the soil around it. */
.pls-glow {
  position: absolute;
  left: 50%;
  top: calc(var(--spr) * .52);
  width: calc(var(--spr) * 1.85);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255, 190, 100, 0) 58%, rgba(255, 186, 92, .5) 71%, rgba(255, 170, 70, .16) 84%, rgba(255, 160, 60, 0)),
    radial-gradient(closest-side, rgba(255, 214, 150, .2), rgba(255, 214, 150, 0) 70%);
  transform: translate(-50%, -50%);
}

/* Rust's look-at plate: dark, rounded, genes as flat circles, a tiny label on top. */
.pls-plate {
  position: relative;
  margin-top: -1cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25cqw;
  padding: .35cqw .45cqw .45cqw;
  border-radius: .9cqw;
  background: var(--plate);
  box-shadow: 0 .3cqw .9cqw rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: background-color .18s, box-shadow .18s;
}
.pls-lbl, .pls-any, .pls-tag, .pls-pin {
  font-family: var(--head-font);
  font-stretch: 87.5%;
  line-height: 1.1;
  white-space: nowrap;
}
.pls-lbl { font-size: clamp(9px, 1.75cqw, 13px); font-weight: 700; letter-spacing: .03em; color: var(--plate-text); }
.pls-lbl-gen { color: #9fc8f0; }
.pls-lbl-custom { font-weight: 400; }
.pls-any { padding: .2cqw .3cqw; font-size: clamp(9px, 1.7cqw, 12px); font-style: italic; color: var(--plate-text); }
.pls-plate .genes { --chip: inherit; --gap: inherit; gap: var(--gap); flex-wrap: nowrap; max-width: none; }
/* Big, bold letters (Sean: "hard to read ... inside the planter"): .8 of the circle, a dark outline for contrast, and
   no chain dashes (the circles sit almost touching). */
.pls-plate .gene {
  font-size: calc(var(--chip) * .8);
  font-weight: 800;
  text-shadow: 0 0 2px rgba(0, 0, 0, .85), 0 1px 1px rgba(0, 0, 0, .9);
}
.pls-plate .gene.q { color: var(--plate-text); text-shadow: none; }
.pls-plate .gene + .gene::before { display: none; }
.pls-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -62%);
  padding: .3cqw .9cqw;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: clamp(9px, 1.6cqw, 12px);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .5);
}
/* Planting-order pin on the sprite's top-left: plant these first. */
.pls-pin {
  position: absolute;
  top: .4cqw;
  left: 50%;
  margin-left: calc(var(--spr) / -2 - 1.2cqw);
  padding: .25cqw .6cqw;
  border-radius: 99px;
  background: #f0b43c;
  color: #1a1408;
  font-size: clamp(9px, 1.6cqw, 12px);
  font-weight: 800;
  box-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* 3D pop, kept small: the plant rises toward the light, so its shadow spreads, softens and fades. The sprite grows by
   width/height from its base (the HD source planter.js asks for covers it), never by transform: scale on it or the
   lift, which would stretch the small bitmap and blur it (Sean: "very blurry"). */
.pls-plant:hover .pls-lift, .pls-plant:focus-visible .pls-lift { transform: translateY(-4px); }
.pls-plant:hover .pls-img, .pls-plant:focus-visible .pls-img { left: -3%; top: -6%; width: 106%; height: 106%; }
.pls-plant:hover .pls-shadow, .pls-plant:focus-visible .pls-shadow { transform: translate(-50%, -50%) scale(1.32); opacity: .55; }
.pls-plant:hover .pls-plate, .pls-plant:focus-visible .pls-plate {
  background: var(--plate-hi);
  box-shadow: 0 .8cqw 1.8cqw rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}
@media (prefers-reduced-motion: reduce) {
  .pls-plant:hover .pls-lift, .pls-plant:focus-visible .pls-lift { transform: none; }
  .pls-plant:hover .pls-img, .pls-plant:focus-visible .pls-img { left: 0; top: 0; width: 100%; height: 100%; }
  .pls-plant:hover .pls-shadow, .pls-plant:focus-visible .pls-shadow { transform: translate(-50%, -50%); opacity: 1; }
}
:root[data-motion="reduce"] .pls-plant:hover .pls-lift, :root[data-motion="reduce"] .pls-plant:focus-visible .pls-lift { transform: none; }
:root[data-motion="reduce"] .pls-plant:hover .pls-img, :root[data-motion="reduce"] .pls-plant:focus-visible .pls-img {
  left: 0; top: 0; width: 100%; height: 100%;
}
:root[data-motion="reduce"] .pls-plant:hover .pls-shadow, :root[data-motion="reduce"] .pls-plant:focus-visible .pls-shadow {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Interactive (Planter Lab): every slot is a button; empty ones show a faint dashed hole in the soil. */
.pls-hole {
  position: absolute;
  inset: 8% 7%;
  border: 1.5px dashed rgba(255, 240, 220, .42);
  border-radius: 1.8cqw;
  background: rgba(0, 0, 0, .1);
  transition: border-color .15s, background-color .15s;
}
button.pls-plant.is-empty:hover .pls-hole, button.pls-plant.is-empty:focus-visible .pls-hole {
  border-color: rgba(255, 240, 220, .6);
  background: rgba(255, 240, 220, .07);
}
.pls-plant.is-selected::before {
  content: "";
  position: absolute;
  inset: 4% 4%;
  border: 2px solid rgba(255, 228, 176, .92);
  border-radius: 2cqw;
  background: rgba(255, 214, 150, .08);
  box-shadow: 0 0 1.6cqw rgba(255, 196, 110, .5), inset 0 0 1.6cqw rgba(255, 196, 110, .28);
  pointer-events: none;
}
.pls-cell.is-dim .pls-lift, .pls-cell.is-dim .pls-shadow { opacity: .5; }

/* Marks with a tooltip (ui.js tip(): Center, planting order, #n / Step n, any spare plant) take the pointer so they
   can show it; the rest of the stage lets the pointer through to the plant. */
.pls-stage [data-tip] { pointer-events: auto; cursor: help; }
.planter .pl-vis [data-tip] { cursor: help; overflow: visible; }   /* short labels; hidden overflow would clip the tip */
/* The Lab planter's keyboard hint is its own tooltip: shown while a slot has keyboard focus, not on mouse hover. */
:is(.plscene, .planter)[data-tip]:hover::after { opacity: 0; visibility: hidden; transition: none; }
:is(.plscene, .planter)[data-tip]:has(:focus-visible)::after {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% + var(--tip-dx, 0px)), 0);
  transition: opacity .14s ease .1s, visibility 0s linear .1s;
}

/* Plates: ONE row of six at every width (Sean: "one row for the clones"). The square and single-row planters' slots
   are 25.47cqw apart, so the widest plate is 6 × 3.6 + 5 × .3 + 2 × .45 = 24cqw (the 1px gap is .3cqw at 330px):
   neighbouring plates keep a clear ~1.5cqw break. Letters (.8 of the circle): about 9.5px at 330px wide, 13.2px at
   460px, and capped at 19px circles (15px letters) from 528px up. Phones, result cards and the md size get smaller
   sprites. */
@container plscene (max-width: 460px) {
  .pls-slots { --spr: 10cqw; }
  .pls-plate { border-radius: 1.3cqw; }
}

@media (forced-colors: active) {
  .pls-plate { border: 1px solid CanvasText; }
  .pls-plant.is-selected::before { border-color: Highlight; }
}

/* Triangles: four slots close together, so smaller sprites and round planting spots, but bigger gene circles and
   labels than the square planters (Sean: "text a little bigger on the triangles"). One-row plates everywhere: the
   bottom corners are 47cqw apart and the inner plate sits above theirs, so 6 × 4.4 + 5 × .3 + .9 = 28.8cqw plates fit.
   Letters: about 11.6px at 330px wide, capped at 20px circles (16px letters) from 455px up. */
.plscene.is-triangle .pls-slots { --spr: 11cqw; --chip: min(4.4cqw, 20px); --gap: max(1px, .3cqw); }
.plscene.is-triangle .pls-lbl { font-size: clamp(10px, 2.1cqw, 15px); }
.plscene.is-triangle .pls-hole, .plscene.is-triangle .pls-plant.is-selected::before { inset: 6% 10%; border-radius: 50%; }
@container plscene (max-width: 460px) {
  .plscene.is-triangle .pls-slots { --spr: 10cqw; }
  .plscene.is-triangle .pls-lbl { font-size: clamp(9px, 2.6cqw, 13px); }
}