/* TASMAN project page */
:root {
  --bg: #faf8f4;
  --bg-alt: #f3f0e9;
  --card: #ffffff;
  --ink: #1c2230;
  --ink-2: #3a4253;
  --muted: #6a7282;
  --line: #e4dfd4;
  --line-2: #d4cdbf;
  --accent: #2e4a9e;
  --accent-soft: #e8edf8;

  --rubric: #4c72b0;
  --ff: #55a868;
  --brs: #8c3b7e;
  --notrust: #9aa0a8;

  --accept: #2f8a57;
  --accept-soft: #e4f3ea;
  --reject: #c0392b;
  --reject-soft: #fbe9e6;

  --p-skydrop: #3f8f6b;
  --p-city_transport: #4a73b8;
  --p-privacy_coalition: #7a68b3;
  --p-couriers_guild: #c98f1c;
  --p-aviation_safety: #c0392b;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(28, 34, 48, .05), 0 4px 16px rgba(28, 34, 48, .05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
code, .mono { font-family: var(--mono); font-size: .86em; }
em { font-style: italic; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 244, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 54px;
  display: flex; align-items: center; gap: 24px;
}
.brand { font-weight: 700; letter-spacing: .04em; color: var(--ink); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 22px; height: 22px; }
.nav-links { display: flex; gap: 20px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--accent); text-decoration: none; }

/* ---------- layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
section { padding: 72px 0 40px; }
section.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-num { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.2; margin: 6px 0 14px; letter-spacing: -.01em; }
h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 36px 0 10px; }
h4 { font-size: 15px; margin: 0 0 6px; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 760px; }
p { margin: 0 0 14px; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 40px; text-align: center; }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kicker b { color: var(--ink); }
.hero h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.08; letter-spacing: -.02em; margin: 14px auto 8px; max-width: 900px;
}
.hero h1 em { color: var(--accent); }
.hero .subtitle { font-family: var(--serif); font-size: clamp(19px, 2.4vw, 24px); color: var(--ink-2); margin: 0 auto 26px; max-width: 820px; }
.authors { font-size: 17px; margin-bottom: 4px; }
.authors { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 20px; }
.authors span { white-space: nowrap; }
.affil { color: var(--muted); font-size: 15px; margin-bottom: 26px; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500; border: 1px solid var(--ink);
}
.btn:hover { text-decoration: none; background: #000; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--card); }
.btn svg { width: 16px; height: 16px; }

.teaser { margin: 44px auto 0; max-width: 980px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.teaser img { width: 100%; }
.caption { font-size: 14px; color: var(--muted); margin-top: 10px; text-align: left; }
.caption b { color: var(--ink-2); }

/* ---------- tldr ---------- */
.tldr { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start; }
.tldr p { font-size: 17px; }
.pull {
  border-left: 3px solid var(--accent); background: var(--card); padding: 14px 18px; border-radius: 0 10px 10px 0;
  font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--ink); box-shadow: var(--shadow);
}
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; }
.stat .v { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.1; }
.stat .l { font-size: 13.5px; color: var(--muted); line-height: 1.4; margin-top: 4px; }

