/* The Council: the room. Layout, seats, table, captions, player and verdict sheet adapted from Roast Room
(app/public/styles.css), https://github.com/nateherkai/roast-room, MIT, see LICENSES/roast-room-MIT.txt.
Our own: a gold accent (the gavel), the pitch composer on the table, the treasury and the rulings. */
:root {
--canvas: #13100c;
--surface: #18130e;
--surface-2: #1f1913;
--surface-3: #2b231b;
--hairline: rgba(243, 228, 205, 0.09);
--hairline-strong: rgba(243, 228, 205, 0.17);
--ink: #f3ecdf;
--ink-soft: #d6cbb9;
--ink-mute: #a0937f;
--accent: #e9b14c;
--accent-deep: #e9b14c;
--accent-soft: rgba(242, 181, 68, 0.12);
--go: #3fcf8e;
--amend: #ff9025;
--dissent: #ff5a4f;
--font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--font-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--track-head: -0.04em;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--r: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: var(--canvas);
color: var(--ink-soft);
font: 400 14.5px/1.55 var(--font-text);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
font-variant-numeric: tabular-nums;
}
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--ink-mute); }
::selection { background: rgba(242, 181, 68, 0.3); color: var(--ink); }
* { caret-color: var(--accent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #21252b; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
/* ---------------- top bar ---------------- */
.topbar {
display: flex; align-items: center; gap: 24px; padding: 12px 24px;
border-bottom: 1px solid var(--hairline); background: rgba(19, 16, 12, 0.86); backdrop-filter: blur(10px);
position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-rule { width: 1px; height: 22px; background: var(--hairline-strong); }
.brand-name { font: 500 15px/1 var(--font-display); color: var(--ink); letter-spacing: -0.02em; }
.stepper { display: flex; gap: 2px; list-style: none; margin: 0 auto; padding: 0; }
.stepper li {
font-size: 12.5px; font-weight: 500; color: var(--ink-mute);
padding: 6px 12px; border-radius: 999px; display: flex; align-items: center; gap: 7px; white-space: nowrap;
transition: color .3s, background .3s;
}
.stepper li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); transition: background .3s; }
.stepper li.done { color: var(--ink-soft); }
.stepper li.done::before { background: var(--accent); }
.stepper li.active { color: var(--ink); }
.stepper li.active::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(242, 181, 68, .25); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.usage { font-size: 12px; color: var(--ink-mute); }
.ghost {
background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink-soft);
padding: 7px 14px; border-radius: 999px; font-weight: 500; font-size: 13px; transition: border-color .2s, color .2s;
}
.ghost:hover { border-color: var(--accent); color: var(--ink); }
.top-actions .ghost, .top-actions .ghost:hover { border-color: transparent; }
.top-actions .ghost:hover { color: var(--accent); }
.xlink {
display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 999px;
color: var(--ink-soft); transition: color .2s;
}
.xlink:hover { color: var(--accent); }
@media (max-width: 820px) {
.topbar { position: relative; }
.xlink { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; }
}
/* ---------------- topic banner ---------------- */
.topic {
display: flex; gap: 28px; align-items: center; justify-content: space-between;
margin: 16px 24px 0; padding: 16px 22px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r);
}
.label { font-size: 11px; color: var(--ink-mute); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.topic h1 { font: 500 26px/1.15 var(--font-display); color: var(--ink); margin: 6px 0 6px; letter-spacing: var(--track-head); }
.topic p { margin: 0; color: var(--ink-soft); max-width: 72ch; font-size: 14px; }
.options { display: grid; gap: 8px; min-width: 300px; max-width: 440px; flex: 0 1 440px; }
.opt { display: grid; grid-template-columns: 26px 1fr 38px; gap: 10px; align-items: center; font-size: 13px; }
.opt .id { font: 700 13px/1 var(--font-display); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-soft); }
.opt.lead .id { background: #ffffff; color: #13100c; }
.opt .label { color: var(--ink-soft); line-height: 1.3; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 0; }
.opt .bar { grid-column: 2; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-top: -4px; }
.opt .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .9s var(--ease-out); }
.opt .val { grid-row: 1 / span 2; grid-column: 3; font: 600 18px/1 var(--font-display); text-align: right; color: var(--ink); }
/* ---------------- layout ---------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; padding: 16px 24px 28px; align-items: start; }
.stage-wrap { min-width: 0; }
/* ---------------- the stage ---------------- */
.stage {
position: relative; width: 100%; aspect-ratio: 16 / 9.4; max-height: calc(100vh - 120px); min-height: 520px;
border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline);
background:
radial-gradient(70% 40% at 50% 52%, rgba(242, 181, 68, 0.07), transparent 70%),
linear-gradient(180deg, #18130e 0%, #13100c 60%, #0d0b08 100%);
}
.wall {
position: absolute; inset: 0; pointer-events: none;
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 120px),
linear-gradient(180deg, transparent 0 46%, rgba(242, 181, 68, 0.05) 46.2%, transparent 47%);
}
.spot {
position: absolute; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; z-index: 2;
background: radial-gradient(circle, rgba(255, 255, 255, 0.10), rgba(242, 181, 68, 0.05) 45%, transparent 70%);
opacity: 0; transform: translate(-50%, -50%); transition: left .55s var(--ease-out), top .55s var(--ease-out), opacity .4s;
}
.spot.on { opacity: 1; }
/* seats: a cartoon bust per seat, behind the table edge */
.seat {
position: absolute; z-index: 10; transform-origin: 50% 100%;
transition: filter .45s, opacity .45s, transform .55s var(--ease-out);
cursor: pointer;
}
.seat .bust { position: relative; width: 100%; height: 100%; transform-origin: 50% 90%; animation: breathe 5.5s ease-in-out infinite; }
.seat .bust img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; user-select: none; }
.seat .bust img.base,
.seat .bust[data-shape="open"] img.open,
.seat .bust[data-shape="mid"] img.mid,
.seat .bust[data-shape="blink"] img.blink { opacity: 1; }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.006); } }
.stage.live .seat { filter: brightness(.62) saturate(.8); }
.stage.live .seat.speaking { filter: none; z-index: 25 !important; }
.stage.live .seat.addressed { filter: brightness(.9); }
.seat.speaking .bust { animation: talk 1.6s ease-in-out infinite; }
@keyframes talk {
0%, 100% { transform: translateY(0) rotate(0); }
25% { transform: translateY(-3px) rotate(-1.2deg); }
50% { transform: translateY(-1px) rotate(.6deg); }
75% { transform: translateY(-4px) rotate(1.1deg); }
}
.seat.absent { opacity: .2; filter: grayscale(1) brightness(.5) !important; }
.seat:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
/* thinking dots over a head */
.think {
position: absolute; left: 50%; top: 2%; translate: -50% -100%; display: none; gap: 4px; padding: 7px 10px;
background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 999px; z-index: 3;
}
.seat.thinking .think { display: flex; }
.think i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: bob 1.1s infinite ease-in-out; }
.think i:nth-child(2) { animation-delay: .15s; }
.think i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }
/* vote stamp on the chest */
.vote {
position: absolute; left: 50%; bottom: 30%; translate: -50% 0; rotate: -8deg; z-index: 4;
font: 800 12px/1 var(--font-display); letter-spacing: .08em; padding: 6px 9px; border-radius: 7px; border: 2px solid currentColor;
background: rgba(19, 16, 12, .9); animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.vote.endorse { color: var(--go); }
.vote.amend { color: var(--amend); }
.vote.dissent { color: var(--dissent); }
@keyframes stamp { from { opacity: 0; scale: 2.2; } }
/* the table */
.table {
position: absolute; z-index: 30; border-radius: 50%; pointer-events: none;
background:
radial-gradient(70% 60% at 50% 30%, #271f17 0%, #1a150f 55%, #13100c 100%);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
inset 0 18px 40px rgba(255, 255, 255, 0.03),
0 -18px 70px rgba(242, 181, 68, 0.07);
}
.table .etch { position: absolute; left: 50%; top: 30%; width: 11%; translate: -50% -50%; opacity: .06; }
/* nameplates on the table edge */
.nameplate {
position: absolute; z-index: 32; translate: -50% -50%; text-align: center; cursor: pointer;
background: rgba(19, 16, 12, .86); border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 5px 10px 6px;
min-width: 96px; backdrop-filter: blur(6px); transition: border-color .3s, opacity .4s, box-shadow .3s;
}
.nameplate b { display: block; font: 600 13px/1.15 var(--font-display); color: var(--ink); white-space: nowrap; }
.nameplate small { display: block; font-size: 10.5px; color: var(--ink-mute); white-space: nowrap; }
.nameplate .meta { display: flex; gap: 5px; justify-content: center; align-items: center; margin-top: 4px; }
.nameplate .meta:not(:has(.chip:not([hidden]), .score:not([hidden]), .pips i)) { display: none; }
.stage.live .nameplate small, .stage:has(.chip:not([hidden])) .nameplate small { display: none; }
.nameplate.speaking { border-color: #ffffff; }
.nameplate.absent { opacity: .3; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 5px; height: 5px; border-radius: 50%; background: var(--surface-3); }
.pips i.on { background: var(--accent); }
.chip { max-width: 84px; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-soft); white-space: nowrap; }
.chip.endorse { color: var(--go); } .chip.amend { color: var(--amend); } .chip.dissent { color: var(--dissent); }
.score { white-space: nowrap; font: 600 11px/1 var(--font-display); padding: 3px 6px; border-radius: 6px; background: var(--surface-3); color: var(--ink); }
/* rebuttal arcs */
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 34; }
.links path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 7; animation: dash 1.1s linear infinite; }
.links path.old { opacity: .28; }
@keyframes dash { to { stroke-dashoffset: -28; } }
/* the middle of the table: composer, captions, fault lines, verdict plate */
.center { position: absolute; z-index: 36; display: grid; place-items: start center; }
.composer { width: min(620px, 100%); display: grid; gap: 10px; text-align: center; }
.composer h2 { font: 500 clamp(20px, 2vw, 28px)/1.15 var(--font-display); margin: 0; color: var(--ink); letter-spacing: var(--track-head); }
.composer textarea {
width: 100%; resize: vertical; min-height: 72px; max-height: 200px; border-radius: 12px; border: 1px solid var(--hairline-strong);
background: rgba(16, 13, 10, .78); color: var(--ink); padding: 11px 14px; font: 14px/1.45 var(--font-text); outline: none;
}
.composer textarea::placeholder { color: var(--ink-mute); }
.composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242, 181, 68, .18); }
.samples { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.samples button {
background: rgba(255, 255, 255, .04); color: var(--ink-soft); border: 1px solid var(--hairline-strong);
border-radius: 999px; padding: 4px 11px; font-size: 12px; transition: border-color .2s, color .2s;
}
.samples button:hover { border-color: var(--accent); color: var(--ink); }
.composer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mode { display: flex; gap: 6px; }
.mode label { cursor: pointer; }
.mode input { position: absolute; opacity: 0; }
.mode span { display: block; text-align: left; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--hairline-strong); color: var(--ink-soft); background: rgba(16, 13, 10, .6); }
.mode small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-mute); }
.mode input:checked + span { border-color: #ffffff; color: var(--ink); background: rgba(255, 255, 255, .06); }
.mode input:focus-visible + span { outline: 2px solid var(--accent); }
.convene {
background: #ffffff; color: #13100c; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 600; font-size: 14px;
transition: background .2s;
}
.convene:hover { background: #e6edf5; }
.convene:disabled { opacity: .6; cursor: progress; }
.caption { width: 100%; text-align: left; animation: rise .35s var(--ease-out) both; }
.cap-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cap-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--surface-3); flex: none; display: grid; place-items: center; border: 1px solid var(--hairline-strong); }
.cap-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.cap-av.chair img { width: 70%; height: 70%; object-fit: contain; }
.cap-who { font: 600 15px/1.1 var(--font-display); color: var(--ink); }
.cap-tag { margin-left: auto; font-size: 10.5px; color: var(--ink-mute); font-weight: 600; text-align: right; text-transform: uppercase; letter-spacing: .1em; }
.cap-text { margin: 0; font: 500 clamp(16px, 1.5vw, 20px)/1.45 var(--font-display); color: var(--ink); letter-spacing: -0.02em; min-height: 3em; }
.cap-text .w { opacity: .14; transition: opacity .12s; }
.cap-text .w.on { opacity: 1; }
.cap-text.chair { color: var(--ink-soft); font-weight: 400; }
.cap-sub { margin-top: 8px; font-size: 12.5px; color: var(--ink-mute); min-height: 1em; }
.dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: bob 1.1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
.cruxes { display: grid; gap: 8px; width: 100%; text-align: left; }
.cruxes .head { font: 600 15px/1.25 var(--font-display); color: var(--ink); }
.cruxes .note { font-size: 13px; color: var(--ink-soft); margin-top: -2px; }
.crux { background: rgba(16, 13, 10, .7); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 9px 12px; animation: rise .5s var(--ease-out) both; }
.crux b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 5px; font-weight: 600; }
.crux .sides { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.crux .side { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.crux .faces { display: inline-flex; }
.crux .faces img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; margin-right: -6px; border: 1.5px solid var(--surface); background: var(--surface-3); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.plate { display: grid; gap: 10px; justify-items: center; width: 100%; text-align: center; animation: rise .6s var(--ease-out) both; }
.plate p { margin: 0; font: 500 clamp(15px, 1.4vw, 18px)/1.38 var(--font-display); color: var(--ink); }
.plate .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.plate .row button { background: #ffffff; color: #13100c; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; }
.plate .row button.alt { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
/* playback controls */
.playbar {
position: absolute; z-index: 38; right: 14px; bottom: 12px; display: flex; gap: 8px; align-items: center;
background: rgba(19, 16, 12, .82); border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 4px 4px 12px; backdrop-filter: blur(6px);
}
.playbar .queue { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; }
.speed { display: flex; gap: 2px; }
.speed button, .skip, .sound { background: transparent; border: 0; color: var(--ink-mute); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 999px; }
.speed button[aria-pressed="true"] { background: #ffffff; color: #13100c; }
.skip, .sound { color: var(--ink-soft); border: 1px solid var(--hairline-strong); }
.skip:hover, .speed button:hover, .sound:hover { color: var(--ink); }
.sound.blocked { color: #ffd166; border-color: #ffd166; animation: soundPulse 1.2s ease-in-out infinite; }
@keyframes soundPulse { 50% { box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.25); } }
/* ---------------- side panel ---------------- */
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); position: sticky; top: 72px; max-height: calc(100vh - 92px); display: flex; flex-direction: column; overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--hairline); }
.tabs button { flex: 1; background: none; border: 0; padding: 12px 8px; font-weight: 600; font-size: 13px; color: var(--ink-mute); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:disabled { opacity: .4; cursor: default; }
.tabpanel { overflow-y: auto; padding: 14px 14px 20px; display: grid; gap: 10px; align-content: start; }
.empty { color: var(--ink-mute); font-size: 13.5px; padding: 18px 4px; }
.feed-phase { font: 600 10.5px/1 var(--font-text); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); padding: 10px 0 2px; display: flex; align-items: center; gap: 8px; }
.feed-phase::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.feed-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); cursor: pointer; animation: rise .35s var(--ease-out) both; transition: border-color .2s; }
.feed-card:hover { border-color: var(--accent); }
.feed-card .h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--surface-3); flex: none; border: 1px solid var(--hairline-strong); }
.feed-card .h .r { margin-left: auto; font-size: 11px; color: var(--ink-mute); font-weight: 500; }
.feed-card p { margin: 7px 0 0; font-size: 13px; color: var(--ink-soft); }
.feed-card .q { font-size: 11.5px; color: var(--ink-mute); margin-top: 6px; }
.feed-note { font-size: 13px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; color: var(--ink-soft); }
.feed-note b { color: var(--ink); font-weight: 600; }
.feed-note ul { margin: 6px 0 0; padding-left: 18px; }
.brief-block h4 { margin: 12px 0 4px; font: 600 14px/1.2 var(--font-display); color: var(--ink); }
.brief-block p, .brief-block li { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 4px; }
.brief-block ul { padding-left: 18px; margin: 0; }
.wtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wtable td { padding: 6px 4px; border-top: 1px solid var(--hairline); vertical-align: top; color: var(--ink-soft); }
.wtable td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* ---------------- dialogs ---------------- */
.card-dialog { border: 1px solid var(--hairline-strong); border-radius: 18px; padding: 22px 24px; width: min(660px, 92vw); max-height: 86vh; background: var(--surface); color: var(--ink-soft); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.card-dialog::backdrop { background: rgba(9, 7, 5, .66); backdrop-filter: blur(3px); }
.card-dialog pre { white-space: pre-wrap; font: 14px/1.6 var(--font-text); color: var(--ink-soft); margin: 10px 0 14px; }
.card-dialog h3 { font: 600 22px/1.2 var(--font-display); margin: 0 0 4px; color: var(--ink); }
.card-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.card-head img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--surface-3); border: 1px solid var(--hairline-strong); }
.qcheck { font-size: 12px; margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; }
.qcheck li::before { content: "✓ "; color: var(--go); font-weight: 800; }
.qcheck li.bad::before { content: "? "; color: var(--dissent); }
.history { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.history button { width: 100%; text-align: left; background: var(--surface-2); color: var(--ink); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; }
.history button:hover { border-color: var(--accent); }
.history small { display: block; color: var(--ink-mute); }
/* ---------------- verdict sheet ---------------- */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(9, 7, 5, .7); display: grid; place-items: end center; overflow-y: auto; padding: 40px 16px 0; animation: fadein .3s both; }
@keyframes fadein { from { opacity: 0; } }
.sheet-inner { width: min(980px, 100%); background: var(--surface); border: 1px solid var(--hairline-strong); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 30px 36px 50px; animation: slideup .55s var(--ease-out) both; }
@keyframes slideup { from { transform: translateY(80px); opacity: 0; } }
.v-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.v-label { display: inline-block; font: 700 clamp(24px, 3.4vw, 38px)/1 var(--font-display); letter-spacing: -0.03em; padding: 10px 18px; border-radius: 14px; color: #04140b; background: var(--go); animation: stampbig .6s .2s cubic-bezier(.2, 1.5, .4, 1) both; margin-top: 6px; }
.v-label.reshape, .v-label.wait { background: var(--amend); color: #1c1203; }
.v-label.dont { background: var(--dissent); color: #1e0505; }
@keyframes stampbig { from { transform: scale(1.6) rotate(-6deg); opacity: 0; } }
.v-call { font: 500 clamp(18px, 1.9vw, 22px)/1.4 var(--font-display); margin: 18px 0 8px; color: var(--ink); letter-spacing: -0.03em; }
.v-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 22px; }
.v-stats span { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.v-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }
.v-sec h3 { font: 600 16px/1.2 var(--font-display); margin: 0 0 10px; color: var(--ink); }
.v-sec ul, .v-sec ol { margin: 0; padding-left: 18px; }
.v-sec li { margin-bottom: 7px; font-size: 14px; color: var(--ink-soft); }
.v-sec li b { color: var(--ink); font-weight: 600; }
.v-sec .tag { font-size: 11.5px; color: var(--ink-mute); }
.v-wide { grid-column: 1 / -1; }
.v-opts { display: grid; gap: 10px; }
.scorecard { width: 100%; border-collapse: collapse; font-size: 13px; }
.scorecard th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-mute); padding: 6px; border-bottom: 1px solid var(--hairline); }
.scorecard td { padding: 8px 6px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink-soft); }
.scorecard td.n { font: 600 15px/1 var(--font-display); text-align: center; color: var(--ink); }
.scorecard .who { display: flex; gap: 8px; align-items: center; font-weight: 600; white-space: nowrap; color: var(--ink); }
.scorecard .line { font-size: 12.5px; }
.minority { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 14px; padding: 14px 16px; }
.minority .who { display: flex; gap: 8px; align-items: center; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.minority q { font: 500 15px/1.45 var(--font-display); display: block; margin: 8px 0; color: var(--ink); }
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.box { border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-soft); }
.box b { display: block; font: 600 14px/1.2 var(--font-display); color: var(--ink); margin-bottom: 4px; }
.v-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; flex-wrap: wrap; }
.v-foot .muted { font-size: 12px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--surface-3); color: var(--ink); border: 1px solid var(--hairline-strong); padding: 10px 16px; border-radius: 10px; z-index: 60; font-size: 13.5px; max-width: 90vw; }
.disclaimer { text-align: center; font-size: 11.5px; color: var(--ink-mute); margin: 0 0 18px; padding: 0 16px; }
/* ---------------- responsive ---------------- */
@media (max-width: 1220px) {
.layout { grid-template-columns: minmax(0, 1fr); }
.panel { position: static; max-height: 70vh; }
.stepper li { padding: 6px 8px; }
}
@media (max-width: 820px) {
.topbar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
.stepper { order: 3; width: 100%; overflow-x: auto; margin: 0; }
.usage { display: none; }
.topic { flex-direction: column; align-items: stretch; margin: 12px 16px 0; padding: 14px 16px; }
.options { min-width: 0; max-width: none; flex: none; }
.layout { padding: 12px 16px 24px; }
body { overflow-x: hidden; }
.stage { aspect-ratio: auto; min-height: 0; max-height: none; overflow: visible; display: flex; flex-direction: column; }
.stage .scene { position: relative; }
.nameplate { min-width: 0; padding: 3px 6px 4px; border-radius: 8px; }
.nameplate small, .nameplate .meta .pips { display: none; }
.nameplate b { font-size: 11px; }
.center { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; padding: 16px; border-top: 1px solid var(--hairline); background: var(--canvas); border-radius: 0 0 20px 20px; }
.composer-row { justify-content: center; }
.mode { flex-wrap: wrap; justify-content: center; }
.playbar { position: static; margin: 0 16px 14px; justify-content: space-between; align-self: stretch; }
.think { padding: 4px 6px; }
.think i { width: 4px; height: 4px; }
.v-grid, .boxes { grid-template-columns: 1fr; }
.sheet-inner { padding: 22px 18px 40px; }
.scorecard .line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* AIS arrival: blocks fade and rise, headings type in per character */
.arrive { animation: rise 1s var(--ease-out) both; }
.typein .ch { display: inline-block; opacity: 0; filter: blur(6px); animation: chin .5s var(--ease-out) forwards; white-space: pre; }
@keyframes chin { to { opacity: 1; filter: blur(0); } }
/* viewer mode: waiting for a council started in Claude Code */
.waiting { display: grid; gap: 12px; justify-items: center; text-align: center; width: min(560px, 100%); }
.waiting h2 { font: 500 clamp(20px, 2vw, 28px)/1.15 var(--font-display); margin: 0; color: var(--ink); letter-spacing: var(--track-head); }
.waiting p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 48ch; }
.waiting code { font: 600 13px/1 var(--font-text); color: var(--ink); background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 8px; padding: 7px 10px; }
.waiting .pulse { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.waiting .pulse i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: bob 1.6s infinite ease-in-out; }
.waiting .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* simplified record and verdict */
.panel-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--hairline); font: 600 11px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.feed-card { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 12px; }
.feed-card .h { font-size: 13px; }
.feed-card p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; }
.feed-note b { font-weight: 600; }
.v-meta { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-mute); }
.v-meta b { color: var(--ink-soft); font-weight: 600; }
.v-why, .v-steps { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 10px; }
.v-why li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; margin: 0 !important; }
.v-steps li { margin: 0 !important; }
.v-steps li b { display: inline-block; min-width: 64px; color: var(--ink); font-weight: 600; }
.v-more { margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.v-more summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-soft); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.v-more summary::-webkit-details-marker { display: none; }
.v-more summary::before { content: "+"; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--hairline-strong); display: grid; place-items: center; font-size: 13px; }
.v-more[open] summary::before { content: "−"; }
.v-more[open] summary { margin-bottom: 20px; }
.v-sec p { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; }
.nameplate small, .nameplate .pips { display: none !important; }
/* ---------------- waiting between steps (live councils) ---------------- */
.waitcard { width: 100%; text-align: left; animation: rise .35s var(--ease-out) both; display: grid; gap: 8px; }
.wc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wc-step { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.wc-step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: bob 1.6s infinite ease-in-out; }
.wc-time { font: 600 13px/1 var(--font-display); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wc-head { margin: 0; font: 500 clamp(16px, 1.5vw, 20px)/1.4 var(--font-display); color: var(--ink); letter-spacing: -0.02em; }
.wc-sub { margin: 0; font-size: 13px; color: var(--ink-soft); max-width: 62ch; }
.wc-muse { margin: 2px 0 0; font-size: 13px; color: var(--ink-mute); min-height: 1.5em; transition: opacity .35s; }
.wc-muse b { color: var(--ink); font-weight: 600; }
.wc-muse.fade { opacity: 0; }
.wc-bar { height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; position: relative; }
.wc-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: 3px; transition: width .6s var(--ease-out); }
.wc-bar.indeterminate i { width: 28%; animation: sweep 2.2s ease-in-out infinite; }
@keyframes sweep { 0% { left: -28%; } 100% { left: 100%; } }
.wc-nudge { margin: 2px 0 0; font-size: 12.5px; color: var(--amend); }
/* seats mull it over while a round is out: slow head tilts, staggered */
.stage.live .seat.thinking .bust { animation: ponder 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ponder {
0%, 100% { transform: rotate(0) translateY(0); }
22% { transform: rotate(-2.2deg) translateY(-1px); }
48% { transform: rotate(0) translateY(0); }
72% { transform: rotate(1.8deg) translateY(-2px); }
}
.stage.live .seat.thinking.musing { filter: brightness(.95) saturate(.95); }
.seat.musing .think { border-color: var(--accent); }
/* ---------------- how-to guide (side panel when idle, and a dialog) ---------------- */
.guide { display: grid; gap: 14px; font-size: 13.5px; color: var(--ink-soft); }
.guide h4 { margin: 0 0 6px; font: 600 14px/1.25 var(--font-display); color: var(--ink); }
.guide ol, .guide ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 7px; }
.guide ol { counter-reset: step; }
.guide ol li { counter-increment: step; display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.guide ol li::before { content: counter(step); width: 22px; height: 22px; border-radius: 50%; background: #ffffff; color: #13100c; font: 700 11.5px/22px var(--font-display); text-align: center; }
.guide ul li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; }
.guide ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; }
.guide li b { color: var(--ink); font-weight: 600; }
.guide code { font: 600 12.5px/1 var(--font-text); color: var(--ink); background: var(--surface-3); border-radius: 6px; padding: 3px 6px; }
.guide .note { font-size: 12.5px; color: var(--ink-mute); margin: 0; }
.guide .example { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.guide .example p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.guide .example p code { white-space: nowrap; }
.guide .example button { justify-self: start; }
.guide-sec { border-top: 1px solid var(--hairline); padding-top: 12px; }
.guide-sec:first-child { border-top: 0; padding-top: 0; }
#guideDialog .guide { margin-bottom: 14px; }
#guideDialog h3 { margin-bottom: 14px; }
/* primary pill (white on dark, per the AIS guidelines) */
.pill { background: #ffffff; color: #13100c; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; transition: background .2s; }
.pill:hover { background: #e6edf5; }
.pill:disabled { opacity: .6; cursor: progress; }
.v-top .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.history li { display: flex; gap: 8px; align-items: stretch; }
.history li > button:first-child { flex: 1; }
.history .pdf { flex: none; width: auto; padding: 0 14px; font-size: 12px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.top-actions .ghost { white-space: nowrap; }
@media (max-width: 820px) {
.top-actions { margin-left: auto; }
.top-actions .ghost { padding: 6px 11px; font-size: 12.5px; }
}
.typein .wd { display: inline-block; white-space: nowrap; }
@media (max-width: 1220px) {
.topbar { flex-wrap: wrap; row-gap: 8px; }
.top-actions { margin-left: auto; }
.stepper { order: 3; width: 100%; margin: 0; justify-content: center; overflow-x: auto; }
}
@media (max-width: 820px) { .stepper { justify-content: flex-start; } }
/* ================= The Council additions ================= */
a { color: var(--accent); }
.brand { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; display: block; }
.ca { font: 600 11.5px/1 var(--font-text); color: var(--ink-mute); border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 6px 10px; white-space: nowrap; background: transparent; cursor: default; }
.ca.live { color: var(--ink); cursor: pointer; }
.wallet:empty { display: none; }
.wallet button { background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink-soft); padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.wallet button:hover { border-color: var(--accent); color: var(--ink); }
.wallet code { font: 600 12px/1 var(--font-text); color: var(--ink); }
.pill { background: var(--accent); color: #1a1205; }
.pill:hover { background: #f7c96d; }
.convene { background: var(--accent); color: #1a1205; }
.convene:hover { background: #f7c96d; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 4px 0; }
.stats div { background: rgba(22, 18, 13, .72); border: 1px solid var(--hairline); border-radius: 12px; padding: 8px 10px; text-align: left; }
.stats small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.stats b { font: 600 18px/1.2 var(--font-display); color: var(--ink); }
.composer { text-align: left; }
.composer h2 { text-align: center; }
.steps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.steps span { font-size: 11.5px; font-weight: 600; color: var(--ink-mute); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hairline); }
.steps span.on { color: #1a1205; background: var(--accent); border-color: var(--accent); }
.steps span.done { color: var(--ink); border-color: var(--hairline-strong); }
.fields { display: grid; gap: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 160px; gap: 8px; }
.row2.even { grid-template-columns: 1fr 1fr; }
.fl { display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-mute); }
.fl input, .fl textarea {
width: 100%; border-radius: 10px; border: 1px solid var(--hairline-strong); background: rgba(16, 13, 10, .78); color: var(--ink);
padding: 9px 12px; font: 14px/1.45 var(--font-text); outline: none;
}
.fl textarea { resize: vertical; min-height: 84px; max-height: 220px; }
.fl input[type=file] { padding: 6px 8px; font-size: 12.5px; }
.fl input:focus, .fl textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242, 181, 68, .18); }
.rule { margin: 0; font-size: 12px; color: var(--ink-mute); }
.result { border: 1px solid var(--hairline-strong); border-radius: 12px; background: rgba(16, 13, 10, .7); padding: 10px 12px; font-size: 13.5px; color: var(--ink-soft); display: grid; gap: 8px; }
.result b { color: var(--ink); }
.result ul { margin: 0; padding-left: 18px; }
.result .ok { color: var(--go); font-weight: 600; }
.result .bad { color: var(--dissent); font-weight: 600; }
.result input { width: 100%; border-radius: 10px; border: 1px solid var(--hairline-strong); background: rgba(16, 13, 10, .78); color: var(--ink); padding: 8px 10px; font: 13px/1.4 var(--font-text); }
.result code { font: 600 12.5px/1.4 var(--font-text); color: var(--ink); word-break: break-all; }
.v-label.go { background: var(--go); }
.v-crit { display: grid; gap: 7px; }
.v-crit .c { display: grid; grid-template-columns: 26px 1fr 34px; gap: 2px 10px; align-items: center; font-size: 13px; color: var(--ink-soft); }
.v-crit .c .bar { grid-column: 2; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.v-crit .c .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.v-crit .c .val { grid-row: 1 / span 2; grid-column: 3; font: 600 16px/1 var(--font-display); color: var(--ink); text-align: right; }
.v-crit .c .av { width: 26px; height: 26px; grid-row: 1 / span 2; }
.v-launch { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; display: grid; gap: 4px; }
.v-launch a { font-weight: 600; }
.side-sec { display: grid; gap: 8px; }
.side-sec h4 { margin: 4px 0 0; font: 600 10.5px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.mini { border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); font-size: 13px; color: var(--ink-soft); display: grid; gap: 4px; cursor: pointer; transition: border-color .2s; text-align: left; font-family: inherit; }
.mini:hover { border-color: var(--accent); }
.mini .h { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--ink); font-weight: 600; }
.tag-v { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-soft); white-space: nowrap; }
.tag-v.go { color: var(--go); } .tag-v.reshape { color: var(--amend); } .tag-v.dont { color: var(--dissent); }
.brief { white-space: pre-wrap; font: 12.5px/1.55 var(--font-text); color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; margin: 0; }
.card-dialog.wide { width: min(880px, 94vw); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.filters button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); }
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.tgrid div { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; }
.tgrid small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.tgrid b { font: 600 20px/1.25 var(--font-display); color: var(--ink); }
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtable th { text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-mute); padding: 6px; border-bottom: 1px solid var(--hairline); }
.dtable td { padding: 8px 6px; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); vertical-align: top; }
.dtable td b { color: var(--ink); }
.tablewrap { overflow-x: auto; }
@media (max-width: 820px) {
.ca, .brand-rule { display: none; }
.top-actions #guideBtn, .top-actions #treasuryBtn { display: none; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row2, .row2.even { grid-template-columns: 1fr; }
.tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dtable .hide-sm { display: none; }
}
@media (max-width: 400px) {
.top-actions .ghost { padding: 6px 9px; }
.pill { padding: 7px 12px; }
}
/* fit: top bar on one line, stepper only during a hearing, seats inside the frame on phones */
.pill, .wallet button, .top-actions .ghost { white-space: nowrap; }
body:not(.in-session) .stepper { visibility: hidden; }
.nameplate .first { display: none; }
.stage-wrap { overflow: hidden; border-radius: 20px; }
@media (max-width: 1100px) { .top-actions #guideBtn { display: none; } }
@media (max-width: 820px) {
.nameplate .full { display: none; }
.nameplate .first { display: inline; }
body:not(.in-session) .stepper { display: none; }
.topbar { row-gap: 8px; }
}
@media (max-width: 1520px) {
.topbar { flex-wrap: wrap; row-gap: 8px; }
.stepper { order: 3; width: 100%; margin: 0; justify-content: center; overflow-x: auto; }
.top-actions { margin-left: auto; }
body:not(.in-session) .stepper { display: none; }
}
/* the pitch form sits on the table: the room grows while it is open */
.stage.composing { aspect-ratio: auto; height: 880px; max-height: none; }
.center { overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 820px) { .stage.composing { height: auto; } .center { overflow: visible; } }
.stage.composing .table { height: auto; bottom: -40px; }
@media (max-width: 820px) { .nameplate .meta { display: none !important; } }
/* the line: who the council hears next */
.line { display: grid; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.line-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px; font-size: 13px; color: var(--ink-soft); }
.line-row + .line-row { border-top: 1px solid var(--hairline); }
.line-row .nm { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-row .who { font-size: 12px; color: var(--ink-mute); }
.line-row .eta { font-size: 12px; font-variant-numeric: tabular-nums; }
.line-row.me { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--accent); }
.line-row.me .who { color: var(--accent); font-weight: 700; }
.line .pos, .line-now .pos { font-variant-numeric: tabular-nums; color: var(--ink-mute); font-size: 12px; }
.line-now .pos { color: var(--dissent); margin-right: 8px; }
.tk { font-weight: 500; color: var(--ink-mute); font-size: 12px; }
.line-foot { font-size: 12px; color: var(--ink-mute); line-height: 1.45; }
.linebox { padding: 12px 14px; border-bottom: 1px solid var(--hairline); flex: none; }
.linebox[hidden] { display: none; }
/* rulings: the public record, filterable */
.rul-lead { margin: 0 0 12px; }
.rul-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 10px; }
.rul-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-mute); font: 600 13.5px/1 var(--font-text); padding: 10px 12px; cursor: pointer; margin-bottom: -1px; }
.rul-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.rul-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rul-bar .filters { margin: 0; }
.cnt { font-variant-numeric: tabular-nums; color: var(--ink-mute); font-weight: 500; margin-left: 2px; }
.rul-q { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink); font: 13px var(--font-text); padding: 8px 14px; width: 220px; max-width: 100%; }
.rul-q:focus { outline: none; border-color: var(--accent); }
.rul-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; max-height: min(calc(100vh - 360px), 620px); overflow-y: auto; }
.rul-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; }
.rul-row.can { cursor: pointer; transition: border-color .2s; }
.rul-row.can:hover { border-color: var(--accent); }
.rul-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--surface-3); display: grid; place-items: center; }
.rul-act { font: 800 13px/1 var(--font-text); letter-spacing: .04em; color: var(--go); }
.rul-act.reshape { color: var(--amend); } .rul-act.dont { color: var(--dissent); }
.rul-main { display: grid; gap: 4px; min-width: 0; }
.rul-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--ink); }
.rul-top .tag-v { margin-left: auto; }
.rul-why { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.rul-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); }
.rul-meta a { color: var(--accent); text-decoration: none; }
.rul-go { margin-left: auto; color: var(--ink-soft); font-weight: 600; }
.rul-empty { padding: 18px 4px; }
@media (max-width: 560px) {
.rul-q { width: 100%; }
.rul-top .tag-v { margin-left: 0; }
.rul-list { max-height: 58vh; }
}
.rul-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; margin: -2px 0 10px; }
.rul-pager .pg { display: flex; gap: 4px; align-items: center; }
.rul-pager .pg button { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.rul-pager .pg button[aria-current="page"] { border-color: var(--accent); color: var(--ink); }
.rul-pager .pg button:disabled { opacity: .35; cursor: default; }
.rul-pager .gap { color: var(--ink-mute); padding: 0 2px; }
/* image picker: our own control, so it never shows the browser's "no file chosen" */
.imgpick { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px dashed var(--hairline-strong); border-radius: 10px; background: rgba(16, 13, 10, .78); padding: 6px 8px; cursor: pointer; transition: border-color .2s, background .2s; min-height: 42px; }
.imgpick:hover, .imgpick:focus-visible, .imgpick.over { border-color: var(--accent); outline: none; }
.imgpick.over { background: rgba(242, 181, 68, .08); }
.imgpick.has { border-style: solid; }
.imgpick-thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--surface-3); display: grid; place-items: center; color: var(--ink-mute); overflow: hidden; }
.imgpick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.imgpick-text { display: grid; gap: 2px; min-width: 0; }
.imgpick-text b { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imgpick-text small { font-size: 11px; font-weight: 500; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imgpick-x { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; }
.imgpick-x:hover { border-color: var(--dissent); color: var(--dissent); }
/* ---------------- design audit (design-refs): mono for data, a two-beat promise, honest network badge ---------------- */
:root { --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }
/* numbers, addresses, times and briefs read as instruments, not prose */
.mono, .ca, .ca-chart, .net, .stats b, .tgrid b, .brief, .line-row .eta, .line-row .who, .line-row .pos, .rul-meta, .cnt, .opt .val, .rul-pager .muted, .imgpick-text small { font-family: var(--font-mono); }
.side-sec h4, .panel-head, .stats small, .tgrid small, .dtable th, .pulse, .topic-main > .label { font-family: var(--font-mono); letter-spacing: .08em; }
.brief { font-size: 12px; line-height: 1.6; }
.stats b { font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
/* the promise: two beats, the second in the action color, at a size a hero deserves */
.waiting h2 { font: 600 clamp(30px, 3.4vw, 50px)/1.04 var(--font-display); letter-spacing: -0.035em; }
.waiting h2 em { font-style: normal; color: var(--accent); }
/* contract: copyable, with the chart one click away; off mainnet, say so plainly */
.ca.live:hover { border-color: var(--accent); }
.ca-chart { font-size: 11.5px; font-weight: 500; color: var(--ink-mute); text-decoration: none; white-space: nowrap; }
.ca-chart:hover { color: var(--accent); }
.net { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--amend); border: 1px dashed rgba(255, 144, 37, .55); border-radius: 999px; padding: 5px 9px; white-space: nowrap; margin-right: auto; margin-left: 12px; }
@media (max-width: 820px) {
/* row 1: brand + CA (+ X); row 2: network + the three pages; the two actions live in a thumb bar */
.brand { flex: 1 1 100%; gap: 10px; }
.topbar .ca { display: inline-block; padding: 5px 9px; }
.ca-chart { display: none; }
.net { margin-left: 0; margin-right: 0; font-size: 9.5px; padding: 4px 7px; flex: none; }
.top-actions { flex: 1; justify-content: flex-end; gap: 2px; margin-left: 0; }
.top-actions #guideBtn, .top-actions #treasuryBtn { display: inline-flex; }
.top-actions .ghost { min-height: 40px; padding: 6px 7px; font-size: 12.5px; }
.waiting .row .pill, .waiting .row .ghost { min-height: 40px; }
.xlink { width: 40px; height: 40px; top: 6px; right: 8px; }
body { padding-bottom: 76px; }
/* a blur on the bar would make it the containing block of the fixed thumb buttons below */
.topbar { backdrop-filter: none; background: var(--canvas); }
body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 68px; background: var(--canvas); border-top: 1px solid var(--hairline-strong); z-index: 39; }
.dtable td.mono { white-space: nowrap; font-size: 12px; }
#wallet { position: fixed; left: 12px; bottom: 12px; width: calc(50% - 18px); z-index: 41; display: block; }
#wallet > *, #wallet button { width: 100%; min-height: 44px; justify-content: center; }
#pitchBtn { position: fixed; right: 12px; bottom: 12px; width: calc(50% - 18px); min-height: 44px; z-index: 41; }
#wallet:empty + #pitchBtn { width: calc(100% - 24px); }
.toast { bottom: 84px; }
}
/* ---------------- launched coins: the shelf under the table (art first, numbers in mono, curve as a thin bar) ---------------- */
.coins { padding: 0 24px 28px; }
.coins[hidden] { display: none; }
.coins-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.coins-head h2 { margin: 0; font: 600 22px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.coins-note { font: 500 11.5px/1.4 var(--font-mono); color: var(--ink-mute); letter-spacing: .02em; }
.coins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.coin { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; display: grid; transition: border-color .2s; }
.coin:hover { border-color: var(--hairline-strong); }
.coin-art { position: relative; aspect-ratio: 1; border: 0; padding: 0; background: var(--surface-3); cursor: pointer; display: grid; place-items: center; overflow: hidden; }
.coin-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease-out); }
.coin-art:hover img { transform: scale(1.03); }
.coin-ph { font: 700 34px/1 var(--font-mono); color: var(--ink-mute); }
.coin-badge { position: absolute; left: 10px; top: 10px; font: 700 10.5px/1 var(--font-mono); letter-spacing: .06em; color: #062015; background: var(--go); border-radius: 999px; padding: 5px 8px; }
.coin-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.coin-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.coin-top b { font: 600 15px/1.2 var(--font-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-age { margin-left: auto; font: 500 11.5px/1 var(--font-mono); color: var(--ink-mute); }
.coin-mc { display: flex; align-items: baseline; gap: 8px; }
.coin-mc b { font: 600 22px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--ink); }
.coin-mc small { font: 500 11.5px/1 var(--font-mono); color: var(--ink-mute); }
.coin-curve { height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.coin-curve i { display: block; height: 100%; background: var(--go); border-radius: 99px; }
.coin-curve-txt { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--font-mono); color: var(--ink-mute); margin-top: -2px; }
.coin-row { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.coin-ca { flex: 1; min-width: 0; min-height: 36px; text-align: left; background: transparent; border: 1px solid var(--hairline-strong); border-radius: 10px; color: var(--ink-soft); font: 500 12px/1 var(--font-mono); padding: 0 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-ca span { color: var(--ink-mute); margin-left: 4px; }
.coin-ca:hover { border-color: var(--accent); color: var(--ink); }
.coin-buy { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; text-decoration: none; font-size: 13px; }
@media (max-width: 820px) {
.coins { padding: 0 16px 24px; }
.coins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.coin-body { padding: 10px; gap: 6px; }
.coin-mc b { font-size: 18px; }
.coin-curve-txt span:last-child { display: none; }
.coin-row { flex-direction: column; align-items: stretch; }
.coin-buy { justify-content: center; }
}
/* the last ruling on the idle table */
.last-ruling { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: min(560px, 100%); margin-top: 6px; padding: 10px 12px; text-align: left; background: rgba(22, 18, 13, .72); border: 1px solid var(--hairline); border-radius: 14px; color: var(--ink-soft); cursor: pointer; font-family: inherit; transition: border-color .2s; }
.last-ruling[hidden] { display: none; }
.last-ruling:hover { border-color: var(--accent); }
.lr-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--surface-3); }
.lr-ph { display: grid; place-items: center; font: 700 11px/1 var(--font-mono); color: var(--ink-mute); }
.lr-main { display: grid; gap: 2px; min-width: 0; }
.lr-main small { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.lr-main b { font: 600 14px/1.25 var(--font-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-why { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lr-end { display: grid; gap: 6px; justify-items: end; }
.lr-go { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
/* ---------------- the chamber: a panelled wall at night, a seven-bar window behind the bench, a table with a brass rim ---------------- */
.stage {
background:
radial-gradient(46% 40% at 50% 36%, rgba(242, 181, 68, 0.09), transparent 72%),
radial-gradient(130% 90% at 50% 0%, #211a12 0%, #17120d 52%, #0d0b08 100%);
}
.wall {
background:
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, transparent 0 45.4%, rgba(242, 181, 68, 0.30) 45.4% 45.6%, rgba(0, 0, 0, 0.38) 45.6% 46.3%, transparent 46.3%),
linear-gradient(180deg, transparent 0 46%, rgba(0, 0, 0, 0.22) 46% 100%),
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0 2px, rgba(255, 255, 255, 0.035) 2px 3px, transparent 3px 136px);
}
/* the window behind the bench: one bar per seat, lit from outside */
.wall::before {
content: ""; position: absolute; left: 50%; top: 5%; width: 30%; height: 56%; translate: -50% 0;
border-radius: 999px 999px 0 0; border: 1px solid rgba(242, 181, 68, 0.24); border-bottom: 0;
background:
repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), rgba(255, 255, 255, 0.07) calc(100% / 7 - 1px) calc(100% / 7)),
linear-gradient(180deg, rgba(242, 181, 68, 0.12) 0%, rgba(242, 181, 68, 0.035) 60%, transparent 100%);
}
.wall::after {
content: ""; position: absolute; left: 50%; top: 5%; width: calc(30% + 22px); height: calc(56% + 11px); translate: -50% -11px;
border-radius: 999px 999px 0 0; border: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 0;
}
/* the table: varnished top, a brass rim that follows the curve, an inlaid ring */
.table {
background:
radial-gradient(55% 30% at 50% 7%, rgba(255, 255, 255, 0.075), transparent 72%),
radial-gradient(80% 70% at 50% 28%, #2a2118 0%, #1d1711 50%, #120f0b 100%);
box-shadow:
inset 0 2px 0 rgba(242, 181, 68, 0.6),
inset 0 5px 0 rgba(0, 0, 0, 0.38),
inset 0 7px 0 rgba(242, 181, 68, 0.12),
0 -26px 80px rgba(242, 181, 68, 0.08);
}
.table::before {
content: ""; position: absolute; left: 9%; right: 9%; top: 6%; height: 64%; border-radius: 50%;
border: 1px solid rgba(242, 181, 68, 0.16);
}
.table .etch { opacity: 0.13; }
@media (max-width: 820px) {
.wall::before { width: 46%; height: 50%; }
.wall::after { width: calc(46% + 16px); height: calc(50% + 8px); translate: -50% -8px; }
}
/* the live card on the idle table: red only because it is live */
.last-ruling.is-live { border-color: rgba(255, 90, 79, 0.45); }
.last-ruling.is-live:hover { border-color: var(--dissent); }
.lr-live { display: grid; place-items: center; background: rgba(255, 90, 79, 0.12); }
.lr-live i { width: 12px; height: 12px; border-radius: 50%; background: var(--dissent); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 6px rgba(255, 90, 79, 0.18); } }
@media (prefers-reduced-motion: reduce) { .lr-live i { animation: none; } }
/* ---------------- the pitch form: its own dialog, art left, words right, links below; fits without scrolling ---------------- */
.composer-dialog { width: min(820px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--hairline-strong); border-radius: 20px; background: var(--surface); color: var(--ink); overflow: hidden; }
.composer-dialog::backdrop { background: rgba(9, 7, 5, 0.72); }
.composer-dialog .composer { width: auto; padding: 22px 24px 20px; gap: 14px; text-align: left; }
.cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cd-kicker { display: block; font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.composer-dialog .composer h2 { text-align: left; font: 600 26px/1.1 var(--font-display); letter-spacing: -0.03em; }
.cd-x { width: 40px; height: 40px; flex: none; border-radius: 999px; border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer; }
.cd-x:hover { border-color: var(--accent); color: var(--ink); }
.composer-dialog .steps { justify-content: flex-start; }
.composer-dialog .fields { display: grid; gap: 12px; }
.cd-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.cd-main { display: grid; gap: 10px; align-content: start; }
.cd-main textarea { min-height: 128px; }
.cd-art .imgpick { position: relative; height: 100%; min-height: 200px; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 10px; text-align: center; border-radius: 14px; }
.cd-art .imgpick-thumb { width: 100%; height: 100%; min-height: 120px; border-radius: 10px; }
.cd-art .imgpick-thumb svg { width: 34px; height: 34px; }
.cd-art .imgpick-text small { white-space: normal; }
.cd-art .imgpick-x { position: absolute; top: 16px; right: 16px; background: rgba(19, 16, 12, .86); }
.cd-social { border: 1px solid var(--hairline); border-radius: 14px; padding: 10px 12px 12px; margin: 0; }
.cd-social legend { padding: 0 6px; font: 600 11.5px/1 var(--font-text); color: var(--ink-soft); }
.cd-social legend small { font: 500 11px var(--font-mono); color: var(--ink-mute); margin-left: 6px; }
.cd-social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.soc { display: flex; align-items: center; gap: 8px; border: 1px solid var(--hairline-strong); border-radius: 10px; background: rgba(16, 13, 10, .78); padding: 0 10px; min-height: 42px; }
.soc:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242, 181, 68, .18); }
.soc-ic { color: var(--ink-mute); display: grid; place-items: center; flex: none; }
.soc input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 13.5px var(--font-text); outline: none; padding: 0; }
.cd-guide { font-size: 13px; color: var(--ink-soft); }
.cd-guide summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.cd-guide summary:hover { color: var(--accent); }
.cd-guide .guide-sec { margin-top: 8px; }
.composer-dialog .rule { margin: 0; font-size: 12px; }
.composer-dialog .composer-row { justify-content: space-between; }
@media (max-width: 640px) {
.composer-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
.composer-dialog .composer { padding: 16px; gap: 12px; height: 100%; box-sizing: border-box; overflow-y: auto; }
.cd-grid { grid-template-columns: 1fr; }
.cd-art .imgpick { min-height: 0; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto; text-align: left; }
.cd-art .imgpick-thumb { width: 56px; height: 56px; min-height: 0; }
.cd-art .imgpick-x { position: static; }
.cd-social-grid { grid-template-columns: 1fr; }
}
/* ---------------- nothing scrolls inside: panel = room height, lists page, the ruling fits its plate, dialogs fit the window ---------------- */
.ca-chart { display: none; }
.tabpanel { overflow: hidden; scrollbar-width: none; }
.tabpanel::-webkit-scrollbar { display: none; }
body.in-session .tabpanel { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px); mask-image: linear-gradient(180deg, transparent 0, #000 40px); }
@media (min-width: 821px) { .panel { max-height: none; } }
.side-mc { font: 500 12px/1.4 var(--font-mono); color: var(--ink-soft); padding: 2px 2px 0; }
.side-all { justify-self: start; min-height: 36px; font-size: 12.5px; }
.center { overflow: hidden; }
.plate p { font-size: clamp(14px, 1.15vw, 16px); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-dialog { max-height: calc(100dvh - 32px); overflow: hidden; }
#cardDialog { width: min(860px, 94vw); }
#cardDialog pre { font-size: 13.5px; line-height: 1.55; }
.rul-list { max-height: none; overflow: visible; }
.rul-why, .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#treasuryDialog .rul-tabs { margin-top: 10px; }
#treasuryDialog .tgrid { margin: 10px 0 8px; }
#coinsPager .rul-pager { margin: 14px 0 0; }
/* the ruling: a centered card that fits the window */
.sheet { overflow: hidden; place-items: center; padding: 16px; }
.sheet-inner { max-height: calc(100dvh - 32px); overflow: hidden; border-bottom: 1px solid var(--hairline-strong); border-radius: 22px; padding: 22px 30px; }
.v-call { font-size: clamp(16px, 1.5vw, 19px); margin: 12px 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v-grid { gap: 14px 30px; }
.v-sec h3 { margin-bottom: 8px; font-size: 15px; }
.v-sec li { margin-bottom: 4px; font-size: 13px; }
.v-why { gap: 6px; }
.v-why li > :last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-foot { margin-top: 12px; }
/* a phone has no room for the whole ruling on one screen: there, and only there, the page scrolls */
@media (max-width: 640px) {
.sheet { overflow-y: auto; place-items: end center; padding: 12px 0 0; }
.sheet-inner { max-height: none; border-radius: 22px 22px 0 0; }
.card-dialog { overflow-y: auto; }
}
/* fit, not scroll */
.composer-dialog { max-height: calc(100dvh - 32px); }
.composer-dialog .composer { padding: 18px 22px 18px; gap: 12px; }
.cd-main textarea { min-height: 112px; }
@media (max-width: 640px) {
.composer-dialog .composer { gap: 10px; }
.composer-dialog .cd-kicker { display: none; }
.composer-dialog .composer h2 { font-size: 21px; }
.cd-main textarea { min-height: 96px; }
.composer-dialog .rule { font-size: 11.5px; }
}
/* ---------------- type: Geist for the interface, Instrument Serif for what the council says, JetBrains Mono for numbers ---------------- */
:root { --font-display: "Geist", "Helvetica Neue", Arial, sans-serif; --font-text: "Geist", "Helvetica Neue", Arial, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; }
body { font-family: var(--font-text); }
.brand-name { font: 400 22px/1 var(--font-serif); letter-spacing: 0; }
.waiting h2 { font: 400 clamp(44px, 4.8vw, 72px)/0.95 var(--font-serif); letter-spacing: -0.01em; }
.waiting h2 em { font-style: italic; }
.topic h1 { font: 400 clamp(30px, 2.6vw, 40px)/1.05 var(--font-serif); letter-spacing: -0.005em; }
.composer-dialog .composer h2 { font: 400 36px/1.02 var(--font-serif); letter-spacing: -0.005em; }
.coins-head h2 { font: 400 34px/1 var(--font-serif); letter-spacing: -0.005em; }
.card-dialog h3, #historyBody h3 { font: 400 32px/1.05 var(--font-serif); letter-spacing: -0.005em; }
.v-call { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; letter-spacing: 0; }
.plate p { font-family: var(--font-serif); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.25; }
.cap-text { font: 400 clamp(19px, 1.75vw, 24px)/1.3 var(--font-serif); letter-spacing: 0; }
.cap-text.chair { font-style: italic; }
.cd-guide { justify-self: start; background: none; border: 0; padding: 0; font: 600 13px var(--font-text); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cd-guide:hover { color: var(--accent); }
/* ---------------- wallet menu: copy, explorer, disconnect (never on a single click) ---------------- */
.wmenu-wrap { position: relative; display: inline-flex; }
.wmenu-caret { margin-left: 6px; font-size: 10px; color: var(--ink-mute); }
.wmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 210px; display: grid; gap: 2px; padding: 6px; background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65); }
.wmenu-addr { font: 500 11.5px/1.3 var(--font-mono); color: var(--ink-mute); padding: 6px 10px 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.wallet .wmenu button, .wmenu a { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 9px 10px; border-radius: 8px; font: 500 13px var(--font-text); color: var(--ink-soft); cursor: pointer; }
.wallet .wmenu button:hover, .wmenu a:hover, .wallet .wmenu button:focus-visible, .wmenu a:focus-visible { background: var(--surface-3); color: var(--ink); }
.wallet .wmenu .wmenu-out { color: var(--dissent); }
@media (max-width: 820px) { .wmenu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; } }
/* the sound switch: an icon in the table's top-right corner, only while a hearing plays */
.stage > #soundBtn { position: absolute; top: 14px; right: 14px; z-index: 39; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 999px; background: rgba(19, 16, 12, 0.72); border: 1px solid var(--hairline-strong); color: var(--ink-soft); }
.stage > #soundBtn:hover { color: var(--ink); border-color: var(--accent); }
.stage > #soundBtn.blocked { color: var(--accent); border-color: var(--accent); }
body:not(.in-session) .stage > #soundBtn { display: none; }
/* lamplight: parchment ink, brass rule under the bar */
.topbar { border-bottom-color: rgba(233, 177, 76, 0.16); }
/* ---------------- coin card numbers: mcap, 1 h volume, holders in mono; the CA is the one action ---------------- */
.coin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.coin-stats div { display: grid; gap: 3px; }
.coin-stats small { font: 600 9.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-mute); }
.coin-stats b { font: 600 15px/1.1 var(--font-mono); color: var(--ink); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-ca { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 38px; }
.coin-ca .lbl { font-weight: 700; color: var(--accent); }
.coin-ca .cp { margin-left: auto; color: var(--ink-mute); }
.coin-ca:hover .cp { color: var(--accent); }
/* darker walnut: the room reads as night */
:root { --canvas: #0b0907; --surface: #110e0b; --surface-2: #17130f; --surface-3: #221c16; }
body { background: var(--canvas); }
.topbar { background: rgba(11, 9, 7, 0.9); }
.stage { background: radial-gradient(46% 40% at 50% 36%, rgba(233, 177, 76, 0.07), transparent 72%), radial-gradient(130% 90% at 50% 0%, #19140e 0%, #110d09 52%, #090706 100%); }
.table { background: radial-gradient(55% 30% at 50% 7%, rgba(255, 240, 220, 0.06), transparent 72%), radial-gradient(80% 70% at 50% 28%, #211a13 0%, #17120d 50%, #0e0b08 100%); }
/* the chamber wall (generated in Nano Banana): walnut panels, the arched window, brass lamps; the CSS window retires */
.stage { background: linear-gradient(180deg, rgba(11, 9, 7, 0.10) 0%, rgba(11, 9, 7, 0.30) 42%, rgba(11, 9, 7, 0.82) 68%, #0b0907 100%), url("/chamber.webp") center 18% / cover no-repeat, #0b0907; }
.wall { background: none; }
.wall::before, .wall::after { display: none; }
/* =====================================================================================================================
THE TV PITCH SHOW (docs/design.md): a studio at night. Stage light, seven chairs, an IN × OUT scoreboard, broadcast
graphics. Square corners, Archivo condensed for TV type, JetBrains Mono for numbers, Cinzel for the logo only.
===================================================================================================================== */
:root {
--canvas: #0e0c0a; --surface: #151210; --surface-2: #1b1714; --surface-3: #25201b;
--ink: #f2ebdd; --ink-soft: #cfc6b6; --ink-mute: #9a8f80;
--accent: #ffb23f; --accent-deep: #ffb23f; --accent-soft: rgba(255, 178, 63, 0.12);
--go: #35d07f; --out: #8c8279; --onair: #ff3b30;
--hairline: rgba(242, 235, 221, 0.10); --hairline-strong: rgba(242, 235, 221, 0.20);
--font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
--font-serif: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-logo: "Cinzel", Georgia, serif;
--r: 3px;
}
body { background: var(--canvas); font-family: var(--font-text); }
/* TV type: condensed, heavy, upper case */
.tv, .waiting h2, .topic h1, .coins-head h2, .composer-dialog .composer h2, .card-dialog h3, #historyBody h3, .v-label, .cap-who, .nameplate b, .pill, .convene {
font-family: var(--font-display); font-stretch: 72%; text-transform: uppercase;
}
/* square corners everywhere the "AI default" had pills and 14px cards */
.pill, .ghost, .mini, .stats div, .panel, .stage, .stage-wrap, .topic, .card-dialog, .composer-dialog, .rul-row, .coin, .last-ruling,
.tag-v, .wallet button, .soc, .fl input, .fl textarea, .imgpick, .line, .playbar, .speed button, .skip, .nameplate, .chip, .score,
.brief, .rul-q, .filters button, .coin-badge, .ca, .net, .cd-x, .imgpick-thumb, .result, .convene, .waitcard, .side-all, .coin-ca,
.stage > #soundBtn, .wmenu, .rul-pager .pg button, .lr-img, .rul-img, .opt .id, .line-now, .sheet-inner, .v-label, .v-opts .opt, .cruxes > * { border-radius: var(--r) !important; }
/* ---------------- top bar: the logo in Cinzel, a hard amber rule ---------------- */
.topbar { background: rgba(14, 12, 10, 0.94); border-bottom: 1px solid rgba(255, 178, 63, 0.28); }
.brand-mark { width: 24px; height: 24px; }
.brand-name { font: 600 19px/1 var(--font-logo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.pill { background: var(--accent); color: #140d03; font-weight: 800; letter-spacing: 0.02em; font-size: 15px; padding: 9px 16px; border: 0; }
.pill:hover { background: #ffc466; }
.ghost { font-weight: 600; }
.top-actions .ghost { font: 600 14px var(--font-text); text-transform: none; }
.ca { font-family: var(--font-mono); }
/* ---------------- the studio: black, seven stage lights, a glossy floor ---------------- */
.stage {
background:
radial-gradient(7% 62% at 8.5% 0%, rgba(255, 220, 170, 0.15), transparent 72%),
radial-gradient(7% 66% at 22.2% 0%, rgba(255, 220, 170, 0.15), transparent 72%),
radial-gradient(7% 70% at 36.1% 0%, rgba(255, 220, 170, 0.15), transparent 72%),
radial-gradient(8% 74% at 50% 0%, rgba(255, 220, 170, 0.17), transparent 72%),
radial-gradient(7% 70% at 63.9% 0%, rgba(255, 220, 170, 0.15), transparent 72%),
radial-gradient(7% 66% at 77.8% 0%, rgba(255, 220, 170, 0.15), transparent 72%),
radial-gradient(7% 62% at 91.5% 0%, rgba(255, 220, 170, 0.15), transparent 72%),
radial-gradient(70% 30% at 50% 100%, rgba(255, 178, 63, 0.10), transparent 70%),
linear-gradient(180deg, #13100d 0%, #0b0908 58%, #070605 100%);
border: 1px solid rgba(255, 178, 63, 0.22);
}
/* the lighting truss across the top, and a little grain so it is not a flat vector */
.wall {
background:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(90deg, rgba(242, 235, 221, 0.16) 0 2px, transparent 2px 26px) 0 10px / 100% 2px no-repeat,
linear-gradient(180deg, rgba(242, 235, 221, 0.10), rgba(242, 235, 221, 0.10)) 0 6px / 100% 1px no-repeat,
linear-gradient(180deg, rgba(242, 235, 221, 0.10), rgba(242, 235, 221, 0.10)) 0 14px / 100% 1px no-repeat;
}
.wall::before, .wall::after { display: none; }
/* the judges' chairs: high backs in dark leather with an amber welt, behind each bust */
.seat::before {
content: ""; position: absolute; left: 13%; right: 13%; top: 6%; bottom: 2%; z-index: -1;
border-radius: 48% 48% 8% 8% / 26% 26% 4% 4%;
background: linear-gradient(180deg, #3b2219 0%, #24140e 55%, #150b07 100%);
box-shadow: inset 0 0 0 2px rgba(255, 178, 63, 0.30), inset 0 18px 30px rgba(255, 220, 170, 0.06), inset 0 -40px 50px rgba(0, 0, 0, 0.55);
}
/* the floor: glossy black, an amber stage edge, the pitcher's mark in the middle */
.table {
background:
radial-gradient(40% 22% at 50% 30%, rgba(255, 178, 63, 0.10), transparent 70%),
radial-gradient(55% 30% at 50% 6%, rgba(255, 240, 220, 0.05), transparent 72%),
linear-gradient(180deg, #120f0c 0%, #0a0807 60%, #060504 100%);
box-shadow: inset 0 2px 0 rgba(255, 178, 63, 0.75), inset 0 4px 0 rgba(0, 0, 0, 0.6), 0 -30px 90px rgba(255, 178, 63, 0.06);
}
.table::before { left: 34%; right: 34%; top: 16%; height: 22%; border: 1px dashed rgba(255, 178, 63, 0.35); }
.table .etch { display: none; }
/* ---------------- broadcast layer: ON AIR, the HUD line, the IN × OUT scoreboard ---------------- */
.hud { position: absolute; z-index: 39; left: 14px; right: 64px; top: 22px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.onair { font: 700 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 9px; border-radius: 2px; }
.onair.live { background: var(--onair); color: #fff; }
.onair.live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #fff; vertical-align: 1px; animation: livePulse 1.4s ease-in-out infinite; }
.onair.replay { background: rgba(242, 235, 221, 0.12); color: var(--ink); border: 1px solid var(--hairline-strong); }
.onair.off { color: var(--ink-mute); border: 1px solid var(--hairline-strong); }
.hud-line { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scoreboard { margin-left: auto; display: flex; align-items: stretch; background: rgba(10, 8, 6, 0.9); border: 1px solid var(--hairline-strong); border-radius: 2px; }
.scoreboard[hidden] { display: none; }
.scoreboard > span { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
.scoreboard small { font: 700 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.scoreboard b { font: 700 24px/1 var(--font-mono); }
.sb-in { color: var(--go); border-right: 1px solid var(--hairline); }
.sb-out { color: var(--out); border-left: 1px solid var(--hairline); }
.sb-pips { gap: 4px !important; }
.sb-pips i { width: 8px; height: 18px; background: rgba(242, 235, 221, 0.12); }
.sb-pips i.in { background: var(--go); }
.sb-pips i.out { background: var(--out); }
/* camera framing on whoever speaks */
.stage.live .seat.speaking::after {
content: ""; position: absolute; inset: 4% 8% 22% 8%; pointer-events: none;
--c: var(--accent); --l: 16px;
background:
linear-gradient(var(--c), var(--c)) left top / var(--l) 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px var(--l) no-repeat,
linear-gradient(var(--c), var(--c)) right top / var(--l) 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px var(--l) no-repeat,
linear-gradient(var(--c), var(--c)) left bottom / var(--l) 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px var(--l) no-repeat,
linear-gradient(var(--c), var(--c)) right bottom / var(--l) 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px var(--l) no-repeat;
}
/* ---------------- name plates and IN / OUT chips ---------------- */
.nameplate { background: rgba(10, 8, 6, 0.92); border: 1px solid var(--hairline-strong); border-top: 2px solid var(--accent); padding: 5px 9px; }
.nameplate b { font-size: 15px; font-weight: 800; letter-spacing: 0.01em; }
.chip { font: 700 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 6px; background: rgba(242, 235, 221, 0.08); color: var(--ink-soft); }
.chip.in { background: rgba(53, 208, 127, 0.16); color: var(--go); }
.chip.out { background: rgba(140, 130, 121, 0.16); color: var(--out); }
.score { font: 500 10.5px/1 var(--font-mono); background: transparent; color: var(--ink-mute); }
/* ---------------- the lower-third: who speaks, in a broadcast band ---------------- */
.caption { background: rgba(10, 8, 6, 0.9); border-left: 6px solid var(--accent); padding: 10px 16px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.cap-head { align-items: center; }
.cap-av img { border-radius: 2px; }
.cap-who { font-size: 19px; font-weight: 800; letter-spacing: 0.01em; color: var(--ink); }
.cap-tag { font: 600 10.5px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.cap-text { font: 600 clamp(17px, 1.45vw, 21px)/1.32 var(--font-text); letter-spacing: -0.01em; color: var(--ink); min-height: 0; }
.cap-text.chair { font-style: normal; color: var(--ink-soft); }
/* ---------------- "now pitching" chyron and the segment rundown (stepper) ---------------- */
.topic { background: var(--surface); border: 1px solid var(--hairline); border-left: 6px solid var(--accent); }
.topic-main > .label { color: var(--accent); }
.topic h1 { font: 800 clamp(30px, 2.8vw, 42px)/1 var(--font-display); font-stretch: 72%; letter-spacing: 0; margin: 6px 0 8px; }
.stepper li { font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
/* ---------------- idle stage: the promise in TV type ---------------- */
.waiting h2 { font: 800 clamp(54px, 6.2vw, 96px)/0.9 var(--font-display); font-stretch: 70%; letter-spacing: -0.01em; }
.waiting h2 em { font-style: normal; color: var(--accent); }
.pulse { font: 600 11px var(--font-mono); letter-spacing: 0.12em; }
.stats div { background: rgba(10, 8, 6, 0.86); border: 1px solid var(--hairline); border-top: 2px solid var(--hairline-strong); }
.stats small { font-family: var(--font-mono); }
.stats b { font: 700 26px/1.1 var(--font-mono); }
.last-ruling { background: rgba(10, 8, 6, 0.86); }
/* ---------------- side panel: a rundown, rows not cards ---------------- */
.panel { background: var(--surface); border: 1px solid var(--hairline); }
.panel-head { font: 700 11px/1 var(--font-mono); letter-spacing: 0.16em; color: var(--accent); border-bottom: 1px solid rgba(255, 178, 63, 0.25); }
.side-sec .mini, .feed-card { background: transparent; border: 0; border-bottom: 1px solid var(--hairline); padding: 10px 2px; }
.side-sec .mini:hover { background: rgba(242, 235, 221, 0.03); }
.tag-v { font-family: var(--font-mono); letter-spacing: 0.06em; }
/* ---------------- launched shelf and dialogs ---------------- */
.coins-head h2 { font: 800 36px/1 var(--font-display); font-stretch: 72%; }
.coin { background: var(--surface); }
.coin-badge { border-radius: 2px !important; }
.card-dialog, .composer-dialog { background: var(--surface); border: 1px solid rgba(255, 178, 63, 0.25); }
.composer-dialog .composer h2 { font: 800 38px/0.95 var(--font-display); font-stretch: 72%; }
.card-dialog h3, #historyBody h3 { font: 800 32px/1 var(--font-display); font-stretch: 72%; }
.v-label { font-weight: 800; }
.v-call { font-family: var(--font-text); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); }
.plate p { font-family: var(--font-text); font-weight: 600; }
.convene { font-weight: 800; letter-spacing: 0.02em; }
@media (max-width: 820px) {
.hud { top: 14px; right: 14px; gap: 8px; }
.hud-line { display: none; }
.scoreboard b { font-size: 18px; }
.sb-pips i { width: 5px; height: 14px; }
.waiting h2 { font-size: clamp(46px, 13vw, 64px); }
.brand-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .onair.live::before { animation: none; } }
/* ---------------- the stage reads first: no emblem behind the promise, a darker floor ---------------- */
.table { background: radial-gradient(60% 40% at 50% 26%, rgba(0, 0, 0, 0.55), transparent 80%), linear-gradient(180deg, #0b0908 0%, #060504 60%, #040303 100%); }
.table::before, .table .etch { display: none; }
.waiting h2 em { display: block; }
.ghost.watch { display: inline-flex; align-items: center; gap: 8px; border-color: var(--accent); color: var(--ink); }
.ghost.watch svg { color: var(--accent); }
/* ---------------- episodes strip: thumbnails with play, episode number and verdict (bilibili principle) ---------------- */
.episodes { padding: 0 24px 8px; }
.episodes[hidden] { display: none; }
.ep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ep { display: grid; gap: 6px; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font-family: inherit; }
.ep-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); border: 1px solid var(--hairline); border-radius: 2px; display: grid; place-items: center; }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease-out); }
.ep:hover .ep-thumb img { transform: scale(1.04); }
.ep:hover .ep-thumb { border-color: var(--accent); }
.ep-ph { font: 700 28px/1 var(--font-mono); color: var(--ink-mute); }
.ep-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 8, 6, 0.78); color: var(--accent); border: 1px solid rgba(255, 178, 63, 0.6); }
.ep:hover .ep-play { background: var(--accent); color: #140d03; }
.ep-no { position: absolute; left: 8px; top: 8px; font: 700 10.5px/1 var(--font-mono); letter-spacing: .1em; background: rgba(10, 8, 6, 0.85); color: var(--ink); padding: 5px 7px; border-radius: 2px; }
.ep-verdict { position: absolute; right: 8px; bottom: 8px; font: 700 10.5px/1 var(--font-mono); letter-spacing: .08em; padding: 5px 7px; border-radius: 2px; background: rgba(10, 8, 6, 0.88); color: var(--go); }
.ep-verdict.reshape { color: var(--amend); }
.ep-verdict.dont { color: #ff8a80; }
.ep-name { font: 800 17px/1.1 var(--font-display); font-stretch: 72%; text-transform: uppercase; }
.ep-meta { font: 500 11.5px/1 var(--font-mono); color: var(--ink-mute); }
@media (max-width: 820px) {
.episodes { padding: 0 16px 8px; }
.ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* phones: the two actions (pitch, watch) come before the numbers; the menu links sit on one line */
@media (max-width: 820px) {
.waiting > .pulse { order: 1; } .waiting > h2 { order: 2; } .waiting > p { order: 3; } .waiting > .row { order: 4; } .waiting > .last-ruling { order: 5; } .waiting > .stats { order: 6; }
.top-actions { align-items: center; }
.top-actions .ghost { display: inline-flex; align-items: center; line-height: 1; }
}
/* phones: the stage comes first; the chyron keeps two lines of the story and drops the option list */
@media (max-width: 820px) {
.topic { padding: 10px 14px; gap: 6px; }
.topic h1 { font-size: 26px; margin: 4px 0; }
.topic p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 13.5px; }
.topic .options { display: none; }
}
/* the idle stage fits the window: a smaller promise, slimmer numbers and card, tighter gaps */
.waiting { gap: 8px; }
.waiting h2 { font-size: clamp(40px, 4.4vw, 70px); }
.waiting p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.stats { gap: 6px; margin: 2px 0; }
.stats div { padding: 6px 10px; }
.stats b { font-size: 21px; }
.last-ruling { padding: 7px 10px; margin-top: 2px; }
.lr-why { -webkit-line-clamp: 1; }
.lr-img { width: 36px; height: 36px; }
.last-ruling { grid-template-columns: 36px minmax(0, 1fr) auto; }
/* short laptop screens: the whole stage in one view. The promise on one line, the four stat boxes step aside (the
episode number stays in the broadcast line), the buttons and the last pitch stay */
@media (min-width: 821px) {
.stage { max-height: calc(100vh - 96px); }
}
@media (min-width: 821px) and (max-height: 880px) {
.waiting h2 { font-size: clamp(36px, 3.4vw, 54px); }
.waiting h2 em { display: inline; }
.waiting > .stats { display: none; }
.waiting p { max-width: 520px; }
}
/* one scene: the table is the same warm dark as the studio, lit at its far edge by the chairs, darker only where text sits */
.stage {
background:
radial-gradient(7% 62% at 8.5% 0%, rgba(255, 220, 170, 0.13), transparent 72%),
radial-gradient(7% 66% at 22.2% 0%, rgba(255, 220, 170, 0.13), transparent 72%),
radial-gradient(7% 70% at 36.1% 0%, rgba(255, 220, 170, 0.13), transparent 72%),
radial-gradient(8% 74% at 50% 0%, rgba(255, 220, 170, 0.15), transparent 72%),
radial-gradient(7% 70% at 63.9% 0%, rgba(255, 220, 170, 0.13), transparent 72%),
radial-gradient(7% 66% at 77.8% 0%, rgba(255, 220, 170, 0.13), transparent 72%),
radial-gradient(7% 62% at 91.5% 0%, rgba(255, 220, 170, 0.13), transparent 72%),
linear-gradient(180deg, #1a1410 0%, #120e0b 55%, #0e0b09 100%);
}
.seat::before { background: linear-gradient(180deg, #33201a 0%, #221510 55%, #160d09 100%); }
.table {
background:
radial-gradient(42% 34% at 50% 34%, rgba(12, 9, 7, 0.62), transparent 78%),
radial-gradient(75% 40% at 50% 0%, rgba(255, 190, 110, 0.12), transparent 72%),
linear-gradient(180deg, #2a2019 0%, #1d1611 38%, #140f0c 100%);
box-shadow: inset 0 2px 0 rgba(255, 178, 63, 0.7), inset 0 5px 14px rgba(0, 0, 0, 0.45), 0 -30px 90px rgba(255, 178, 63, 0.06);
}
/* no chair shapes behind the judges */
.seat::before { display: none; }
/* The Floor logo (Pedro, 19/10/2026): wide square type, Orbitron as the free match */
.brand-name { font: 900 21px/1 'Orbitron', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
@media (max-width: 640px) { .brand-name { font-size: 17px; } }
/* ---------------- the studio, alive (docs/design.md, "estúdio vivo"): the set behind the judges breathes like a
camera on a slow dolly, five stage lights sweep through haze, dust shines in the beams. All decorative layers sit
under the judges (z 1–3) except the dust (z 12, over the busts, under the desk). ---------------- */
.stage { background: #070605; }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-back { z-index: 1; }
.fx-front { z-index: 12; }
/* the set: the studio plate (or the warm dark when there is none), with a slow dolly */
.fx-set {
position: absolute; inset: -4%;
background:
radial-gradient(60% 40% at 50% 104%, rgba(255, 178, 63, 0.16), transparent 70%),
radial-gradient(50% 45% at 50% 18%, rgba(214, 160, 96, 0.14), transparent 70%),
var(--set, linear-gradient(180deg, #15110d 0%, #0c0a08 55%, #070605 100%)) center 30% / cover no-repeat;
animation: dolly 26s ease-in-out infinite alternate;
}
@keyframes dolly { from { transform: scale(1.0) translate3d(-0.8%, 0, 0); } to { transform: scale(1.06) translate3d(0.8%, -0.6%, 0); } }
/* the lights: five cones from the truss, each swaying on its own rhythm */
.beams i {
position: absolute; top: -8%; width: 26%; height: 118%; translate: -50% 0; transform-origin: 50% 0;
background: linear-gradient(180deg, rgba(255, 226, 180, 0.30) 0%, rgba(255, 214, 160, 0.10) 45%, rgba(255, 200, 140, 0) 85%);
clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
filter: blur(14px); mix-blend-mode: screen; opacity: 0.55;
animation: sway var(--dur, 11s) ease-in-out infinite alternate, flicker 7s steps(1) infinite;
animation-delay: var(--delay, 0s), var(--fdelay, 0s);
}
.beams i:nth-child(1) { left: 16%; --dur: 13s; --delay: -3s; --fdelay: -1s; --a: 9deg; }
.beams i:nth-child(2) { left: 33%; --dur: 10s; --delay: -7s; --fdelay: -4s; --a: -7deg; }
.beams i:nth-child(3) { left: 50%; --dur: 15s; --delay: -2s; --fdelay: -2s; --a: 5deg; opacity: 0.7; }
.beams i:nth-child(4) { left: 67%; --dur: 11s; --delay: -5s; --fdelay: -6s; --a: -8deg; }
.beams i:nth-child(5) { left: 84%; --dur: 12s; --delay: -9s; --fdelay: -3s; --a: 7deg; }
@keyframes sway { from { rotate: calc(var(--a) * -1); } to { rotate: var(--a); } }
@keyframes flicker { 0%, 100% { filter: blur(14px) brightness(1); } 48% { filter: blur(14px) brightness(1.12); } 52% { filter: blur(14px) brightness(0.94); } }
/* the haze: two layers of soft smoke drifting the other way from each other */
.haze, .haze::after {
position: absolute; inset: -20% -40%; content: "";
background: url("data:image/svg+xml;utf8,") 0 0 / 1200px 600px repeat;
mix-blend-mode: screen; opacity: 0.22; animation: drift 60s linear infinite;
}
.haze::after { inset: 0; opacity: 0.6; background-size: 900px 450px; animation: drift 44s linear infinite reverse; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1200px, 0, 0); } }
/* film: grain and a vignette so it reads as a camera, not a vector */
.fx-front::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.fx-front::after {
content: ""; position: absolute; inset: -50%; opacity: 0.07; mix-blend-mode: overlay;
background: url("data:image/svg+xml;utf8,");
animation: grain 0.6s steps(3) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
#dust { position: absolute; inset: 0; }
/* the judges catch the light: a warm rim from above, so they sit IN the scene */
.seat .bust { filter: drop-shadow(0 -2px 0 rgba(255, 214, 160, 0.10)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.65)); }
.seat::before { display: none; }
@media (prefers-reduced-motion: reduce) {
.fx-set, .beams i, .haze, .haze::after, .fx-front::after { animation: none; }
}
/* the set itself: the realistic render, darkened toward the floor so the judges and the desk read first */
.fx-set { --set: linear-gradient(180deg, rgba(7, 6, 5, 0.25) 0%, rgba(7, 6, 5, 0.45) 55%, rgba(7, 6, 5, 0.92) 82%, #070605 100%), url("/chamber.webp"); background-size: cover; background-position: center 22%; }
/* the floor: glossy black that mirrors the set (a flipped, blurred copy) with pools of light under the spots */
.table { overflow: hidden; isolation: isolate;
background:
radial-gradient(9% 26% at 16% 0%, rgba(255, 214, 160, 0.16), transparent 70%),
radial-gradient(9% 30% at 33% 0%, rgba(255, 214, 160, 0.16), transparent 70%),
radial-gradient(11% 34% at 50% 0%, rgba(255, 214, 160, 0.20), transparent 70%),
radial-gradient(9% 30% at 67% 0%, rgba(255, 214, 160, 0.16), transparent 70%),
radial-gradient(9% 26% at 84% 0%, rgba(255, 214, 160, 0.16), transparent 70%),
linear-gradient(180deg, rgba(9, 7, 6, 0.35) 0%, rgba(7, 6, 5, 0.86) 55%, #060504 100%) !important; }
.table::after {
content: ""; position: absolute; left: -6%; right: -6%; top: 0; height: 80%; z-index: -1; pointer-events: none;
background: url("/chamber.webp") center 30% / cover no-repeat; transform: scaleY(-1);
filter: blur(6px) brightness(0.5) saturate(0.9); opacity: 0.5;
-webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 85%); mask-image: linear-gradient(0deg, #000 0%, transparent 85%);
}
/* the busts end in the dark, not in a hard cut */
.seat .bust { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, #000 72%, transparent 98%); }
/* =====================================================================================================================
WHALETANK (Pedro + Igor, 19/10/2026; docs/design.md): the show's set is a boardroom inside a giant tank. Igor's
logo (white condensed type, a whale's tail in the A) and his header plate set the look: deep water, cold light from
the surface, seven leather chairs. White is the one action colour (the logo is white on black); ice blue only for
small highlights; green and grey stay for in and out; red only for ON AIR.
===================================================================================================================== */
:root {
--canvas: #03080d; --surface: #07111a; --surface-2: #0b1823; --surface-3: #12212e;
--ink: #eef5fa; --ink-soft: #c3d2dd; --ink-mute: #7f95a6;
--accent: #8fd3f2; --accent-deep: #8fd3f2; --accent-soft: rgba(143, 211, 242, 0.12);
--hairline: rgba(200, 228, 245, 0.10); --hairline-strong: rgba(200, 228, 245, 0.20);
--font-display: "Anton", "Archivo", "Helvetica Neue", Arial, sans-serif;
}
::selection { background: rgba(143, 211, 242, 0.3); }
/* TV type is Anton (the free match for the logo's tall condensed letters), never stretched */
.tv, .waiting h2, .topic h1, .coins-head h2, .composer-dialog .composer h2, .card-dialog h3, #historyBody h3, .v-label, .cap-who, .nameplate b {
font-family: var(--font-display); font-stretch: normal; font-weight: 400; letter-spacing: 0.005em;
}
.waiting h2 { font-size: clamp(50px, 5.4vw, 84px); line-height: 0.92; }
.waiting h2 em { color: var(--ink); font-style: normal; -webkit-text-stroke: 0; opacity: 0.55; }
/* the logo in the bar: Igor's mark, white on the dark */
.brand-wt { height: 40px; width: auto; display: block; }
@media (max-width: 640px) { .brand-wt { height: 32px; } }
.topbar { background: rgba(3, 8, 13, 0.92); border-bottom: 1px solid rgba(143, 211, 242, 0.22); }
/* the one action: white, square, black type, like the logo */
.pill, .convene { background: #ffffff; color: #03080d; font-family: "Archivo", sans-serif; font-stretch: 100%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.pill:hover, .convene:hover { background: #d9ecf7; }
/* the set: Igor's tank, with a slow dolly; the water darkens toward the table so the judges read first */
.stage { background: #03080d; border: 1px solid rgba(143, 211, 242, 0.18); }
.fx-set {
--set: linear-gradient(180deg, rgba(3, 8, 13, 0.05) 0%, rgba(3, 8, 13, 0.35) 38%, rgba(3, 8, 13, 0.82) 58%, rgba(3, 8, 13, 0.95) 80%, #03080d 100%), url("/tank.webp");
background: var(--set) center 30% / cover no-repeat;
}
/* light from the surface: the beams go cold and thin, like sun through water */
.beams i { background: linear-gradient(180deg, rgba(190, 230, 255, 0.26) 0%, rgba(160, 215, 245, 0.08) 45%, rgba(140, 200, 240, 0) 85%); opacity: 0.45; }
.haze, .haze::after { opacity: 0.10; filter: hue-rotate(170deg) saturate(0.6); }
/* the table: no drawn shape of its own, the set already has one; just the dark that the copy sits on */
.table { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.table::after { display: none; }
.seat .bust { filter: drop-shadow(0 -2px 0 rgba(200, 235, 255, 0.12)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.7)); }
.table .etch { display: none; }
/* Pedro, 20/10: the set a little dimmer, so the judges and the copy stand out more */
.fx-set { filter: brightness(0.72) saturate(0.92); }
/* the home in three numbered steps (Pedro, 20/10: "simple enough for anyone") */
#waitText:empty { display: none; }
.how3 { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px auto 20px; padding: 0; width: 100%; text-align: left; }
.waiting:has(.how3) { width: min(760px, 100%); }
.waiting > .how3 { order: 3; }
.how3 li { counter-increment: s; position: relative; padding: 12px 12px 12px 48px; background: rgba(3, 8, 13, 0.72); border: 1px solid rgba(200, 228, 245, 0.16); }
.how3 li::before { content: counter(s); position: absolute; left: 12px; top: 10px; font: 400 30px/1 "Anton", sans-serif; color: #fff; }
.how3 b { display: block; color: #fff; font: 700 14px/1.2 "Archivo", sans-serif; }
.how3 small { display: block; margin-top: 4px; color: var(--ink-mute); font-size: 12.5px; line-height: 1.35; }
@media (max-width: 640px) { .how3 { grid-template-columns: 1fr; max-width: 340px; } }
/* UX pass (Pedro, 20/10): the hero reads top to bottom the way a newcomer needs it. What it is, how it works, the
button; the numbers and the last ruling after. One replay entry: the last-ruling card, so the extra button hides. */
.waiting > .pulse { order: 1; } .waiting > h2 { order: 2; } .waiting > p { order: 3; } .waiting > .how3 { order: 4; }
.waiting > .row { order: 5; } .waiting > .last-ruling { order: 6; } .waiting > .stats { order: 7; }
.waiting:has(#lastRuling:not([hidden])) #waitHistory { display: none; }
.how3 { margin: 10px auto 6px; }
.waiting .row .pill { padding: 14px 28px; font-size: 16px; }
/* the four counters are a footnote here, not a headline */
.waiting > .stats div { padding: 6px 10px; }
.waiting > .stats b { font-size: 18px; }
/* the composer's steps: square, like everything else */
#composerSteps span { border-radius: 2px !important; }