/* Playtest strip + board sheet (platform/playtest.js, platform/PLAYTEST.md). Loaded by playtest.js itself.
   Tokens and components from design/garden.css, sheet and rows from platform/gg.css. Prefix: ggpt-.
   The strip sits in the page flow right under the app bar: never fixed, never over the game board. */

.ggpt-strip {
  position: relative; z-index: 4; flex: none;
  background: var(--gg-lavender-100); border-bottom: var(--gg-border);
}
/* a placeholder in the page holds the exact height until playtest.js fills it (no layout shift) */
.ggpt-strip[data-gg-playtest]:not(.is-on) { min-height: 56px; }
.ggpt-strip__in { display: flex; align-items: center; gap: 8px; min-height: 54px; padding-block: 4px; }
.ggpt-meta { flex: 1 1 auto; min-width: 0; margin: 0; display: grid; gap: 1px; font-size: var(--gg-text-xs); line-height: 1.2; }
.ggpt-tag { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ggpt-by { color: var(--gg-ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ggpt-by b, .ggpt-by a { font-weight: 800; color: var(--gg-ink); }
.ggpt-by a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ggpt-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.ggpt-more { display: none; }
@media (min-width: 900px) {
  .ggpt-more { display: inline-flex; align-items: center; min-height: 44px; margin-left: 10px; font-weight: 700; font-size: var(--gg-text-sm); color: var(--gg-ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

/* the vote: "Make this game!" + the count; "Voted" after (one per device) */
.ggpt-vote { gap: 6px; padding-inline: 10px 6px; }
.ggpt-vote svg { width: 18px; height: 18px; }
.ggpt-count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--gg-r-pill);
  background: var(--gg-ink); color: var(--gg-cream); font-family: var(--gg-font-body); font-weight: 800; font-size: var(--gg-text-xs);
  font-variant-numeric: tabular-nums;
}
.ggpt-count.is-wait { background: color-mix(in srgb, var(--gg-ink) 18%, transparent); }
.ggpt-vote.no-count .ggpt-count { display: none; }
.ggpt-vote.is-voted { --bg: var(--gg-paper); border-style: dashed; box-shadow: none; cursor: default; }
.ggpt-vote.is-voted:active { transform: none; }
@media (hover: hover) { .ggpt-vote.is-voted:hover { transform: none; box-shadow: none; } }

.ggpt-icon { position: relative; width: 44px; padding: 0; }
.ggpt-icon svg { width: 20px; height: 20px; }
.ggpt-icon span { display: none; }
.ggpt-icon.has-dot::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gg-pink); border: 2px solid var(--gg-ink);
}

/* phones: the words stay whole, the vote drops its heart and gets a little tighter */
@media (max-width: 459.98px) {
  .ggpt-strip__in { gap: 6px; padding-inline: 12px; }
  .ggpt-acts { gap: 5px; }
  .ggpt-vote { padding-inline: 12px 6px; gap: 6px; }
  .ggpt-vote svg { display: none; }
}
@media (max-width: 369.98px) { .ggpt-vote__label { font-size: var(--gg-text-xs); } }
/* room for words: labels on Board and Share, the meta on one line */
@media (min-width: 640px) {
  .ggpt-icon { width: auto; padding: 0 14px; }
  .ggpt-icon span { display: inline; }
  .ggpt-meta { display: flex; align-items: baseline; gap: 6px; font-size: var(--gg-text-sm); }
  .ggpt-by::before { content: "\00B7"; margin-right: 6px; color: var(--gg-ink-3); font-weight: 800; }
}
/* short landscape phones: one slim row; inside the app bar when it fits there (playtest.js moves it) */
@media (orientation: landscape) and (max-height: 500px) {
  .ggpt-strip[data-gg-playtest]:not(.is-on) { display: none; }   /* the row goes into the app bar here */
  .ggpt-strip__in { min-height: 50px; padding-block: 2px; }
  .ggpt-meta { font-size: var(--gg-text-xs); }
}
.ggpt-strip__in.is-inbar { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 0; justify-content: flex-end; gap: 6px; }
.ggpt-strip__in.is-inbar .ggpt-meta { flex: 0 1 auto; display: grid; gap: 1px; font-size: var(--gg-text-xs); text-align: right; }
.ggpt-strip__in.is-inbar .ggpt-by::before { content: none; }
.ggpt-strip__in.is-inbar .ggpt-icon { width: 44px; padding: 0; }
.ggpt-strip__in.is-inbar .ggpt-icon span { display: none; }
.ggpt-strip__in.is-inbar .ggpt-vote svg { display: none; }
.ggpt-strip__in.is-inbar .ggpt-acts { gap: 5px; }
.ggpt-strip__in.is-tight .ggpt-meta, .ggpt-strip__in.is-inbar .ggpt-more { display: none; }

/* ---------- the board sheet: playtest rows show the game's own value, not garden points ---------- */
.ggpt-boardsheet .ggp-title { font-size: var(--gg-text-xl); }
.ggpt-val { font-size: var(--gg-text-sm); white-space: nowrap; }
.ggpt-fine { text-align: center; }

/* ---------- the result line in a game's result card ---------- */
.ggpt-moment { margin: 0 0 12px; text-align: center; }
.ggpt-moment__line { color: var(--gg-ink); }