/* Vow card + in-run tracker (docs/design/DRAFT-CARD-V3.md 4.3, 4.4). Loaded after draft-card.css. */
#choiceButtons .card.Vow{--glow:#9be3b4;--deep:#103d2a;border-color:#2f8f6a;box-shadow:0 0 0 2px #0b2a1c,0 0 24px rgba(155,227,180,.45),0 12px 26px rgba(0,0,0,.55);
  background:radial-gradient(circle at 92% 94%,transparent 0 22px,rgba(47,143,106,.14) 23px 25px,transparent 26px 38px,rgba(47,143,106,.1) 39px 40px,transparent 41px) padding-box,linear-gradient(180deg,#f6e7c4,#e6cf9c) padding-box,linear-gradient(160deg,#c9f5d6,#2f8f6a 40%,#14513a 70%,#9be3b4) border-box}
#choiceButtons .card.Vow:hover,#choiceButtons .card.Vow:focus-visible{box-shadow:0 0 0 2px #0b2a1c,0 0 34px rgba(155,227,180,.7),0 16px 30px rgba(0,0,0,.6)}
.vw-art{display:grid;place-items:center}
.vw-ring{width:calc(var(--dc-art) - 24px);height:calc(var(--dc-art) - 24px);border-radius:50%;border:3px solid #2f8f6a;background:rgba(8,40,26,.55);box-shadow:0 0 14px rgba(155,227,180,.55),inset 0 0 10px rgba(0,0,0,.4);display:grid;place-items:center;overflow:hidden}
#choiceButtons .card .skill-art.dc-art .vw-img{width:68%;height:68%;max-height:none;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.vw-scope{background:rgba(47,143,106,.18);color:#14513a}
.vw-cond em{color:var(--dc-val)}
.vw-reward{color:var(--dc-up);font-weight:800}
.vw-strip{background:rgba(47,143,106,.14);border-color:#2f8f6a}
.vw-strip .di-l1{color:#14513a;font-weight:700;font-size:12.5px}
.vw-strip .di-l1>span:first-child{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25}
.vw-seal{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 40%,#9be3b4,#2f8f6a 70%);box-shadow:inset 0 0 0 2px #e2b866}
.vw-strip .di-medal{border-color:#2f8f6a}
@media (orientation:landscape) and (max-height:620px){.vw-ring{width:52px;height:52px}}
@media (orientation:portrait){.vw-ring{width:72px;height:72px}.vw-strip .di-l1{max-width:none}.vw-strip .di-l1>span:first-child{display:block;white-space:nowrap;-webkit-line-clamp:unset}}

/* In-run tracker pill, next to #state in .arena-top */
#vowTrack{--vt:#9be3b4;display:inline-flex;align-items:center;gap:5px;height:26px;max-width:min(46vw,320px);padding:0 10px 0 6px;border-radius:13px;border:1.5px solid var(--vt);background:rgba(10,24,18,.78);color:var(--vt);font-size:12px;font-weight:700;line-height:1;white-space:nowrap;pointer-events:none}
#vowTrack[hidden]{display:none}
#vowTrack img{width:16px;height:16px;flex:none;object-fit:contain}
#vowTrack .vt-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
#vowTrack[data-state="done"]{--vt:#ffc84a;border-color:#8a5410;background:rgba(58,36,10,.82)}
#vowTrack[data-state="failed"]{--vt:#a8a08c;background:rgba(30,30,28,.75)}
#vowTrack[data-state="failed"] .vt-t{text-decoration:line-through}
#vowTrack[data-urgent="1"]{--vt:#ff6b6b}
#vowTrack.vt-flash{animation:vt-flash .4s ease-out}
@keyframes vt-flash{0%{transform:scale(1.18);box-shadow:0 0 14px var(--vt)}100%{transform:scale(1);box-shadow:0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){#vowTrack.vt-flash{animation:none}}
/* portrait: the stage line and the stats button leave no room beside it, so the pill sits on its own row under the stage line */
@media (orientation:portrait){#vowTrack{position:absolute;left:0;top:36px;font-size:11px;max-width:min(62vw,250px)}}

/* vow reward may take two lines: Z4 gives 16px to Z5, so the three vow cards keep the same height as skill cards */
#choiceButtons .vw-body .dc-effect{height:calc(var(--dc-effect) - 16px)}
#choiceButtons .vw-body .dc-rank{height:calc(var(--dc-rank) + 16px);align-items:flex-start;padding-top:1px}
.vw-body .dc-rank .dc-rank-t.vw-reward{white-space:normal;line-height:1.3;max-height:2.6em;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere}