/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * What the game adds on top of styles.css: the table, the games, the sheets' amount and keypad, the
 * switch, the ledger, the waiting room. Only the design system's tokens; the tests read this file
 * with the others, so a rule written twice, or a token used and not defined, fails.
 */

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.is-negative { color: var(--danger); }
.is-in { color: var(--success); font-weight: var(--fw-semibold); }

.game-root { display: flex; flex-direction: column; gap: var(--space-4); }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.page-head--stack { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.back-link { align-self: flex-start; padding: 0 var(--space-2); }

.group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.actions-row { display: flex; gap: var(--space-2); }
.actions-row > .button { flex: 1; }
.footer-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

.form-error {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
}

.button--danger-text { color: var(--danger); border-color: var(--danger); }
.icon-button { min-width: 36px; padding: 0 var(--space-2); }
.badge-pro {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-label);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--highlight-soft);
  color: var(--highlight);
}

/* ------------------------------------------------------------------------------- pawns */

.pawn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--text-muted);
  color: var(--text-on-accent);
  font-weight: var(--fw-semibold);
}
.pawn--xs { width: 22px; height: 22px; font-size: 11px; }
.pawn--sm { width: 28px; height: 28px; font-size: 13px; }
.pawn--md { width: 36px; height: 36px; font-size: 15px; }
.pawn--lg { width: 48px; height: 48px; font-size: 18px; }
.pawn--bank { background: var(--text); color: var(--bg); }
.pawn--bank .icon { width: 55%; height: 55%; }
.pawn-stack { display: flex; align-items: center; }
.pawn-stack .pawn + .pawn { margin-inline-start: -8px; border: 2px solid var(--surface); }

/* ---------------------------------------------------------------------- switch, preset */

.switch {
  flex: none;
  position: relative;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.switch:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.switch.is-on { background: var(--accent); border-color: var(--accent); }
.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out);
}
.switch.is-on .switch__knob { transform: translateX(20px); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.switch-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-row__title { font-weight: var(--fw-medium); }
.switch-row__help { color: var(--text-muted); font-size: var(--fs-body-sm); }

.game-form { display: flex; flex-direction: column; gap: var(--space-4); }
.preset-set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.preset-options { display: flex; flex-direction: column; gap: var(--space-2); }
.preset-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
}
.preset-option.is-on { border-color: var(--accent); background: var(--accent-soft); }
.preset-option__text { display: flex; flex-direction: column; gap: 2px; }
.preset-option__name { font-weight: var(--fw-medium); }
.preset-option__desc { color: var(--text-muted); font-size: var(--fs-body-sm); }
.preset-teaser {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}
.preset-saved { display: contents; }
.two-fields { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); }
.inline-form { display: flex; gap: var(--space-2); align-items: center; }
.inline-form .input { flex: 1; min-width: 0; }
.inline-form--stack { flex-direction: column; align-items: stretch; }

.chips--wrap { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow-x: visible; }
.button.chip { gap: var(--space-2); }

/* ------------------------------------------------------------------------- games list */

.game-body, .game-list { display: flex; flex-direction: column; gap: var(--space-3); }
.game-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.game-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.game-card--row { flex-direction: row; align-items: center; justify-content: space-between; }
.game-card__top, .game-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.game-card__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-card__name { font-weight: var(--fw-medium); font-size: var(--fs-body-lg); }
.game-card__meta { color: var(--text-muted); font-size: var(--fs-body-sm); }
.game-card__open { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); font-size: var(--fs-body-sm); }

.clock-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
button.clock-pill { cursor: pointer; }
.clock-pill__dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--success); }
.clock-pill.is-paused { color: var(--highlight); }

/* ---------------------------------------------------------------------------- the table */

.table-layout { display: flex; flex-direction: column; gap: var(--space-4); }
.tl-left, .tl-side { display: contents; }
.tl-header { order: 1; }
.tl-main { order: 3; display: flex; flex-direction: column; gap: var(--space-4); }
.tl-moves { order: 4; }
.table-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.table-head__words { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.for-whom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--highlight-soft);
  color: var(--highlight);
}

.me-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.me-card__top { display: flex; align-items: center; gap: var(--space-3); }
.me-card__words { display: flex; flex-direction: column; gap: 2px; }
.me-card__who, .me-card__hint { color: var(--text-muted); }
.me-card__balance { font-size: 40px; line-height: 1.05; font-weight: var(--fw-semibold); }
.me-card__note { font-size: var(--fs-body-sm); }

.action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.action-button:disabled { opacity: 0.45; cursor: default; }
.action-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.action-button--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.action-button .icon { width: 22px; height: 22px; }

.shortcut-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shortcut-chip { gap: var(--space-2); }

