/* Producer cards: three dealt before the first spin, keep one. Square, hairline on every side, the rarity in the
   hairline's colour and the label (common silver-grey, uncommon silver, rare gold, legendary bright gold with foil). */
.pcard { --rc: var(--line-2); --rl: var(--mute); position: relative; width: 440px; height: 580px; transform-style: preserve-3d; flex: none; }
.pcard.r-uncommon { --rc: #7d8296; --rl: var(--silver); }
.pcard.r-rare { --rc: var(--g); --rl: var(--g); }
.pcard.r-legendary { --rc: var(--g-hi); --rl: var(--g-hi); }
.pcard .pc-face, .pcard .pc-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .52s cubic-bezier(.3,.1,.2,1); }
.pcard .pc-face { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px 22px; background: linear-gradient(180deg, var(--ink-2), var(--ink-1) 70%); border: 1px solid var(--rc); box-shadow: 0 30px 70px rgba(0,0,0,.55); overflow: hidden; }
.pcard .pc-back { display: flex; align-items: center; justify-content: center; border: 1px solid var(--g-a); box-shadow: 0 30px 70px rgba(0,0,0,.55);
  background: repeating-linear-gradient(135deg, rgba(217,180,90,.05) 0 2px, transparent 2px 14px), radial-gradient(circle at 50% 46%, #171a26, var(--ink-1) 70%); }
.pcard .pc-back span { width: 132px; height: 132px; color: rgba(217,180,90,.5); }
.pcard .pc-back .ic { width: 100%; height: 100%; }
.pcard:not(.up) .pc-face { transform: rotateY(180deg); }
.pcard.up .pc-back { transform: rotateY(-180deg); }
.pcard.r-legendary .pc-face { box-shadow: inset 0 0 0 5px var(--ink-1), inset 0 0 0 6px rgba(243,220,149,.38), 0 30px 70px rgba(0,0,0,.55); }
.pcard.r-legendary .pc-face::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,240,190,.13) 50%, transparent 62%); background-size: 260% 100%; animation: ffcardfoil 3.6s linear infinite; }
@keyframes ffcardfoil { from { background-position: 160% 0; } to { background-position: -100% 0; } }
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--ink-0); border: 1px solid var(--rc); color: var(--rl); flex: none; }
.pc-ic .ic { width: 24px; height: 24px; }
.pc-f { font-family: var(--f-ui); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.pc-r { margin-left: auto; font-family: var(--f-ui); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--rl); }
.pc-name { font-family: var(--f-d); font-weight: 800; font-size: 50px; line-height: .98; color: var(--ivory); margin-top: 6px; }
.pc-q { font-family: var(--f-ui); font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--silver); }
.pc-q::before { content: '\201C'; } .pc-q::after { content: '\201D'; }
.pc-fx { list-style: none; margin: 4px 0 0; padding: 16px 0 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); }
.pc-fx li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--f-ui); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--ivory); }
.pc-fx li .ic { width: 22px; height: 22px; margin-top: 2px; }
.pc-fx li.up .ic { color: var(--g); }
.pc-fx li.dn { color: #e7c9ce; }
.pc-fx li.dn .ic { color: var(--red-hi); width: 18px; height: 18px; margin: 4px 2px 0; }
.pc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; min-height: 34px; font-family: var(--f-ui); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--silver); }
.pc-foot span { display: inline-flex; align-items: center; gap: 8px; }
.pc-foot .ic { width: 18px; height: 18px; color: var(--g); }
.pc-foot kbd { font-family: var(--f-d); font-weight: 800; font-size: 22px; min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); color: var(--ivory); background: var(--ink-0); }

/* the deal */
.cardpick { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; z-index: 38; display: flex; flex-direction: column; align-items: center; padding-top: 34px;
  background: radial-gradient(1100px 620px at 50% 58%, rgba(14,16,25,.93), rgba(3,4,7,.97)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fffade .26s both; }
.cardpick.out { opacity: 0; transition: opacity .32s .12s; pointer-events: none; }
.cp-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cp-k { font-family: var(--f-ui); font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--g); }
.cp-head h3 { margin: 0; font-family: var(--f-d); font-weight: 800; font-size: 84px; line-height: .95; color: var(--ivory); }
.cp-head p { margin: 2px 0 0; font-family: var(--f-ui); font-weight: 500; font-size: 22px; color: var(--silver); }
.cp-row { display: flex; gap: 40px; margin-top: 34px; perspective: 1800px; }
.cardpick .pcard { cursor: pointer; transition: transform .22s var(--ease-out); }
.cardpick .pcard.up:hover, .cardpick .pcard.foc { transform: translateY(-12px); }
.cardpick .pcard.foc .pc-face { border-color: var(--g); box-shadow: 0 0 0 1px var(--g), 0 40px 90px rgba(0,0,0,.65); }
.cardpick .pcard.chosen { transform: translateY(-12px) scale(1.04); }
.cardpick .pcard.chosen .pc-face { border-color: var(--g-hi); box-shadow: 0 0 0 2px var(--g-hi), 0 0 60px rgba(243,220,149,.25), 0 40px 90px rgba(0,0,0,.65); }

