/* Coalition in 3D (/election-2026/coalition-3d/): a dark stage with the WebGL chamber, glass controls over it,
   and a control rail beside it. The rest of the page stays on the site's paper. */
.c3d {
  --s-bg: #0b1315; --s-fg: #eef3ef; --s-soft: #93a8a0; --s-mute: #c4d2cc; --s-line: rgba(255, 255, 255, .09);
  --s-glass: rgba(10, 18, 20, .62); --s-gold: #f0c04a; --s-fern: #8cc4a6; --s-aye: #7dffb4; --s-no: #ff8a7e;
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 384px;
  height: calc(100svh - 69px); min-height: 660px; max-height: 1040px;
  background: var(--s-bg); color: var(--s-fg); color-scheme: dark;
}
.c3d button { font-family: var(--font-body); cursor: pointer; }
.c3d button:disabled { cursor: not-allowed; }
.c3d :focus-visible { outline: 2px solid var(--s-gold); outline-offset: 2px; }
.c3d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Stage ---------- */
.c3d-stage { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(90% 70% at 50% 55%, #13211f 0%, var(--s-bg) 70%); }
.c3d-view { position: absolute; inset: 0; }
.c3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; outline: none; }
.c3d-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11, 19, 21, .92) 0, rgba(11, 19, 21, .55) 14%, rgba(11, 19, 21, 0) 34%),
    linear-gradient(to top, rgba(11, 19, 21, .9) 0, rgba(11, 19, 21, 0) 30%),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(4, 8, 9, .5) 100%);
}
.c3d-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }

