/* Keep It Alive. The Ledger tokens from DESIGN.md: hard offset shadows, sharp information, pill actions.
   Archivo has no Cyrillic, so Russian prose falls back to the system sans, as on /consultants/. */
:root {
  --ink: #0B0F0A;
  --paper: #FFFFFF;
  --paper-dim: #F4F6F3;
  --variant: #4A5247;
  --muted: #5A6457;
  --outline: #E2E6DF;
  --outline-2: #C8CEC6;
  --green: #155138;
  --green-c: #E8EFE4;
  --yellow: #FAC700;
  --rust: #9A4A2F;
  --rust-c: #FBF1EE;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fast: 120ms;
  --base: 200ms;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper-dim); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.app {
  max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 16px env(safe-area-inset-bottom);
}

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; }
.brand {
  font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.08em;
  color: var(--ink); text-decoration: none;
}
.langs { display: flex; }
.langs button {
  font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
  background: var(--paper); border: 1px solid var(--ink); border-right-width: 0;
  padding: 6px 10px; cursor: pointer;
}
.langs button:last-child { border-right-width: 1px; }
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.stage { flex: 1; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; padding-bottom: 20px; }

/* ---------- Shared pieces ---------- */
.eyebrow {
  font-family: var(--mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green); margin: 0 0 10px;
}
mark { background: var(--yellow); color: var(--ink); padding: 0 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 15px 28px; font-size: 16px; font-weight: 700; line-height: 1.2;
  cursor: pointer; text-decoration: none; border: 1.5px solid var(--ink);
  transition: transform var(--fast) ease, box-shadow var(--fast) ease;
}
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 #000; }
.btn-ghost { background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.btn-big { padding: 18px 34px; font-size: 18px; }

.stamp {
  display: inline-block; flex: none;
  font-family: var(--mono); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
  border: 2px solid currentColor; padding: 6px 8px 5px; transform: rotate(-5deg);
}
.stamp.money { color: var(--green); }

/* ---------- Language screen ---------- */
.s-lang { justify-content: center; gap: 28px; padding-top: 8px; }
/* multiply turns the picture's white paper into the page's sage, so the cover has no white box around it. */
.hero-art { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.pick { display: flex; flex-direction: column; gap: 14px; }
.pick-btn {
  display: flex; align-items: center; gap: 18px; width: 100%; min-height: 76px;
  padding: 14px 26px; border-radius: 999px; cursor: pointer; text-align: left;
  background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  transition: transform var(--fast) ease, box-shadow var(--fast) ease;
}
.pick-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.pick-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.pick-code {
  font-family: var(--mono); font-weight: 600; font-size: 26px; letter-spacing: 0.06em; line-height: 1;
  flex: none; width: 44px;
}
.pick-name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.pick-note {
  margin: 0; text-align: center; color: var(--muted);
  font-family: var(--mono); font-weight: 600; font-size: 11px; line-height: 18px; letter-spacing: 0.04em;
}
.pick-note span { display: block; }

/* ---------- Intro ---------- */
.s-intro { justify-content: center; padding-top: 12px; }
.intro-h1 {
  font-size: 44px; line-height: 1.05; font-weight: 800; letter-spacing: -0.025em;
  margin: 0 0 22px; text-wrap: balance;
}
html[lang="ru"] .intro-h1 { font-size: 38px; letter-spacing: -0.02em; }
.rules { margin: 0 0 30px; padding: 0; list-style: none; counter-reset: r; }
.rules li {
  counter-increment: r; position: relative; padding: 14px 0 14px 40px;
  border-top: 1px dotted var(--outline-2); color: var(--ink); font-size: 20px; line-height: 1.45; font-weight: 500;
}
.rules li:last-child { border-bottom: 1px dotted var(--outline-2); }
.rules li::before {
  content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 19px;
  font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--green);
}
/* The rules are long enough to push Start below a phone's fold, so the button stays pinned to the bottom
   while they are read, on a strip of page colour that the text slides under instead of showing through. */
.start-bar {
  position: sticky; bottom: 0; z-index: 2; margin: -10px 0 0; padding: 22px 0 16px;
  background: linear-gradient(to bottom, rgba(244, 246, 243, 0), var(--paper-dim) 22px);
}

/* ---------- Game ---------- */
.s-game { padding-bottom: 12px; }
.meters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 14px; }
.meter { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.meter .dot {
  position: absolute; top: -12px; left: 50%; width: 0; height: 0; border-radius: 50%;
  background: var(--ink); transform: translateX(-50%); transition: width var(--fast), height var(--fast);
}
.meter .dot[data-size="1"] { width: 7px; height: 7px; }
.meter .dot[data-size="2"] { width: 12px; height: 12px; top: -14px; }
.meter .icon {
  width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.8;
  stroke-linejoin: round; stroke-linecap: round; transition: transform var(--base) ease;
}
/* The safe middle is marked on every bar: pale danger zones at both ends and two notches at 20 and 80,
   the same thresholds where a meter turns rust. The notches stick out above and below the bar so they
   still show where the ink fill covers them. */
.meter .bar {
  position: relative; display: block; width: 100%; height: 8px; border: 1px solid var(--ink);
  background: linear-gradient(to right, var(--rust-c) 20%, var(--paper) 20%, var(--paper) 80%, var(--rust-c) 80%);
}
.meter .bar::before, .meter .bar::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; width: 1.5px; background: var(--ink);
}
.meter .bar::before { left: calc(20% - 0.75px); }
.meter .bar::after { left: calc(80% - 0.75px); }
.meter .bar i { display: block; height: 100%; width: 50%; background: var(--ink); transition: width 300ms ease-out, background-color var(--base); }
.meter.danger .bar i { background: var(--rust); }
.meter.danger .icon { stroke: var(--rust); }
.meter.up .icon { transform: translateY(-3px) scale(1.12); }
.meter.down .icon { transform: translateY(3px) scale(0.9); }
.meter .mname {
  font-family: var(--mono); font-weight: 600; font-size: 9px; line-height: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--variant); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The one rule of the game, shown over the card on the first moves and whenever a meter is in danger,
   so it reaches players who skipped the intro: a shared link, a replay, a language switch. */