/* the chosen card in the HUD, and opened from it */
.top-progress .brief.pcard-mini { cursor: pointer; border-color: var(--rc, var(--line)); color: inherit; text-align: left; font: inherit; max-width: 760px; }
.top-progress .brief.pcard-mini.r-common { --rc: var(--line-2); } .top-progress .brief.pcard-mini.r-uncommon { --rc: #7d8296; } .top-progress .brief.pcard-mini.r-rare { --rc: var(--g); } .top-progress .brief.pcard-mini.r-legendary { --rc: var(--g-hi); }
.top-progress .brief.pcard-mini b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-progress .brief.pcard-mini:hover { background: var(--ink-2); }
.top-progress .brief.pcard-mini.land { animation: ffland .6s var(--ease-out); }
.cardpeek { position: absolute; z-index: 39; top: 116px; left: 50%; transform: translateX(-50%); animation: ffsheet .22s var(--ease-out); }

/* the start screen: the producer you kept, next to the rules */
.brief-big.withcard { background: none; border: 0; padding: 0; flex-direction: row; }
.pcard.big { width: 100%; height: auto; min-height: 0; }
.pcard.big .pc-face { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; row-gap: 12px; padding: 26px 30px; box-shadow: none; }
.pcard.big .pc-top { grid-column: 1; }
.pcard.big .pc-name { grid-column: 1; font-size: 64px; }
.pcard.big .pc-q { grid-column: 1; font-size: 22px; }
.pcard.big .pc-fx { grid-column: 2; grid-row: 1 / span 3; border-top: 0; border-left: 1px solid var(--line); padding: 4px 0 0 32px; margin: 0; justify-content: center; }
.pcard.big .pc-fx li { font-size: 24px; }
.pcard.big .pc-foot { display: none; }
.brief-big.none b { font-family: var(--f-d); }

/* what your producer likes, on the board */
.chip.want, .pc.want { box-shadow: inset 0 0 0 1px var(--g-a); }
.wantb { position: absolute; z-index: 4; top: 6px; left: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--g); color: #120e04; pointer-events: none; }
.wantb .ic { width: 16px; height: 16px; }
.chip .wantb { top: -10px; left: auto; right: -8px; }
/* the start screen's own rules for its brief box would otherwise reach into the card */
.landed-empty .brief-big.withcard, .landed-empty.start .brief-big.withcard, .landed-empty.again .brief-big.withcard { padding: 0; background: none; border: 0; gap: 0; }
.landed-empty .pcard .pc-f, .landed-empty .pcard .pc-r { font-family: var(--f-ui); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.landed-empty .pcard .pc-f { color: var(--silver); } .landed-empty .pcard .pc-r { color: var(--rl); }
.landed-empty .pcard .pc-fx li, .landed-empty .pcard .pc-fx li span { font-family: var(--f-ui); font-weight: 600; font-size: 24px; letter-spacing: 0; text-transform: none; color: var(--ivory); }
.landed-empty .pcard .pc-fx li.dn span { color: #e7c9ce; }
.landed-empty .pcard .pc-q { font-family: var(--f-ui); font-weight: 500; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--silver); }
.landed-empty .pcard .pc-name { font-family: var(--f-d); font-weight: 800; font-size: 64px; letter-spacing: 0; text-transform: none; color: var(--ivory); }

/* ---------- the title room: name the picture from word tiles ---------- */
.troom { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 700px at 50% 40%, #0d0f18, #05060a 70%); animation: fffade .3s both; }
.troom.out { opacity: 0; transition: opacity .3s; }
.tr-in { position: relative; width: 1640px; display: flex; flex-direction: column; gap: 26px; }
.tr-head { display: flex; align-items: center; justify-content: space-between; }
.tr-k { font-family: var(--f-ui); font-weight: 700; font-size: 18px; letter-spacing: .18em; text-transform: uppercase; color: var(--g); }
.tr-clock { font-family: var(--f-d); font-weight: 800; font-size: 34px; color: var(--silver); font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.tr-clock.low { color: var(--red-hi); }
/* the marquee: a frame of bulbs on all four sides */
.tr-marquee { position: relative; height: 230px; display: flex; align-items: center; justify-content: center; padding: 0 70px; background: #090b12; border: 1px solid var(--g-a);
  box-shadow: inset 0 0 0 10px #090b12, inset 0 0 0 11px rgba(217,180,90,.25), 0 40px 120px rgba(0,0,0,.6); }
.tr-marquee::before { content: ''; position: absolute; inset: 4px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,236,170,.95) 0 2.5px, rgba(255,200,90,.25) 3.5px, transparent 5px) 0 0 / 28px 28px;
  -webkit-mask: linear-gradient(#000, #000) top / 100% 12px no-repeat, linear-gradient(#000, #000) bottom / 100% 12px no-repeat, linear-gradient(#000, #000) left / 12px 100% no-repeat, linear-gradient(#000, #000) right / 12px 100% no-repeat;
          mask: linear-gradient(#000, #000) top / 100% 12px no-repeat, linear-gradient(#000, #000) bottom / 100% 12px no-repeat, linear-gradient(#000, #000) left / 12px 100% no-repeat, linear-gradient(#000, #000) right / 12px 100% no-repeat;
  animation: ffbulbs 1.6s steps(2) infinite; }
@keyframes ffbulbs { 50% { opacity: .55; } }
.tr-title { width: 100%; text-align: center; color: var(--ivory); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; }
.tr-title.empty { color: #2b3044; }
.tr-placed { display: flex; gap: 8px; min-height: 40px; justify-content: center; flex-wrap: wrap; }
.tp { height: 40px; padding: 0 14px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--silver); font-family: var(--f-ui); font-weight: 700; font-size: 16px; cursor: pointer; }
.tp:hover { border-color: var(--red-hi); color: var(--ivory); }
.tr-combos { display: flex; gap: 10px; justify-content: center; min-height: 46px; flex-wrap: wrap; }
.trc { height: 46px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid var(--g); background: rgba(217,180,90,.1); color: var(--g-hi); font-family: var(--f-d); font-weight: 800; font-size: 24px; letter-spacing: .04em; text-transform: uppercase; animation: ffland .45s var(--ease-out); }
.trc.secret { border-color: var(--g-hi); box-shadow: 0 0 24px rgba(243,220,149,.3); }
.trc-none { font-family: var(--f-ui); font-weight: 500; font-size: 19px; color: var(--mute); align-self: center; }
.tr-hand { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.tt { position: relative; height: 146px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 14px 16px 12px; background: var(--ink-2); border: 1px solid var(--line-2); cursor: pointer; text-align: left; transition: transform .14s var(--ease-out), opacity .2s, border-color .14s; }
.tt:hover:not(.off):not(.used) { transform: translateY(-6px); border-color: var(--g); }
.tt kbd { position: absolute; top: 10px; right: 10px; font-family: var(--f-d); font-weight: 800; font-size: 18px; min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); color: var(--silver); background: var(--ink-0); }
.tt b { font-family: var(--f-d); font-weight: 800; font-size: 28px; line-height: 1.02; color: var(--ivory); max-width: 100%; padding-right: 26px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tt b.long { font-size: 23px; }
.tt small { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt small .ic { width: 14px; height: 14px; color: var(--g); flex: none; }
.tt.r-U { border-color: #7d8296; } .tt.r-R { border-color: var(--g); } .tt.r-L { border-color: var(--g-hi); box-shadow: inset 0 0 0 3px var(--ink-2), inset 0 0 0 4px rgba(243,220,149,.4); }
.tt.r-R b, .tt.r-L b { color: var(--g-hi); }
.tt.stolen small { color: var(--silver); }
.tt.off { opacity: .26; cursor: default; }
.tt.used { opacity: .12; cursor: default; }
.tr-foot { display: flex; align-items: center; gap: 22px; margin-top: 4px; }
.tr-glue { display: flex; gap: 10px; }
.tg { height: 50px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid var(--line-2); background: var(--ink-1); color: var(--ivory); font-family: var(--f-d); font-weight: 800; font-size: 22px; cursor: pointer; }
.tg kbd, .tr-keys kbd { font-family: var(--f-ui); font-weight: 700; font-size: 14px; padding: 2px 7px; border: 1px solid var(--line-2); color: var(--silver); }
.tg.off { opacity: .28; cursor: default; }
.tr-keys { flex: 1; display: flex; gap: 22px; font-family: var(--f-ui); font-weight: 600; font-size: 17px; color: var(--silver); }
.tr-keys > span { display: inline-flex; align-items: center; gap: 8px; }
.tr-rd, .tr-esc, .tr-un { cursor: pointer; } .tr-rd.off { opacity: .35; cursor: default; }
.tr-rd b { color: var(--ivory); font-weight: 700; }
.tr-go { height: 60px; padding: 0 26px; font-family: var(--f-d); font-weight: 800; font-size: 24px; letter-spacing: .06em; }
/* the reveal: the combos fire one by one into the Buzz */
.troom.firing .tr-hand, .troom.firing .tr-foot, .troom.firing .tr-placed, .troom.firing .tr-combos { opacity: 0; transition: opacity .25s; pointer-events: none; }
.tr-reveal { position: absolute; left: 0; right: 0; top: 330px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; }
.trv-list { display: flex; flex-direction: column; gap: 10px; }
.trv { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 14px 18px; background: var(--ink-1); border: 1px solid var(--g-a); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s, transform .32s var(--ease-snap); }
.trv.in { opacity: 1; transform: none; }
.trv b { font-family: var(--f-d); font-weight: 800; font-size: 32px; letter-spacing: .03em; text-transform: uppercase; color: var(--g-hi); }
.trv > span { font-family: var(--f-ui); font-weight: 500; font-size: 19px; color: var(--silver); }
.trv .fx { display: flex; gap: 12px; white-space: nowrap; }
.trv .fx i { font-style: normal; font-family: var(--f-ui); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.trv .fx i.up { color: var(--g-hi); } .trv .fx i.dn { color: var(--red-hi); } .trv .fx i.seen { color: var(--mute); }
.trv.secret { border-color: var(--g-hi); box-shadow: 0 0 40px rgba(243,220,149,.18); }
.trv.half { opacity: .7; }
.trv-buzz { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 20px 24px; background: var(--ink-1); border: 1px solid var(--line-2); }
.trv-buzz span { font-family: var(--f-ui); font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.trv-buzz b { font-family: var(--f-d); font-weight: 800; font-size: 96px; line-height: .95; color: var(--ivory); font-variant-numeric: tabular-nums; }
.trv-buzz em { font-style: normal; font-family: var(--f-ui); font-weight: 600; font-size: 17px; color: var(--mute); }
.trv-buzz.slam { border-color: var(--g); animation: ffland .5s var(--ease-out); }
.trv-buzz.slam b { color: var(--g-hi); }
.trv-cap { position: absolute; right: 0; top: -70px; font-family: var(--f-d); font-weight: 800; font-size: 40px; letter-spacing: .06em; text-transform: uppercase; color: #0b0d14; background: var(--g-hi); padding: 6px 18px; transform: rotate(-3deg); animation: ffland .4s var(--ease-snap); }
/* the family's mark, large and faint, fills the card's lower half */
.pc-wm { position: absolute; right: -36px; bottom: -40px; width: 260px; height: 260px; color: var(--rl); opacity: .06; pointer-events: none; }
.pc-wm .ic { width: 100%; height: 100%; }
.pcard.big .pc-wm { display: none; }
.pcard .pc-face > :not(.pc-wm) { position: relative; z-index: 1; }

/* ---------- v2 cards: The Heist's open film, The Money Pit's counter ---------- */
.heist-note { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px 0 14px; border: 1px solid rgba(241, 212, 126, .6); white-space: nowrap;
  background: rgba(241, 212, 126, .09); color: var(--ivory, #f4efe4); font-family: var(--f-ui); font-size: 19px; line-height: 1; border-radius: 0; animation: fffade .26s both; }
.heist-note .ic { width: 22px; height: 22px; flex: none; color: var(--gold, #f1d47e); }
.heist-note span { flex: 1; min-width: 0; color: var(--silver, #a9adbd); }
.heist-note b { color: var(--ivory, #f4efe4); font-weight: 700; }
.heist-note kbd { flex: none; }
#btnReshoot .rsp { font-style: normal; font-family: var(--f-ui); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--silver, #a9adbd); margin-left: 2px; }
#btnReshoot .rsp.cost { color: #ff6b6b; }

/* the writers room (7 Nov): hire a writer, then pick a pitch. Square corners, full borders, no side bars */
.wroom .wr-in { gap: 22px; margin-top: 70px; }
.wr-sub { font-family: var(--f-ui); font-weight: 600; font-size: 22px; color: var(--silver); margin-top: -10px; }
.wr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wcard, .ptch { position: relative; display: flex; flex-direction: column; text-align: left; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 0; padding: 0; cursor: pointer; color: inherit; transition: transform .16s var(--ease-out), opacity .3s, border-color .16s, box-shadow .16s; }
.wcard:hover, .ptch:not(.wait):hover { border-color: var(--g); transform: translateY(-4px); }
.wcard kbd, .ptch kbd { position: absolute; z-index: 2; top: 12px; left: 12px; font-family: var(--f-d); font-weight: 800; font-size: 18px; min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); color: var(--silver); background: var(--ink-0); }
.wc-posts { display: grid; gap: 3px; height: 300px; background: var(--ink-0); overflow: hidden; }
.wc-posts.n1 { grid-template-columns: 1fr; } .wc-posts.n2 { grid-template-columns: 1fr 1fr; } .wc-posts.n3 { grid-template-columns: 1fr 1fr 1fr; }
.wc-posts img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-blank { display: block; width: 100%; height: 100%; background: linear-gradient(160deg, var(--ink-1), var(--ink-0)); }
.wc-body { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; }
.wc-body .fee { position: absolute; right: 18px; top: 18px; font-size: 18px; }
.wc-from { display: flex; align-items: flex-start; gap: 7px; font-family: var(--f-ui); font-weight: 700; font-size: 14px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--g); padding-right: 74px; min-width: 0; }
.wc-from .wc-ft { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wc-from .ic { margin-top: 2px; }
.wc-from .ic { width: 14px; height: 14px; flex: none; }
.wc-n { font-family: var(--f-d); font-weight: 800; font-size: 42px; line-height: 1.02; color: var(--ivory); white-space: nowrap; overflow: hidden; }
.wc-kf { font-family: var(--f-ui); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--silver); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.ptch { gap: 10px; padding: 58px 28px 30px; min-height: 420px; }
.pt-lean { font-family: var(--f-d); font-weight: 800; font-size: 38px; line-height: 1; color: var(--ivory); }
.ptch.p-crowd .pt-lean { color: var(--g); } .ptch.p-prestige .pt-lean { color: #cfe3ff; } .ptch.p-weird .pt-lean { color: #ff8fd0; }
.ptch small { font-family: var(--f-ui); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pt-line { margin: 10px 0 0; font-family: var(--f-ui); font-weight: 500; font-size: 25px; line-height: 1.38; color: var(--ivory); animation: fffade .35s both; }
.ptch.wait { cursor: default; }
.pt-dots { display: inline-flex; gap: 8px; padding-top: 10px; }
.pt-dots i { width: 10px; height: 10px; background: var(--silver); opacity: .25; animation: ptDot 1s infinite; }
.pt-dots i:nth-child(2) { animation-delay: .16s; } .pt-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes ptDot { 0%, 100% { opacity: .2; } 40% { opacity: .9; } }
.wcard.chosen, .ptch.chosen { border-color: var(--g); box-shadow: inset 0 0 0 2px var(--g); transform: translateY(-6px); }
.wcard.gone, .ptch.gone { opacity: .22; transform: none; }
.tr-story { margin-top: -10px; font-family: var(--f-ui); font-weight: 500; font-size: 21px; line-height: 1.4; color: var(--silver); max-width: 1500px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-story span { font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--g); margin-right: 12px; }

/* the studio season (7 Nov): the board's verdict, the trades, the season's end. Square, full borders */
.sroom .sr-in { gap: 20px; margin-top: 60px; max-width: 1400px; }
.sr-big { font-family: var(--f-d); font-weight: 800; font-size: 120px; line-height: .95; letter-spacing: -.01em; color: var(--ivory); }
.sr-big.good { color: var(--g); } .sr-big.bad { color: #ff5a5f; }
.sr-line { font-family: var(--f-ui); font-weight: 600; font-size: 30px; color: var(--silver); }
.sr-line b { color: var(--ivory); } .sr-line b.up, .sr-row b.up, .sr-pic .up { color: #8fd39f; } .sr-line b.down, .sr-row .down, .sr-pic .down { color: #ff7a7f; }
.sr-money { display: grid; gap: 0; width: 640px; border: 1px solid var(--line-2); background: var(--ink-2); }
.sr-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 22px; border-top: 1px solid var(--line-2); font-family: var(--f-ui); font-size: 24px; color: var(--silver); }
.sr-row:first-child { border-top: 0; } .sr-row b { font-family: var(--f-d); font-weight: 800; font-size: 30px; color: var(--ivory); }
.sr-row.tot b i { font-style: normal; color: var(--mute); margin: 0 6px; }
.sr-bank { font-family: var(--f-ui); font-size: 26px; color: var(--silver); display: flex; gap: 22px; align-items: baseline; }
.sr-bank b { font-family: var(--f-d); font-weight: 800; font-size: 44px; color: var(--g); } .sr-bank span { font-size: 18px; color: var(--mute); }
.sr-sub { font-family: var(--f-ui); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.perk { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 54px 26px 24px; min-height: 230px; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 0; color: inherit; cursor: pointer; transition: transform .16s var(--ease-out), border-color .16s, opacity .2s; }
.perk:hover { border-color: var(--g); transform: translateY(-4px); } .perk.poor { opacity: .4; }
.perk kbd, .sname kbd { position: absolute; top: 12px; left: 12px; font-family: var(--f-d); font-weight: 800; font-size: 18px; min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); color: var(--silver); background: var(--ink-0); }
.pk-n { font-family: var(--f-d); font-weight: 800; font-size: 34px; line-height: 1; color: var(--ivory); }
.pk-l { font-family: var(--f-ui); font-weight: 500; font-size: 21px; line-height: 1.35; color: var(--silver); flex: 1; }
.pk-c { font-family: var(--f-d); font-weight: 800; font-size: 30px; color: var(--g); }
.sr-names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sname { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 52px; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 0; color: inherit; text-align: left; cursor: pointer; }
.sname kbd { top: 50%; transform: translateY(-50%); }
.sname .ffp { width: 54px; height: 54px; flex: none; }
.sname b { display: block; font-family: var(--f-d); font-weight: 800; font-size: 20px; line-height: 1.05; color: var(--ivory); }
.sname small { font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.sname.on { border-color: var(--g); box-shadow: inset 0 0 0 2px var(--g); } .sname.off { opacity: .35; }
.sr-owned { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--f-ui); font-size: 15px; color: var(--mute); }
.sr-owned span { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.sr-owned i { font-style: normal; font-weight: 600; color: var(--ivory); border: 1px solid var(--line-2); padding: 5px 10px; }
.sr-list { display: grid; width: 980px; border: 1px solid var(--line-2); background: var(--ink-2); }
.sr-pic { display: grid; grid-template-columns: 50px 1fr 150px 150px; align-items: baseline; padding: 14px 22px; border-top: 1px solid var(--line-2); font-family: var(--f-ui); font-size: 24px; color: var(--silver); }
.sr-pic:first-child { border-top: 0; } .sr-pic .n { color: var(--mute); font-family: var(--f-d); font-weight: 800; }
.sr-pic b { font-family: var(--f-d); font-weight: 800; font-size: 30px; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-pic .f { font-family: var(--f-d); font-weight: 800; font-size: 32px; text-align: right; } .sr-pic .f i { font-style: normal; font-size: 18px; color: var(--mute); margin-left: 6px; }
.sr-pic .m { text-align: right; font-weight: 700; }
.sr-score { display: flex; align-items: baseline; gap: 18px; font-family: var(--f-ui); color: var(--silver); }
.sr-score span { font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; } .sr-score b { font-family: var(--f-d); font-weight: 800; font-size: 72px; color: var(--g); } .sr-score small { font-size: 17px; color: var(--mute); }
.hud .budget.sea b { color: var(--g); }
.sr-verdict .sr-in, .sr-end .sr-in { align-items: center; text-align: center; }
.sr-verdict .tr-head, .sr-end .tr-head { justify-content: center; }
.sr-verdict .tr-foot, .sr-end .tr-foot { justify-content: center; }
.sr-big { font-size: 132px; }
.sr-end .sr-pic { text-align: left; }
/* ten tiles (8 Nov): a little tighter, and a name shows it reads as a possessive */
.tr-hand .tt { padding: 14px 12px 12px 13px; }
.tr-hand .tt b { font-size: 25px; } .tr-hand .tt b.long { font-size: 20px; }
.tr-hand .tt b .poss { font-style: normal; color: var(--mute); }
.tr-hand .tt kbd { top: 8px; right: 8px; font-size: 16px; min-width: 24px; height: 24px; }
.tr-hand .tt b { overflow-wrap: normal; word-break: normal; hyphens: none; padding-right: 0; }