/* The projector page. Big text, high contrast, everything scales with the screen (vmin / clamp), works on a phone too. */
body.present { overflow: hidden; height: 100vh; height: 100dvh; }
.stage { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) var(--gutter) calc(var(--dock-h, 80px) + 28px + env(safe-area-inset-bottom)); }
/* The title spans the whole width, centred; the round chip sits in the corner and the title keeps clear of it. */
.present-top { position: relative; display: flex; justify-content: center; align-items: flex-start; flex: none; }
.present-question { width: 100%; max-width: none; margin: 0; padding-inline: clamp(0px, 8vw, 150px); text-align: center; font-size: clamp(26px, 5vw, 64px); line-height: 1.08; text-wrap: balance; }
.present-top .chip { position: absolute; right: 0; top: 6px; margin: 0; font-size: 15px; }
/* Inside a training the training's name gets a row of its own above the title (it used to sit on top of a long title). */
.present-top.has-training { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tchip rchip" "title title"; align-items: start; row-gap: 6px; }
.present-top.has-training .training-chip { grid-area: tchip; position: static; justify-self: start; max-width: 100%; margin: 0; }
.present-top.has-training .round-chip { grid-area: rchip; position: static; margin: 0; }
.present-top.has-training .present-question { grid-area: title; padding-inline: 0; }
.present-body { flex: 1; min-height: 0; display: flex; gap: 16px; }
.present-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* A soft, slowly drifting colour behind everything: three big blobs moved by transforms only (the cheapest kind of animation). */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .6; will-change: transform; background: radial-gradient(closest-side, var(--aurora-c), transparent); }
@supports (color: color-mix(in srgb, red, blue)) {
  .aurora i { opacity: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--aurora-c) 30%, transparent), transparent); }
}
.aurora i:nth-child(1) { --aurora-c: var(--c-primary); left: -22vmax; top: -28vmax; animation: aurora-a 46s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { --aurora-c: var(--c-accent); right: -26vmax; top: 4vmax; animation: aurora-b 58s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { --aurora-c: var(--c-chart-2); left: 18vmax; bottom: -38vmax; animation: aurora-c 70s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate3d(24vmax, 14vmax, 0) scale(1.15); } }
@keyframes aurora-b { to { transform: translate3d(-20vmax, 18vmax, 0) scale(.9); } }
@keyframes aurora-c { to { transform: translate3d(-16vmax, -16vmax, 0) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

.present-wait { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; }
.wait-card { display: grid; gap: 14px; justify-items: center; text-align: center; }
.wait-lead { margin: 0; font: 700 clamp(20px, 3vw, 34px)/1.2 var(--font-display); }
.wait-qr { width: min(52vmin, 440px); height: auto; aspect-ratio: 1; background: #fff; padding: 14px; border-radius: var(--r-xl); box-shadow: var(--shadow); }
.wait-link { margin: 0; font-size: clamp(18px, 2.4vw, 30px); color: var(--c-muted); }
.wait-link strong { color: var(--c-text); letter-spacing: .14em; }
.wait-count { margin: 0; font: 700 clamp(18px, 2.2vw, 28px) var(--font-display); }

.present-live { position: relative; flex: 1; min-height: 0; }
.sphere-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; --sphere-font: "Sofia Sans Semi Condensed", "Sofia Sans", system-ui, sans-serif; }
.present-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; margin: 0; font-size: clamp(18px, 2.6vw, 30px); pointer-events: none; }
.present-empty[hidden] { display: none; }
.cloud-stats { position: absolute; right: 4px; bottom: 0; margin: 0; font: 12px/1.2 monospace; }

/* The join code while running: a big QR (easy to scan from the room) with the code under it. */
.stage { --chip-w: clamp(144px, calc(15vmin + 28px), 228px); }
.join-chip { position: fixed; left: var(--gutter); bottom: calc(var(--dock-h, 0px) + 28px + env(safe-area-inset-bottom)); z-index: 20; width: var(--chip-w); display: grid; justify-items: center; gap: 6px; padding: 12px 12px 10px; border-radius: var(--r-lg); text-align: center; }
.join-chip img { width: 100%; height: auto; aspect-ratio: 1; background: #fff; padding: 6px; border-radius: 12px; }
/* Poll and questions use the whole width, so they make room for the code on the left; the sphere is centred and needs none. */
@media (min-width: 721px) {
  .stage.has-chip[data-type="poll"] .present-main, .stage.has-chip[data-type="questions"] .present-main { padding-left: calc(var(--chip-w) + 16px); }
}
.join-chip strong { font: 800 clamp(20px, 3vmin, 32px)/1 var(--font-display); letter-spacing: .14em; }
.join-chip p { margin: 0; font-size: 14px; }
.join-chip { cursor: zoom-in; transition: transform .2s var(--ease); }
.join-chip:hover { transform: translateY(-2px) scale(1.03); }
.join-chip:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
/* The code on the whole screen: everybody in the room can scan it. */
.qr-full { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--gutter); background: var(--c-bg); }
.qr-full[hidden] { display: none; }
.qr-close { position: fixed; top: 16px; right: 16px; z-index: 61; width: 56px; min-height: 56px; padding: 0; border-radius: 50%; font-size: 26px; }
.qr-full-card { display: grid; justify-items: center; gap: clamp(8px, 2vmin, 24px); text-align: center; }
.qr-full-lead { margin: 0; font: 800 clamp(22px, 4vmin, 48px)/1.15 var(--font-display); }
.qr-full-img { width: min(64vmin, 820px); height: auto; aspect-ratio: 1; background: #fff; padding: clamp(12px, 2.2vmin, 28px); border-radius: var(--r-xl); box-shadow: var(--shadow); }
.qr-full-link { margin: 0; font: 700 clamp(20px, 3.6vmin, 44px) var(--font-display); color: var(--c-muted); }
.qr-full-link strong { color: var(--c-text); letter-spacing: .16em; }

/* The control bar sits in a row with the previous / next arrows of a training (the arrows exist only inside a training). */
.dock-wrap { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 16px); }
.dock { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 999px; min-width: 0; }
.dock-wrap[hidden], .dock-toggle[hidden] { display: none; }
.dock-arrow { flex: none; width: 56px; height: 56px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: var(--c-text); cursor: pointer; transition: transform .2s var(--ease), opacity .2s; }
.dock-arrow:hover:not(:disabled) { transform: scale(1.08); }
.dock-arrow:active:not(:disabled) { transform: scale(.95); }
.dock-arrow:disabled { opacity: .35; cursor: not-allowed; }
.training-chip { position: absolute; left: 0; top: 6px; max-width: min(28vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
/* Moving to another interaction: the old page fades out, the new one fades in. */
.stage { animation: stage-in .4s var(--ease) both; }
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }
body.leaving .stage { opacity: 0; transition: opacity .16s ease-in; }
@media (prefers-reduced-motion: reduce) { .stage { animation: none; } body.leaving .stage { transition: none; } }
/* "Show the bar": a real button in the bottom centre, where the bar was (never on top of the counter at the right). */
.dock-toggle { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; }
.dock .seg { flex: none; }
.dock-dots { flex: none; gap: 6px; padding: 0 4px; }
.dock-dots .dot { width: 26px; height: 26px; border-width: 1px; }
.dock-dots .dot[aria-pressed="true"] { outline-width: 2px; outline-offset: 1px; }
@media (max-width: 720px) {
  .dock-wrap { width: calc(100vw - 16px); gap: 6px; }
  .dock { flex: 1 1 auto; border-radius: var(--r-xl); }
  .dock .btn { flex: 1 1 auto; }
  .dock-arrow { width: 46px; height: 46px; }
  .join-chip { display: none; }
  .present-question { max-width: none; }
  .training-chip { position: static; max-width: 80vw; }
}

.drawer { position: fixed; top: 12px; right: 12px; bottom: calc(var(--dock-h, 80px) + 28px); z-index: 25; width: min(94vw, 440px); padding: 16px; overflow: auto; border-radius: var(--r-xl); }
.drawer[hidden] { display: none; }
.drawer-body { display: grid; gap: 10px; margin-top: 12px; }
.drawer h3 { margin-top: 8px; }
.drawer-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; }

/* Poll */
.poll-layout { height: 100%; min-height: 0; display: grid; gap: 16px; align-items: center; justify-items: center; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.5fr) auto; overflow: auto; }
@media (min-width: 900px) { .poll-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); grid-template-rows: minmax(0, 1fr); } }
.poll-chart { width: 100%; height: 100%; min-height: 0; display: grid; justify-items: center; align-content: center; gap: 14px; }
/* Glass pie: the slices are gradient paths under a static gloss; the shadow lives inside the drawing (overflow visible), so it is never cut. */
.poll-chart:has(> .pie) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.pie { width: 100%; height: 100%; overflow: visible; } /* the drawing scales to fit the box, centred: it can never spill out of it */
.pie-base { fill: var(--c-surface); fill-opacity: .5; }
.pie-slice { fill-opacity: .86; }
.pie-side { fill-opacity: .92; }
.pie-frost { fill: var(--c-surface); fill-opacity: .1; }
.pie-grain { opacity: .5; mix-blend-mode: soft-light; }
/* Glass bars: thick, with a light-to-dark gradient, a bright edge and a gloss band. */
.poll-layout:has(> .poll-legend[hidden]) { grid-template-columns: minmax(0, 1fr); }
.bar-label { overflow-wrap: anywhere; }
.bar-row { width: 100%; display: grid; grid-template-columns: minmax(110px, 26%) 1fr minmax(96px, auto); gap: 14px; align-items: center; margin-bottom: 16px; font-weight: 700; font-size: clamp(16px, 2.2vw, 28px); }
.bar-track { position: relative; height: clamp(36px, 6.6vh, 64px); padding: 3px; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-line); box-shadow: inset 0 2px 6px rgb(0 0 0 / .16), inset 0 -1px 0 rgb(255 255 255 / .25); }
.bar-track i { position: relative; display: block; height: 100%; border-radius: 999px; overflow: hidden; background: var(--bar); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); transition: width .9s var(--ease); }
.bar-track i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 6%; height: 38%; border-radius: 999px; background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0)); pointer-events: none; }
@supports (color: color-mix(in srgb, red, blue)) {
  .bar-track { background: color-mix(in srgb, var(--c-surface) 55%, transparent); }
  .bar-track i, .swatch { background: linear-gradient(180deg, color-mix(in srgb, var(--bar) 58%, white) 0%, var(--bar) 52%, color-mix(in srgb, var(--bar) 82%, black) 100%); }
}
.bar-value { text-align: right; white-space: nowrap; }
.poll-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 10px; font-size: clamp(16px, 2vw, 26px); }
.poll-legend li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.legend-text { overflow-wrap: anywhere; }
.legend-voters { grid-column: 2 / -1; margin: 0; font-size: .7em; }
.swatch { width: 20px; height: 20px; border-radius: 7px; display: inline-block; background: var(--bar); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); }
/* The note that replaces hidden results sits in the middle of the stage (never under the control bar); the small hint sits at the foot. */
.poll-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--gutter); text-align: center; font: 700 clamp(20px, 3vw, 40px)/1.25 var(--font-display); pointer-events: none; }
.poll-hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: clamp(16px, 2vw, 24px); pointer-events: none; }
.poll-progress { position: absolute; right: 0; top: 0; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-line); font-weight: 700; }
.poll-progress[hidden] { display: none; }

