/* ══════════════════════════════════════════════════════
   KIN — the daily game (play.html)

   Self-contained on purpose: css/variables.css sets overflow:hidden and a
   grab cursor on <body> for the map, which would freeze a page that
   scrolls. The colour values mirror the site's tokens so the two read as
   one product; the face is Rubik, which covers Latin, Hebrew and Cyrillic
   in one friendly family.

   Everything direction-sensitive uses logical properties, so Hebrew needs
   no mirrored rules beyond the arrow glyph at the bottom.
   ══════════════════════════════════════════════════════ */

:root {
  --kin-bg: #070C11;
  --kin-surface: #101821;
  --kin-raised: #18222D;
  --kin-line: rgba(150, 190, 205, 0.16);
  --kin-line-2: rgba(150, 190, 205, 0.30);
  --kin-fg: #E6EEF1;
  --kin-fg-2: #B3C3CB;
  --kin-fg-3: #8397A1;
  --kin-accent: #F2AC52;
  --kin-accent-ink: #1A1206;
  --kin-accent-soft: rgba(242, 172, 82, 0.14);
  --kin-ok: #3FD3B0;
  --kin-ok-soft: rgba(63, 211, 176, 0.16);
  --kin-bad: #FF8A73;
  --kin-bad-soft: rgba(255, 138, 115, 0.15);
  --kin-animal: #6AA6FF;
  --kin-plant: #5ED08A;
  --kin-fungus: #FFA95C;
  --kin-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --kin-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', 'Heebo', sans-serif;
  --kin-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --kin-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}
[data-theme="light"] {
  --kin-bg: #FAF7F2;
  --kin-surface: #FFFDF9;
  --kin-raised: #ECE7DF;
  --kin-line: rgba(44, 36, 24, 0.14);
  --kin-line-2: rgba(44, 36, 24, 0.28);
  --kin-fg: #2C2418;
  --kin-fg-2: #4C4335;
  --kin-fg-3: #645A4A;
  --kin-accent: #8A5E23;
  --kin-accent-ink: #FFF8EC;
  --kin-accent-soft: rgba(138, 94, 35, 0.12);
  --kin-ok: #1F7A5E;
  --kin-ok-soft: rgba(31, 122, 94, 0.12);
  --kin-bad: #B23E2A;
  --kin-bad-soft: rgba(178, 62, 42, 0.10);
  --kin-animal: #2F66C4;
  --kin-plant: #2E8A4F;
  --kin-fungus: #B8621C;
  --kin-shadow: 0 10px 26px rgba(60, 40, 10, 0.14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.kin-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--kin-bg);
  color: var(--kin-fg);
  font-family: var(--kin-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
a { color: var(--kin-accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--kin-accent); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

.kin-app {
  max-width: 460px;
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-bottom, 0px) + 20px);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Top bar ── */
.kin-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px 12px;
  border-bottom: 1px solid var(--kin-line);
}
/* The opening's scale, in small: fine ticks under the bar, fading out at both ends. */
.kin-bar::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -5px; height: 4px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--kin-line-2) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.kin-logo {
  position: relative;
  font-weight: 800; font-size: 1.15rem; white-space: nowrap; display: flex; align-items: baseline; gap: 5px;
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font-family: inherit; cursor: pointer;
}
/* The name is a button now (it leads Home); its hit area is a thumb, not a word. */
.kin-logo::after { content: ''; position: absolute; inset: -10px -8px; }
.kin-logo::before {
  content: ''; flex: none; align-self: center; width: 13px; height: 13px; margin-inline-end: 3px; border-radius: 50%;
  border: 1.5px solid var(--kin-accent);
  box-shadow: inset 0 0 0 2.5px var(--kin-bg), inset 0 0 0 3.6px var(--kin-accent);
}
.kin-logo small { font-family: var(--kin-mono); font-weight: 400; font-size: 0.75rem; color: var(--kin-fg-3); }
.kin-progress { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 0; font-family: var(--kin-mono); font-size: 0.8rem; color: var(--kin-fg-2); }
/* Ten dots, the name, the language pair and the sound button share one row.
   Hebrew and Russian names are wider than "Kin", so the dots give way rather
   than the row: each may shrink from 9px to fit what is left, and none wraps
   under the name or runs into it. */
