/* tapis-vert — the live table's screens (screens plan 5): the stage, the waiting room and its
   roster, paused, the overlays (menu, scores), the score pad, game over, and the result's points.
   One memorable thing: the score pad is paper — carton, ink, Besley numerals, the totals under a
   double rule, as on the pad beside a real tarot table. Everything else is plan 2's quiet shell.
   Gilt stays the turn's alone; vermilion is failure, never decoration. 44 px targets throughout. */

/* --- the stage: three layers, the play surface measured from a fixed box (never 100dvh) ------- */

.stage { position: fixed; inset: 0; display: flex; flex-direction: column; }
.stage__play, .stage__other { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* the play screen's own root: renderPlay makes it `.play`, the grid of screens.css, and it takes
   the whole surface — a box of its own, so no rule here can override that grid */
.stage__table { flex: 1; min-height: 0; }
.stage__other { overflow-y: auto; }
.stage__play[hidden], .stage__other[hidden], .stage__layer[hidden] { display: none; }
.stage__layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: rgba(10, 27, 24, .72);
}

/* --- the roster: the seats in play order ------------------------------------------------------ */

.waiting__intro > * + * { margin-top: 6px; }
.waiting__lead { font: 700 23px/1.25 var(--font-index); }

.roster { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }

.roster__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 60px;
  padding: 8px 0;
  border-bottom: 1px solid var(--filet);
}

.roster__no { font: 700 20px/1 var(--font-index); text-align: center; opacity: .65; }
.roster__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.roster__name { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster__tag { font-size: 14px; opacity: .78; }

/* presence: a filled chalk dot when here, a hollow ring when not — never green, never gilt (§8) */
.roster__status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; opacity: .85; }
.roster__status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--craie);
  opacity: .6;
}
.roster__row.is-here .roster__status::before { background: var(--craie); opacity: 1; }
.roster__row[data-status="invited"] .roster__name,
.roster__row[data-status="empty"] .roster__name { font-weight: 400; font-style: italic; opacity: .85; }

.roster__tools { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.roster__tools .btn { min-height: 44px; padding: 0 12px; font-size: 15px; }
.roster__replace { grid-column: 2 / -1; padding-top: 10px; }
.roster__replace > * + * { margin-top: 10px; }

.btn.is-danger, .btn.is-confirming { background: var(--carton); color: var(--encre); box-shadow: inset 4px 0 0 var(--vermillon); }

.homescreen { padding: 14px 16px; border: 1.5px dashed var(--filet); border-radius: var(--radius-button); }
.homescreen__title { font-weight: 600; }
.homescreen__text { margin-top: 4px; font-size: 15px; opacity: .85; }

.foot > * + * { margin-top: 10px; }
.foot__note { font-size: 14px; text-align: center; opacity: .85; }

/* --- paused ----------------------------------------------------------------------------------- */

.paused__hero { padding-top: 8px; }
.paused__title { font: 700 32px/1.15 var(--font-index); }
.paused__since { margin-top: 6px; font: 700 18px/1.2 var(--font-index); opacity: .9; }
.paused__text { margin-top: 8px; max-width: 32ch; font-size: 16px; opacity: .88; }

/* --- the overlays: the menu and the scores, over the play screen ------------------------------ */

.overlay {
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  margin: 0 auto;
  overflow-y: auto;
  padding: max(10px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--lisiere);
  box-shadow: 0 1px 0 var(--filet), 0 18px 40px rgba(0, 0, 0, .45);
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
}

.overlay__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.overlay__title { min-width: 0; font: 700 22px/1.2 var(--font-index); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overlay > * + * { margin-top: 12px; }

.menu { display: flex; flex-direction: column; border-top: 1px solid var(--filet); }
.menu__item {
  min-height: 52px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--filet);
  background: transparent;
  color: var(--craie);
  font: 600 17px/1.2 var(--font-ui);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.menu__item:active { background: rgba(0, 0, 0, .18); }
.menu__item:focus-visible { outline: 3px solid var(--dorure); outline-offset: -3px; }
.menu__item.is-confirming { padding-left: 14px; background: var(--carton); color: var(--encre); box-shadow: inset 4px 0 0 var(--vermillon); }
.menu__item[disabled] { opacity: .6; }

/* --- the score pad ---------------------------------------------------------------------------- */

.pad {
  --ink-rule: rgba(26, 23, 20, .22);
  display: flex;
  flex-direction: column;
  padding: 6px 10px 10px;
  border-radius: 4px;
  background: var(--carton);
  color: var(--encre);
  box-shadow: var(--shadow-card);
  font-variant-numeric: tabular-nums;
}

/* every line is its own grid on the same columns, so a hand's line can be one button */
.pad__row {
  display: grid;
  grid-template-columns: minmax(5.5em, 1.4fr) repeat(var(--cols, 4), minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ink-rule);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.pad__row > * { display: flex; align-items: center; min-width: 0; min-height: 44px; padding: 4px 2px; }
.pad__row--head { border-bottom: 1.5px solid var(--encre); }
.pad__row--head > * { align-items: flex-end; }
.pad__row--hand { cursor: pointer; touch-action: manipulation; }
.pad__row--hand:active { background: rgba(26, 23, 20, .08); }
.pad__row--hand:focus-visible { outline: 3px solid var(--encre); outline-offset: -3px; }
.pad__row--total { border-bottom: 0; border-top: 3px double var(--encre); }
.pad__row--total > * { font: 700 19px/1 var(--font-index); }

.pad__hand { gap: 6px; min-width: 0; font-size: 13px; }
.pad__no { font: 700 17px/1 var(--font-index); }
.pad__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
.pad__cell { justify-content: flex-end; font: 700 17px/1 var(--font-index); }
.pad__cell.is-taker { text-decoration: underline 1.5px; text-underline-offset: 3px; }
.pad__player { flex-direction: column; align-items: flex-end; gap: 2px; font: 600 12px/1.1 var(--font-ui); }
.pad__initial { font: 700 20px/1 var(--font-index); }
.pad__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
/* my column: a faint wash of ink, the way a pencil column is shaded — never gilt */
.pad__cell.is-you { background: rgba(26, 23, 20, .07); }
.pad__empty { grid-column: 1 / -1; padding: 12px 0; font-size: 15px; }

/* --- game over -------------------------------------------------------------------------------- */

.over__title { font: 700 32px/1.15 var(--font-index); }
.standings { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.standings__row {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--filet);
}
.standings__rank { font: 700 18px/1 var(--font-index); opacity: .6; }
.standings__name { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings__total { font: 700 22px/1 var(--font-index); font-variant-numeric: tabular-nums; }
.standings__row.is-first .standings__name, .standings__row.is-first .standings__total { font-size: 26px; }
.standings__row.is-you .standings__name { text-decoration: underline 1.5px; text-underline-offset: 4px; }

/* --- the result's points, inside plan 4's review sheet ---------------------------------------- */

.points { margin: 0; padding: 0; list-style: none; }
.points__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5em 4.5em;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--filet);
  font-variant-numeric: tabular-nums;
}
.points__row--head { padding-top: 0; border-bottom-color: var(--craie); font-size: 13px; opacity: .8; }
.points__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points__hand, .points__total { text-align: right; font: 700 18px/1 var(--font-index); }
.points__row--head .points__hand, .points__row--head .points__total { font: 600 13px/1 var(--font-ui); }
.points__total { opacity: .8; }
.points__row.is-you .points__name { font-weight: 700; }

.play[data-orientation="landscape"] .result__points { grid-row: span 2; }

/* --- les-points (screens plan 6) ---------------------------------------------------------------
   The one thing worth looking at is the slip: the addresses that will leave this table, on the
   same carton as the score pad, because it is the paper the host signs. The ledger of hands stays
   on the mat's quiet rules. Vermilion marks a refusal and nothing else. */

.over__lp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  opacity: .9;
}
button.over__lp {
  min-height: 44px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--craie);
  font: 15px/1.3 var(--font-ui);
  text-align: left;
  text-decoration: underline 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
button.over__lp:focus-visible { outline: 3px solid var(--dorure); outline-offset: 2px; }
.over__lp.is-failed::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--vermillon); }

