/* ---------------------------------------------------------------------------
   Storylines — "In the room" (src/room.css is the furniture; the recipe is
   the room kit). The page stands in the coach's office (the press
   conference in the press room): the Goals window on the left, the talks,
   the staff, the mentors and the latest stories on the right. Sitting a man
   down and the press conference are two windows each: him (and the scene
   the talk happens in, its own picture inside the window) and your answer.

   Classes `cv-` (the talks) and `gl-` (the goals). Solid saturated colour,
   3px ink frames with cut corners, never a radius, a pale tint, a stripe or
   an emoji, nothing at regular weight, and no words straight on a picture.
--------------------------------------------------------------------------- */
.mood-svg { display: block; }

/* --- the Goals window --------------------------------------------------------- */
.cv-gtabs { margin-bottom: 10px; }
.gl-list { display: grid; gap: 8px; }
.gl-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "f who who act" "f what what act" "f meter stake act" "pv pv pv pv";
  gap: 6px 14px; align-items: center;
  margin: 3px; padding: 10px 12px 10px 30px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.gl-row:hover { background: var(--card-hov); color: var(--card-ink); }
/* a prove-it goal's practice board: a row of its own across the card, never
   squeezed into a free cell beside the chips (owner: "nothing lines up") */
.gl-row > .pv-cmp { grid-area: pv; margin: 4px 0 0; }
.gl-pic { grid-area: f; align-self: start; display: block; line-height: 0; text-decoration: none; }
.gl-pic .rm-fc { margin: 2px; }
.gl-pic.club .rm-crest { width: 64px; height: 64px; }
.gl-logo { width: 32px; height: 32px; object-fit: contain; }
.gl-who { grid-area: who; display: flex; align-items: center; gap: 2px 4px; flex-wrap: wrap; min-width: 0; }
.gl-nm { margin-right: 6px; font: 400 26px/.95 var(--disp); letter-spacing: .4px; text-transform: uppercase; overflow-wrap: anywhere; }
.gl-due { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; padding-left: 8px;
  font: 400 21px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.gl-due small { font: 900 9.5px/1 var(--sans); letter-spacing: .1em; color: var(--soft); }
.gl-what { grid-area: what; font: 900 16px/1.25 var(--sans); }
.gl-what small { margin-left: 10px; font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.gl-meter { grid-area: meter; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.gl-meter .rm-bar { flex: 1 1 140px; max-width: 260px; }
.gl-v { font: 900 12px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--card-ink); }
.gl-stake { grid-area: stake; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.gl-lab { margin-right: 6px; font: 900 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.gl-act { grid-area: act; justify-self: end; }
.gl-act .rm-btn { min-width: 128px; }

/* where a goal stands: solid, pending is violet (also Home's goal rows) */
.gl-st { display: inline-block; padding: 2px 8px 1px; white-space: nowrap; background: var(--ink); color: #fff; }
.gl-st.rm-bd { padding: 4px 7px 3px; }
.gl-st.rm-bd.big { padding: 6px 9px 5px; }
.gl-st.good { background: var(--green); }
.gl-st.bad { background: var(--red); }
.gl-st.wait { background: var(--violet); }

/* what is done: one ink bar that opens, with how each ended counted */
.gl-done-t {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 6px); margin: 14px 3px 3px; padding: 10px 12px 9px;
  border: 0; cursor: pointer; text-align: left; background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
  font: 400 22px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase;
}
.gl-done-t:hover { background: var(--gold); color: var(--ink); }
.gl-tri { flex: none; width: 0; height: 0; border-left: 9px solid var(--gold); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.gl-done-t .gl-tri { border-left-color: var(--ink); }
.gl-done-t.on .gl-tri { transform: rotate(90deg); }
.gl-ends { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.gl-done { display: grid; gap: 6px; margin-top: 8px; }
.gl-done[hidden] { display: none; }
.gl-drow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin: 3px; padding: 6px 10px 6px 6px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.gl-dnone { width: 32px; height: 32px; margin: 2px; background: var(--ink); box-shadow: var(--frame-2); }
.gl-dt { min-width: 0; }
.gl-dt b { display: block; font: 400 19px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.gl-dt span { display: block; margin-top: 2px; font: 800 12.5px/1.3 var(--sans); color: var(--soft); }
.gl-dch { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

@media (max-width: 640px) {
  .gl-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "f who" "f what" "meter meter" "pv pv" "stake stake" "act act";
    gap: 8px 10px; padding: 10px; }
  .gl-row.rm-pt::before { display: none; }
  .gl-nm { font-size: 23px; width: 100%; }
  .gl-due { margin-left: 0; padding-left: 0; font-size: 18px; }
  .gl-what { font-size: 15px; }
  .gl-what small { display: block; margin: 5px 0 0; white-space: normal; }
  .gl-stake { justify-content: flex-start; }
  .gl-act { justify-self: stretch; }
  .gl-act .rm-btn { display: flex; width: calc(100% - 6px); }
  .gl-drow { grid-template-columns: auto minmax(0, 1fr); }
  .gl-dch { grid-column: 1 / -1; justify-content: flex-start; }
  .gl-done-t { flex-wrap: wrap; row-gap: 8px; }
  .gl-ends { margin-left: 0; flex-basis: 100%; justify-content: flex-start; }
}

/* --- the press conference on offer (no picture: the room is the page's background) --- */
.cv-mlab { margin: 3px 3px 10px; font: 900 15px/1.3 var(--sans); }
.cv-mbtns { display: flex; flex-wrap: wrap; gap: 4px; }

/* --- the Inbox: every talk waiting for you is a big white card ---------------------
   his face, his name, what it is about on a solid badge, one short line and
   a gold Talk button. The whole card is the link. */
.cv-cards { display: grid; gap: 10px; }
.cv-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  margin: 3px; padding: 8px 10px 8px 8px; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: var(--frame), 0 5px 0 0 var(--ink);
}
.cv-card:hover { background: var(--gold); }
.cv-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.cv-cf { align-self: start; line-height: 0; }
.cv-cf .rm-fc { margin: 3px; box-shadow: var(--frame); }
.cv-cb { display: grid; gap: 5px; min-width: 0; justify-items: start; }
.cv-ctop { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.cv-cn { min-width: 0; font: 400 26px/.95 var(--disp); letter-spacing: .4px; text-transform: uppercase; overflow-wrap: anywhere; }
.cv-cm { flex: none; line-height: 0; }
.cv-cbd { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-left: -2px; }
.cv-cl { font: 800 13.5px/1.3 var(--sans); }
.cv-via { display: inline-flex; align-items: center; gap: 6px; }
.cv-via .rm-fc { margin: 2px; }
.cv-via small { display: grid; gap: 1px; font: 900 9.5px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cv-via small b { font: 900 12px/1.1 var(--sans); letter-spacing: 0; text-transform: none; }
.cv-card .cv-talk { pointer-events: none; margin: 3px 3px 8px; }
.cv-card:hover .cv-talk { background: #fff; box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--steel); }

/* what a talk is about: solid colours only */
.cv-tp.gold { background: var(--gold); color: var(--ink); }
.cv-tp.sky { background: var(--sky); color: var(--ink); }
.cv-tp.orange { background: var(--orange); color: var(--ink); }

/* --- Already talked: who, about what, how it went, when ------------------------------ */
.cv-tlist { display: grid; gap: 6px; }
.cv-trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  margin: 3px; padding: 6px 10px 6px 6px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); text-decoration: none; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.cv-trow:hover { background: var(--card-hov); color: var(--card-ink); }
.cv-tb { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.cv-tn { max-width: 100%; font: 400 19px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tbd { display: flex; flex-wrap: wrap; margin-left: -2px; }
.cv-tw { align-self: start; font: 900 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); opacity: .7; text-align: right; }
.cv-tmore { margin-top: 8px; }

/* a staff message on this page: Home's card (advisors.css), with his small face */
.cv-sfrom { flex: none; line-height: 0; }
.cv-sfrom .rm-fc { background: var(--ink); }

/* --- Previous stories: one compact line each -------------------------------------- */
.cv-prev { gap: 4px; }
.cv-prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center;
  margin: 3px; padding: 6px 10px 6px 6px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); text-decoration: none; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
a.cv-prow:hover { background: var(--card-hov); color: var(--card-ink); }
.cv-ptx { min-width: 0; font: 800 13px/1.3 var(--sans); overflow-wrap: anywhere; }
.cv-prev-t { margin-top: 12px; }

@media (max-width: 480px) {
  .cv-card { grid-template-columns: auto minmax(0, 1fr); }
  .cv-card .cv-talk { grid-column: 1 / -1; display: flex; width: calc(100% - 6px); }
  .cv-cn { font-size: 23px; }
  .cv-prow { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-prow .gl-ntag { grid-column: 1 / -1; justify-self: start; }
}

/* mentors: the veteran, the young man, what it is worth to him */
.cv-ments { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-ment { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100% - 6px); margin: 3px; padding: 6px 10px 6px 6px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); text-decoration: none; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.cv-ment:hover { background: var(--card-hov); color: var(--card-ink); }
.cv-ment b { font: 400 19px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.cv-to { flex: none; width: 0; height: 0; margin: 0 3px; border-left: 8px solid var(--gold); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.cv-man .cv-ments, .cv-closed .cv-ments { margin-bottom: 10px; }

/* the latest lines, each with the picture of where it happened */
.gl-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 6px; }
.gl-nrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; margin: 3px; padding: 6px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); text-decoration: none; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
a.gl-nrow:hover { background: var(--card-hov); color: var(--card-ink); }
.gl-th { display: block; width: 96px; height: 54px; line-height: 0; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.gl-th img { display: block; width: 96px; height: 54px; object-fit: cover; }
.gl-nb { display: grid; gap: 4px; min-width: 0; }
.gl-nk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gl-ntx { font: 800 13px/1.3 var(--sans); overflow-wrap: anywhere; }
.gl-nwhen { font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 640px) {
  .gl-nrow { grid-template-columns: 80px minmax(0, 1fr); }
  .gl-th, .gl-th img { width: 80px; height: 45px; }
}

/* --- one man: his card, then what you could raise with him ----------------------- */
.cv-him { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; min-width: 0; }
.cv-him .id { display: grid; gap: 5px; min-width: 0; }
.cv-nmline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.cv-nmline .rk { margin-left: 0; flex: none; }
.cv-nm { font: 400 40px/.9 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
a.cv-nm:hover { color: var(--gold); }
.cv-sub { font: 900 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.cv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.cv-moodchip .mood-svg { width: 16px; height: 16px; }
.cv .rm-sec { margin-top: 16px; }
.cv .rm-wb > .rm-sec:first-child { margin-top: 0; }

/* choices: what to talk about, and every answer — the cursor on the one you point at */
.cv-opts { display: grid; gap: 6px; }
.cv-opt {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 6px); margin: 3px; padding: 10px 12px 10px 30px;
  border: 0; cursor: pointer; text-align: left; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); font: inherit; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.cv-opt:hover:not(:disabled), .cv-opt:focus-visible { background: var(--card-hov); color: var(--card-ink); }
.cv-opt .n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: 2px;
  background: var(--tm); color: var(--on-tm); box-shadow: var(--frame-2); font: 400 22px/1 var(--disp); text-shadow: 2px 2px 0 var(--tm-sh); }
.cv-opt .tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cv-opt .say { font: 800 14.5px/1.35 var(--sans); }
.cv-opt .tx small { font: 800 12px/1.35 var(--sans); color: var(--soft); }
.cv-opt .cv-acts { margin: 0; }
.cv-opt .tag { flex: none; }
/* the pick your staff likes wears a gold ring; the one they rule out is struck */
.cv-opt.best { box-shadow: var(--frame), inset 0 0 0 3px var(--gold); }
.cv-opt.best .n { background: var(--gold); color: var(--ink); text-shadow: none; }
.cv-opt.out .say { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--soft); }
.cv-opt:disabled { cursor: default; background: var(--win); color: var(--soft); }
.cv-opt:disabled::before { visibility: hidden !important; }
.cv-opt:disabled .n { background: #4b5563; color: #fff; text-shadow: none; }

/* what has been said between you, before today */
.cv-hist { display: grid; gap: 6px; }
.cv-h { display: grid; gap: 4px; justify-items: start; margin: 3px; padding: 8px 10px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.cv-h b { font: 400 19px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.cv-h span { font: 800 12.5px/1.35 var(--sans); color: var(--soft); }
.cv-h i { font-style: normal; margin: 2px 2px 0; }

/* --- the talk: where you are, what he knows, the scene, your answer -------------- */
.cv-prog { display: inline-flex; gap: 4px; }
.cv-dot { width: 12px; height: 12px; margin: 2px; background: #fff; box-shadow: var(--frame-2); }
.cv-dot.was { background: var(--green); }
.cv-dot.on { background: var(--gold); }
.rm-tb .cv-prog + .rm-meta { margin-left: 4px; }

/* the facts: his overall, his last practices, the man ahead of him */
.cv-facts { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 10px; }
.cv-fact { display: flex; align-items: center; gap: 10px; margin: 3px; padding: 7px 10px; background: var(--card); color: var(--card-ink);
  box-shadow: var(--frame); text-decoration: none; min-width: 0; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
/* the label on a white fact card: dark ink (gold on white could not be read) */
.cv-fact .k { font: 900 10px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); opacity: .72; }
.cv-fact .v { font: 400 22px/1 var(--disp); text-transform: uppercase; }
.cv-fact .ovr { font-style: normal; }
.cv-fact .ovr.big { font-size: 22px; padding: 5px 10px 4px; }
a.cv-fact:hover { background: var(--card-hov); color: var(--card-ink); }
.cv-grades { display: inline-flex; gap: 3px; }
.cv-g { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 2px; box-shadow: var(--frame-2); font: 900 13px var(--sans); color: #fff; }
.cv-g.a5, .cv-g.a4 { background: var(--green); } .cv-g.a3 { background: #1e63d6; } .cv-g.a2 { background: var(--orange); } .cv-g.a1 { background: var(--red); }
.cv-none { font: 800 12px var(--sans); color: var(--soft); }
.cv-ahead .cv-who { display: inline-flex; align-items: center; gap: 8px; }
.cv-ahead .cv-who b { font: 900 13.5px var(--sans); }

/* his personality as a badge with a "!" that opens what it means */
.cv-perso { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cv-info { width: 22px; height: 22px; margin: 2px; padding: 0; cursor: pointer; border: 0; background: var(--gold); color: var(--ink);
  box-shadow: var(--frame-2); font: 900 13px/1 var(--sans); }
.cv-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; min-width: 240px; max-width: min(320px, 80vw); padding: 9px 11px;
  background: var(--win); color: #fff; border: 2px solid #fff; box-shadow: var(--frame), var(--drop); font: 800 12.5px/1.4 var(--sans); }
/* on a phone the chip sits right of his 96px face: the box stays inside the window */
@media (max-width: 480px) { .cv-pop { min-width: 0; width: min(240px, calc(100vw - 170px)); } }

/* what your first answer did */
.cv-last { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 3px 3px 12px; padding: 8px 10px; background: var(--ink); box-shadow: var(--frame); }
.cv-last .k { font: 900 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; }

/* the talk itself: a log over the scene it happens in, every line on its own solid bubble */
.cv-log { display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow-y: auto; margin: 3px; padding: 10px;
  background: var(--ink); box-shadow: var(--frame); }
.cv-log:empty:not(.scene-bg) { display: none; }
.cv-say { display: flex; gap: 8px; align-items: flex-end; }
.cv-say .rm-fc { margin: 2px; }
.cv-say .bub { max-width: 86%; margin: 3px; padding: 8px 11px; background: #fff; color: var(--ink); box-shadow: var(--frame); font: 800 14px/1.4 var(--sans); }
.cv-say.you { justify-content: flex-end; }
.cv-say.you .bub { background: var(--tm); color: var(--on-tm); }
.cv-say .you-tag, .cv-mic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 3px; box-shadow: var(--frame-2);
  font: 400 17px/1 var(--disp); letter-spacing: .5px; }
.cv-say .you-tag { background: var(--ink); color: var(--gold); }
.cv-mic { background: var(--red); color: #fff; font-size: 15px; }

/* your coordinator's read on him, over the answers */
.cv-dir { margin-bottom: 10px; }
.cv-dir .rm-say, .cv-q .rm-say { font-size: 15px; }
.cv-q { margin-bottom: 12px; }
.cv-crest { width: 96px; height: 96px; }
.cv-crest .cv-logo { width: 64px; height: 64px; }

/* the result: what it did, and where to go */
.cv-go { display: grid; margin-top: 12px; }
.cv .cv-endlog { margin-top: 3px; }

/* what the talk did: three bars that move from where he was to where he is */
.cv-fx { display: grid; gap: 6px; }
.cv-fxr { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
  margin: 3px; padding: 8px 10px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.cv-fxr b { font: 900 11px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.cv-fxbar { display: block; height: 16px; padding: 3px; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.cv-fxbar u { display: block; height: 100%; width: var(--w); background: repeating-linear-gradient(90deg, #22c55e 0 10px, var(--ink) 10px 12px); }
.cv-fxd { justify-self: end; min-width: 34px; padding: 4px 7px 3px; margin: 2px; text-align: center; box-shadow: var(--frame-2);
  font: 400 19px/1 var(--disp); background: #fff; color: var(--ink); }
.cv-fxd.up { background: var(--green); color: #fff; }
.cv-fxd.down { background: var(--red); color: #fff; }
.cv-faces { display: inline-flex; align-items: center; gap: 8px; }
.cv-faces .to { font: 900 16px var(--sans); color: var(--gold); }
.cv-fx.play .cv-fxr { animation: dr-in .35s ease-out both; animation-delay: calc(var(--i) * .45s); }
.cv-fx.play .cv-fxbar u { width: var(--f); animation: cv-move .9s steps(9) forwards; animation-delay: calc(var(--i) * .45s + .3s); }
.cv-fx.play .cv-fxd { animation: dr-pop .4s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * .45s + 1.1s); }
@keyframes cv-move { from { width: var(--f); } to { width: var(--w); } }
@media (prefers-reduced-motion: reduce) { .cv-fx.play * { animation: none !important; } .cv-fx.play .cv-fxbar u { width: var(--w); } }

/* what a press conference did: each line lands one after the other */
.cv-did { display: grid; gap: 6px; }
.cv-didr { display: flex; align-items: center; gap: 10px; margin: 3px; padding: 8px 10px; background: var(--card); box-shadow: var(--frame);
  font: 800 13.5px/1.35 var(--sans); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.cv-didm { flex: none; width: 12px; height: 12px; margin: 2px; background: var(--gold); box-shadow: var(--frame-2); }
.cv-didr .t { flex: 1; min-width: 0; }
.cv-didr .cv-faces, .cv-didr .cv-fxd { flex: none; }
.cv-did.play .cv-didr { animation: dr-in .4s ease-out both; animation-delay: calc(var(--i) * .5s); }
.cv-did.play .cv-didm { animation: dr-pop .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * .5s + .25s); }
@media (prefers-reduced-motion: reduce) { .cv-did.play * { animation: none !important; } }

/* what you told the press */
.cv-said { display: grid; gap: 6px; }
.cv-s { display: flex; gap: 10px; align-items: center; margin: 3px; padding: 9px 11px; background: var(--win); color: #fff; box-shadow: var(--frame); }
.cv-s .n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 2px; background: var(--gold); color: var(--ink);
  box-shadow: var(--frame-2); font: 400 20px/1 var(--disp); }
.cv-s .q { font: 800 13.5px/1.4 var(--sans); }
.cv-saidbox { margin: 3px; }

/* the pixel-art scene behind a talk or a press conference (src/scenebg.js
   adds .scene-bg only once the picture is known to exist, so nothing moves
   when it is missing). The picture keeps its 16:9 shape and the dialogue
   sits at the bottom of it — where the art is kept calm for it — every word
   on its own solid bubble. */
.scene-bg { image-rendering: pixelated; background-size: cover; background-position: center; background-repeat: no-repeat; }
.cv-log.scene-bg { aspect-ratio: 16 / 9; max-height: none; background-color: var(--ink); }
.cv-log.scene-bg > :first-child { margin-top: auto; }
.cv-saidbox.scene-bg { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px;
  background-color: var(--ink); box-shadow: var(--frame); }
/* full-width pictures (the result, the press summary) keep to a band, not a wall */
.cv-endlog.scene-bg, .cv-saidbox.scene-bg { aspect-ratio: auto; min-height: clamp(200px, 30vw, 340px); }

@media (max-width: 760px) {
  .cv-nm { font-size: 30px; }
  .cv-him { gap: 10px; }
  .cv-opt { padding: 9px 10px 9px 12px; }
  .cv-opt.rm-pt::before { display: none; }
  .cv-opt .say { font-size: 13.5px; }
  .cv-opt { flex-wrap: wrap; }
  .cv-opt .tx { flex: 1 1 calc(100% - 52px); }
  .cv-opt .tag { margin-left: 44px; }
  .cv-log { max-height: 300px; }
  .cv-log.scene-bg { aspect-ratio: auto; min-height: 220px; max-height: 340px; }
  .cv-say .bub { font-size: 13px; }
  .cv-fxr { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .cv-didr { flex-wrap: wrap; }
  .cv-didr .t { flex-basis: calc(100% - 30px); }
}