.kin-dots { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; justify-content: center; min-width: 0; max-width: 100%; }
.kin-dots i { display: block; flex: 0 1 9px; min-width: 3px; aspect-ratio: 1; border-radius: 50%; background: var(--kin-raised); border: 1px solid var(--kin-line-2); transition: background 0.25s, transform 0.25s, border-color 0.25s; }
@media (max-width: 430px) {
  .kin-dots { gap: 3px; }
  /* The Arcade's status (the word, three hearts, the points) is wider than a
     phone's row has room for beside the name in Russian: it takes a row of its own. */
  .kin-bar.is-arcade { flex-wrap: wrap; row-gap: 6px; }
  .kin-bar.is-arcade .kin-tools { margin-inline-start: auto; }
  .kin-bar.is-arcade .kin-progress { order: 3; flex: 1 0 100%; }
}
.kin-dots i.now { border-color: var(--kin-accent); transform: scale(1.25); }
.kin-dots i.ok { background: var(--kin-ok); border-color: var(--kin-ok); }
.kin-dots i.no { background: var(--kin-bad); border-color: var(--kin-bad); }
.kin-mode { font-family: var(--kin-font); font-weight: 600; color: var(--kin-fg); }
.kin-hearts { color: var(--kin-bad); letter-spacing: 2px; }
.kin-hearts .lost { opacity: 0.25; }
.kin-tools, .kin-langs { display: flex; gap: 6px; }
.kin-tool {
  min-width: 38px; height: 34px; padding-inline: 8px;
  border-radius: 999px; border: 1px solid var(--kin-line-2); background: transparent;
  cursor: pointer; font-size: 0.85rem; color: var(--kin-fg-2);
}
.kin-tool[aria-pressed="true"] { border-color: var(--kin-accent); color: var(--kin-accent); }

/* ── The stage ── */
.kin-stage { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-block: 16px 8px; }
.kin-prompt { margin: 0; text-align: center; color: var(--kin-fg-3); font-size: 0.92rem; }
.kin-target {
  display: grid; justify-items: center; gap: 2px;
  padding: 14px 12px 12px; border-radius: 22px;
  background: var(--kin-surface); border: 1px solid var(--kin-line);
  transition: padding 0.25s var(--kin-ease);
}
.kin-target .kin-em { font-size: 3.6rem; line-height: 1.1; transition: font-size 0.25s var(--kin-ease); }
.kin-target .kin-nm { font-weight: 700; font-size: 1.3rem; }
.kin-combo { align-self: center; font-family: var(--kin-mono); font-size: 0.78rem; color: var(--kin-accent); background: var(--kin-accent-soft); padding: 3px 10px; border-radius: 999px; }
.kin-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kin-opt {
  position: relative; cursor: pointer; touch-action: manipulation;
  display: grid; justify-items: center; gap: 4px;
  padding: 16px 8px 14px; border-radius: 22px;
  background: var(--kin-surface); border: 2px solid var(--kin-line-2);
  transition: transform 0.12s var(--kin-ease), border-color 0.2s, background 0.2s, padding 0.25s var(--kin-ease), opacity 0.2s;
}
.kin-opt:hover { border-color: var(--kin-accent); }
.kin-opt:active { transform: scale(0.97); }
.kin-opt .kin-em { font-size: 2.8rem; line-height: 1.1; transition: font-size 0.25s var(--kin-ease); }
.kin-opt .kin-nm { font-weight: 600; font-size: 1.05rem; }
.kin-opt[disabled] { cursor: default; }
.kin-opt[disabled]:hover { border-color: var(--kin-line-2); }
.kin-opt.is-right { border-color: var(--kin-ok); background: var(--kin-ok-soft); }
.kin-opt.is-wrong { border-color: var(--kin-bad); background: var(--kin-bad-soft); }
.kin-opt.is-faded { opacity: 0.55; }
.kin-k { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; width: 8px; height: 8px; border-radius: 50%; }
.kin-k-animal { background: var(--kin-animal); }
.kin-k-plant { background: var(--kin-plant); }
.kin-k-fungus { background: var(--kin-fungus); }
.kin-mark { position: absolute; inset-block-start: 6px; inset-inline-end: 10px; font-weight: 800; }
.is-right .kin-mark { color: var(--kin-ok); }
.is-wrong .kin-mark { color: var(--kin-bad); }
.kin-hint { margin: 0; min-height: 1.4em; text-align: center; font-size: 0.86rem; color: var(--kin-fg-3); }