/* Open questions */
/* A wall of frosted-glass cards that always fits the stage: fit.mjs sets --q-cols, --q-rows and --q-font. */
.present-live:has(.q-list) { overflow: hidden; }
.q-list { --q-font: 28px; list-style: none; margin: 0; padding: 0; height: 100%; display: grid; gap: 12px; align-content: start; grid-template-columns: repeat(var(--q-cols, 1), minmax(0, 1fr)); }
.q-list.dense { align-content: stretch; grid-template-rows: repeat(var(--q-rows, 1), minmax(0, 1fr)); }
.q-list.scroll { height: auto; max-height: 100%; overflow: auto; grid-template-rows: none; grid-auto-rows: minmax(110px, auto); } /* only when even the smallest text cannot fit */
.q-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; min-height: 0; padding: var(--q-pad, 14px); border-radius: var(--r-lg); border: 1px solid rgb(255 255 255 / .38); background: var(--c-surface); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 14px 30px -18px rgb(0 0 0 / .55); transition: opacity .4s var(--ease); }
@supports (color: color-mix(in srgb, red, blue)) {
  .q-card { background: linear-gradient(150deg, color-mix(in srgb, var(--c-surface) 84%, transparent), color-mix(in srgb, var(--c-surface) 62%, transparent)); }
}
/* The frosted blur is the costly part, so it is used only while there are few cards. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .q-list:not(.dense) .q-card { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}
.q-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); background-size: 160px 160px; opacity: calc(var(--noise-opacity) * 1.5); pointer-events: none; } /* matte grain */
.q-card::after { content: ""; position: absolute; inset: 0 0 58% 0; z-index: -1; background: linear-gradient(180deg, rgb(255 255 255 / .2), transparent); pointer-events: none; } /* soft sheen */
.q-card.answered { opacity: .62; }
.q-card.spotlighted { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary), 0 14px 30px -18px rgb(0 0 0 / .55); }
.q-big { margin: 0; font-size: var(--q-font); line-height: 1.22; overflow: hidden; overflow-wrap: anywhere; }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--q-meta, 34px); font-size: clamp(11px, calc(var(--q-font) * .55), 20px); line-height: 1; }
.q-list.dense .q-foot .chip { padding: 0 8px; line-height: 1.5; font-size: 10px; }
.q-likes { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; will-change: transform; }
.q-plus { position: absolute; right: 16px; bottom: 36px; font-weight: 800; color: var(--c-success); pointer-events: none; }
.q-more { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-muted); font: 800 18px/1 var(--font-body); cursor: pointer; opacity: .5; }
.q-more:hover, .q-more:focus-visible { opacity: 1; background: var(--c-surface-2); }
.q-actions { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; justify-content: flex-end; gap: 6px; padding: 8px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s var(--ease); }
.q-card:hover .q-actions, .q-card:focus-within .q-actions, .q-card.show-actions .q-actions { opacity: 1; transform: none; pointer-events: auto; }
.q-actions .btn { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.spotlight { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; gap: 28px; justify-items: center; padding: var(--gutter); text-align: center; border-radius: 0; background: color-mix(in srgb, var(--c-bg) 94%, transparent); }
.spotlight[hidden] { display: none; }
.spot-text { margin: 0; max-width: 24ch; font: 800 clamp(30px, 6.4vw, 96px)/1.1 var(--font-display); text-wrap: balance; }

/* Named voters: all the personal QR codes in a rail on the left, in every state of the interaction. */
.slot-rail { flex: none; align-self: stretch; display: grid; grid-template-columns: repeat(var(--rail-cols, 1), minmax(0, 1fr)); gap: var(--rail-gap, 26px); align-content: center; justify-items: center; padding: var(--rail-pad, 14px); overflow: auto; border-radius: var(--r-lg); }
/* The wall: before the start and while paused the codes take the whole screen (the results and the chart step aside). */
.stage.wall-mode .present-main { display: none; }
.slot-rail.wall { flex: 1; width: auto; grid-template-columns: repeat(var(--rail-cols, 1), max-content); justify-content: center; align-content: center; overflow: hidden; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.slot-rail.wall::before { display: none; }
.wall-lead { grid-column: 1 / -1; margin: 0; text-align: center; font: 800 clamp(20px, 3.2vmin, 36px)/1.2 var(--font-display); }
.slot-rail.wall .slot-card { gap: 8px; }
.slot-rail.wall .slot-card strong { font-size: clamp(16px, 2.6vmin, 30px); }
.slot-rail.wall .slot-qr { padding: 12px; border-radius: 18px; box-shadow: var(--shadow); }
.slot-card { display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 0; }
.slot-card strong { max-width: 100%; font: 700 14px/1.2 var(--font-display); overflow-wrap: anywhere; }
.slot-qr { height: auto; aspect-ratio: 1; background: #fff; padding: 6px; border-radius: 12px; } /* the white card is part of the quiet zone */
.slot-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; min-height: 28px; }
.slot-actions .btn { min-height: 28px; padding: 2px 10px; font-size: 12px; }
@media (max-width: 720px) {
  .present-body { flex-direction: column; }
  .slot-rail { align-self: auto; width: auto !important; max-height: 38%; }
  .present-top .chip { position: static; }
  .present-top { flex-direction: column; align-items: center; }
  .present-question { padding-inline: 0; }
}

.dock-notice { position: fixed; left: 50%; bottom: calc(var(--dock-h, 80px) + 26px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 35; margin: 0; max-width: min(92vw, 560px); padding: 12px 20px; border-radius: var(--r-lg); border-color: var(--c-danger); font-weight: 700; text-align: center; }
.dock-notice[hidden] { display: none; }

/* „Ако-Тогава“: the path of questions in perspective. Positions are set by ifthen.mjs through the variables --x --y --s --blur --op --z. */
.if-scene { position: absolute; inset: 0; overflow: hidden; }
.if-scene[hidden] { display: none; }
.if-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.if-seg { fill: none; stroke: var(--c-primary); stroke-linecap: round; }
.if-seg-glow { stroke: var(--c-accent); filter: blur(5px); }
.if-cards { position: absolute; inset: 0; }
.if-card { --w: 800; --x: 0; --y: 0; --s: 1; --blur: 0; --op: 1; --z: 1;
  position: absolute; left: 0; top: 0; z-index: var(--z); width: calc(var(--w) * 1px);
  display: grid; gap: calc(var(--w) * .016px); padding: calc(var(--w) * .035px);
  border-radius: calc(var(--w) * .035px); border: 1px solid rgb(255 255 255 / .42);
  background: var(--c-surface); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 30px 60px -30px rgb(0 0 0 / .55);
  transform: translate3d(calc(var(--x) * 1px - 50%), calc(var(--y) * 1px - 50%), 0) scale(var(--s));
  filter: blur(calc(var(--blur) * 1px)); opacity: var(--op);
  transition: transform .95s var(--ease), filter .95s var(--ease), opacity .95s var(--ease);
  will-change: transform, filter, opacity; }
@supports (color: color-mix(in srgb, red, blue)) {
  .if-card { background: linear-gradient(150deg, color-mix(in srgb, var(--c-surface) 88%, transparent), color-mix(in srgb, var(--c-surface) 68%, transparent)); }
}
.if-card.entering { transition: none; }
.if-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--noise); background-size: 160px 160px; opacity: calc(var(--noise-opacity) * 1.4); pointer-events: none; }
.if-card-head { display: flex; flex-wrap: wrap; gap: 8px; }
.if-card-question { margin: 0; font-size: calc(var(--w) * .05px); line-height: 1.12; text-wrap: balance; }
.if-opts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * .02px); }
.if-opt { --opt: var(--c-chart-1); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--w) * .012px) calc(var(--w) * .014px); padding: calc(var(--w) * .02px); border: 3px solid transparent; border-radius: calc(var(--w) * .025px); background: var(--c-surface-2); transition: border-color .4s, background-color .4s, opacity .4s, box-shadow .4s; }
.if-opt-b { --opt: var(--c-chart-2); }
.if-letter { display: grid; place-items: center; width: calc(var(--w) * .052px); height: calc(var(--w) * .052px); border-radius: 50%; background: var(--opt); color: #fff; font: 800 calc(var(--w) * .028px) var(--font-display); }
.if-opt-text { font: 800 calc(var(--w) * .032px)/1.12 var(--font-display); overflow-wrap: anywhere; }
.if-bar { grid-column: 1 / -1; display: block; height: calc(var(--w) * .014px); border-radius: 999px; background: color-mix(in srgb, var(--c-text) 12%, transparent); overflow: hidden; }
.if-bar i { display: block; height: 100%; border-radius: inherit; background: var(--opt); transition: width .8s var(--ease); }
.if-share { grid-column: 1 / -1; font: 700 calc(var(--w) * .024px) var(--font-display); }
.if-opt.lead { border-color: var(--opt); box-shadow: 0 0 calc(var(--w) * .03px) color-mix(in srgb, var(--opt) 45%, transparent); }
.if-card.done .if-opt.won { border-color: var(--opt); background: color-mix(in srgb, var(--opt) 20%, var(--c-surface)); }
.if-card.done .if-opt.lost { opacity: .42; }
.if-final-card { justify-items: center; text-align: center; padding: calc(var(--w) * .06px); border-color: color-mix(in srgb, var(--c-primary) 55%, transparent); box-shadow: 0 0 calc(var(--w) * .08px) color-mix(in srgb, var(--c-primary) 30%, transparent), 0 30px 60px -30px rgb(0 0 0 / .55); }
.if-final-text { margin: 0; font: 800 calc(var(--w) * .065px)/1.12 var(--font-display); text-wrap: balance; }
.if-tie-note { font-weight: 700; padding: 0 6px; }
@media (max-width: 720px) { .if-opts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .if-card { transition: none; } }

.if-card.far .if-opts { display: none; }
.if-card.far { gap: 0; }
.if-seg-glow { stroke: var(--c-primary); filter: blur(7px); }
.if-seg { stroke: var(--c-accent); }