.goal {
  margin: 14px 0 0; padding: 9px 12px; background: var(--green-c); border-left: 3px solid var(--green);
  color: var(--ink); font-size: 15px; line-height: 1.35; font-weight: 600;
}
.goal.warn { background: var(--rust-c); border-left-color: var(--rust); }
.s-game.has-goal .art img { height: clamp(70px, calc(24vh - 72px), 180px); }
.when {
  display: flex; justify-content: space-between; gap: 10px; margin: 14px 0 10px;
  font-family: var(--mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green);
}
.when #gameDeck { color: var(--muted); text-align: right; }

.table { position: relative; display: flex; margin-bottom: 18px; }
.card {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 18px;
  min-height: clamp(270px, 46vh, 400px);
  background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: 22px 22px 26px; margin-right: 6px; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  will-change: transform;
}
.card.dragging { cursor: grabbing; transition: none; }
.card.settle { transition: transform var(--base) ease-out; }
.card.out-L, .card.out-R { transition: transform 240ms ease-in, opacity 240ms ease-in; opacity: 0; }
.card.out-L { transform: translateX(-130%) rotate(-14deg) !important; }
.card.out-R { transform: translateX(130%) rotate(14deg) !important; }
.card.enter { animation: enter 220ms ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.who {
  font-family: var(--mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--variant); min-width: 0;
}
.card-text { margin: 0; font-size: 21px; line-height: 1.38; font-weight: 600; letter-spacing: -0.005em; overflow-wrap: break-word; }
html[lang="ru"] .card-text { font-size: 20px; }
.art { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* Sized from the viewport height so the choice buttons stay on screen on a short phone. */
.art img { display: block; width: auto; height: clamp(90px, calc(24vh - 30px), 220px); aspect-ratio: 1; max-width: 100%; object-fit: contain; pointer-events: none; }
.card-foot {
  display: flex; justify-content: space-between; align-items: center; margin: auto 0 0; padding-top: 12px;
  border-top: 1px dotted var(--outline-2); color: var(--muted);
  font-family: var(--mono); font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.16em; text-transform: uppercase;
}

.drag-label {
  position: absolute; left: 0; right: 0; top: 0; padding: 12px 22px;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: 17px; line-height: 1.3;
  opacity: 0; transform: translateY(-100%); transition: opacity var(--fast);
  pointer-events: none;
}
.drag-label.on { transform: none; }
/* The card slides toward the chosen side, so the label sits on the side that stays on screen. */
.drag-label[data-side="L"] { text-align: right; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 10px 16px;
  border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); cursor: pointer;
  font-size: 15px; font-weight: 700; line-height: 1.2; text-align: left;
  box-shadow: 0 3px 0 var(--ink); transition: transform var(--fast) ease, box-shadow var(--fast) ease;
  min-width: 0;
}
.choice .lbl { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: manual; }
#choiceR { text-align: right; }
.choice .arrow { flex: none; font-size: 18px; line-height: 1; }
/* On a phone the arrows cost the room a long word needs ("комментариев" broke in two at 390px);
   the card already shows which way to swipe. */
@media (max-width: 480px) { .choice .arrow { display: none; } }
.choice:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.choice:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }

