/* V5 · Part 3 (Act 2 · Identity) — "The LEGO Galaxy". Styles only this part uses; the shared look stays in v5.css.
   While the film is in space the stage carries the class .p3space (set by js/parte3.js). */

/* the challenge line on every guess */
.guess .gq .p3k { display: block; font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--green); margin-bottom: 4px; }

/* Act 2 wears its colour: green headers (gold stays gold) */
.callout.p3:not(.gold) .k { background: var(--green); }
.callout.p3:not(.gold) .n { color: var(--green); }
.callout.p3:not(.gold) .src em { color: #7fd69a; }
.ccard.green { box-shadow: 0 16px 0 rgba(5,19,29,.25), 0 0 0 10px var(--green); }
.ccard.green .cc-act { background: var(--green); }

/* in space: dark glass cards, a dark year plate, no floor shadows under the floating dolls */
#stage.p3space .callout.p3 { background: rgba(8, 22, 40, .86); border-color: rgba(255, 255, 255, .28); box-shadow: 0 0 40px rgba(54, 174, 191, .18); }
#stage.p3space .callout.p3 .h { color: #fff; }
#stage.p3space .callout.p3 .t { color: #c9d8e6; }
#stage.p3space .callout.p3 .t b { color: #fff; }
#stage.p3space .callout.p3 .src { background: rgba(255, 255, 255, .06); border-top-color: rgba(255, 255, 255, .14); color: #9fb4c8; }
#stage.p3space .yearplate { background: rgba(8, 22, 40, .86); border-color: rgba(255, 255, 255, .28); }
#stage.p3space .yearplate .y { color: #fff; }
#stage.p3space .yearplate .p { color: #a9c2d8; }
#stage.p3space .doll .shadow { display: none; }

/* the record holders' collector cards: they fly from the album and turn over into the slot */
.p3tc { position: absolute; z-index: 9; opacity: 0; width: 440px; transform-origin: 50% 50%; transform-style: preserve-3d; }
.p3tc .front, .p3tc .back { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; }
.p3tc .front { position: relative; overflow: hidden; background: rgba(8, 22, 40, .9); border: 2px solid rgba(246, 211, 107, .7);
  box-shadow: 0 0 46px rgba(246, 211, 107, .25); }
.p3tc .back { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; place-items: center;
  background: var(--green) radial-gradient(circle at 24px 24px, rgba(255,255,255,.18) 9px, transparent 10px) 0 0 / 48px 48px; border: 3px solid var(--gold-hi); }
.p3tc .back span { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: 4px; color: #fff; text-align: center; line-height: 1.1; }
.p3tc .bk-top { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); background: var(--gold-hi); padding: 10px 16px 9px; }
.p3tc .bk-head { display: flex; gap: 14px; align-items: center; margin: 12px 18px 0; }
.p3tc .face, .p3mini .face { flex: none; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.6); background: #233b55; }
.p3tc .face { width: 64px; height: 64px; }
.p3tc .face img, .p3mini .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.p3tc .face span, .p3mini .face span { display: grid; place-items: center; width: 100%; height: 100%; font-family: 'Rubik', sans-serif; font-weight: 800; color: #fff; }
.p3tc .face span { font-size: 24px; }
.p3tc .nm { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.08; color: #fff; }
.p3tc .ct { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 17px; color: #a9c2d8; }
.p3tc .rec { position: relative; display: flex; align-items: center; gap: 12px; margin: 18px 18px 2px; padding: 7px 14px;
  background: var(--gold); border: 2px solid var(--gold-hi); border-radius: 7px; color: var(--white); box-shadow: inset 0 -5px 0 rgba(0,0,0,.16); }
.p3tc .rec i { position: absolute; top: -9px; width: 26px; height: 8px; background: var(--gold); border: 2px solid var(--gold-hi); border-bottom: 0; border-radius: 3px 3px 0 0; }
.p3tc .rec i:nth-child(1) { left: 26px; } .p3tc .rec i:nth-child(2) { left: 80px; }
.p3tc .rec i:nth-child(3) { right: 80px; } .p3tc .rec i:nth-child(4) { right: 26px; }
.p3tc .rec b { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 36px; line-height: 1; }
.p3tc .rec span { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.05; }
.p3tc .rec em { display: block; font-style: normal; font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff4cf; }
.p3tc ol { list-style: none; margin: 8px 18px 0; }
.p3tc li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; border-top: 1px dashed rgba(255,255,255,.18); }
.p3tc li:first-child { border-top: 0; }
.p3tc .sn { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 7px; background: var(--gold-hi); color: var(--ink); display: grid; place-items: center;
  font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 15px; }
.p3tc .sk { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-hi); }
.p3tc .st { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 19px; line-height: 1.22; color: #dde8f2; }
.p3tc .st i { font-style: normal; color: #9fb4c8; }
.p3tc .credit { margin: 4px 18px 0; font-weight: 700; font-size: 11.5px; color: #9fb4c8; }
.p3tc .src { margin-top: 12px; padding: 8px 18px 9px; background: rgba(255,255,255,.06); border-top: 1px solid rgba(255,255,255,.14);
  font-weight: 700; font-size: 12.5px; color: #9fb4c8; letter-spacing: .2px; }
.p3tc .src em { font-style: normal; color: var(--gold-hi); margin-right: 8px; letter-spacing: 1px; font-size: 11px; font-weight: 800; }

/* five more collectors: small cards in orbit (placed every frame by js/parte3.js) */
.p3mini { position: absolute; left: 0; top: 0; z-index: 8; opacity: 0; width: 230px; padding: 0 0 12px; overflow: hidden; text-align: center;
  background: rgba(8, 22, 40, .9); border: 2px solid rgba(255,255,255,.35); border-radius: 14px; box-shadow: 0 0 30px rgba(54,174,191,.25);
  transform-origin: 50% 50%; pointer-events: none; }
.p3mini .mt { font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 2px; color: #fff; background: var(--green); padding: 7px 0 6px; }
.p3mini .face { width: 72px; height: 72px; margin: 12px auto 6px; }
.p3mini .face span { font-size: 26px; }
.p3mini .nm { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 21px; color: #fff; line-height: 1.1; padding: 0 10px; }
.p3mini .ct { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14px; color: #a9c2d8; }
.p3mini .fx { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.22; color: #dde8f2; margin: 8px 12px 0; }
.p3mini .fx i { font-style: italic; }
.p3mini .credit { font-weight: 700; font-size: 10px; color: #8299ae; margin: 6px 10px 0; }

/* the Act 3 title (same format as #actcard2) */
#actcard3 { left: 640px; right: 60px; top: 200px; text-align: center; }
#actcard3 .eyebrow { display: inline-block; font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 5px; text-transform: uppercase; color: var(--white); background: var(--gold); padding: 6px 16px; border-radius: 10px; }
#actcard3 .big { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 150px; line-height: 1; margin-top: 10px; color: var(--ink); }
#actcard3 .big span { display: inline-block; }
#actcard3 .q { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 34px; margin-top: 18px; color: #3a4955; }

/* ---------- premium galaxy additions ---------- */
/* the glass helmet over each suited doll (placed by js/parte3.js from the measured head of each pose) */
.p3dome { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.55) 0 4%, rgba(255,255,255,.12) 9%, rgba(255,255,255,0) 22%),
              radial-gradient(circle at 50% 55%, rgba(170,230,240,0) 58%, rgba(170,230,240,.16) 74%, rgba(230,250,255,.42) 98%);
  box-shadow: inset 0 0 0 2px rgba(220,245,255,.55), inset 0 -10px 24px rgba(160,225,240,.22), 0 0 34px rgba(120,210,230,.28); }
.p3dome::after { content: ''; position: absolute; left: 62%; top: 16%; width: 16%; height: 8%; border-radius: 50%; background: rgba(255,255,255,.5); filter: blur(2px); transform: rotate(35deg); }
/* in space the speech bubble turns to dark glass */
#stage.p3space .bubble { background: rgba(14, 30, 34, .82); border-color: rgba(214, 240, 235, .22); color: #e6f0ee;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 30px rgba(54,174,191,.12); }
#stage.p3space .bubble .txt { color: #f1f7f6; }
#stage.p3space .bubble.lizzie .who { color: #7fd3e0; }
#stage.p3space .bubble.jhully .who { color: #f6d36b; }
#stage.p3space .bubble img { border-color: rgba(214, 240, 235, .3); }
#stage.p3space .bubble::after { background: rgba(14, 30, 34, .92); border-color: rgba(214, 240, 235, .22); }
/* the act's tally: each beat leaves its number here once it is over */
.p3kpi { position: absolute; left: 560px; top: 968px; z-index: 7; display: flex; opacity: 0; pointer-events: none;
  background: rgba(14, 30, 34, .7); border: 1px solid rgba(214, 240, 235, .16); border-radius: 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.p3kpi > div { padding: 9px 18px 10px; border-left: 1px solid rgba(214, 240, 235, .12); min-width: 128px; }
.p3kpi > div:first-child { border-left: 0; }
.p3kpi span { display: block; font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 12px; color: #8ea6a3; white-space: nowrap; }
.p3kpi b { display: block; font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 24px; line-height: 1.15; color: rgba(230,240,238,.25); transition: color .4s, text-shadow .4s; }
.p3kpi .on b { color: #f6d36b; text-shadow: 0 0 18px rgba(246,211,107,.45); }
/* near the real right edge (past the 1920 stage) the bubble must keep its natural width */
#stage.p3space .bubble { width: max-content; }