.pcard, .pcard * { box-sizing: border-box; }
/* Not Monopoly Deal card faces. Size a card with --cw on it or any ancestor;
   everything inside scales with the card (container units). */
.pcard {
  --ivory: #ebe3cf; --ivory-2: #ddd3bb; --ink: #1b1f2a;
  width: var(--cw, 100px); aspect-ratio: 5 / 7; container-type: inline-size; position: relative; flex: none;
  border-radius: calc(var(--cw, 100px) * .07); background: var(--ivory); color: var(--ink);
  box-shadow: 0 calc(var(--cw, 100px) * .03) calc(var(--cw, 100px) * .1) rgba(0,0,0,.45), inset 0 0 0 calc(var(--cw, 100px) * .012) rgba(0,0,0,.12);
  font-family: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Avenir Next", system-ui, sans-serif;
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
.pcard .pc-badge { position: absolute; left: 5cqw; top: 5cqw; width: 19cqw; height: 19cqw; border-radius: 50%; background: var(--ivory); border: 1.6cqw solid var(--ink); display: flex; align-items: center; justify-content: center; z-index: 2; line-height: 1; }
.pcard .pc-badge b { font-size: 9cqw; font-weight: 900; }
.pcard .pc-badge small { font-size: 5.5cqw; font-weight: 800; margin-left: .3cqw; }
.pcard .pc-kicker { text-align: center; font-size: 6cqw; font-weight: 900; letter-spacing: .12em; margin-top: 7cqw; color: #5b5240; }
.pcard .pc-text { position: absolute; left: 7cqw; right: 7cqw; bottom: 6cqw; font-size: 6.2cqw; line-height: 1.15; text-align: center; color: #3b3528; font-weight: 600; }

/* property */
.k-prop .pc-band { margin: 5cqw 5cqw 0; height: 36cqw; background: var(--sc); color: var(--si); border-radius: 3cqw; display: flex; align-items: flex-end; justify-content: center; padding: 0 4cqw 4cqw 24cqw; text-align: center; }
.k-prop .pc-band span { font-size: 10cqw; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.k-prop .pc-sub { text-align: center; font-size: 6.4cqw; font-weight: 800; color: #6b6150; margin: 4cqw 0 2cqw; text-transform: uppercase; letter-spacing: .08em; }
.k-prop .pc-ladder { margin: 0 7cqw; }
.pcard .pc-row { display: flex; align-items: center; gap: 2cqw; font-size: 7.5cqw; font-weight: 800; border-bottom: .6cqw dotted rgba(0,0,0,.25); padding: 2.4cqw 0; }
.pcard .pc-ladder.sm { margin: 1cqw 6cqw 0; }
.pcard .pc-ladder.sm .pc-row { padding: .7cqw 0; font-size: 6cqw; }
.pcard .pc-ladder.sm .pc-n { font-size: 5.2cqw; }
.pcard .pc-ladder.sm .pc-amt { font-size: 6.5cqw; }
.pcard .pc-row.full { color: #0b0f18; }
.pcard .pc-row .pc-n { flex: 1; font-size: 6.6cqw; color: #6b6150; }
.pcard .pc-row.full .pc-n { color: var(--sc); font-weight: 900; }
.pcard .pc-row .pc-amt { font-size: 9cqw; font-weight: 900; }
.pcard .pc-stack { display: inline-flex; width: 13cqw; }
.pcard .pc-stack i { width: 4.5cqw; height: 6.5cqw; border-radius: .8cqw; background: var(--sc); margin-right: -1.6cqw; border: .5cqw solid var(--ivory); }

/* two-colour wild */
.k-wild2 { display: flex; flex-direction: column; }
.k-wild2 .pc-half { flex: 1; position: relative; }
.k-wild2 .hb { transform: rotate(180deg); }
.k-wild2 .pc-band { margin: 5cqw 5cqw 0 26cqw; height: 19cqw; border-radius: 3cqw; display: flex; align-items: center; justify-content: center; padding: 0 2cqw; text-align: center; }
.k-wild2 .pc-band span { font-size: 7.5cqw; font-weight: 900; text-transform: uppercase; line-height: 1; }
.k-wild2 .pc-band.a { background: var(--a); color: var(--ai); }
.k-wild2 .pc-band.b { background: var(--b); color: var(--bi); }
.k-wild2 .pc-short { text-align: center; font-size: 6.5cqw; font-weight: 800; color: #6b6150; margin-top: 2cqw; }
.k-wild2 .pc-wtag { align-self: center; margin: 1cqw 0; font-size: 7cqw; font-weight: 900; letter-spacing: .3em; background: #1b1f2a; color: var(--ivory); padding: .8cqw 4cqw; border-radius: 99px; }
.k-wild2.as-a .hb, .k-wild2.as-b .ha { opacity: .42; }

/* any-colour wild and rent wheels */
.pcard .pc-wheel { width: 64cqw; height: 64cqw; border-radius: 50%; margin: 6cqw auto 0; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.4cqw rgba(0,0,0,.25); }
.pcard .pc-hub { width: 38cqw; height: 38cqw; border-radius: 50%; background: var(--ivory); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 900; font-size: 8.5cqw; line-height: 1; letter-spacing: .04em; box-shadow: 0 0 0 1.2cqw rgba(0,0,0,.18); }
.k-anywild .pc-hub { font-size: 7cqw; }

/* cash */
.k-money { background: var(--mt); }
.k-money .pc-frame { position: absolute; inset: 5cqw; border: 1.4cqw solid rgba(0,0,0,.28); border-radius: 4cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2cqw, rgba(255,255,255,0) 2cqw 4cqw); }
.k-money .pc-coin { width: 66cqw; height: 66cqw; border-radius: 50%; background: var(--ivory); border: 2cqw solid rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; box-shadow: 0 1.5cqw 0 rgba(0,0,0,.18); }
.k-money .pc-coin b { font-size: 32cqw; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.k-money .pc-coin small { font-size: 12cqw; font-weight: 900; }
.k-money .pc-mlabel { margin-top: 4cqw; font-size: 7cqw; font-weight: 900; letter-spacing: .3em; color: rgba(0,0,0,.55); }
.k-money .pc-corner { position: absolute; font-size: 8cqw; font-weight: 900; }
.k-money .pc-corner.tl { left: 3cqw; top: 2cqw; }
.k-money .pc-corner.br { right: 3cqw; bottom: 2cqw; transform: rotate(180deg); }

/* actions */
.k-action .pc-ring { width: 70cqw; height: 70cqw; margin: 4cqw auto 0; border-radius: 50%; border: 3.2cqw solid var(--ring); background: radial-gradient(circle at 50% 35%, #fffaf0, var(--ivory-2)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4cqw; box-shadow: 0 0 0 1.4cqw var(--ivory), 0 0 0 2.4cqw var(--ring); }
.k-action .pc-icon { font-size: 22cqw; line-height: 1; font-weight: 900; color: var(--ring); font-family: system-ui, "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.k-action .pc-atitle { font-size: 8.5cqw; font-weight: 900; text-transform: uppercase; line-height: .95; margin-top: 2cqw; color: var(--ring); }
.k-action .pc-text { font-size: 5.6cqw; }

/* back */
.k-back { background: #182a4a; box-shadow: 0 calc(var(--cw, 100px) * .03) calc(var(--cw, 100px) * .1) rgba(0,0,0,.45); }
.k-back .pc-backin { position: absolute; inset: 5cqw; border-radius: 4cqw; border: 1.2cqw solid #c9a54a; background: repeating-linear-gradient(45deg, #1e3460 0 4cqw, #182a4a 4cqw 8cqw); display: flex; align-items: center; justify-content: center; }
.k-back .pc-logo { background: #c9a54a; color: #182a4a; font-weight: 900; font-size: 9cqw; line-height: .95; text-align: center; padding: 4cqw 6cqw; border-radius: 4cqw; transform: rotate(-12deg); letter-spacing: .06em; box-shadow: 0 1cqw 0 rgba(0,0,0,.3); }
.k-back .pc-logo b { font-size: 14cqw; }

/* states */
.pcard.fresh { animation: pc-in .55s cubic-bezier(.2,1.3,.4,1) both; }
.pcard.glow { box-shadow: 0 0 0 calc(var(--cw, 100px) * .04) #ffd93d, 0 calc(var(--cw, 100px) * .06) calc(var(--cw, 100px) * .2) rgba(0,0,0,.5); }
@keyframes pc-in { from { transform: translateY(-40%) rotate(-8deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }