/* किताब भिडन्त (Book Duel) — uses the site's colour variables with fallbacks, same look as the book club cards. */
.wn-bd{--bd-ink:var(--ink,#120A08);--bd-soft:var(--ink-soft,#4A443B);--bd-line:var(--line,#D9D2C0);--bd-surface:var(--surface,#fff);--bd-a:var(--gold,#F7C600);--bd-b:#2F6F46;--bd-warn:#B3401F;max-width:860px;margin:0 auto;padding:20px 16px 48px;display:flex;flex-direction:column;gap:18px;color:var(--bd-ink)}
.wn-bd *{box-sizing:border-box}
.wn-bd .eyebrow{margin:0;font-size:.82rem;font-weight:700;color:var(--bd-soft)}
.wn-bd h1{margin:4px 0 0;font-size:clamp(1.5rem,5.5vw,2.1rem);line-height:1.3;text-wrap:balance}
.wn-bd .meta{display:flex;gap:6px 18px;flex-wrap:wrap;margin:8px 0 0;font-size:.95rem;color:var(--bd-soft)}.wn-bd .meta b{color:var(--bd-ink)}
.wn-bd .box{background:var(--bd-surface);border:2px solid var(--bd-ink);border-radius:14px;padding:16px}
.wn-bd .box h2{margin:0 0 10px;font-size:1.1rem}
.wn-bd .lead{margin:0;font-size:1.05rem;line-height:1.7}
.wn-bd .hint{margin:0;font-size:.9rem;color:var(--bd-soft)}
/* two books */
.wn-bd .arena{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch}
.wn-bd .vs{align-self:center;font-weight:800;width:42px;height:42px;border-radius:50%;border:2px solid var(--bd-ink);display:grid;place-items:center;background:var(--bd-surface)}
.wn-bd .side{border:2px solid var(--bd-ink);border-radius:14px;background:var(--bd-surface);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0;text-align:left;font:inherit;color:inherit}
.wn-bd button.side{cursor:pointer}
.wn-bd .side h3{margin:0;font-size:1rem;line-height:1.35;overflow-wrap:anywhere}.wn-bd .side p{margin:0;font-size:.85rem;color:var(--bd-soft)}
.wn-bd .side .pick{margin-top:auto;font-weight:700;font-size:.9rem}
.wn-bd .side[aria-pressed="true"]{box-shadow:5px 5px 0 var(--bd-a)}.wn-bd .side.B[aria-pressed="true"]{box-shadow:5px 5px 0 var(--bd-b)}
.wn-bd .cover{width:100%;max-width:150px;aspect-ratio:2/2.6;border:2px solid var(--bd-ink);border-radius:6px 10px 10px 6px;border-left-width:10px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;background:var(--bd-a) center/cover no-repeat;color:#120A08}
.wn-bd .cover.B{background-color:var(--bd-b);color:#fff}
.wn-bd .cover b{font-size:1rem;line-height:1.25}.wn-bd .cover small{font-size:.75rem;opacity:.85}
/* steps */
.wn-bd .steps{display:flex;flex-direction:column;gap:16px}.wn-bd .step{display:flex;flex-direction:column;gap:8px}
.wn-bd .row{display:flex;gap:8px;flex-wrap:wrap}
.wn-bd .chip{padding:6px 14px;border:2px solid var(--bd-ink);border-radius:99px;background:transparent;color:var(--bd-ink);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.wn-bd .chip[aria-pressed="true"]{background:var(--bd-a);color:#120A08}
.wn-bd textarea{width:100%;min-height:150px;resize:vertical;font:inherit;padding:10px;border:2px solid var(--bd-ink);border-radius:8px;background:var(--bg,#fff);color:var(--bd-ink)}
.wn-bd .cnt{font-size:.85rem;color:var(--bd-soft)}.wn-bd .cnt.over{color:var(--bd-warn);font-weight:700}
.wn-bd .btn{display:inline-block;padding:9px 18px;font:inherit;font-weight:700;font-size:.95rem;color:#120A08;background:var(--bd-a);border:2px solid #120A08;border-radius:99px;cursor:pointer;text-decoration:none}
.wn-bd .btn.alt{background:transparent;color:var(--bd-ink);border-color:var(--bd-ink)}.wn-bd .btn:disabled{opacity:.5;cursor:default}
.wn-bd :focus-visible{outline:3px solid var(--bd-a);outline-offset:2px}
.wn-bd .todo{margin:0;padding:10px 12px;border:2px dashed var(--bd-line);border-radius:10px;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:.92rem}
.wn-bd .todo li::before{content:"○ ";color:var(--bd-soft)}.wn-bd .todo li.ok{color:var(--bd-soft);text-decoration:line-through}.wn-bd .todo li.ok::before{content:"✓ ";color:var(--bd-b)}
/* rules */
.wn-bd .rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.97rem}
.wn-bd .rules li{display:flex;gap:10px}
.wn-bd .rules li[data-n]::before{content:attr(data-n);flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--bd-ink);display:grid;place-items:center;font-weight:700;font-size:.8rem}
.wn-bd .rules li.no::before{background:var(--bd-warn);border-color:var(--bd-warn);color:#fff}
.wn-bd .rules.plain li::before{content:none}
.wn-bd .how{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
/* result */
.wn-bd .bar{display:flex;height:34px;border:2px solid var(--bd-ink);border-radius:99px;overflow:hidden;font-weight:700;font-size:.85rem}
.wn-bd .bar i{display:flex;align-items:center;padding:0 12px;font-style:normal;transition:width .5s;white-space:nowrap}
.wn-bd .bar .ba{background:var(--bd-a);color:#120A08}.wn-bd .bar .bb{background:var(--bd-b);color:#fff;justify-content:flex-end}
.wn-bd .legend{display:flex;gap:6px 16px;flex-wrap:wrap;margin:8px 0 0;font-size:.85rem;color:var(--bd-soft)}
.wn-bd .dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--bd-ink);margin-right:6px;vertical-align:-1px}.wn-bd .dot.A{background:var(--bd-a)}.wn-bd .dot.B{background:var(--bd-b)}
.wn-bd .locked{border:2px dashed var(--bd-line);border-radius:12px;padding:14px;text-align:center;color:var(--bd-soft);font-size:.92rem}
.wn-bd .swing{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:.92rem}.wn-bd .swing strong{font-size:1.4rem}
/* arguments */
.wn-bd .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wn-bd .col{min-width:0}.wn-bd .col h3{margin:0 0 8px;font-size:1rem;line-height:1.4}
.wn-bd .arg{border:2px solid var(--bd-ink);border-radius:12px;background:var(--bd-surface);padding:12px;margin:0 0 10px}
.wn-bd .arg.top{box-shadow:4px 4px 0 var(--bd-a)}.wn-bd .col.B .arg.top{box-shadow:4px 4px 0 var(--bd-b)}
.wn-bd .arg header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--bd-soft)}.wn-bd .arg header b{color:var(--bd-ink)}
.wn-bd .tag{padding:1px 9px;border:1.5px solid var(--bd-line);border-radius:99px;font-size:.76rem;font-weight:700}.wn-bd .tag.full{border-color:var(--bd-ink);color:var(--bd-ink)}
.wn-bd .crown{font-size:.78rem;font-weight:700;color:#120A08;background:var(--bd-a);padding:1px 9px;border-radius:99px;border:1.5px solid #120A08}
.wn-bd .arg p{margin:8px 0;font-size:.98rem;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere}
.wn-bd .lift{padding:4px 12px;border:2px solid var(--bd-ink);border-radius:99px;background:transparent;color:var(--bd-ink);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.wn-bd .lift[aria-pressed="true"]{background:var(--bd-a);color:#120A08}.wn-bd .lift:disabled{opacity:.55;cursor:default}
/* share card */
.wn-bd .card{border:2px solid var(--bd-ink);border-radius:12px;padding:16px;background:var(--bd-a);color:#120A08}.wn-bd .card.B{background:var(--bd-b);color:#fff}
.wn-bd .card small{opacity:.85;display:block}.wn-bd .card q{display:block;margin:8px 0;font-size:1.05rem;line-height:1.6}
.wn-bd .toast{position:sticky;bottom:12px;align-self:center;background:var(--bd-ink);color:var(--bg,#fff);padding:8px 16px;border-radius:99px;font-weight:700;font-size:.9rem;text-align:center}
@media (max-width:640px){.wn-bd .cols{grid-template-columns:1fr}.wn-bd .vs{display:none}.wn-bd .arena{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.wn-bd .side{padding:10px}.wn-bd .side h3{font-size:.95rem;overflow-wrap:anywhere}.wn-bd .side p{overflow-wrap:anywhere}.wn-bd .cover{align-self:center;max-width:130px}}