/* Once answered, the cards step back so the reveal fits a phone screen. */
.kin-stage.revealed { gap: 10px; }
.kin-stage.revealed .kin-target { padding: 8px 10px 6px; }
.kin-stage.revealed .kin-target .kin-em { font-size: 2.2rem; }
.kin-stage.revealed .kin-opt { padding: 8px 6px 6px; }
.kin-stage.revealed .kin-opt .kin-em { font-size: 1.8rem; }
.kin-stage.revealed .kin-hint { display: none; }

/* ── The reveal ── */
.kin-reveal { display: flex; flex-direction: column; gap: 10px; animation: kin-rise 0.35s var(--kin-ease) both; }
.kin-verdict { margin: 0; font-weight: 700; font-size: 1.1rem; }
.kin-verdict.ok { color: var(--kin-ok); }
.kin-verdict.no { color: var(--kin-bad); }
.kin-tree {
  position: relative; margin: 0; width: 100%; aspect-ratio: 340 / 150;
  background: var(--kin-surface); border: 1px solid var(--kin-line); border-radius: 14px; overflow: hidden;
}
.kin-tree svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kin-ln { fill: none; stroke: var(--kin-fg-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kin-ln.hot { stroke: var(--kin-accent); stroke-width: 2.8; }
.kin-nd { fill: var(--kin-bg); stroke: var(--kin-fg-3); stroke-width: 2; }
.kin-nd.hot { fill: var(--kin-accent); stroke: var(--kin-accent); }
.kin-axis { stroke: var(--kin-line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.kin-labs { position: absolute; inset: 0; }
.kin-lab { position: absolute; white-space: nowrap; line-height: 1.1; }
.kin-leaf { font-size: 13px; color: var(--kin-fg); white-space: normal; width: max-content; }
.kin-leaf.target { font-weight: 700; }
.kin-leaf.near { color: var(--kin-accent); }
.kin-date { font-family: var(--kin-mono); font-size: 10.5px; color: var(--kin-fg-2); }
.kin-date.hot { color: var(--kin-accent); font-weight: 500; }
.kin-axis-lab { font-family: var(--kin-mono); font-size: 9.5px; color: var(--kin-fg-3); }
/* JetBrains Mono has no Hebrew. Hebrew labels fell back letter by letter and
   kept monospace-width gaps between the words, so they read as spaced out.
   Russian has the glyphs and the same result: "98 млн лет назад" is three
   words to English's one abbreviation, and monospaced they read as
   letter-spaced. */
[dir="rtl"] .kin-date, [dir="rtl"] .kin-axis-lab, [dir="rtl"] .kin-combo,
:lang(ru) .kin-date, :lang(ru) .kin-axis-lab, :lang(ru) .kin-combo { font-family: var(--kin-font); }
.kin-explain { margin: 0; font-size: 0.95rem; color: var(--kin-fg-2); }
.kin-explain strong { color: var(--kin-fg); font-weight: 600; }
.kin-sources { margin: 0; font-size: 0.75rem; color: var(--kin-fg-3); }
.kin-sources a { color: var(--kin-fg-3); }
.kin-intro { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--kin-accent-soft); color: var(--kin-fg); font-size: 0.9rem; }
/* On a short phone the reveal runs past the fold; the way on stays in reach.
   Where everything fits, sticky has nothing to stick to and changes nothing. */
.kin-reveal #kin-next { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); box-shadow: var(--kin-shadow); }

.kin-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kin-draw 0.55s var(--kin-ease) forwards; }
.kin-draw.late { animation-delay: 0.72s; }
.kin-pop { transform-box: fill-box; transform-origin: center; animation: kin-pop 0.32s var(--kin-ease) both; }
.kin-pop.n1 { animation-delay: 0.52s; }
.kin-pop.n2 { animation-delay: 1.24s; }
.kin-fade { animation: kin-fade 0.3s ease both; }
.kin-fade.n1 { animation-delay: 0.6s; }
.kin-fade.n2 { animation-delay: 1.3s; }
.kin-shake { animation: kin-shake 0.28s ease; }

/* ── Buttons ── */
.kin-btn {
  cursor: pointer; touch-action: manipulation;
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  padding: 13px 20px; border-radius: 999px; border: 0;
  background: var(--kin-accent); color: var(--kin-accent-ink);
  font-weight: 700; font-size: 1rem;
}
.kin-btn:active { transform: scale(0.98); }
.kin-ghost { background: transparent; color: var(--kin-fg); border: 1px solid var(--kin-line-2); }
.kin-block { width: 100%; }

/* ── Results, arcade end, stats ── */
.kin-res { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 6px; }
.kin-res > * { margin: 0; }
.kin-eyebrow { font-family: var(--kin-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kin-fg-3); }
[dir="rtl"] .kin-eyebrow { font-family: var(--kin-font); letter-spacing: 0; }
.kin-score { font-weight: 800; font-size: 3.6rem; line-height: 1; }
.kin-score span { font-size: 1.5rem; color: var(--kin-fg-3); }
.kin-title { font-weight: 700; font-size: 1.15rem; color: var(--kin-accent); }
/* The grid follows the reading direction: question 1 sits where a reader of
   that language starts, which is also how the shared text renders. */
.kin-grid { font-size: min(1.4rem, 5.4vw); letter-spacing: 2px; line-height: 1.2; white-space: nowrap; }
.kin-streak { color: var(--kin-fg-2); }
.kin-share { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.kin-share-text {
  width: 100%; font-family: var(--kin-mono); font-size: 0.8rem; resize: none;
  background: var(--kin-surface); color: var(--kin-fg); border: 1px solid var(--kin-line-2); border-radius: 10px; padding: 8px;
}
.kin-countdown { font-size: 0.85rem; color: var(--kin-fg-3); }
.kin-clock { font-family: var(--kin-mono); color: var(--kin-fg-2); margin-inline-start: 4px; }
.kin-note { font-size: 0.84rem; color: var(--kin-fg-3); max-width: 34ch; }
.kin-recap { width: 100%; text-align: start; border: 1px solid var(--kin-line); border-radius: 12px; background: var(--kin-surface); }
.kin-recap summary { cursor: pointer; padding: 10px 12px; color: var(--kin-fg-2); font-size: 0.9rem; }
.kin-recap ol { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 4px; font-size: 0.88rem; }
.kin-recap li { display: flex; justify-content: space-between; gap: 8px; color: var(--kin-fg-2); }
.kin-recap .y { color: var(--kin-ok); }
.kin-recap .n { color: var(--kin-bad); }
[dir="rtl"] .kin-arrow { display: inline-block; transform: scaleX(-1); }
.kin-stats table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.kin-stats th, .kin-stats td { padding: 8px 4px; border-bottom: 1px solid var(--kin-line); text-align: start; font-weight: 400; }
.kin-stats th { color: var(--kin-fg-2); }
.kin-stats td { text-align: end; font-family: var(--kin-mono); white-space: nowrap; }

/* ── One look: the plaque, the dial, the tiles ──
   The opening frames its title in a hairline plate with a diamond at the top
   and bottom of it, and reads time as distance from a centre. Home, the
   results and the arcade's end borrow the plate; Home borrows the dial. */
.kin-plaque {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 16px 18px; border-radius: 20px; text-align: center;
  background: var(--kin-surface); border: 1px solid var(--kin-line-2);
}
.kin-plaque > * { margin: 0; }
.kin-plaque::before, .kin-plaque::after {
  content: ''; position: absolute; inset-inline-start: 50%; width: 9px; height: 9px; margin-inline-start: -4.5px;
  background: var(--kin-accent); border: 2px solid var(--kin-bg); transform: rotate(45deg);
}
.kin-plaque::before { top: -5.5px; }
.kin-plaque::after { bottom: -5.5px; }
.kin-scoreplate { width: 100%; gap: 6px; }

.kin-home { display: flex; flex-direction: column; gap: 18px; }
.kin-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.kin-dial { position: relative; width: 150px; height: 150px; }
.kin-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kin-ring { fill: none; stroke: var(--kin-line-2); stroke-width: 0.8; }
.kin-ring-scale { stroke-width: 3; stroke-dasharray: 0.7 5.1; }
.kin-ring-in { stroke: var(--kin-line); }
.kin-tick { stroke: var(--kin-line-2); stroke-width: 5; stroke-linecap: round; }
.kin-tick.on { stroke: var(--kin-accent); }
.kin-tick.now { stroke-width: 6.5; }
.kin-tick.now:not(.on) { stroke: var(--kin-fg-3); }
.kin-dial-in { position: absolute; inset: 0; display: grid; place-items: center; }
.kin-dial-in b { font-size: 2.3rem; font-weight: 800; line-height: 1; }
.kin-dial-leaf { font-size: 2rem; line-height: 1; }
.kin-streakline { margin: 0; color: var(--kin-fg-2); font-weight: 500; text-align: center; }
.kin-chip { font-size: 0.78rem; padding: 3px 10px; border-radius: 999px; background: var(--kin-raised); color: var(--kin-fg-2); }
.kin-sub { color: var(--kin-fg-2); }
.kin-today .kin-btn { margin-top: 4px; }
.kin-today .kin-share-text { margin-top: 2px; }
.kin-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kin-tile {
  display: grid; gap: 4px; align-content: start; justify-items: start; text-align: start;
  padding: 14px 14px 12px; border-radius: 18px; cursor: pointer; touch-action: manipulation;
  background: var(--kin-surface); border: 1px solid var(--kin-line-2); color: inherit; text-decoration: none;
  transition: border-color 0.2s, transform 0.12s var(--kin-ease);
}
.kin-tile:hover { border-color: var(--kin-accent); }
.kin-tile:active { transform: scale(0.98); }
.kin-tile b { font-size: 1.05rem; }
.kin-tile > span:last-child { font-size: 0.82rem; color: var(--kin-fg-3); line-height: 1.35; }
.kin-tile-ic { font-size: 1.5rem; line-height: 1; }
.kin-linkrow { margin: 0; text-align: center; }
.kin-link {
  background: none; border: 0; padding: 0 8px; min-height: 44px; cursor: pointer; font-size: 0.92rem; font-family: inherit;
  color: var(--kin-fg-2); text-decoration: underline; text-underline-offset: 3px;
}
.kin-link:hover { color: var(--kin-fg); }
.kin-banner {
  align-self: center; margin: 0; padding: 4px 12px; border-radius: 999px; text-align: center;
  background: var(--kin-accent-soft); color: var(--kin-fg); font-size: 0.8rem;
}
.kin-distwrap { width: 100%; display: grid; gap: 8px; }
.kin-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.kin-dist li { display: grid; grid-template-columns: 9em 1fr 2.2em; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--kin-fg-2); text-align: start; white-space: nowrap; }
.kin-dist-bar { height: 8px; border-radius: 4px; background: var(--kin-raised); overflow: hidden; }
.kin-dist-bar i { display: block; height: 100%; min-width: 0; background: var(--kin-accent); border-radius: 4px; }
.kin-dist b { text-align: end; font-family: var(--kin-mono); font-weight: 500; }

/* The home-screen offer: a slim card on Home, never elsewhere. */
.kin-install {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px;
  padding: 12px 14px; border: 1px solid var(--kin-line-2); border-radius: 16px; background: var(--kin-surface);
}
.kin-install-ic { width: 44px; height: 44px; border-radius: 10px; display: block; }
.kin-install-tx { display: grid; gap: 2px; text-align: start; min-width: 0; }
.kin-install-tx b { font-size: 0.95rem; }
.kin-install-tx span { font-size: 0.82rem; line-height: 1.35; color: var(--kin-fg-2); }
.kin-install-go { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.kin-small { min-height: 44px; padding: 8px 22px; font-size: 0.95rem; }

.kin-foot { text-align: center; padding-top: 18px; font-size: 0.78rem; }
.kin-foot a { color: var(--kin-fg-3); }
.kin-noscript { text-align: center; padding: 40px 16px; }

/* ── Leaves ── */
.kin-burst { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.kin-leafbit { position: absolute; width: 9px; height: 9px; border-radius: 2px 9px; opacity: 0; animation: kin-fall 1.4s ease-out forwards; }
.kin-leafbit.k0 { background: var(--kin-animal); }
.kin-leafbit.k1 { background: var(--kin-plant); }
.kin-leafbit.k2 { background: var(--kin-fungus); }
.kin-leafbit.k3 { background: var(--kin-accent); }

@keyframes kin-draw { to { stroke-dashoffset: 0; } }
@keyframes kin-pop { from { transform: scale(0); } 70% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes kin-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kin-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kin-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes kin-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

/* Short phones: tighter cards so the reveal and its button fit the screen. */
@media (max-height: 700px) {
  .kin-target .kin-em { font-size: 2.8rem; }
  .kin-opt .kin-em { font-size: 2.2rem; }
  .kin-stage { gap: 10px; padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
  .kin-draw { stroke-dashoffset: 0; }
}