/* The quick human check shown on «Send message» (captcha.js): a paper sheet over the page with one small
   game from the valley — tap the glowing leaf. */
dialog.cap { width: min(480px, calc(100vw - 32px)); max-width: none; padding: var(--s6); border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 24px 64px rgba(40, 24, 64, .28); }
dialog.cap::backdrop { background: rgba(9, 11, 16, .36); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.cap[open] { animation: cap-in var(--mid) var(--ease-out); }
dialog.cap[open]::backdrop { animation: cap-fade var(--mid) var(--ease-out); }
@keyframes cap-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes cap-fade { from { opacity: 0; } }

.cap-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.cap-head h2 { font-size: var(--t24); line-height: 32px; font-weight: 800; letter-spacing: -.015em; }
.cap-close { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px -8px 0; border: 0; background: none; color: var(--muted); cursor: pointer; transition: color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out); }
.cap-close:hover { color: var(--ink); }
.cap-close:active { transform: scale(.92); }
.cap-close svg { width: 20px; height: 20px; }
.cap-hint { margin-top: var(--s2); font-size: var(--t16); line-height: 24px; color: var(--muted); }

.cap-stage { position: relative; margin-top: var(--s5); aspect-ratio: 416 / 256; overflow: hidden; background: #eee8f5; }
.cap-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cap[data-mode="leaf"] .cap-canvas { cursor: pointer; }
.cap-canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cap[data-shake] .cap-stage { animation: cap-shake 280ms var(--ease-out); }
@keyframes cap-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.cap-done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s2); background: rgba(252, 252, 250, .74); font-size: var(--t16); line-height: 24px; font-weight: 800; opacity: 0; transition: opacity var(--mid) var(--ease-out); pointer-events: none; }
.cap-done svg { width: 40px; height: 40px; padding: var(--s2); background: var(--ink); color: var(--paper); }
.cap[data-state="done"] .cap-done { opacity: 1; }


.cap-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); min-height: 24px; margin-top: var(--s4); }
.cap-new { gap: var(--s2); border: 0; background: none; font-size: var(--t14); line-height: 20px; }
.cap-new svg { width: 16px; height: 16px; transition: transform var(--mid) var(--ease-out); }
.cap-new:hover svg { transform: rotate(-90deg); }
.cap-status { font-size: var(--t14); line-height: 20px; color: var(--muted); }
.cap-status[data-error] { color: var(--error); font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .cap[data-shake] .cap-stage { animation: none; } }