.lifeline-box {
  margin: 14px 0 0; padding: 10px 12px; background: var(--green-c); border-left: 3px solid var(--green);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.lifeline-why { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.lifeline {
  align-self: flex-start; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: var(--green-c); color: var(--green); border: 1.5px solid var(--green);
  font-weight: 700; font-size: 14px; line-height: 1.2;
}
.lifeline::before { content: "$ "; font-family: var(--mono); }

.note {
  margin-top: 16px; background: var(--paper); border: 1px solid var(--outline-2); padding: 12px 14px;
}
.note-tag {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green);
}
.note p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }

/* ---------- Game over ---------- */
.s-over { padding-top: 14px; }
.over-lead { margin: 0; font-size: 18px; font-weight: 600; color: var(--variant); }
.over-h1 { margin: 4px 0 6px; font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }
html[lang="ru"] .over-h1 { font-size: 38px; }
.squares { margin: 0 0 22px; font-size: 22px; line-height: 1.3; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.over-art {
  margin: 0 6px 22px 0; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.over-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.cause { margin-bottom: 20px; }
.badge-error {
  display: inline-block; background: var(--rust-c); color: var(--rust); padding: 3px 6px;
  font-family: var(--mono); font-weight: 600; font-size: 10px; line-height: 13px; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cause-title { margin: 10px 0 6px; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.cause-text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--variant); }
.ledger { background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); margin: 0 6px 26px 0; }
.ledger-head {
  background: var(--ink); color: var(--paper); padding: 9px 14px;
  font-family: var(--mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ledger-body { padding: 14px 16px 16px; }
.ledger-body p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.ledger-link { color: var(--green); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bench { margin: -8px 0 20px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--green); }
.share-block { margin-bottom: 14px; }
.share-head {
  margin: 0 0 10px; font-family: var(--mono); font-weight: 600; font-size: 11px; line-height: 14px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.share-block .btn { width: 100%; margin-bottom: 10px; }
.share-nets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* button-ghost-mono from DESIGN.md: a compact bordered mono label that fills green on hover. */
.net {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 7px 8px;
  border: 1px solid var(--green); background: var(--paper); color: var(--green); cursor: pointer;
  font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; transition: background-color var(--fast), color var(--fast);
}
.net:hover { background: var(--green); color: var(--paper); }
.again { width: 100%; margin-bottom: 26px; }
.cta { margin: 0; padding-top: 16px; border-top: 1px dotted var(--outline-2); font-size: 14px; line-height: 1.55; color: var(--variant); }
.cta a { color: var(--green); font-weight: 700; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 5; max-width: calc(100% - 32px);
  margin: 0; padding: 10px 16px; background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: opacity var(--base), transform var(--base);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.noscript { max-width: 520px; margin: 40px auto; padding: 0 16px; font-weight: 600; }

/* ---------- Small and short screens ---------- */
@media (max-width: 380px) {
  .card { padding: 18px 18px 22px; }
  .card-text { font-size: 19px; }
  html[lang="ru"] .card-text { font-size: 18px; }
  .choice { font-size: 14px; padding: 10px 12px; }
  html[lang="ru"] .choice, html[lang="es"] .choice { font-size: 13px; }
  .choice .arrow { display: none; }
  .intro-h1, .over-h1 { font-size: 36px; }
  .rules li { font-size: 18px; }
  .goal { font-size: 14px; }
  html[lang="ru"] .intro-h1, html[lang="ru"] .over-h1 { font-size: 31px; }
  .pick-name { font-size: 18px; }
  .pick-btn { gap: 12px; padding: 12px 20px; }
}
/* Below this height the death picture moves under the share buttons, so sharing is on the first screen. */
@media (max-height: 900px) {
  .s-over .over-art { order: 1; }
  .s-over .again, .s-over .ledger, .s-over .cta { order: 2; }
}
/* On a short phone the death picture shrinks so the share button stays on the first screen, and the
   portrait steps aside while the goal line is shown, so the choice buttons stay on it too. */
@media (max-height: 700px) {
  .over-art { max-width: 270px; }
  .rules li { font-size: 18px; padding: 11px 0 11px 36px; }
  .rules li::before { top: 15px; }
  .s-game.has-goal .art { display: none; }
}
@media (max-height: 640px) {
  .hero-art { max-width: 300px; }
  .card { min-height: 220px; }
  .art img { height: clamp(64px, calc(20vh - 40px), 110px); }
  .s-game.has-goal .card { min-height: 0; padding: 14px 16px 16px; gap: 10px; }
  .s-game.has-goal .card-text, html[lang="ru"] .s-game.has-goal .card-text { font-size: 17px; }
  .s-game.has-goal .card-foot { display: none; }
  .goal { font-size: 13px; padding: 7px 10px; margin-top: 10px; }
  .lifeline-box { margin-top: 10px; padding: 7px 10px; gap: 6px; }
  .lifeline-why { font-size: 13px; }
  .card { gap: 12px; }
  .card-text { font-size: 18px; }
  .meters { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}