/* Copied from src/ui/card-kit.css by `npm run twoplayer -- build`; do not edit. */
/* The card kit: one card design for every mockup (the card sheet, the board, the reveal).
   Drawn at print size, 10 px to the mm (63 x 88 mm); scale it with --cz, never zoom: iOS Safari shrinks a zoomed box
   but not the text in it, which crammed every card on the iPhone (founder, 17 Oct). The scale is a transform, and the
   negative margins give back the room the scaled card no longer fills, so it takes the space a zoomed card took. */
.pc, .pb { transform:scale(var(--cz, 1)); transform-origin:0 0; margin:0 calc(630px * (var(--cz, 1) - 1)) calc(880px * (var(--cz, 1) - 1)) 0; }
.pc { --paper:#EFE6D2; --ink:#15120F; --ink-2:#2A251F; --seal:#C8321E; --seal-deep:#A82816; --gold:#E2BC5E; --gold-deep:#B8913A;
  --opp:#4C83A8; --opp-deep:#24404F; --opp-ink:#16262F; --muted-ink:#6D6353; --good:#1F5C38; --good-opp:#1E4F73;
  --tex:url("https://thedictatorstore.blob.core.windows.net/game-images/asset/paper/848294797-mujz7l2w2.webp"); flex:none; }
  .pc { position:relative; width:630px; height:880px; border-radius:30px; overflow:hidden; color:var(--ink);
    background:#17130F var(--tex) center/700px; background-blend-mode:soft-light; }
  .pc.lift { box-shadow:0 2px 0 rgba(255,255,255,.04) inset, 0 30px 60px rgba(0,0,0,.75), 0 8px 18px rgba(0,0,0,.6); }
  /* frame: two engraved lines */
  .pc:before { content:''; position:absolute; inset:12px; border-radius:21px; border:2px solid var(--line1); pointer-events:none; }
  .pc:after { content:''; position:absolute; inset:19px; border-radius:15px; border:1px solid var(--line2); pointer-events:none; }
  .pc.r { --line1:#B8913A; --line2:rgba(226,188,94,.35); --stat:var(--good); --seal-bg:radial-gradient(circle at 36% 30%, #E4553C, #C8321E 50%, #7E1B0E); }
  .pc.o { --line1:#7FA6BF; --line2:rgba(143,184,209,.35); --stat:var(--good-opp); --seal-bg:radial-gradient(circle at 36% 30%, #79A8C8, #4C83A8 50%, #1D3A4C); background-color:#13232C; }

  .pc .hd { position:absolute; left:34px; right:34px; top:30px; height:80px; display:flex; align-items:center; gap:14px; }
  .pc .cost { flex:none; width:80px; height:80px; border-radius:50%; position:relative; display:grid; place-items:center;
    background:radial-gradient(circle at 34% 28%, #F6DE9A, #D2A84E 50%, #7A5C22); border:3px solid #2A1E08;
    box-shadow:inset 0 0 0 4px rgba(255,240,200,.35), inset 0 -6px 10px rgba(80,50,10,.5), 0 4px 10px rgba(0,0,0,.6); }
  .pc .cost b { font:900 52px/1 'Big Shoulders Display'; color:#2A1E08; margin-top:-6px; }
  .pc .cost small { position:absolute; bottom:9px; font:700 9px/1 'IBM Plex Mono'; letter-spacing:.18em; color:#4A3610; }
  /* the title fills the header: --fit shrinks it until the whole name fits (set by the card, measured in the font) */
  .pc .ttl { flex:1; min-width:0; font:900 calc(46px * var(--fit, 1))/0.92 'Big Shoulders Display'; text-transform:uppercase; letter-spacing:.008em; color:var(--paper);
    text-shadow:0 2px 0 rgba(0,0,0,.5); }
  .pc .crest { flex:none; width:80px; height:80px; border-radius:50%; border:3px solid var(--line1); background:#0E0D0C no-repeat;
    box-shadow:0 4px 10px rgba(0,0,0,.6), inset 0 0 0 2px rgba(0,0,0,.5); }

  /* the art: 5:4, exactly the size of the image's aspect, so nothing is cropped */
  .pc .art { position:absolute; left:32px; top:116px; width:566px; height:454px; border:3px solid var(--line1); background:#000 no-repeat 0 0 / 560px 448px; }
  .pc .art .tag { position:absolute; left:-3px; top:-3px; }

  .pc .tl { position:absolute; left:32px; right:32px; top:574px; height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 16px;
    background:var(--cat); color:#FFF4E2; font:700 16px/1 'IBM Plex Mono'; letter-spacing:.18em; text-transform:uppercase; }
  .pc .tl em { font-style:normal; opacity:.75; }

  .pc .rb { position:absolute; left:32px; right:32px; top:618px; height:194px; padding:14px 18px 0;
    background:var(--paper) var(--tex) center/520px; }
  .pc.o .rb { background-color:#E9E4D6; }
  .pc .ln { margin-top:14px; display:flex; align-items:baseline; gap:12px; font:600 calc(23px * var(--k, 1))/1.25 'IBM Plex Sans'; color:#2A2219; }
  .pc .ln > b:first-child { flex:none; font:700 15px/1 'IBM Plex Mono'; letter-spacing:.14em; text-transform:uppercase; color:#8A6A1C; }
  .pc .ln.turn > b:first-child, .pc .ln.once > b:first-child { color:var(--seal-deep); }
  .pc .flv { margin:auto 132px 0 0; padding:8px 0 10px; border-top:1px solid rgba(21,18,15,.18);
    font:italic 700 calc(20px * var(--k, 1))/1.24 'Old Standard TT'; color:#2E271F; } /* what the card does, readable (founder, 15 Oct) */

  .pc .ft { position:absolute; left:36px; top:818px; height:30px; display:flex; align-items:center; gap:12px; }
  .pc .ft .lbl { font:700 13px/1 'IBM Plex Mono'; letter-spacing:.12em; color:#B9AE93; white-space:nowrap; }
  .pc.o .ft .lbl { color:#A9BCC8; }
  .pc .dice { display:flex; gap:3px; }
  .pc .dice i { width:25px; height:25px; display:grid; place-items:center; background:#EFE6D2; color:#15120F; font:700 14px/1 'IBM Plex Mono'; font-style:normal; border-radius:3px; box-shadow:0 0 0 1.5px #15120F; }
  .pc .dice i.bf { background:var(--seal); color:#FFF3E2; box-shadow:0 0 0 1.5px #FFB09E; }
  .pc .ft .set { font:600 13px/1 'IBM Plex Mono'; letter-spacing:.1em; color:#8C8370; white-space:nowrap; margin-left:4px; }
  .pc.o .ft .set { color:#A9BCC8; }

  .pc .clout { position:absolute; right:34px; bottom:34px; width:112px; height:112px; border-radius:50%; display:grid; place-items:center;
    background:var(--seal-bg); border:4px solid var(--line1);
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.18), inset 0 -8px 14px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.7); }
  .pc .clout b { font:900 62px/1 'Big Shoulders Display'; color:#FFF3E2; margin-top:-10px; text-shadow:0 2px 0 rgba(0,0,0,.35); }
  .pc .clout small { position:absolute; bottom:15px; font:700 10px/1 'IBM Plex Mono'; letter-spacing:.2em; color:rgba(255,243,226,.85); }
  .pc .clout.none b { font-size:52px; opacity:.6; }

  /* opposition art band: the actor's portrait whole (3:4) beside the move's own words */
  .pc .band { position:absolute; left:32px; top:116px; width:566px; height:454px; border:3px solid var(--line1); display:flex; background:#E9E4D6 var(--tex) center/520px; }
  .pc .band .face { flex:none; width:336px; height:448px; background:#000 no-repeat 0 0 / 336px 448px; border-right:3px solid var(--line1); }
  .pc .band .col { flex:1; padding:18px 18px 16px; display:flex; flex-direction:column; color:var(--ink); }
  .pc .band .mast { font:900 21px/1 'Big Shoulders Display'; letter-spacing:.12em; text-transform:uppercase; padding-bottom:7px; border-bottom:3px double var(--ink); text-align:center; }
  .pc .band .date { margin-top:6px; font:600 9.5px/1 'IBM Plex Mono'; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-ink); text-align:center; }
  .pc .band .q { margin-top:22px; font:italic 26px/1.18 'Old Standard TT'; color:var(--ink); }
  .pc .band .q:before { content:'“'; display:block; font:700 64px/0.6 'Old Standard TT'; color:var(--opp); margin-bottom:10px; font-style:normal; }
  .pc .band .by { margin-top:auto; padding-top:10px; border-top:1px solid rgba(21,18,15,.25); font:800 17px/1.1 'Big Shoulders Display'; letter-spacing:.06em; text-transform:uppercase; }
  .pc .band .by span { display:block; margin-top:3px; font:500 12px/1.2 'IBM Plex Sans'; letter-spacing:0; text-transform:none; color:var(--muted-ink); }

  /* the decoy */
  .pc .blank { position:absolute; left:32px; top:116px; width:566px; height:454px; border:3px solid var(--line1); background:#E9E4D6 var(--tex) center/520px;
    display:grid; place-items:center; text-align:center; color:var(--ink); }
  .pc .blank .stamp { transform:rotate(-8deg); border:6px double var(--opp-deep); color:var(--opp-deep); padding:14px 30px 10px; font:900 74px/0.9 'Big Shoulders Display'; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
  .pc .blank .stamp small { display:block; margin-top:8px; font:700 15px/1 'IBM Plex Mono'; letter-spacing:.26em; }
  .pc .blank p { position:absolute; left:0; right:0; bottom:26px; margin:0; font:italic 22px/1.3 'Old Standard TT'; color:#5E5546; }



/* the hand: the same card, read at a third of its size (flavour and set line hidden, the rules set larger) */
.pc.hand .ttl { font-size:calc(54px * var(--fit, 1)); line-height:.9; }
.pc.hand .cost { width:96px; height:96px; } .pc.hand .cost b { font-size:64px; } .pc.hand .cost small { display:none; }
.pc.hand .crest { width:72px; height:72px; }
.pc.hand .ln { font-size:calc(28px * var(--k, 1)); margin:10px 150px 0 0; }
.pc.hand .flv, .pc.hand .ft .set, .pc.hand .ft .lbl { display:none; }
.pc.hand .dice i { width:32px; height:32px; font-size:18px; }
.pc.hand .clout { width:132px; height:132px; right:28px; bottom:28px; } .pc.hand .clout b { font-size:78px; } .pc.hand .clout small { display:none; }
.pc.hand .tl { font-size:20px; }

/* option B (founder, 15 Oct; 2026-10-15-card-redesign): the card in the board's language, laid out in zones */
.pc .rb { display:flex; flex-direction:column; }
/* the homes: dark venue plates on the art's lower edge, the venue's token in the card's colour and its name */
.pc .homes { position:absolute; left:42px; top:500px; z-index:4; display:flex; gap:10px; width:max-content; }
/* black frosted glass, white type, the side's colour along the edge: they stand off any art and let it through (founder, 15 Oct) */
.pc .home { display:flex; align-items:center; gap:8px; height:64px; padding:0 16px 0 8px; background:rgba(10,9,8,.55); -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2); border-left:8px solid var(--seal); border-radius:3px; box-shadow:0 0 0 1.5px rgba(255,240,210,.22), inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.45); color:#FFF6E6; text-shadow:0 1px 2px rgba(0,0,0,.8); font:900 29px/1 'Big Shoulders Display'; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.pc.o .home { border-left-color:#3E6E8E; }
.pc .home i { flex:none; width:52px; height:52px; background:center/contain no-repeat; }
/* the effect: an outlined paper box, the venue's token and the wedges; the keywords as tags beside it */
.pc .nr { display:flex; flex-wrap:wrap; gap:12px; }
.pc .fx { display:flex; align-items:center; gap:10px; height:64px; padding:0 14px 0 12px; border:2.5px solid #2A2219; border-radius:4px; background:rgba(255,250,235,.35); }
.pc .fx small { width:60px; font:700 11px/1.2 'IBM Plex Mono'; letter-spacing:.12em; color:#6E6352; }
.pc .fx i, .pc .fx svg { flex:none; width:50px; height:50px; background:center/contain no-repeat; }
.pc .tag { align-self:center; padding:7px 10px 6px; border:2px solid currentColor; border-radius:3px; font:700 14px/1 'IBM Plex Mono'; letter-spacing:.14em; text-transform:uppercase; color:var(--seal-deep); }
.pc .tag.rec { color:#7A5C22; background:rgba(226,188,94,.18); }
.pc .tag.calls { color:var(--ink); }
.pc .clout.boost { box-shadow:0 0 0 5px #E2BC5E, 0 0 30px rgba(226,188,94,.8); }
.pc .clout.boost b, .pc .clout.aged b { margin-top:12px; }
.pc .clout.aged { box-shadow:0 0 0 4px #8C8370; }
.pc .clout .sum { position:absolute; left:0; right:0; top:14px; text-align:center; font:700 15px/1 'IBM Plex Mono'; letter-spacing:.04em; color:#FFE3D6; }
/* in the hand: the plates show the token alone, larger; the effect without its label */
.pc.hand .homes { top:470px; }
.pc.hand .home { height:76px; padding:0 14px 0 6px; gap:6px; font-size:36px; } .pc.hand .home i { width:62px; height:62px; }
.pc.hand .fx { height:80px; } .pc.hand .fx small { display:none; } .pc.hand .fx i, .pc.hand .fx svg { width:66px; height:66px; }
.pc.hand .tag { font-size:17px; padding:9px 10px 8px; }
.pc.hand .clout .sum { font-size:20px; } .pc.hand .clout.boost b, .pc.hand .clout.aged b { margin-top:10px; }

/* the backs */
.pb { position:relative; width:630px; height:880px; border-radius:30px; overflow:hidden; background:#0E0D0C; flex:none; }
.pb .img { position:absolute; inset:0; background:url("https://thedictatorstore.blob.core.windows.net/game-images/category/rule-of-law/850580271-mujtcnyk0.webp") no-repeat center / 660px 880px; }
.pb.opp .img { filter:hue-rotate(172deg) saturate(.62) brightness(.92); }
.pb svg { position:absolute; left:153px; top:289px; width:324px; height:324px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)); }

/* a number's move off the card (FxMark): the venue's token and its wedges, sized by where it sits */
.fxm { display:inline-flex; align-items:center; gap:3px; vertical-align:middle; }
.fxm i { flex:none; width:1.6em; height:1.6em; background:center/contain no-repeat; }
.fxm svg { flex:none; width:1.5em; height:1.5em; }
/* a card counting for the other side (a backfire): its clout disc in that side's colour (founder, 16 Oct) */
.pc .clout.turned { background:radial-gradient(circle at 36% 30%, #79A8C8, #4C83A8 50%, #1D3A4C); border-color:#7FA6BF; }
.pc.o .clout.turned { background:radial-gradient(circle at 36% 30%, #E4553C, #C8321E 50%, #7E1B0E); border-color:#B8913A; }

/* the muzzle (approved 16 Oct): a box beside When it lands, the venue's token and the other side's clout disc at −1 */
.pc .mz { display:flex; align-items:center; gap:10px; height:64px; padding:0 12px; border:2.5px solid #2A2219; border-radius:4px; background:rgba(255,250,235,.35); }
.pc .mz small { width:62px; font:700 11px/1.2 'IBM Plex Mono'; letter-spacing:.12em; color:#6E6352; }
.pc .mz i { flex:none; width:50px; height:50px; background:center/contain no-repeat; }
.pc .mz .dk { flex:none; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font:900 28px/1 'Big Shoulders Display'; color:#FFF3E2; box-shadow:0 2px 5px rgba(0,0,0,.4); }
.pc .mz .dk.b { background:radial-gradient(circle at 36% 30%, #79a8c8, #4c83a8 50%, #1d3a4c); border:2px solid #7fa6bf; }
.pc .mz .dk.r { background:radial-gradient(circle at 36% 30%, #e4553c, #c8321e 50%, #7e1b0e); border:2px solid #b8913a; }
.pc.hand .mz { height:80px; } .pc.hand .mz small { display:none; } .pc.hand .mz i, .pc.hand .mz .dk { width:66px; height:66px; } .pc.hand .mz .dk { font-size:36px; }
/* the combo as the clout circle's Art Deco mount (approved 16 Oct): a stepped crown running down into a collar round the
   circle, grey until its side holds the venue, gold then (the circle shows the total); card-kit.js draws its outline */
.pc .clout { z-index:3; }
.pc svg.cbm { position:absolute; left:0; top:0; width:630px; height:880px; z-index:2; pointer-events:none; overflow:visible; }
.pc svg.cbm .edge { fill:none; stroke-width:5; } .pc svg.cbm .rays { fill:none; stroke-width:1.2; } .pc svg.cbm .inner { fill:none; stroke-width:1.2; }
.pc svg.cbm.on .shape { fill:url(#ckGold); } .pc svg.cbm.on .edge { stroke:#5A4318; } .pc svg.cbm.on .glow { filter:drop-shadow(0 0 9px rgba(242,198,106,.8)); }
.pc svg.cbm.on .rays { stroke:rgba(255,246,214,.6); } .pc svg.cbm.on .inner { stroke:rgba(90,67,24,.45); }
.pc svg.cbm.off .shape { fill:url(#ckGrey); } .pc svg.cbm.off .edge { stroke:#9F9786; } .pc svg.cbm.off .rays { stroke:rgba(255,255,255,.5); } .pc svg.cbm.off .inner { stroke:rgba(140,131,112,.45); }
.pc .cbl { position:absolute; z-index:4; left:462px; width:148px; top:640px; text-align:center; font:700 10px/1 'IBM Plex Mono'; letter-spacing:.16em; white-space:nowrap; pointer-events:none; }
.pc .cbr { position:absolute; z-index:4; left:474px; width:124px; top:656px; height:58px; display:flex; justify-content:center; align-items:center; pointer-events:none; }
/* the venue the combo needs, as the board draws its token: on a dark disc ringed in gold, so it is known at a glance
   (founder, 18 Oct: the bare token was not recognisable on the pale mount) */
.pc .cbr i { width:56px; height:56px; box-sizing:border-box; border-radius:50%; background:#15120F center/72% no-repeat; box-shadow:0 0 0 2.5px #B8913A, 0 2px 4px rgba(0,0,0,.45); }
/* the bonus inside the badge: a tab over the disc's lower edge, so the venue and the +2 read together and nothing leaves the mount */
.pc .cbr b { position:absolute; left:50%; top:40px; transform:translateX(-50%); padding:2px 6px 1px; border-radius:7px; background:#E2BC5E; box-shadow:0 0 0 1.5px #5A4318; font:900 20px/1 'Big Shoulders Display'; }
.pc .cbr.on b { color:#2A1E08; } .pc .cbl.on { color:#8A6A1C; }
/* not held yet: the mount stays grey, but the venue it needs reads clearly (founder, 18 Oct: it was barely visible) */
 .pc .cbr.off i { filter:grayscale(.55); opacity:.85; } .pc .cbr.off b { color:#2A251F; background:#CFC6B2; box-shadow:0 0 0 1.5px #8C8370; } .pc .cbl.off { color:#6D6353; }
.pc.hand .cbl { display:none; }
.pc.hand .cbr { left:462px; width:140px; top:624px; height:68px; } .pc.hand .cbr i { width:66px; height:66px; box-shadow:0 0 0 3px #B8913A, 0 2px 5px rgba(0,0,0,.5); } .pc.hand .cbr b { top:50px; font-size:24px; padding:2px 7px 1px; }
/* a price an order has lowered (Fast-track): the coin glows green-gold, so the saving shows at once (founder, 17 Oct) */
.pc .cost.cut { box-shadow: 0 0 0 4px #8fd18a, 0 0 22px rgba(143, 209, 138, 0.85); }
.pc .cost.cut b { color: #1f4a1c; }