:root{--do-row-h: 40px;--do-gap: 6px;--do-shadow: drop-shadow(0 3px 4px rgba(30, 28, 26, .22))}html.dark{--do-shadow: drop-shadow(0 3px 6px rgba(0, 0, 0, .6))}.do-card{position:relative;margin:0 auto 14px;width:min(100%,max(160px,calc(100dvh - 470px)),300px);aspect-ratio:1 / 1;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}.do-shape{width:100%;height:100%;transform:rotate(var(--rot, 0deg)) scale(var(--fit, 1));transition:transform .7s var(--ease),opacity .4s var(--ease)}.do-shape path{fill:var(--accent);fill-opacity:.85;filter:var(--do-shadow)}.do-veil{position:absolute;inset:10px;border:2px dashed var(--border);border-radius:calc(var(--radius) - 6px);display:grid;place-content:center;justify-items:center;gap:2px;color:var(--muted);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}.do-veil b{font-size:3.4rem;line-height:1;font-weight:900;color:var(--accent)}.do-veil span{font-weight:800;color:var(--text)}.do-veil small{font-size:.8rem}.do-card.hidden .do-shape{opacity:0}.do-card.hidden .do-veil{opacity:1}.do-caption{position:absolute;left:50%;bottom:10px;transform:translate(-50%);max-width:calc(100% - 20px);padding:3px 12px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:900;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.do-card.done .do-caption{animation:do-caption-in .45s var(--ease-bounce) .3s both}.do-card.done{animation:sh-pop .4s var(--ease-bounce)}@keyframes do-caption-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.do-rows{display:grid;gap:var(--do-gap);margin:0 auto;width:100%}.do-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 40px 50px;gap:4px;height:var(--do-row-h)}.do-cell{display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface-2);font-weight:800;font-size:.92rem;min-width:0;font-variant-numeric:tabular-nums}.do-row.filled .do-cell{background:var(--surface);border:1px solid var(--border)}.do-name{display:block;padding:0 10px;line-height:calc(var(--do-row-h) - 2px);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.do-km{font-size:.86rem}.do-pct{color:var(--accent)}.do-arrow{display:grid;width:24px;height:24px;color:var(--text);transform:rotate(var(--r))}.do-arrow svg{width:100%;height:100%}.do-party{font-size:1.2rem;line-height:1}.do-row.hit .do-cell{background:var(--good);border-color:var(--good);color:#fff}.do-row.reveal .do-cell{animation:do-flip .5s var(--ease) both;animation-delay:calc(var(--i, 0) * .14s)}@keyframes do-flip{0%{transform:rotateX(90deg);opacity:0}60%{transform:rotateX(-12deg);opacity:1}to{transform:none}}.do-entry{position:relative;display:flex;gap:8px;margin-top:14px}.do-input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:999px;border:2px solid var(--border);background:var(--surface);font-weight:700;font-size:1rem;user-select:text;-webkit-user-select:text;transition:border-color .15s var(--ease)}.do-input::placeholder{color:var(--muted);font-weight:600}.do-input:focus{outline:none;border-color:var(--accent)}.do-go{flex:0 0 auto;padding:0 18px}.do-suggest{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:4;display:grid;padding:4px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);animation:do-suggest-in .16s var(--ease)}.do-opt{min-height:44px;padding:0 14px;border-radius:var(--radius-sm);text-align:left;font-weight:700}.do-opt:hover,.do-opt[aria-selected=true]{background:var(--accent-soft)}@keyframes do-suggest-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.do-end{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}.do-end .sh-btn{text-decoration:none}.do-result{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 12px}.do-result svg{width:64px;height:64px;flex:0 0 auto}.do-result path{fill:var(--accent);fill-opacity:.85;filter:var(--do-shadow)}.do-result div{display:grid;gap:2px;text-align:left}.do-result b{font-size:1.1rem;font-weight:900}.do-result a{font-weight:800;font-size:.9rem}.do-help-row{margin:8px 0}.do-help-row .do-cell{font-size:.85rem}
