/* Pass-and-play: the family table (EXPERIENCE_PLAN.md, family-table). Every class here
   is prefixed .table-; tokens and components come from app.css and the flower from
   garden.css. Player bud colours are fixed hues (their names say them, so they keep
   them in dark mode) and are only ever fills: text stays ink or muted. Movement lives
   in the prefers-reduced-motion block at the end, scoped to html:not(.calm); calm and
   reduced motion get the same states with 150 ms fades. */

/* ------------------------------------------------------------- bud colours */
.table-c-rose { --bud: #E2557A; --bud-ink: #A9244F; --bud-soft: rgba(226, 85, 122, .16); }
.table-c-marigold { --bud: #F2B33D; --bud-ink: #9A620E; --bud-soft: rgba(242, 179, 61, .22); }
.table-c-lilac { --bud: #B79BEA; --bud-ink: #6E50AE; --bud-soft: rgba(183, 155, 234, .24); }
.table-c-fern { --bud: #5E9F64; --bud-ink: #2F6B3A; --bud-soft: rgba(94, 159, 100, .2); }
.table-c-sky { --bud: #7FC4EC; --bud-ink: #2C7AAD; --bud-soft: rgba(127, 196, 236, .26); }
.table-c-peach { --bud: #FFAE7A; --bud-ink: #C25E28; --bud-soft: rgba(255, 174, 122, .26); }
.table-c-plum { --bud: #9A5AA6; --bud-ink: #6A2F78; --bud-soft: rgba(154, 90, 166, .2); }
.table-c-sea { --bud: #34A39B; --bud-ink: #1D6F69; --bud-soft: rgba(52, 163, 155, .2); }
/* The bud (play.html #table-bud): the player's colour in the head, a green stem. */
.table-bud { --bud-stem: var(--leaf-text); --bud-leaf: var(--leaf-a); --bud-w: 1.6; }

/* ------------------------------------------------------------------ frame */
.table { display: flex; flex-direction: column; gap: 1.25rem; }
.table-screen { display: flex; flex-direction: column; gap: 1.25rem; }
.table [tabindex="-1"]:focus { outline: none; }
.table-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.table-section { display: flex; flex-direction: column; gap: .75rem; }
.table-section > h2, .table-section__head > h2 { font-size: 1.25rem; }
.table-section__head { display: flex; flex-direction: column; gap: .125rem; }
.table-note { font-size: .9375rem; color: var(--muted); }

/* A bud with its colour's name, as a little tag. */
.table-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-height: 1.75rem;
  padding: .0625rem .625rem .0625rem .25rem;
  border-radius: var(--r-pill);
  background: var(--bud-soft);
  color: var(--ink);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.2;
}
.table-tag .mark { width: 1.375rem; height: 1.375rem; }

/* The table's flower: the live hero flower, sized by where it sits. */
.table-bloom { display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; }
.table-bloom--hero .flower--hero { width: 13.75rem; }
.table-count { margin: 0; font-weight: 700; color: var(--muted); line-height: 1.3; }
.table-count .num { display: inline-block; font-size: 1.5rem; line-height: 1; color: var(--ink); }
.table-stage { font-weight: 700; font-size: .9375rem; color: var(--muted); }
.table-stageup { margin: 0; font-family: var(--font-story); font-weight: 600; font-size: 1.125rem; line-height: 1.25; color: var(--kind-text); }
.table-stageup:empty { display: none; }
/* The table bar: the one shared flower beside its count (pass and reveal). */
.table-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  width: 100%;
  padding: .375rem .875rem .375rem .375rem;
  border-radius: var(--r-card);
  background: var(--sunken);
  text-align: left;
}
.table-bar .flower--hero { width: 4.5rem; }
.table-bar--grow .flower--hero { width: 5.5rem; }
/* At this size the light pool reads as a smudge on the card: the plant stands on its own. */
.table-bar .fl-pool { display: none; }
/* So does the end screen's young plant: over a bare mound the pool is a haze in empty sky. */
.table-end .flower--hero[data-stage="seedling"] .fl-pool,
.table-end .flower--hero[data-stage="sprout"] .fl-pool { display: none; }
/* A young plant fills only the foot of its frame, so the bar keeps just that part: the
   drawing keeps its 5:6 frame, standing on the bar's soil line. */
.table-bar .flower--hero[data-stage="seedling"],
.table-bar .flower--hero[data-stage="sprout"] { aspect-ratio: 5 / 4; }
.table-bar .flower--hero[data-stage="seedling"] > svg,
.table-bar .flower--hero[data-stage="sprout"] > svg { top: auto; bottom: 0; height: 150%; }
.table-bar__text { flex: 1 1 8rem; display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; min-width: 0; padding: .375rem 0; }
.table-bar__text .btn--tertiary { padding-left: 0; padding-right: 0; }
.table-bar__why { margin: .25rem 0 0; font-size: .875rem; line-height: 1.35; color: var(--muted); }

/* ------------------------------------------------------------------ setup */
.table-intro { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.table-intro__art { width: 4rem; height: 4rem; color: var(--rose); --mark-accent: var(--honey); --mark-accent-o: .9; }
.table-intro .lead { max-width: 24rem; }

.table-vibes { display: flex; flex-direction: column; gap: .625rem; }
/* At large text the words drop under the mark rather than break mid-word. */
.table-vibe {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .875rem;
  width: 100%;
  min-height: 4.25rem;
  padding: .625rem 3rem .625rem .875rem;
  border: 2px solid transparent;
  border-radius: var(--r-tile);
  background: var(--sunken);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.table-vibe__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--card);
}
.table-vibe__mark .mark { width: 1.75rem; height: 1.75rem; color: var(--kind-text); --mark-accent: var(--kind); --mark-accent-o: .45; }
.table-vibe__text { flex: 1 1 10rem; display: flex; flex-direction: column; min-width: 0; }
.table-vibe__title { font-weight: 700; font-size: 1.0625rem; line-height: 1.25; }
.table-vibe__sub { font-size: .9375rem; line-height: 1.3; color: var(--muted); }
/* The same petal marker as a choice tile: an outline until it's picked. */
.table-vibe::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: -.6875rem;
  border: 2px solid var(--muted);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-8deg) scale(.86);
}
.table-vibe[aria-pressed="true"] { background: var(--kind-soft); border-color: var(--kind); }
.table-vibe[aria-pressed="true"]::after { background: var(--kind); border-color: var(--kind); }
.table-vibe[aria-pressed="true"] .table-vibe__sub { color: var(--ink); }

.table-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.table-player { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.table-player > input { flex: 1 1 8.5rem; width: auto; min-width: 0; }
.table-player > .icon-btn { color: var(--muted); }
/* Snug enough that the longest colour (Marigold) fits the 7.5rem every bud starts at, so the
   name fields line up and keep room for "Grandma Rose"; at large text the bud takes its own
   line above the name. */
.table-budbtn {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .1875rem;
  min-height: var(--tap);
  min-width: 7.5rem;
  padding: .25rem .625rem .25rem .375rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--bud-soft);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}
.table-budbtn .mark { width: 2rem; height: 2rem; }
.table-budbtn:active { border-color: var(--bud-ink); }
.table-add { align-self: flex-start; }

/* The colour sheet: eight buds, one for each seat at a full table, each with its name (and
   whose it is). A long name wraps between words, and mid-word only when one word won't fit. */
.table-colors { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.25rem), 1fr)); }
.table-color {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  min-width: 0;
  min-height: 6.25rem;
  padding: .5rem .375rem .625rem;
  border: 2px solid transparent;
  border-radius: var(--r-tile);
  background: var(--bud-soft);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.table-color .mark { width: 2.75rem; height: 2.75rem; }
.table-color__owner { font-size: .875rem; font-weight: 500; color: var(--muted); overflow-wrap: break-word; }
.table-color[aria-pressed="true"] { border-color: var(--ink); background: var(--card); box-shadow: var(--e1); }

/* ------------------------------------------------------------------- pass */
.table-pass { align-items: center; gap: 1rem; text-align: center; }
.table-bigbud { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.table-bigbud__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(7rem, 34vw);   /* big enough to know your colour, never half the screen */
  height: min(7rem, 34vw);
  border-radius: 50%;
  background: var(--bud-soft);
  box-shadow: inset 0 0 0 2px var(--bud);
}
.table-bigbud__art .mark { width: 72%; height: 72%; --bud-w: 1.15; }
.table-chip { display: inline-flex; align-items: center; min-height: 1.875rem; padding: .125rem .875rem; border-radius: var(--r-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.table-pass h1 { max-width: 20rem; }
.table-peek { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.table-peek__art {
  flex: none; width: min(3.75rem, 18vw); height: min(3.75rem, 18vw); color: var(--bud-ink, var(--ink)); overflow: visible;
  --peek-petal: var(--bud, var(--rose-soft)); --peek-face: var(--gold-a); --peek-leaf: var(--leaf-a);
  --peek-stem: var(--leaf-text); --peek-cheek: var(--rose);
}
.table-pass .btn--xl { max-width: 24rem; }
.table-pass .table-bar { margin-top: .25rem; }

/* ----------------------------------------------------------------- secret */
.table-q { display: flex; flex-direction: column; gap: 1rem; }
.table-q .question { margin: 0; }
.table-q textarea { min-height: 7rem; }
.table-q .actions { margin-top: .25rem; }
.table-q .btn--tertiary { align-self: center; }

/* ------------------------------------------------------------------ group */
.table-group-head { display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; }
.table-guess { margin: 0; font-family: var(--font-story); font-weight: 600; font-size: 1.35rem; line-height: 1.25; color: var(--kind-text); }
.table-options { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.table-options .chip { min-height: 2.5rem; padding: .375rem .875rem; font-size: .9375rem; background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); }

/* ----------------------------------------------------------------- reveal */
.table-reveal { gap: 1rem; }
.table-said h1 { font-size: 1.5rem; }
.table-reveal .paper { padding: 1.125rem 1.375rem 1.125rem; }
.table-answer { display: flex; flex-direction: column; gap: .25rem; }
.table-answer .story { margin: 0; }
.table-answer__num { display: flex; align-items: baseline; gap: .375rem; margin: 0; font-family: var(--font-story); font-weight: 700; font-size: 3rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.table-answer__of { font-family: var(--font-ui); font-weight: 700; font-size: 1.125rem; color: var(--muted); }
.table-answer__num .mark { align-self: center; width: 2.5rem; height: 2.5rem; margin-left: .25rem; color: var(--leaf-text); --mark-accent: var(--rose); --mark-accent-o: .55; }
.table-meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: .625rem; }
.table-meter__cell { height: .625rem; border-radius: 4px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--hairline); }
.table-meter__cell.is-under { background: var(--rose-soft); box-shadow: inset 0 0 0 1px var(--rose-soft); }
.table-meter__cell.is-on { background: var(--rose); box-shadow: none; transform: scaleY(1.5); }
.table-meter__ends { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem .75rem; margin: .25rem 0 0; font-family: var(--font-ui); font-weight: 700; font-size: .875rem; line-height: 1.3; color: var(--muted); }
.table-meter__ends > :last-child { margin-left: auto; text-align: right; }

/* Row tiles, two across when they fit and one per row at large text, so a table of eight
   stays short and a name breaks only between words: the bud on the left, the name over its
   colour, and a petal box on the right that fills in when they got it. ("Got it?" / "Got it!"
   stays in each button's words for screen readers.) */
.table-gotlist { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.table-got {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark name name" "mark color check";   /* the name gets the whole width */
  align-items: center;
  justify-items: start;
  column-gap: .5rem;
  min-height: 3.5rem;
  padding: .5rem;
  border: 2px dashed var(--hairline);
  border-radius: var(--r-tile);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.table-got > .mark { grid-area: mark; width: 1.5rem; height: 1.5rem; }
.table-got__name { grid-area: name; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; overflow-wrap: break-word; max-width: 100%; }
.table-got__color { grid-area: color; font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--muted); }
.table-got__cheer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.table-got::after {
  content: "";
  grid-area: check;
  justify-self: end;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--muted);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-8deg);
}
.table-got[aria-pressed="true"] { border-style: solid; border-color: var(--leaf-text); background: var(--leaf-soft); }
.table-got[aria-pressed="true"] .table-got__color { color: var(--leaf-text); }
.table-got[aria-pressed="true"]::after { border-color: var(--leaf-text); background: var(--leaf-text); }
/* The reveal's way on (Next round) rests on the bottom edge over a soft paper fade when a big
   table pushes it below the screen, and settles back into place as you scroll to it. */
.table-act {
  position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2;
  margin: -1rem calc(-1 * var(--gutter)) -.75rem;
  padding: 1rem var(--gutter) max(.75rem, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, var(--paper-0), var(--paper) 1rem);
}

/* -------------------------------------------------------------------- end */
.table-end__head { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.table-end__head .lead { max-width: 24rem; }
.table-favs { display: flex; flex-direction: column; gap: .625rem; }
.table-fav {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 4.5rem;
  padding: .75rem .875rem;
  border: 2px solid transparent;
  border-radius: var(--r-tile);
  background: var(--sunken);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.table-fav__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.table-fav__q { font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--muted); }
.table-fav__a { font-family: var(--font-story); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; white-space: pre-wrap; overflow-wrap: break-word; }
.table-fav__who { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .25rem; }
.table-fav__name { font-weight: 700; font-size: .9375rem; }
.table-fav__pressed { flex: none; width: 2.25rem; height: 2.25rem; color: var(--muted); --mark-accent: var(--rose); --mark-accent-o: 0; }
.table-fav[aria-pressed="true"] { background: var(--rose-soft); border-color: var(--rose); }
.table-fav[aria-pressed="true"] .table-fav__pressed { color: var(--rose-text); --mark-accent-o: 1; }
.table-fav[aria-pressed="true"] .table-fav__q { color: var(--ink); }

/* ---------------------------------------------------- petals on the move */
.table-petal { position: fixed; left: 0; top: 0; z-index: 40; width: 1.25rem; height: 1.25rem; pointer-events: none; }
.table-petal svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* --------------------------------------------- calm / reduced: fades only */
.table-screen { animation: table-fade 150ms linear both; }
.table-count.is-bump { animation: table-flash 400ms linear; border-radius: 6px; }
.table-got__cheer, .table-fav__pressed { transition: color 150ms linear; }

/* ----------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .table-screen { animation: table-in 280ms var(--ease-out) both; }
  html:not(.calm) .table-pass .table-bigbud__art { animation: table-pop 420ms var(--ease-pop) both; }
  html:not(.calm) .table-reveal .table-answer { animation: table-rise 360ms var(--ease-out) 80ms both; }
  html:not(.calm) .table-vibe,
  html:not(.calm) .table-budbtn,
  html:not(.calm) .table-color,
  html:not(.calm) .table-got,
  html:not(.calm) .table-fav {
    transition: transform var(--t-press) var(--ease-out), background-color var(--t-quick) var(--ease-out),
      border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
  }
  html:not(.calm) .table-vibe:active, html:not(.calm) .table-color:active,
  html:not(.calm) .table-got:active, html:not(.calm) .table-fav:active { transform: scale(.975); }
  html:not(.calm) .table-vibe[aria-pressed="true"]::after { animation: lb-marker-pop 180ms var(--ease-pop); }
  html:not(.calm) .table-got[aria-pressed="true"] .mark { animation: table-cheer 520ms var(--ease-pop); }
  html:not(.calm) .table-got[aria-pressed="true"] .table-got__cheer { animation: table-rise 240ms var(--ease-out); }
  html:not(.calm) .table-fav[aria-pressed="true"] .table-fav__pressed { animation: table-press 420ms var(--ease-pop); }
  html:not(.calm) .table-meter__cell.is-on { animation: table-tick 360ms var(--ease-pop) 260ms both; }
  html:not(.calm) .table-flower.is-sip { animation: table-sip 300ms var(--ease-pop); }
  html:not(.calm) .table-count.is-bump { animation: none; }
  html:not(.calm) .table-count.is-bump .num { animation: table-digit 180ms var(--ease-out); }
  html:not(.calm) .table-stageup:not(:empty) { animation: table-rise 360ms var(--ease-out); }
}
@keyframes table-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes table-flash { 0% { background-color: var(--rose-soft); } 100% { background-color: transparent; } }
@keyframes table-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes table-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes table-pop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes table-cheer { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes table-press { 0% { transform: scale(.4) rotate(-20deg); opacity: .4; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes table-tick { from { transform: scaleY(.4); } to { transform: scaleY(1.5); } }
@keyframes table-sip { 0% { transform: scale(1); } 30% { transform: scale(1.12, 1.06); } 65% { transform: scale(.97, 1.02); } 100% { transform: scale(1); } }
@keyframes table-digit { from { transform: translateY(.45em); opacity: 0; } to { transform: none; opacity: 1; } }

@media print {
  .table-bar .btn, .table-q .actions, .table-end .actions { display: none; }
}