/* ===== Market wrap: tug-of-war + flip cards from data/market_wrap.json =====
   Built on the page's own .step/.shead/.quest/.card styles; only the extras live here. */

.mw-lag b{display:inline-block;margin-right:4px;padding:2px 8px;border-radius:99px;font-size:13px;font-weight:800;color:var(--ind);background:color-mix(in srgb,var(--ind2) 14%,var(--card));font-variant-numeric:tabular-nums}

/* Tug-of-war: the knot springs toward whichever side won the session */
.mw-tug{--at:50%;display:grid;grid-template-columns:1fr minmax(160px,1.1fr) 1fr;align-items:center;gap:18px;margin-bottom:16px;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.mw-team{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mw-team.up{justify-content:flex-end}
.mw-side{flex-basis:100%;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.mw-team.dn .mw-side{color:var(--down)}.mw-team.up .mw-side{color:var(--up);text-align:right}
.mw-chip{font-size:13px;font-weight:700;padding:6px 11px;border-radius:99px;color:var(--ink)}
.mw-chip.dn{background:color-mix(in srgb,var(--down) 13%,var(--card))}
.mw-chip.up{background:color-mix(in srgb,var(--up) 15%,var(--card))}
.mw-rope{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--down) 55%,var(--card)),var(--line) 50%,color-mix(in srgb,var(--up) 55%,var(--card)))}
.mw-mid{position:absolute;left:50%;top:-7px;bottom:-7px;width:2px;margin-left:-1px;background:var(--dim);opacity:.35;border-radius:1px}
.mw-knot{position:absolute;top:50%;left:var(--at);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--ink);border:4px solid var(--card);box-shadow:0 2px 8px rgba(0,0,0,.18);transition:left 1.4s var(--pop) .2s}
.mw.up .mw-knot{background:var(--up)}.mw.down .mw-knot{background:var(--down)}
.mw-knot-tag{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font:800 12px Figtree,sans-serif;padding:3px 8px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.mw-knot-tag.up{color:var(--up)}.mw-knot-tag.dn{color:var(--down)}
.mw-scale{position:absolute;top:calc(100% + 8px);left:0;right:0;display:flex;justify-content:space-between;font:600 10.5px Figtree,sans-serif;color:var(--dim);font-variant-numeric:tabular-nums}
.mw-rope{margin:26px 0 20px}

/* Flip cards: the page's .card, with a bigger counted number */
.mw-cards .card{height:260px;background:none;border:0;padding:0;box-shadow:none;border-radius:22px;font:inherit;color:inherit;cursor:pointer}
.mw-cards .card:hover .in{transform:rotateY(-10deg)}
.mw-cards .card.flip .in,.mw-cards .card.flip:hover .in{transform:rotateY(180deg)}
.mw-big{font:800 clamp(38px,3.6vw,50px)/1 "Fraunces",serif;margin-top:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mw-arw{font-size:.7em;vertical-align:.08em}.mw-arw.up{color:var(--up)}.mw-arw.dn{color:var(--down)}
.mw-big small{font-size:.58em;font-weight:700;letter-spacing:0;margin:0 .04em}
.mw-cards .pv{font-size:12.5px;line-height:1.5}
.mw-cards .pv .mw-up{color:var(--up);font-weight:800}.mw-cards .pv .mw-dn{color:var(--down);font-weight:800}
.mw-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:2px 0 8px}
.mw-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--ac);transition:width 1.2s var(--pop) .3s}
.mw-cards .rl i{left:50%;transition:left 1.2s var(--pop) .3s}
.mw-cards .face.back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;align-self:auto;gap:12px;padding:22px;border-radius:22px;border:2px solid var(--ac);background:var(--card);font:inherit;color:var(--ink)}
.mw-cards .face.back:hover{transform:rotateY(180deg)}
.mw-cards .back p{font-size:19px;line-height:1.35;color:var(--ink)}
.mw-cards .eg a{color:var(--ind);font-weight:800;text-decoration:none}
.mw-cards .eg a:hover{text-decoration:underline}
.mw-src{margin-top:16px;font-size:13px;color:var(--dim)}
.mw-src a{color:var(--ind);font-weight:700;text-decoration:none}
.mw-src a:hover{text-decoration:underline}

@media(max-width:760px){
  .mw-tug{grid-template-columns:1fr;gap:12px;padding:16px}
  .mw-team.up{justify-content:flex-start}.mw-team.up .mw-side{text-align:left}
  .mw-rope{order:-1;margin:34px 6px 28px}
}
@media(max-width:520px){
  .mw .mw-cards{grid-template-columns:1fr 1fr;gap:10px}
  .mw-cards .card{height:214px}
  .mw-cards .face{padding:14px;border-radius:18px}
  .mw-cards .flipb{padding:4px 7px;font-size:0}.mw-cards .flipb svg{width:13px;height:13px}
  .mw-cards .tag{font-size:10.5px}
  .mw-big{font-size:clamp(22px,7.4vw,30px);margin-top:12px}
  .mw-cards .pv{padding:9px 10px;font-size:11px;border-radius:11px}
  .mw-cards .back p{font-size:14.5px}
  .mw-cards .eg{font-size:12px;padding:8px 9px}
}
@media(prefers-reduced-motion:reduce){.mw-knot,.mw-bar i,.mw-cards .rl i{transition:none}}