/* the pad's mark: small, after the contract; a refusal in the red of hearts, readable on carton */
.pad__lp { flex: none; font: 700 13px/1 var(--font-ui); opacity: .7; }
.pad__lp.is-failed { color: var(--vermillon); opacity: 1; }

.lp__status { display: flex; align-items: center; gap: 8px; font: 700 18px/1.3 var(--font-index); }
.lp__status::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--craie);
}
.lp__status.is-on::before { background: var(--craie); }
.lp__status.is-unconfigured { font: 600 16px/1.35 var(--font-ui); }
.lp__intro, .lp__backlog { max-width: 36ch; font-size: 16px; line-height: 1.4; }
.lp__intro { opacity: .88; }
.lp__backlog { font-weight: 600; }

.overlay--lp .lp__people > * + *, .overlay--lp .lp__hands > * + * { margin-top: 12px; }
.overlay--lp > .lp__people, .overlay--lp > .lp__hands { margin-top: 24px; }
.lp__heading { font: 700 19px/1.2 var(--font-index); }
.lp__empty { font-size: 15px; opacity: .85; }

.slip {
  margin: 0;
  padding: 4px 14px;
  list-style: none;
  border-radius: 4px;
  background: var(--carton);
  color: var(--encre);
  box-shadow: var(--shadow-card);
}
.slip__row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26, 23, 20, .22);
}
.slip__row:last-child { border-bottom: 0; }
.slip__name { font: 700 18px/1.2 var(--font-index); overflow-wrap: anywhere; }
.slip__email { font-size: 15px; overflow-wrap: anywhere; }
.slip__tag { font-size: 13px; font-style: italic; opacity: .75; }

/* the warning, under the slip it is about: the fine print, set so it is read */
.lp__warning { padding-left: 10px; border-left: 3px solid var(--craie); font-size: 15px; line-height: 1.45; }

.ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.ledger__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--filet);
}
.ledger__no { font: 700 17px/1.2 var(--font-index); }
.ledger__state { font-size: 15px; text-align: right; opacity: .9; }
.ledger__row.is-failed { padding-left: 10px; box-shadow: inset 3px 0 0 var(--vermillon); }
.ledger__row.is-failed .ledger__state { font-weight: 700; opacity: 1; }
.ledger__why { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; font-size: 14px; }
.ledger__words { flex-basis: 100%; }
.ledger__code { font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; opacity: .75; }
.ledger__named { opacity: .85; }
.ledger__help { flex-basis: 100%; font-style: italic; opacity: .85; }
.lp__reason { max-width: 36ch; font-size: 16px; font-weight: 600; line-height: 1.4; }
/* an address the host has not confirmed yet: a rule in ink down its edge, and the words say why */
.slip__row.is-new { margin: 0 -14px; padding-left: 11px; padding-right: 14px; box-shadow: inset 3px 0 0 var(--encre); }
.slip__tag--new { font-style: normal; font-weight: 700; opacity: 1; }