.seat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.seat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.seat-card--bank { background: var(--surface-2); border-style: dashed; border-color: var(--border-strong); }
.seat-card.is-broken { border-color: var(--danger); }
.seat-card.is-bankrupt { opacity: 0.6; }
.seat-card__top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.seat-card__name { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-card__bottom { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.seat-card__balance { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.seat-card__tag { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font-size: var(--fs-caption); }
.seat-card__tag .icon { width: 14px; height: 14px; }
.seat-card__tag--plain { font-size: var(--fs-body); }
.seat-card__tag--danger { color: var(--danger); font-weight: var(--fw-medium); }

.move-list { gap: 0; padding: 0; }
.move-list > .screen__text { padding: var(--space-3); }
.tl-moves .move:nth-child(n+6) { display: none; }
.move { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--border); }
.move:first-child { border-top: 0; }
.move__pawns { flex: none; display: flex; align-items: center; gap: 2px; }
.move__arrow { width: 12px; height: 12px; color: var(--text-muted); }
.move__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.move__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move__meta { color: var(--text-muted); font-size: var(--fs-caption); }
.move__amount { font-weight: var(--fw-semibold); }
.move.is-reversed { opacity: 0.6; }
.move.is-reversed .move__text, .move.is-reversed .move__amount { text-decoration: line-through; }
.move.is-reversal .move__text { color: var(--highlight); }
.undo-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-caption);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------- requests */

.conn-hint {
  position: fixed;
  bottom: var(--space-3);
  left: var(--space-4);
  right: var(--space-4);
  margin-inline: auto;
  width: fit-content;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--text);
  pointer-events: none;
  z-index: var(--z-notice);
}
.conn-hint[hidden] { display: none; }

.request-banner {
  display: flex;
  flex-direction: column;
  order: 2;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.request-banner .eyebrow { color: var(--accent); }
.request-banner__line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body-lg);
  text-align: start;
  cursor: pointer;
}
.request-banner__reason { color: var(--text-muted); font-size: var(--fs-body-sm); }

.incoming-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) 0; text-align: center; }
.incoming-card__who { color: var(--text-muted); }
.incoming-card__amount { font-size: 40px; font-weight: var(--fw-semibold); }
.incoming-card__meta { color: var(--text-muted); font-size: var(--fs-body-sm); }
.after-line { display: flex; justify-content: space-between; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }
.incoming-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.incoming-row__words { display: flex; flex-direction: column; min-width: 0; }
.incoming-row__meta { color: var(--text-muted); font-size: var(--fs-caption); }
.incoming-row__buttons { flex: none; display: flex; gap: var(--space-2); }

/* ------------------------------------------------------------------- amount and keypad */

.sheet-block { display: flex; flex-direction: column; gap: var(--space-2); }
.amount-box { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-2); }
.amount-box__expr { min-height: 1.4em; color: var(--text-muted); }
.amount-box__total { font-size: 40px; font-weight: var(--fw-semibold); line-height: 1.1; }
.amount-box__after { color: var(--text-muted); font-size: var(--fs-body-sm); text-align: center; }
.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
/* the button that sends a sheet: always in sight at the bottom of the sheet, which scrolls under it */
.sheet__submit {
  position: sticky;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -8px 16px var(--surface);
}
.key {
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-h4);
  cursor: pointer;
}
.key:active { background: var(--surface-sunken); }
.key:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.key--op { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent); }

/* a short window (Telegram's desktop and web clients open the Mini App in one about 560 px high, a
   small phone is not much taller): the sheet is made to fit, or the sticky button sits on the last
   row of keys, the one with the 0 (seen in Telegram Web on 2026-10-12) */
@media (max-height: 720px) {
  .key { min-height: 38px; }
  .amount-box { padding: var(--space-2); }
  .amount-box__total { font-size: 32px; }
}

/* ------------------------------------------------------------- lobby, management, end */

.lobby-qr { align-items: center; text-align: center; }
.lobby-qr__canvas { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; image-rendering: pixelated; background: #fff; border-radius: var(--radius-md); }
.lobby-qr__link { color: var(--text-muted); font-size: var(--fs-caption); word-break: break-all; }
.seat-list { gap: 0; padding: 0; }
.seat-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.seat-item + .seat-item, .seat-row + .seat-row { border-top: 1px solid var(--border); }
.seat-row--button { width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.seat-row__words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.seat-row__name { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-row__meta { color: var(--text-muted); font-size: var(--fs-caption); }
.seat-row__balance { font-weight: var(--fw-semibold); }
.seat-row__rank { width: 1.5em; color: var(--text-muted); }
.seat-row.is-bankrupt { opacity: 0.6; }
.seat-item.is-open { background: var(--surface-2); }
.seat-menu { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.pending-card { border-color: var(--accent-soft-border); }
.clock-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.clock-card__time { font-size: var(--fs-h1); font-weight: var(--fw-semibold); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.tile { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.tile__value { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.tile__label { color: var(--text-muted); font-size: var(--fs-caption); }
.perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.perk { display: flex; align-items: center; gap: var(--space-2); }
.perk .icon { color: var(--success); }

/* ------------------------------------------------------------------------ the wide layout */

/* in the web app, on a wide window, the table has two columns: the table on the left, the requests
   for the person and the live moves on the right. Only the table gets the room */
@media (min-width: 1024px) {
  #app[data-screen="table"] { max-width: 1240px; }
  #app[data-screen="table"] .screens { padding-inline: var(--space-6); }
  .table-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
  .tl-left, .tl-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .tl-header, .request-banner, .tl-main, .tl-moves { order: 0; }
  .tl-moves .move:nth-child(n+6) { display: flex; }
  .seat-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  /* the balance and the four moves share a row; the shortcuts get the next one, or they squeeze the
     moves down to slivers */
  .me-card { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .me-card__balance { font-size: 48px; }
  .action-grid { flex: 1 1 320px; min-width: 320px; max-width: 480px; }
  .me-card .shortcut-chips { flex-basis: 100%; }
}