.c3d-head { position: absolute; z-index: 3; top: 26px; left: 32px; right: 32px; max-width: 600px; pointer-events: none; }
.c3d-head a, .c3d-head button { pointer-events: auto; }
.c3d-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 11px/1 var(--font-data); letter-spacing: .16em; text-transform: uppercase; color: var(--s-soft); }
.c3d-kicker a { color: var(--s-fern); text-decoration: none; }
.c3d-kicker a:hover { color: #fff; }
.c3d-kicker span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: var(--s-gold); vertical-align: middle; box-shadow: 0 0 10px var(--s-gold); }
.c3d h1 { font: 500 clamp(1.9rem, 2.9vw, 2.75rem)/1.04 var(--font-display); letter-spacing: -.022em; color: #fff; margin: 0; max-width: 22ch; text-wrap: balance; }
.c3d-lede { margin: 12px 0 0; font-size: .95rem; line-height: 1.5; color: var(--s-mute); max-width: 50ch; text-wrap: pretty; }

.c3d-scen { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.c3d-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 13px 4px 4px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(14, 24, 27, .66); color: var(--s-fg);
  font: 600 12.5px/1 var(--font-body); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s, transform .2s, color .2s;
}
.c3d-pill:hover { border-color: rgba(255, 255, 255, .35); transform: translateY(-1px); }
.c3d-pill-n { min-width: 32px; padding: 6px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 500 11.5px/1 var(--font-data); text-align: center; font-variant-numeric: tabular-nums; }
.c3d-pill.yes .c3d-pill-n { background: rgba(240, 192, 74, .18); color: var(--s-gold); box-shadow: inset 0 0 0 1px rgba(240, 192, 74, .45); }
.c3d-pill.no .c3d-pill-n { color: var(--s-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); background: transparent; }
.c3d-pill[aria-pressed="true"] { background: #eef3ef; color: #0d1719; border-color: #eef3ef; box-shadow: 0 10px 34px -12px rgba(238, 243, 239, .55); }
.c3d-pill[aria-pressed="true"] .c3d-pill-n { background: #0d1719; color: #fff; box-shadow: none; }
.c3d-pill.yes[aria-pressed="true"] .c3d-pill-n { background: var(--s-gold); color: #1b1607; }
.c3d-pill.custom { border-style: dashed; }

.c3d-readout { position: absolute; z-index: 3; left: 32px; bottom: 86px; pointer-events: none; max-width: min(420px, 60%); }
.c3d-name { margin: 0 0 6px; font: 500 11px/1.2 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--s-soft); }
.c3d-big { margin: 0; display: flex; align-items: baseline; gap: 12px; font: 500 clamp(3.6rem, 6.4vw, 6rem)/.86 var(--font-display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.c3d-of { font: 500 1rem/1 var(--font-body); letter-spacing: 0; color: var(--s-soft); }
.c3d-meter { position: relative; width: min(320px, 100%); height: 6px; margin: 16px 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.c3d-meter-fill, .c3d-meter-sup { position: absolute; top: 0; bottom: 0; border-radius: 99px; transition: width .7s cubic-bezier(.65, 0, .35, 1), left .7s cubic-bezier(.65, 0, .35, 1); }
.c3d-meter-fill { left: 0; background: linear-gradient(90deg, #b58a22, var(--s-gold)); box-shadow: 0 0 16px rgba(240, 192, 74, .55); }
.c3d-meter-sup { background: var(--s-fern); border-radius: 0 99px 99px 0; }
.c3d-meter-maj { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: #fff; border-radius: 2px; box-shadow: 0 0 10px #fff; transition: left .7s; }
.c3d-verdict { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--s-mute); max-width: 36ch; }
.c3d-verdict.yes { color: #fff; }
.c3d-verdict.yes::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--s-gold); box-shadow: 0 0 10px var(--s-gold); vertical-align: 1px; }
.c3d-verdict.no::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; border: 1.5px solid var(--s-soft); vertical-align: 0; }

.c3d-tools { position: absolute; z-index: 3; left: 32px; right: 220px; bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.c3d-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.c3d-seg button { padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--s-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.c3d-seg button:hover { color: #fff; }
.c3d-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .13); color: #fff; }
.c3d-act { padding: 9px 16px; border: 0; border-radius: 999px; background: var(--s-gold); color: #1b1607; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 1px rgba(240, 192, 74, .5), 0 10px 30px -10px rgba(240, 192, 74, .75); transition: transform .2s, opacity .2s; }
.c3d-act:hover:not(:disabled) { transform: translateY(-1px); }
.c3d-act:disabled { opacity: .35; box-shadow: none; }
.c3d-act.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.c3d-act.ghost[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--s-gold); color: var(--s-gold); }
.c3d-hint { position: absolute; z-index: 3; right: 24px; bottom: 32px; margin: 0; font: 500 10.5px/1.3 var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: rgba(147, 168, 160, .75); text-align: right; max-width: 190px; pointer-events: none; }

.c3d-board { position: absolute; z-index: 4; top: 28px; right: 24px; width: 268px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--s-line); background: rgba(8, 14, 16, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 60px -30px #000; }
.c3d-board[hidden] { display: none; }
.c3d-board-h { margin: 0 0 10px; font: 500 10.5px/1 var(--font-data); letter-spacing: .16em; text-transform: uppercase; color: var(--s-soft); }
.c3d-board-n { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c3d-board-n p { margin: 0; display: grid; }
.c3d-board-n span { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.c3d-board-n p:first-child span { color: var(--s-aye); }
.c3d-board-n p:last-child span { color: var(--s-no); }
.c3d-board-n b { font: 500 2.6rem/1.05 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.c3d-board-s { margin: 10px 0 0; font-size: .86rem; line-height: 1.45; color: var(--s-mute); }
.c3d-board-s strong { color: #fff; }

.c3d-tip { position: absolute; z-index: 5; top: 0; left: 0; width: max-content; max-width: 230px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--s-line); background: rgba(8, 14, 16, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12.5px; line-height: 1.45; color: var(--s-mute); pointer-events: none; box-shadow: 0 20px 40px -20px #000; }
.c3d-tip[hidden] { display: none; }
.c3d-tip p { margin: 0; }
.c3d-tip-h { display: flex; align-items: center; gap: 7px; font-weight: 700; color: #fff; font-size: 13.5px; margin-bottom: 2px !important; }
.c3d-tip-s { color: var(--s-fg); }
.c3d-tip-r { margin-top: 4px !important; font: 500 10px/1.3 var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--s-soft); }

.c3d-label { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .11); background: rgba(8, 15, 17, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 600 11.5px/1.2 var(--font-body); color: var(--s-fg); opacity: 0; transition: opacity .3s, border-color .2s; will-change: transform; }
.c3d-label b { font-weight: 600; }
.c3d-label.hot { border-color: rgba(255, 255, 255, .6); }
.c3d-n { font: 500 11.5px/1 var(--font-data); color: #fff; }
.c3d-ov { font: 500 10px/1 var(--font-data); color: var(--s-gold); }
.c3d-cs { font: 600 9.5px/1 var(--font-data); padding: 3px 5px; border-radius: 5px; background: rgba(140, 196, 166, .18); color: var(--s-fern); letter-spacing: .06em; }
.c3d-label.fixed { padding: 0; border: 0; background: none; backdrop-filter: none; font: 500 10px/1 var(--font-data); letter-spacing: .18em; text-transform: uppercase; color: rgba(238, 243, 239, .5); }
.c3d-label.majority { font: 500 10px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--s-gold); border-color: rgba(240, 192, 74, .45); background: rgba(40, 30, 6, .6); }
.c3d-label.majority b { font-weight: 600; color: #fff; }
.c3d-label.tower { padding: 0; border: 0; background: none; backdrop-filter: none; font: 500 1.05rem/1 var(--font-display); color: var(--s-mute); }
.c3d-label.tower b { color: #fff; font-weight: 600; }
.c3d-sw { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .12); }

.c3d-fallback { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--s-mute); }
.c3d-fallback[hidden] { display: none; }
.c3d.no-webgl .c3d-tools, .c3d.no-webgl .c3d-hint { display: none; }

/* ---------- Rail ---------- */
.c3d-rail { min-width: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 12px; padding: 22px 20px 28px; border-left: 1px solid var(--s-line); background: linear-gradient(180deg, #101b1e 0%, #0c1517 100%); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.c3d-card { padding: 14px 16px 16px; border-radius: 14px; border: 1px solid var(--s-line); background: rgba(255, 255, 255, .025); }
.c3d-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 11px; font: 500 10.5px/1.2 var(--font-data); letter-spacing: .16em; text-transform: uppercase; color: var(--s-soft); }
.c3d-h span { letter-spacing: .06em; color: rgba(147, 168, 160, .7); }
.c3d-select { width: 100%; padding: 10px 34px 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: #0b1416 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2393a8a0' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; color: #fff; font: 500 14px var(--font-body); appearance: none; }
.c3d-note { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--s-soft); }

.c3d-how-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--s-soft); }
.c3d-how ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.c3d-how li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--s-fg); }
.c3d-how li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--s-gold); }

.c3d-parties { list-style: none; margin: 0 -6px; padding: 0; display: grid; }
.c3d-parties li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 9px; transition: background .2s; }
.c3d-parties li + li { box-shadow: 0 -1px 0 var(--s-line); }
.c3d-parties li.hot { background: rgba(255, 255, 255, .05); }
.c3d-pn { min-width: 0; font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.25; }
.c3d-pn small { display: block; font-weight: 400; font-size: 11px; color: var(--s-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c3d-ps { font: 500 15px/1 var(--font-data); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.c3d-ps small { display: block; margin-top: 3px; font-size: 9.5px; color: var(--s-gold); }
.c3d-roles { display: inline-flex; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; }
.c3d-roles button { padding: 6px 7px; border: 0; background: transparent; color: var(--s-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; transition: background .2s, color .2s; }
.c3d-roles button + button { box-shadow: -1px 0 0 rgba(255, 255, 255, .1); }
.c3d-roles button:hover { color: #fff; }
.c3d-roles button[data-role="gov"][aria-pressed="true"] { background: var(--s-gold); color: #1b1607; }
.c3d-roles button[data-role="sup"][aria-pressed="true"] { background: var(--s-fern); color: #0d1f17; }
.c3d-roles button[data-role="out"][aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; }

.c3d-ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.c3d-ov-stats p { margin: 0; display: grid; gap: 4px; }
.c3d-ov-stats b { font: 500 1.9rem/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.c3d-ov-stats p:nth-child(2) b { color: var(--s-gold); }
.c3d-ov-stats span { font: 500 9.5px/1.2 var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--s-soft); }
.c3d-ov-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--s-mute); }
.c3d-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 10px; font-size: 13px; color: var(--s-fg); }
.c3d-step-c { display: inline-flex; align-items: center; gap: 4px; }
.c3d-step-c button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: #fff; font-size: 17px; line-height: 1; }
.c3d-step-c button:hover:not(:disabled) { border-color: var(--s-gold); color: var(--s-gold); }
.c3d-step-c button:disabled { opacity: .3; }
.c3d-step output { min-width: 2.2ch; text-align: center; font: 500 1.5rem/1 var(--font-display); color: #fff; }
.c3d-ladder { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; height: 76px; }
.c3d-ladder button { display: grid; grid-template-rows: 1fr auto; gap: 4px; padding: 0; border: 0; background: none; color: var(--s-soft); font: 500 10px/1 var(--font-data); }
.c3d-ladder button i { align-self: end; display: block; min-height: 6px; border-radius: 4px 4px 2px 2px; background: rgba(255, 255, 255, .14); transition: background .2s, height .4s; }
.c3d-ladder button:hover i { background: rgba(255, 255, 255, .3); }
.c3d-ladder button[aria-pressed="true"] i { background: var(--s-gold); box-shadow: 0 0 14px rgba(240, 192, 74, .5); }
.c3d-ladder button[aria-pressed="true"] { color: #fff; }
.c3d-ov-key { margin: 9px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--s-soft); }

/* ---------- After the stage, on paper ---------- */
.c3d-after { padding-top: 32px; }
.c3d-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-top: 14px; }
.c3d-keys > div { padding: 16px 18px; border: 1.5px solid var(--line); border-top: 3px solid var(--fern); border-radius: var(--radius); background: var(--surface); }
.c3d-keys > div:nth-child(3), .c3d-keys > div:nth-child(4) { border-top-color: var(--kowhai); }
.c3d-keys h3 { margin: 0 0 6px; font-size: 1.1rem; }
.c3d-keys p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.c3d-row-now th, .c3d-row-now td { background: color-mix(in srgb, var(--kowhai) 16%, transparent); font-weight: 600; }
.c3d-ladder-t th[scope="col"] { white-space: normal; min-width: 7em; vertical-align: bottom; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1240px) {
  .c3d { grid-template-columns: minmax(0, 1fr) 344px; }
  .c3d-hint { display: none; }
  .c3d-tools { right: 24px; }
}
@media (max-width: 900px) {
  .c3d { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; }
  .c3d-stage { height: auto; padding-bottom: 6px; background: var(--s-bg); }
  .c3d-view { position: relative; height: min(76svh, 660px); min-height: 500px; overflow: hidden; background: radial-gradient(90% 70% at 50% 60%, #13211f 0%, var(--s-bg) 70%); }
  .c3d-head { top: 18px; left: 16px; right: 16px; }
  .c3d h1 { font-size: clamp(1.6rem, 6.4vw, 2.2rem); max-width: 20ch; }
  .c3d-lede { font-size: .86rem; margin-top: 8px; }
  .c3d-scen { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
  .c3d-scen::-webkit-scrollbar { display: none; }
  .c3d-pill { flex: none; }
  .c3d-readout { position: relative; left: auto; bottom: auto; max-width: none; margin-top: -54px; padding: 0 16px; }
  .c3d-big { font-size: 3.4rem; }
  .c3d-meter { width: 220px; margin: 12px 0 8px; }
  .c3d-verdict { font-size: .9rem; }
  .c3d-tools { position: relative; left: auto; right: auto; bottom: auto; flex-wrap: nowrap; overflow-x: auto; margin-top: 16px; padding: 0 16px 12px; scrollbar-width: none; }
  .c3d-tools::-webkit-scrollbar { display: none; }
  .c3d-tools > * { flex: none; }
  .c3d-board { top: auto; bottom: 64px; right: 16px; width: 210px; padding: 12px 14px; }
  .c3d-board-n b { font-size: 2rem; }
  .c3d-rail { border-left: 0; border-top: 1px solid var(--s-line); padding: 16px; overflow: visible; }
}
@media (max-width: 600px) {
  .c3d-lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .c3d-label { font-size: 10.5px; padding: 3px 7px 3px 5px; }
  .c3d-label .c3d-ov, .c3d-label .c3d-cs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .c3d *, .c3d *::before { transition: none !important; }
}