/* ---------- game section ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 12px; position: relative; }
.step .n { position: absolute; top: 14px; right: 16px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.step h4 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.role { border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--line); background: var(--card); }
.role .tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; margin-bottom: 8px; }
.role p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.tag-g { background: #e7f1ec; color: #2c6e50; }
.tag-hb { background: #e8eef8; color: #33558f; }
.tag-adv { background: var(--reject-soft); color: var(--reject); }
.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.method { border-radius: var(--radius); padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid; }
.method p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.method.brs { border-top-color: var(--brs); } .method.rubric { border-top-color: var(--rubric); } .method.ff { border-top-color: var(--ff); }
.guidance { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.guide { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; font-size: 14.5px; color: var(--ink-2); }
.guide b { color: var(--ink); }

.defbox { margin-top: 30px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.defbox h4 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.defbox p { font-size: 15px; color: var(--ink-2); }
.formula { font-family: var(--serif); font-size: 20px; text-align: center; background: var(--bg); border-radius: 10px; padding: 18px 10px; line-height: 1.8; }
.formula .sub { font-size: 13px; color: var(--muted); font-family: var(--sans); display: block; line-height: 1.5; }

/* ---------- replay ---------- */
.replay-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 14px; }
.chip { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.chip b { color: var(--ink); }
.chip.ff { border-color: var(--ff); color: #2f7a46; background: #eef7f0; }
.toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; user-select: none; color: var(--ink-2); }
.toggle input { display: none; }
.toggle .sw { width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + .sw { background: var(--reject); }
.toggle input:checked + .sw::after { transform: translateX(16px); }

.traj { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 8px; margin-bottom: 16px; }
.traj-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.traj-top h4 { margin: 0; font-size: 14.5px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.legend i.dot { width: 9px; height: 9px; border-radius: 50%; }
#trajChart { width: 100%; height: auto; display: block; }
#trajChart .ep { cursor: pointer; }

.stage { display: grid; grid-template-columns: 290px 1fr; gap: 16px; align-items: start; }
.parties { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 70px; }
.party {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 10px 14px;
  border-left: 4px solid var(--pc); transition: box-shadow .2s, transform .2s;
}
.party.active { box-shadow: 0 0 0 2px var(--pc), var(--shadow); }
.party .row1 { display: flex; align-items: center; gap: 8px; }
.avatar { min-width: 30px; padding: 0 3px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--pc); font-size: 10px; font-weight: 700; letter-spacing: 0; flex: none; }
.party .nm { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.party .meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rtag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; text-transform: uppercase; letter-spacing: .03em; }
.rtag.unknown { background: var(--bg-alt); color: var(--muted); }
.trustbars { margin-top: 8px; display: grid; grid-template-columns: 38px 1fr 32px; gap: 3px 6px; align-items: center; font-size: 11px; }
.trustbars .lab { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.trustbars .bar { height: 7px; background: var(--bg-alt); border-radius: 4px; overflow: hidden; }
.trustbars .bar span { display: block; height: 100%; border-radius: 4px; transition: width .5s; }
.trustbars .val { font-family: var(--mono); font-size: 10.5px; text-align: right; color: var(--ink-2); }
.party .tlabel { font-size: 10.5px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .05em; }

.board { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.controls { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fdfcfa; flex-wrap: wrap; }
.cbtn { border: 1px solid var(--line-2); background: #fff; border-radius: 8px; height: 34px; min-width: 36px; padding: 0 10px; font-size: 14px; cursor: pointer; color: var(--ink); font-family: var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cbtn:hover { background: var(--bg); }
.cbtn.primary { background: var(--ink); color: #fff; border-color: var(--ink); min-width: 86px; }
.cbtn:disabled { opacity: .4; cursor: default; }
.timeline { display: flex; gap: 4px; align-items: center; flex: 1; min-width: 240px; }
.tl { flex: 1; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); font-size: 11px; font-family: var(--mono); color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; position: relative; }
.tl.used { background: #fff; color: var(--ink-2); border-color: var(--line-2); }
.tl.fail { background: var(--reject-soft); border-color: #efc5bf; color: var(--reject); }
.tl.pass { background: var(--accept); border-color: var(--accept); color: #fff; }
.tl.cur { outline: 2px solid var(--ink); outline-offset: 1px; }
.tl.na { cursor: default; opacity: .55; }
.tl.end { flex: 1.6; }
.tl.setup { flex: 1.6; }

.view { padding: 18px 20px 22px; min-height: 520px; }
.view h3 { margin: 0 0 4px; font-size: 22px; }
.sub { color: var(--muted); font-size: 14px; margin-bottom: 14px; }

.deal { display: grid; grid-template-columns: 150px repeat(4, 1fr); gap: 4px; margin: 10px 0 14px; font-size: 12.5px; }
.deal .ih { font-weight: 600; font-size: 12.5px; padding: 6px 8px 6px 0; line-height: 1.25; }
.deal .ih small { display: block; font-weight: 400; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.opt { border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; color: var(--muted); background: var(--bg); line-height: 1.25; position: relative; min-height: 40px; }
.opt .oid { font-family: var(--mono); font-size: 10px; display: block; color: var(--muted); }
.opt.on { background: var(--pc, var(--accent)); border-color: var(--pc, var(--accent)); color: #fff; font-weight: 500; }
.opt.on .oid { color: rgba(255,255,255,.85); }
.opt .sc { position: absolute; top: 4px; right: 6px; font-family: var(--mono); font-size: 10px; display: none; }
.private .opt .sc { display: block; }
.opt.on .sc { color: #fff; }

.speech { background: var(--bg); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 8px; position: relative; }
.speech .who { font-weight: 600; color: var(--ink); font-size: 13px; display: block; margin-bottom: 3px; }
.privnote { display: none; border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; color: var(--ink-2); background: #fffdf7; margin-bottom: 8px; }
.private .privnote { display: block; }
.privnote .lk { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a6d1d; font-weight: 600; display: flex; gap: 5px; align-items: center; margin-bottom: 3px; }
.privnote.adv { background: #fff5f3; border-color: #f0c4bd; }
.privnote.adv .lk { color: var(--reject); }

.votes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.vote { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.vote.show { opacity: 1; transform: none; }
.vote.acc { border-color: #b9dcc8; background: linear-gradient(#f6fbf8, #fff 40%); }
.vote.rej { border-color: #efc5bf; background: linear-gradient(#fdf6f5, #fff 40%); }
.vote .vh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vote .vh .nm { font-weight: 600; font-size: 13.5px; }
.verdict { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: .03em; }
.verdict.acc { background: var(--accept-soft); color: var(--accept); }
.verdict.rej { background: var(--reject-soft); color: var(--reject); }
.tpill { font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.tpill.lo { color: var(--reject); border-color: #efc5bf; background: #fff7f6; }
.tpill.mid { color: #8a6d1d; border-color: #ead9a9; background: #fffbef; }
.tpill.hi { color: var(--accept); border-color: #b9dcc8; background: #f3faf6; }
.vote .pub { font-size: 13.5px; color: var(--ink-2); }
.util { display: none; margin: 8px 0 4px; font-size: 11.5px; color: var(--muted); }
.private .util { display: block; }
.ubar { position: relative; height: 8px; background: var(--bg-alt); border-radius: 4px; margin-top: 3px; }
.ubar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.ubar .thr { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.vote details { margin-top: 6px; display: none; }
.private .vote details { display: block; }
.vote summary { font-size: 12px; color: #8a6d1d; cursor: pointer; font-weight: 600; }
.vote details.adv summary { color: var(--reject); }
.vote details p { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; background: #fffdf7; border-radius: 8px; padding: 8px 10px; }
.vote details.adv p { background: #fff5f3; }

.tally { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--bg); flex-wrap: wrap; }
.slots { display: flex; gap: 5px; }
.slot { width: 26px; height: 26px; border-radius: 7px; border: 1.5px dashed var(--line-2); display: grid; place-items: center; font-size: 13px; color: #fff; font-weight: 700; }
.slot.a { background: var(--accept); border: none; }
.slot.r { background: var(--reject); border: none; }
.tally .res { font-weight: 600; font-size: 14.5px; }
.tally .res.pass { color: var(--accept); }
.tally .res.fail { color: var(--reject); }
.callout { margin-top: 14px; border-radius: 10px; padding: 12px 14px; background: var(--accent-soft); color: #22346f; font-size: 14px; }
.callout b { color: #16245a; }

.issue-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.issue { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.issue b { font-size: 14px; }
.issue .d { color: var(--muted); font-size: 12.5px; }

.assess { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.acard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.acard .crit { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.crit span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #eef7f0; color: #2f7a46; border: 1px solid #cfe7d6; }
.deltas { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 8px; align-items: center; font-size: 12px; }
.deltas .lab { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.deltas .num { font-family: var(--mono); font-size: 11px; text-align: right; white-space: nowrap; }
.deltas .bar { height: 8px; background: var(--bg-alt); border-radius: 4px; position: relative; }
.deltas .bar .b0 { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; opacity: .35; }
.deltas .bar .b1 { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; }
.acard details { margin-top: 8px; }
.acard summary { font-size: 12px; color: #8a6d1d; cursor: pointer; font-weight: 600; }
.acard details p { font-size: 12.5px; margin: 6px 0 0; color: var(--ink-2); }

/* ---------- results ---------- */
.fig { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 18px 0; }
.fig img { width: 100%; margin: 0 auto; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bullets { padding-left: 20px; margin: 10px 0 0; }
.bullets li { margin-bottom: 8px; color: var(--ink-2); }
.bullets li b { color: var(--ink); }

.chart-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 18px 0; }
.seg-row { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 12px; align-items: center; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: var(--sans); color: var(--ink-2); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ink); color: #fff; }
.seg-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
#outChart { width: 100%; height: auto; display: block; }
.chart-note { font-size: 13px; color: var(--muted); margin-top: 6px; }

table.gap { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.gap th, table.gap td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--line); }
table.gap th { font-weight: 600; font-size: 13px; background: #fdfcfa; }
table.gap td:first-child, table.gap th:first-child { text-align: left; }
table.gap .lb { background: #fdf1e3; }
table.gap .sig { font-weight: 700; }
table.gap .ci { font-size: 11px; color: var(--muted); }
table.gap tr.set td { background: var(--bg-alt); font-weight: 600; text-align: left; font-size: 13px; }
.tablewrap { overflow-x: auto; }

/* ---------- findings ---------- */
.findings { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.finding { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; }
.finding .fn { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.finding h4 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 4px 0 8px; }
.finding p { font-size: 14.5px; color: var(--ink-2); }
.quote { margin-top: auto; border-left: 3px solid var(--pc); background: var(--bg); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 13.5px; font-family: var(--serif); color: var(--ink); }
.quote .src { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.quote .src a { cursor: pointer; }
.big { font-family: var(--serif); font-weight: 600; color: var(--ink); }

/* ---------- cite ---------- */
pre.bib { background: #1c2230; color: #e8e6df; padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; font-size: 13px; line-height: 1.55; position: relative; }
.copy { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: var(--sans); }
footer { padding: 34px 0 50px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .stage { grid-template-columns: 1fr; }
  .parties { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .parties .party { min-width: 230px; scroll-snap-align: start; }
  .tldr, .defbox, .two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .nav-links { gap: 12px; font-size: 13px; }
  .nav-links .hide-sm { display: none; }
  section { padding: 52px 0 28px; }
  h2 { font-size: 27px; }
  .steps, .roles, .methods, .guidance, .findings, .votes, .assess, .issue-list { grid-template-columns: 1fr; }
  .deal { grid-template-columns: 1fr 1fr; }
  .deal .ih { grid-column: 1 / -1; padding-bottom: 0; }
  .view { padding: 14px 14px 18px; }
  .toggle { margin-left: 0; }
  .traj { overflow-x: auto; }
  #trajChart { min-width: 640px; }
  .timeline { min-width: 100%; order: 5; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- animated hero figure ---------- */
.hero-anim { margin: 40px auto 0; max-width: 1040px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px 12px; box-shadow: var(--shadow); }
.ha-svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.ha-status { font-family: var(--serif); font-size: 26px; font-weight: 600; fill: var(--ink); }
.ha-sub { font-size: 14px; fill: var(--muted); }
.ha-title { font-size: 17px; font-weight: 700; fill: var(--ink); }
.ha-small { font-size: 12px; fill: var(--muted); }
.ha-label { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.ha-ph { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.ha-num { font-size: 11.5px; fill: var(--muted); font-family: var(--mono); }
.ha-beta { font-family: var(--serif); font-style: italic; font-size: 26px; font-weight: 600; }
.ha-dot { fill: #fff; stroke: #1c2230; stroke-width: 1.3; transition: fill .3s, r .3s; }
.ha-dot.on { r: 5.6; }
.ha-bar { transform-box: fill-box; transform-origin: left center; transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
.ha-pie { transition: stroke-dasharray .7s ease, stroke .4s; }
.ha-arrow { stroke: #a3a8b2; stroke-width: 1.6; fill: none; stroke-dasharray: 6 5; transition: stroke .3s; }
.ha-arrow.flow { animation: haFlow .6s linear infinite; stroke: #6a7282; }
.ha-arrow.acc { stroke: #2f8a57; }
.ha-arrow.rej { stroke: #c0392b; }
@keyframes haFlow { to { stroke-dashoffset: -11; } }
.ha-ring { fill: none; stroke-width: 3; opacity: 0; transition: opacity .3s; }
.ha-ring.on { opacity: .9; animation: haPulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes haPulse { 50% { transform: scale(1.08); opacity: .45; } }
.ha-badge { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.6,1); }
.ha-badge.show { opacity: 1; transform: scale(1); }
.ha-badgetxt { font-size: 20px; font-weight: 700; fill: #fff; }
.ha-badgetrust { font-size: 11.5px; font-family: var(--mono); font-weight: 600; }
.ha-think { opacity: 0; transition: opacity .35s; }
.ha-think.show { opacity: 1; }
.ha-thinktxt { font-size: 12.5px; font-style: italic; fill: var(--ink-2); }
.ha-fade { opacity: 0; transition: opacity .3s; }
.ha-fade.show { opacity: 1; }
.ha-slot { fill: #fff; stroke: #b9bec8; stroke-width: 1.2; stroke-dasharray: 3 2; transition: fill .25s; }
.ha-slot.a { fill: #2f8a57; stroke: #2f8a57; stroke-dasharray: none; }
.ha-slot.r { fill: #c0392b; stroke: #c0392b; stroke-dasharray: none; }
.ha-slotmark { font-size: 13px; font-weight: 700; fill: #fff; }
.ha-stamp { opacity: 0; transition: opacity .3s; }
.ha-stamp text { font-size: 15px; font-weight: 700; letter-spacing: .04em; fill: #fff; }
.ha-stamp.show { opacity: 1; }
.ha-stamp.pass rect { fill: #2f8a57; }
.ha-stamp.fail rect { fill: #c0392b; }
.ha-upd { opacity: .35; transition: opacity .4s; }
.ha-upd.show { opacity: 1; }
.ha-pill { opacity: .55; transition: opacity .25s; }
.ha-pill.on { opacity: 1; }
.ha-panel rect:first-child { transition: stroke .3s, stroke-width .3s; }
.ha-panel .glow { stroke: #2e4a9e; stroke-width: 2.4; }
.ha-doc { pointer-events: none; }
.ha-steps { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 4px; }
.ha-steps span { font-size: 13px; color: var(--muted); padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); display: inline-flex; gap: 7px; align-items: center; transition: all .25s; }
.ha-steps span b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--line); color: var(--ink-2); }
.ha-steps span.on { color: #fff; background: var(--ink); border-color: var(--ink); }
.ha-steps span.on b { background: #fff; color: var(--ink); }
.ha-btn { margin-left: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; width: 32px; height: 32px; cursor: pointer; font-size: 12px; color: var(--ink); }
.ha-paused .ha-arrow.flow, .ha-paused .ha-ring.on { animation-play-state: paused; }
@media (max-width: 760px) { .ha-steps span { font-size: 12px; } .hero-anim { padding: 4px; } }

/* ---------- tl;dr: a real near miss ---------- */
.ex-src { font-size: 14px; color: var(--muted); margin: -4px 0 18px; }
.ex { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1.1fr; gap: 10px; align-items: stretch; }
.ex-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 7px; }
.ex-arrow { align-self: center; font-size: 22px; color: var(--muted); }
.ex-h { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.ex-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-family: var(--mono); flex: none; }
.ex-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.ex-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 6px; vertical-align: middle; }
.ex-nm { font-size: 13px; width: 96px; flex: none; }
.ex-nm em { font-style: normal; font-size: 11px; color: var(--muted); display: block; line-height: 1; }
.ex-trow, .ex-vrow { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ex-tbar, .ex-ubar { position: relative; flex: 1; height: 10px; border-radius: 5px; background: #eceef2; min-width: 40px; }
.ex-tbar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: #c0392b; }
.ex-tv, .ex-uv { font-family: var(--mono); font-size: 12.5px; font-weight: 600; width: 38px; text-align: right; flex: none; }
.ex-tv { color: #c0392b; }
.ex-uv { width: 62px; }
.ex-uv small { font-weight: 400; color: var(--muted); font-size: 10.5px; }
.ex-ubar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: #c9ccd3; }
.ex-ubar.ok i { background: #7fbf9a; }
.ex-beta { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.ex-tok { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.ex-tok.a { background: #2f8a57; }
.ex-tok.r { background: #c0392b; }
.ex-vrow.hold { background: #fff6e0; border-radius: 8px; margin: 0 -6px; padding: 3px 6px; }
.ex-res { margin-top: auto; align-self: center; background: #c0392b; color: #fff; font-weight: 700; font-size: 13.5px; border-radius: 999px; padding: 5px 14px; }
.ex-q { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin-top: 4px; }
.ex-q .ex-dot { margin-top: -2px; }
.ex-card { border-radius: 10px; padding: 9px 11px; font-size: 13px; }
.ex-card.hold { background: #fff6e0; border: 1px solid #f0d58f; }
.ex-card.adv { background: #fff1ee; border: 1px solid #eba59b; }
.ex-pill { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; background: #eceef2; color: var(--ink-2); margin: 2px 0; }
.ex-pill.hi { background: #2f8a57; color: #fff; }
.ex-pill.lo { background: #c0392b; color: #fff; }
.ex-foot { margin-top: auto; font-size: 12.5px; color: var(--muted); }
.stats.stats4 { grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
@media (max-width: 980px) {
  .ex { grid-template-columns: 1fr; }
  .ex-arrow { transform: rotate(90deg); justify-self: center; line-height: 1; }
  .stats.stats4 { grid-template-columns: 1fr 1fr; }
}
.ex-vs { font-size: 12.5px; color: var(--muted); padding-left: 16px; }
.ex-vs b { color: #2f8a57; font-family: var(--mono); }
/* stat tiles: green = what works (trust forms), red = the gap */
.stat.pos { border: 1.5px solid #8cc7a4; border-top: 5px solid #2f8a57; background: #f2faf5; }
.stat.pos .v { color: #2f8a57; }
.stat.neg { border: 1.5px solid #e8b0a8; border-top: 5px solid #c0392b; background: #fdf4f2; }
.stat.neg .v { color: #b03a2e; }
.ex-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- section 01 as visuals ---------- */
#game .hb-root { margin-top: 22px; }
.rules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 26px 0 6px; }
.rule { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.rv { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; }
.rl { font-size: 13px; color: var(--muted); margin-top: 4px; }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.whocard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.whocard svg { width: 92px; height: 92px; flex: none; }
.whocard .tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.wl { font-size: 15px; margin-top: 6px; color: var(--ink); }
.wb { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 16px; fill: #1c2230; }
.wtok { font-size: 26px; font-weight: 800; }
.wtok.ok { fill: #2f8a57; } .wtok.hold { fill: #4a73b8; }
.loop { display: flex; align-items: stretch; gap: 8px; }
.lstep { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 10px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.lstep svg { width: 110px; height: 76px; }
.ll { font-weight: 700; font-size: 15px; margin-top: 6px; }
.ls { font-size: 12.5px; color: var(--muted); }
.larrow { align-self: center; font-size: 22px; color: var(--muted); }
.lchips { display: flex; flex-direction: column; gap: 5px; align-items: center; height: 76px; justify-content: center; }
.chip2 { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 12px; border: 1.5px solid; }
.chip2.brs { color: var(--brs); border-color: var(--brs); background: #f6eef4; }
.chip2.rubric { color: var(--rubric); border-color: var(--rubric); background: #eef2f9; }
.chip2.ff { color: #2f7a46; border-color: var(--ff); background: #eef7f0; }
.lbars { display: flex; flex-direction: column; gap: 7px; width: 110px; height: 76px; justify-content: center; }
.lbars span { height: 9px; border-radius: 5px; background: #eceef2; position: relative; }
.lbars i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.g2 { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.g2 b { display: block; font-size: 15px; }
.g2 span:not(.gk) { font-size: 13px; color: var(--muted); }
.gk { flex: none; min-width: 52px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 14px; background: #eceef2; color: var(--ink); padding: 0 8px; }
.gk.p { background: #4a73b8; color: #fff; }
.gk.r { background: #1c2230; color: #fff; }
.gapviz { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; }
.gapviz svg { width: 100%; height: auto; font-family: var(--sans); }
.gvl { font-family: var(--mono); font-weight: 700; font-size: 15px; fill: #1c2230; }
.gvd { font-size: 14px; font-weight: 700; fill: #c0392b; }
.gvs { font-size: 13px; fill: #6a7282; }
.gapcap { font-size: 15.5px; color: var(--ink-2); }
.gapcap b { display: block; font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 4px; }
@media (max-width: 860px) {
  .rules { grid-template-columns: repeat(3, 1fr); }
  .who, .guides, .gapviz { grid-template-columns: 1fr; }
  .loop { display: grid; grid-template-columns: 1fr 1fr; }
  .larrow { display: none; }
}
#game .lede { max-width: none; }

/* ---- compact replay (2026-10-21): parties on top, setup in a dialog, one screen per round ---- */
.setup-btn { margin-left: auto; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.setup-btn:hover { border-color: var(--ink); }
.setup-btn + .toggle { margin-left: 8px; }
.setup-dlg { width: min(980px, calc(100% - 32px)); max-height: 86vh; border: none; border-radius: var(--radius); padding: 22px 24px 18px; box-shadow: 0 20px 60px rgba(28,34,48,.3); color: var(--ink); }
.setup-dlg::backdrop { background: rgba(28,34,48,.45); }
.setup-dlg h3 { margin: 0 32px 4px 0; font-size: 22px; }
.setup-dlg .traj { margin: 14px 0 0; }
.dlg-x { position: sticky; top: 0; float: right; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-size: 14px; z-index: 2; }
#replay .stage { grid-template-columns: 1fr; gap: 10px; }
#replay .parties { position: static; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 0; }
#replay .party { min-width: 0; padding: 7px 9px 7px 10px; }
#replay .party .row1 { gap: 6px; }
#replay .party .avatar { min-width: 26px; height: 24px; font-size: 9px; border-radius: 6px; }
#replay .party .pinfo { min-width: 0; }
#replay .party .nm { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#replay .party .meta { font-size: 10.5px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
#replay .party .tlabel { display: none; }
#replay .trustbars { margin-top: 4px; grid-template-columns: 32px 1fr 26px; gap: 0 5px; font-size: 10px; }
#replay .trustbars .lab, #replay .trustbars .val { font-size: 9.5px; line-height: 1.25; }
#replay .trustbars .bar { height: 4px; }
#replay .party .meta .rtag { font-size: 9.5px; padding: 0 5px; }
#replay .replay-head { margin: 12px 0 10px; }
#replay .tl { height: 24px; }
#replay .tl.na { flex: .6; }
#replay .view { min-height: 0; padding: 12px 16px 16px; }
#replay .controls { padding: 8px 14px; }
.rhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rhead h3 { font-size: 19px; }
.rhead .tally { margin: 0; padding: 5px 10px; }
.rhead .slot { width: 22px; height: 22px; font-size: 12px; }
.rbody { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; margin-top: 8px; align-items: start; }
.rbody .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
.pkg { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; }
.pk { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.25; position: relative; }
.pk-i { font-size: 9.5px; line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pk-o { background: var(--pc); color: #fff; border-radius: 6px; padding: 3px 8px; padding-right: 30px; }
.pk .sc { display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 8px; color: #fff; font-family: var(--mono); font-size: 10px; }
.private .pk .sc { display: block; }
#replay .speech { padding: 8px 12px; font-size: 13.5px; margin-bottom: 6px; }
#replay .speech .who { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
#replay .privnote { padding: 6px 12px; font-size: 12.5px; margin-bottom: 6px; }
#replay .privnote .lk { font-size: 10px; }
#replay .votes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 0; }
#replay .rprop .privnote { max-height: 150px; overflow-y: auto; }
#replay .vote { padding: 8px 10px; border-top: 3px solid var(--pc); }
#replay .vote .vh { gap: 6px; margin-bottom: 4px; }
#replay .vote .vh .nm { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vdot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex: none; }
#replay .verdict { font-size: 10.5px; padding: 2px 6px; white-space: nowrap; }
.vmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; align-items: center; }
#replay .vmeta .util { margin: 0; font-family: var(--mono); font-size: 10.5px; }
#replay .vmeta .util.ok { color: var(--accept); }
#replay .vmeta .util.no { color: var(--reject); }
#replay .vote .pub { font-size: 12.5px; line-height: 1.4; }
#replay .vote .privnote { margin: 6px 0 0; padding: 5px 8px; font-size: 12px; max-height: 84px; overflow-y: auto; }
@media (max-width: 980px) {
  .rbody { grid-template-columns: 1fr; }
  #replay .party .meta { display: none; }
}
@media (max-width: 760px) {
  #replay .parties { gap: 4px; }
  #replay .party { padding: 5px 5px 5px 6px; border-left-width: 3px; }
  #replay .party .pinfo { display: none; }
  #replay .party .row1 { justify-content: center; }
  #replay .trustbars { grid-template-columns: 1fr; gap: 3px; }
  #replay .trustbars .lab, #replay .trustbars .val { display: none; }
  .pk { grid-template-columns: 96px 1fr; }
  #replay .votes { grid-template-columns: 1fr; }
  .setup-btn { margin-left: 0; }
  .setup-dlg { padding: 16px 14px; }
}
#replay .speech { font-size: 12.5px; line-height: 1.45; }
#replay .vote .pub { font-size: 12px; line-height: 1.38; }
#replay .vote .privnote { max-height: 72px; font-size: 11.5px; }
#replay .rprop .privnote { font-size: 11.5px; max-height: 130px; }
.pk-o { font-size: 12px; }
#replay .vote .vh { margin-bottom: 3px; }
.vmeta { margin-bottom: 3px; }
#replay .view h3 { margin: 0; }
#replay .party .meta { gap: 4px; }
.rbody { margin-top: 0; }
.rbody .lbl { min-height: 28px; display: flex; align-items: center; margin-bottom: 6px; }
.rbody .lbl.rt { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.rbody .lbl.rt span { margin: 0 .3em; }
.rbody .lbl.vt { justify-content: space-between; }
.rbody .lbl.vt .tally { margin: 0; padding: 3px 8px; gap: 8px; text-transform: none; letter-spacing: 0; }
.rbody .lbl.vt .slot { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; }
.rbody .lbl.vt .res { font-size: 13px; }
#replay .vote .privnote { max-height: 62px; }
#replay .wrap { max-width: 1320px; }
.rbody .lbl.rt { display: block; min-height: 0; line-height: 1.3; padding-top: 4px; }
.rbody .lbl.rt span { margin: 0; }
@media (max-width: 980px) { .rbody { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { #replay .votes { grid-template-columns: minmax(0, 1fr); } }
/* proposal as option codes */
.pkg { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.pk { display: inline-flex; align-items: center; gap: 5px; background: var(--pc); color: #fff; font-family: var(--mono); font-size: 13px; font-weight: 600; border-radius: 6px; padding: 4px 9px; cursor: help; }
.pk .sc { position: static; transform: none; font-size: 10px; font-weight: 400; opacity: .85; }
#replay .vote { transition: opacity .6s, transform .6s; }
@media (min-width: 981px) { .rbody { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); } }
/* key moments */
.moment { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-radius: 10px; padding: 7px 12px; margin: 0 0 10px; font-size: 13px; line-height: 1.4; }
.moment .mt { font-weight: 700; white-space: nowrap; }
.moment.good { background: #eef7f1; color: #1f5e3a; border: 1px solid #b9dcc8; }
.moment.gap { background: #fdeeee; color: #8e2318; border: 1.5px solid #e59a90; }
.moment.deal { background: #eef3fb; color: #22346f; border: 1px solid #c4d2ee; }
#replay .vote.hl { box-shadow: 0 0 0 3px #f5c542, 0 6px 18px rgba(201,150,28,.25); }
#replay .vote.hl-gap { animation: hlpulse 1.6s ease-in-out 3; }
@keyframes hlpulse { 50% { box-shadow: 0 0 0 6px #f5c542, 0 6px 22px rgba(201,150,28,.4); } }
.hl-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: #6b4e00; background: #fff3c4; border-radius: 999px; padding: 1px 8px; margin-bottom: 4px; }
.tl.key::after { content: "★"; position: absolute; top: -10px; right: -4px; font-size: 15px; line-height: 1; color: #d9a514; text-shadow: 0 0 2px #fff; }
.tl.key-gap::after { color: var(--reject); }
.moment { display: block; margin: 6px 0 8px; }
.moment .mt { display: block; }
.hl-badge { margin: 0; }
/* stronger highlights + score vs BATNA on every card (2026-10-21) */
#replay .vmeta .util { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid; }
#replay .vmeta .util.ok { color: var(--accept); border-color: #b9dcc8; background: #f3faf6; }
#replay .vmeta .util.no { color: var(--reject); border-color: #efc5bf; background: #fff7f6; }
.star-key { font-size: 1.15em; }
.star-key.gap { color: var(--reject); }
.star-key.good { color: var(--accept); }
.star-key.deal { color: #3b5bb5; }
.moment { border: none !important; color: #fff !important; padding: 9px 12px; box-shadow: 0 4px 14px rgba(28,34,48,.15); }
.moment .mt { font-size: 15px; margin-bottom: 2px; }
.moment .mx { font-size: 12.5px; opacity: .95; }
.moment.gap { background: var(--reject); }
.moment.good { background: var(--accept); }
.moment.deal { background: #3b5bb5; }
#replay .vote.dim { opacity: .45; filter: saturate(.5); }
#replay .vote.dim.show { opacity: .45; }
#replay .vote.hl { border: 2.5px solid; transform: scale(1.015); z-index: 1; position: relative; }
#replay .vote.hl-gap { border-color: var(--reject); box-shadow: 0 0 0 4px rgba(192,57,43,.22), 0 8px 22px rgba(192,57,43,.25); animation: hlpulse-gap 1.4s ease-in-out 4; }
#replay .vote.hl-good { border-color: var(--accept); box-shadow: 0 0 0 4px rgba(47,138,87,.2), 0 8px 22px rgba(47,138,87,.2); }
@keyframes hlpulse-gap { 50% { box-shadow: 0 0 0 9px rgba(192,57,43,.28), 0 8px 26px rgba(192,57,43,.35); } }
.hl-badge { font-size: 11px; padding: 2px 9px; color: #fff; }
.hl-gap .hl-badge { background: var(--reject); }
.hl-good .hl-badge { background: var(--accept); }
.tl.key::after { font-size: 17px; top: -12px; right: -5px; }
.tl.key-good::after { color: var(--accept); }
.tl.key-gap { box-shadow: 0 0 0 2px var(--reject); font-weight: 700; }
.tl.key-gap::after { color: var(--reject); }
.tl.key-deal::after { color: #3b5bb5; }
.rstart { min-height: 380px; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; }
.rstart-btn { font: inherit; font-size: 20px; font-weight: 700; color: #fff; background: var(--ink); border: none; border-radius: 999px; padding: 14px 30px; cursor: pointer; box-shadow: 0 8px 22px rgba(28,34,48,.22); transition: transform .15s; }
.rstart-btn:hover { transform: scale(1.04); }
.rstart-sub { font-size: 13px; color: var(--muted); }
.tl.unseen { background: #fff; color: var(--muted); border-color: var(--line-2); }
#replay .lede { max-width: none; }
.star-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -6px 0 6px; font-size: 14px; color: var(--ink-2); }
.star-legend span { display: inline-flex; align-items: center; gap: 6px; }
.star-key { font-style: normal; font-size: 17px; line-height: 1; }
.star-key.sk-gap { color: var(--reject); }
.star-key.sk-good { color: var(--accept); }
.star-key.sk-deal { color: #3b5bb5; }
/* game picker (full trajectory) */
.game-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 10px; }
.gp-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-right: 4px; }
.gp { position: relative; width: 34px; height: 30px; border-radius: 7px; font: 600 12.5px var(--mono); cursor: pointer; border: 1.5px solid; padding: 0; }
.gp.gp-deal { background: #eaf5ee; border-color: #9fd0b2; color: #1f5e3a; }
.gp.gp-nodeal { background: #fff; border-color: #e5aaa2; color: var(--reject); }
.gp.cur { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 3px 10px rgba(28,34,48,.25); }
.gp.key::after { content: "★"; position: absolute; top: -9px; right: -6px; font-size: 13px; line-height: 1; color: var(--reject); text-shadow: 0 0 2px #fff; }
.gp-key { margin-left: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.gp-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid; margin-left: 6px; }
.gp-sw.gp-deal { background: #eaf5ee; border-color: #9fd0b2; }
.gp-sw.gp-nodeal { background: #fff; border-color: #e5aaa2; }
.gp-key .star-key { font-size: 13px; margin-left: 6px; }
@media (max-width: 760px) { .gp { width: 30px; height: 28px; font-size: 11.5px; } .gp-key { margin-left: 0; } }
#replay .replay-head { flex-wrap: wrap; }
#replay .game-pick { margin: 0; gap: 4px; }
#replay .gp { width: 32px; height: 28px; }
.sl-games { margin-left: auto; color: var(--muted); font-size: 13px; }
.sl-games .gp-sw { margin: 0 2px 0 8px; vertical-align: -1px; }
.sl-games .star-key { font-size: 13px; margin-left: 8px; }
@media (max-width: 980px) { .sl-games { margin-left: 0; } }
/* tidy replay header (2026-10-21) */
#replay .replay-head { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 12px; margin: 22px 0 22px; }
.gp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gp-top .setup-btn { margin-left: 0; }
.blk-lab { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
#replay .game-pick { gap: 6px; }
#replay .gp { width: 40px; height: 32px; font-size: 13px; }
.gp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.gp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gp-legend .gp-sw { margin: 0; }
.gp-legend .star-key { font-size: 14px; }
#replay .stage { gap: 0; }
#partiesLab { margin: 0 0 8px; }
#replay .parties { margin-bottom: 22px; }
#replay .controls .toggle { margin-left: 6px; font-size: 13px; white-space: nowrap; }
.round-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 16px; border-bottom: 1px solid var(--line); background: #fdfcfa; font-size: 12px; color: var(--muted); align-items: center; }
.round-legend span { display: inline-flex; align-items: center; gap: 5px; }
.round-legend .rl-lab { font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; }
.round-legend .star-key { font-size: 13px; }
@media (max-width: 760px) { #replay .gp { width: 34px; height: 30px; } #replay .controls .toggle { margin-left: 0; } }
/* highlighted findings (results) */
.hl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.hl-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; border-top: 5px solid var(--reject); box-shadow: var(--shadow); }
.hl-card.pos { border-top-color: var(--accept); }
.hl-n { position: absolute; top: 14px; right: 16px; font: 700 12px var(--mono); color: var(--muted); }
.hl-card h4 { margin: 0 24px 10px 0; font-size: 17px; line-height: 1.25; }
.hl-viz svg { width: 100%; height: auto; display: block; }
.hl-card p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.hl-big { font: 700 34px var(--serif, Georgia, serif); fill: var(--ink); }
.hl-big.pos { fill: var(--accept); }
.hl-ax { font: 11px var(--sans, system-ui, sans-serif); fill: #6a7282; }
.hl-val { font: 700 15px var(--mono); fill: var(--ink-2); }
.hl-val.pos { fill: var(--accept); }
.hl-c.sv { fill: #2f8a57; } .hl-c.sv2 { fill: #8cc7a4; } .hl-c.fl { fill: #f0c4bd; }
.hl-k.sv { fill: #2f8a57; } .hl-k.fl { fill: #e8a59b; }
.hl-d { fill: #d7dbe2; } .hl-d.on { fill: var(--reject); }
@media (max-width: 1100px) { .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hl-grid { grid-template-columns: 1fr; } }
.hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hl-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; align-items: center; padding: 20px 22px; }
.hl-card h4 { grid-column: 1 / -1; font-size: 19px; margin-bottom: 8px; }
.hl-card .hl-viz { grid-column: 1; }
.hl-card p { grid-column: 2; margin: 0; font-size: 14.5px; }
#results .lede { max-width: none; }
@media (max-width: 760px) { .hl-grid { grid-template-columns: 1fr; } .hl-card { grid-template-columns: 1fr; } .hl-card p { grid-column: 1; margin-top: 10px; } }
/* results scorecard */
#scorecard { margin-top: 18px; }
table.sc { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 13.5px; box-shadow: var(--shadow); }
table.sc th, table.sc td { padding: 8px 10px; text-align: center; border-bottom: 1px solid #efece5; }
table.sc thead th { font-size: 12px; font-weight: 600; color: var(--ink-2); background: #fbfaf7; line-height: 1.25; }
table.sc thead small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; }
table.sc .sc-m { font: 700 14px var(--mono); color: var(--ink); border-bottom: 2px solid var(--line-2); }
table.sc .sc-m + .sc-m, table.sc tbody td.sc-det { border-left: 1px solid var(--line-2); }
table.sc .sc-g { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--ink); background: #fbfaf7; width: 108px; border-right: 1px solid #efece5; }
table.sc .sc-c { text-align: left; font-weight: 500; color: var(--ink-2); white-space: nowrap; font-size: 13px; }
table.sc tr.gstart > * { border-top: 1.5px solid var(--line-2); }
table.sc tr.base .sc-c { color: var(--muted); }
td.sc-ag { font-family: var(--mono); white-space: nowrap; }
td.sc-ag b { font-weight: 500; }
td.sc-ag.best b { font-weight: 800; }
td.sc-ag.dark { color: #fff; }
.sc-d { display: inline-block; margin-left: 6px; font-size: 10.5px; opacity: .85; }
td.sc-det { font-family: var(--mono); white-space: nowrap; text-align: left !important; }
td.sc-det b { font-weight: 600; font-size: 12.5px; margin-left: 6px; }
td.sc-det.na { color: #c7cbd3; text-align: center !important; }
.sc-bar { display: inline-block; width: 56px; height: 7px; border-radius: 4px; background: #eceef2; overflow: hidden; vertical-align: middle; }
.sc-bar i { display: block; height: 100%; background: #2f8a57; border-radius: 4px; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); align-items: center; }
.sc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sc-sw { display: inline-block; width: 14px; height: 12px; border-radius: 3px; }
.gs-title { margin: 34px 0 10px; font-size: 18px; }
table.gs { max-width: 860px; }
table.gs td { width: 40%; }
.gs-row { display: flex; align-items: center; gap: 12px; }
.gs-track { position: relative; flex: 1; height: 10px; background: #eceef2; border-radius: 5px; }
.gs-track i { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.gs-a, .gs-dot.a { width: 12px; height: 12px; border-radius: 50%; background: #9aa0aa; z-index: 2; }
.gs-b, .gs-dot.b { width: 12px; height: 12px; border-radius: 50%; background: #2f8a57; z-index: 2; }
.gs-line { height: 4px; transform: translateY(-50%) !important; background: #8cc7a4; z-index: 1; }
.gs-dot { display: inline-block; }
.gs-n { font: 12.5px var(--mono); white-space: nowrap; color: var(--muted); min-width: 120px; text-align: left; }
.gs-n b { color: var(--muted); }
.gs-n.sig b { color: var(--accept); }
.sig-k { color: var(--accept); }
@media (max-width: 760px) { table.sc { font-size: 12px; } table.sc th, table.sc td { padding: 6px 6px; } .sc-bar { width: 36px; } .gs-n { min-width: 0; } }
@media (max-width: 760px) { table.sc { min-width: 760px; } table.gs { min-width: 560px; } }
/* results story */
#story { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 28px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow); }
.st-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font: 700 13px var(--mono); margin-bottom: 10px; }
.st-n.pos { background: var(--accept); } .st-n.neg { background: var(--reject); }
.st-txt h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.st-txt p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.st-viz svg { width: 100%; height: auto; display: block; }
.st-cap { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: center; }
.st-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; justify-content: center; }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.st-t { font-family: var(--sans, system-ui, sans-serif); }
.st-ax { font-size: 11.5px; fill: #6a7282; }
.st-ax2 { font-size: 12.5px; fill: var(--ink-2); }
.st-lab { font-size: 13px; font-weight: 700; }
.st-mono { font-family: var(--mono); fill: var(--ink); }
.st-val { font: 700 13px var(--mono); fill: var(--ink-2); }
.st-big { font: 700 14px var(--mono); fill: #6a7282; }
.st-big.pos { fill: var(--accept); }
.st-grid { stroke: #ece8df; }
.st-chance { stroke: #c0392b; stroke-dasharray: 4 4; opacity: .6; }
.st-rng { stroke: #d9dce3; stroke-width: 4; stroke-linecap: round; }
.st-sep { stroke: #e4dfd4; }
@media (max-width: 860px) { .st-row { grid-template-columns: 1fr; padding: 18px; gap: 14px; } }
#replay .rbody { position: relative; } #replay .rprop, #replay .vote { will-change: transform; }
#replay .board { overflow: visible; }
#replay .board .controls { border-radius: var(--radius) var(--radius) 0 0; }
#replay .rprop, #replay .vote { position: relative; z-index: 3; }
/* proposer vs voter distinction */
#replay .party { position: relative; }
.ptag { position: absolute; top: -10px; right: 8px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; line-height: 1.4; white-space: nowrap; z-index: 2; }
.ptag.prop { background: var(--pc); color: #fff; box-shadow: 0 2px 8px rgba(28,34,48,.25); }
.ptag.voter { background: #fff; color: var(--muted); border: 1px solid var(--line-2); }
.ptag.voter.acc { background: var(--accept); border-color: var(--accept); color: #fff; }
.ptag.voter.rej { background: var(--reject); border-color: var(--reject); color: #fff; }
#replay .party.active { background: color-mix(in srgb, var(--pc) 10%, #fff); box-shadow: 0 0 0 3px var(--pc), 0 8px 20px rgba(28,34,48,.12); transform: translateY(-2px); }
#replay .party.voter { opacity: .92; }
#replay .rprop { background: color-mix(in srgb, var(--pc) 7%, #fff); border: 1.5px solid color-mix(in srgb, var(--pc) 45%, #fff); border-left: 6px solid var(--pc); border-radius: 12px; padding: 10px 14px 12px; }
#replay .rprop .speech { background: rgba(255,255,255,.75); }
.rp-ico { margin-right: 2px; }
.rbody .lbl.vt > span:first-child { font-size: 11px; }
@media (max-width: 760px) { .ptag { font-size: 8.5px; padding: 1px 5px; right: 2px; top: -9px; } }

/* UMass Amherst logo next to the affiliation (figures/umass-logo.svg or .png) */
.affil { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.affil-logo { display: inline-flex; }
.affil-logo img { height: 40px; width: auto; display: block; }

/* author names link to their homepages */
.authors a { white-space: nowrap; color: var(--accent); text-decoration: underline; text-decoration-color: rgba(46, 74, 158, .35); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .15s; }
.authors a:hover { text-decoration-color: currentColor; }