/* * Deck art packs — GENERATED by design/build-deck-art.py. Do not hand-edit; * re-run the script instead, so the rules and the images can never disagree. * * A skin normally reskins the deck through tokens: deck.css draws the card and * royals.js draws the figures, both painting only in `currentColor` and * `var(--card-bg)`. That is what lets one CSS block restyle the whole deck. * * An *art pack* skin is different — it brings its own drawings. Everything the * app owns stays the app's: the three sizes, the selection lift, the * denied/banked strike, the power label. Only the artwork is swapped, which is * why this is a stylesheet and not a second card renderer. * * The card DOM must carry `data-rank`, `data-suit` and `data-card`. Skins with * no art pack never match any of these rules and are untouched. */ /* ── structure, shared by every art pack ──────────────────────────────────── */ [data-theme^="occult"] .card { /* The art carries its own stock, rim and corners, so the drawn frame goes. */ box-shadow: none; border-radius: 0; background: center/100% 100% no-repeat; filter: drop-shadow(0 4px 9px var(--drop-shadow)); } /* The engraved inner hairline is part of their frame already. */ [data-theme^="occult"] .card.is-royal::after { display: none; } /* Selection has to be restated: killing the card's box-shadow above would * otherwise take the ring with it, and a lift with no ring is not a state. */ [data-theme^="occult"] .card--hand.is-selected { box-shadow: 0 0 0 2px rgb(var(--ui-accent-rgb) / .95), 0 12px 24px var(--drop-shadow); } /* Glyphs become images. The boxes stay in `em` so all three card sizes keep * deriving from the one size unit, exactly as the type did. */ [data-theme^="occult"] .card__mark, [data-theme^="occult"] .card__corner .rank, [data-theme^="occult"] .card__corner .pip { color: transparent; background: center/contain no-repeat; display: block; } [data-theme^="occult"] .card__mark { width: 1em; height: 1em; filter: none; opacity: 1; } [data-theme^="occult"] .card__corner .rank { width: 1.15em; height: 1.15em; } [data-theme^="occult"] .card__corner .pip { width: .8em; height: .8em; margin-top: .1em; } [data-theme^="occult"] .card__art { background: center/contain no-repeat; } [data-theme^="occult"] .card__art svg { display: none; } /* The name plate is drawn lettering, so the rule and the type both go. Its * aspect ratio sets the height, which keeps it right at every card size. */ [data-theme^="occult"] .card__plate { color: transparent; border-top: none; padding-top: 0; background: center/contain no-repeat; aspect-ratio: 300 / 48; } /* The enemy and the Heretic get their own stock, rendered from a recoloured * copy of the kit's paper rather than tinted over it — see RESTOCK in * build-deck-art.py. The per-theme urls are below. */ /* Too small for drawn art — a 40px card and an 11px chip would turn the grain * to mush, so those keep the type and the Unicode pips. */ [data-theme^="occult"] .card--sm .card__mark, [data-theme^="occult"] .card--sm .card__corner .rank, [data-theme^="occult"] .card--sm .card__corner .pip { color: var(--suit-dim); background: none; width: auto; height: auto; } [data-theme^="occult"] .card--sm.is-red .card__mark, [data-theme^="occult"] .card--sm.is-red .card__corner .rank, [data-theme^="occult"] .card--sm.is-red .card__corner .pip { color: var(--suit-bright); } /* ── occult-dark ───────────────────────────────────────────────────────────────── */ [data-theme="occult-dark"] .card { background-image: url(/static/deck/occult-dark/stock.webp?v=3aa5fd6a); } [data-theme="occult-dark"] .card.is-enemy { background-image: url(/static/deck/occult-dark/stock-enemy.webp?v=9263de3d); } [data-theme="occult-dark"] .card.is-jester { background-image: url(/static/deck/occult-dark/stock-heretic.webp?v=89f701e1); } [data-theme="occult-dark"] .card[data-suit="H"] .card__mark, [data-theme="occult-dark"] .card[data-suit="H"] .card__corner .pip { background-image: url(/static/deck/occult-dark/suit-H.webp?v=057c9915); } [data-theme="occult-dark"] .card[data-suit="D"] .card__mark, [data-theme="occult-dark"] .card[data-suit="D"] .card__corner .pip { background-image: url(/static/deck/occult-dark/suit-D.webp?v=91d27515); } [data-theme="occult-dark"] .card[data-suit="C"] .card__mark, [data-theme="occult-dark"] .card[data-suit="C"] .card__corner .pip { background-image: url(/static/deck/occult-dark/suit-C.webp?v=8d55d31a); } [data-theme="occult-dark"] .card[data-suit="S"] .card__mark, [data-theme="occult-dark"] .card[data-suit="S"] .card__corner .pip { background-image: url(/static/deck/occult-dark/suit-S.webp?v=7033f836); } [data-theme="occult-dark"] .card[data-suit="X"] .card__mark, [data-theme="occult-dark"] .card[data-suit="X"] .card__corner .pip { background-image: url(/static/deck/occult-dark/suit-X.webp?v=a344e032); } [data-theme="occult-dark"] .card[data-rank="A"] .rank { background-image: url(/static/deck/occult-dark/rank-A.webp?v=195496ba); } [data-theme="occult-dark"] .card[data-rank="2"] .rank { background-image: url(/static/deck/occult-dark/rank-2.webp?v=a1c9e6da); } [data-theme="occult-dark"] .card[data-rank="3"] .rank { background-image: url(/static/deck/occult-dark/rank-3.webp?v=1a7ebb93); } [data-theme="occult-dark"] .card[data-rank="4"] .rank { background-image: url(/static/deck/occult-dark/rank-4.webp?v=c14ff870); } [data-theme="occult-dark"] .card[data-rank="5"] .rank { background-image: url(/static/deck/occult-dark/rank-5.webp?v=a3f0ce21); } [data-theme="occult-dark"] .card[data-rank="6"] .rank { background-image: url(/static/deck/occult-dark/rank-6.webp?v=418a6523); } [data-theme="occult-dark"] .card[data-rank="7"] .rank { background-image: url(/static/deck/occult-dark/rank-7.webp?v=c972ef29); } [data-theme="occult-dark"] .card[data-rank="8"] .rank { background-image: url(/static/deck/occult-dark/rank-8.webp?v=5676c034); } [data-theme="occult-dark"] .card[data-rank="9"] .rank { background-image: url(/static/deck/occult-dark/rank-9.webp?v=a7d68368); } [data-theme="occult-dark"] .card[data-rank="10"] .rank { background-image: url(/static/deck/occult-dark/rank-10.webp?v=4332d2f3); } [data-theme="occult-dark"] .card[data-rank="J"] .rank { background-image: url(/static/deck/occult-dark/rank-J.webp?v=9a3751f4); } [data-theme="occult-dark"] .card[data-rank="Q"] .rank { background-image: url(/static/deck/occult-dark/rank-Q.webp?v=9e69fdeb); } [data-theme="occult-dark"] .card[data-rank="K"] .rank { background-image: url(/static/deck/occult-dark/rank-K.webp?v=a33aae63); } [data-theme="occult-dark"] .card[data-rank="X"] .rank { background-image: url(/static/deck/occult-dark/rank-X.webp?v=2cdfb9ed); } [data-theme="occult-dark"] .card[data-card="KH"] .card__art { background-image: url(/static/deck/occult-dark/sigil-KH.webp?v=c9898586); } [data-theme="occult-dark"] .card[data-card="KH"] .card__plate { background-image: url(/static/deck/occult-dark/plate-KH.webp?v=de8c6397); } [data-theme="occult-dark"] .card[data-card="KD"] .card__art { background-image: url(/static/deck/occult-dark/sigil-KD.webp?v=b224673c); } [data-theme="occult-dark"] .card[data-card="KD"] .card__plate { background-image: url(/static/deck/occult-dark/plate-KD.webp?v=32c1d314); } [data-theme="occult-dark"] .card[data-card="KC"] .card__art { background-image: url(/static/deck/occult-dark/sigil-KC.webp?v=9d944e1f); } [data-theme="occult-dark"] .card[data-card="KC"] .card__plate { background-image: url(/static/deck/occult-dark/plate-KC.webp?v=a6941abc); } [data-theme="occult-dark"] .card[data-card="KS"] .card__art { background-image: url(/static/deck/occult-dark/sigil-KS.webp?v=8314ac9c); } [data-theme="occult-dark"] .card[data-card="KS"] .card__plate { background-image: url(/static/deck/occult-dark/plate-KS.webp?v=165235f4); } [data-theme="occult-dark"] .card[data-card="QH"] .card__art { background-image: url(/static/deck/occult-dark/sigil-QH.webp?v=fa5d7948); } [data-theme="occult-dark"] .card[data-card="QH"] .card__plate { background-image: url(/static/deck/occult-dark/plate-QH.webp?v=516bfeb5); } [data-theme="occult-dark"] .card[data-card="QD"] .card__art { background-image: url(/static/deck/occult-dark/sigil-QD.webp?v=16452a9b); } [data-theme="occult-dark"] .card[data-card="QD"] .card__plate { background-image: url(/static/deck/occult-dark/plate-QD.webp?v=18bcfbb1); } [data-theme="occult-dark"] .card[data-card="QC"] .card__art { background-image: url(/static/deck/occult-dark/sigil-QC.webp?v=ef1b96ef); } [data-theme="occult-dark"] .card[data-card="QC"] .card__plate { background-image: url(/static/deck/occult-dark/plate-QC.webp?v=818b5da5); } [data-theme="occult-dark"] .card[data-card="QS"] .card__art { background-image: url(/static/deck/occult-dark/sigil-QS.webp?v=862dd0f6); } [data-theme="occult-dark"] .card[data-card="QS"] .card__plate { background-image: url(/static/deck/occult-dark/plate-QS.webp?v=0821023b); } [data-theme="occult-dark"] .card[data-card="JH"] .card__art { background-image: url(/static/deck/occult-dark/sigil-JH.webp?v=e5f3d14d); } [data-theme="occult-dark"] .card[data-card="JH"] .card__plate { background-image: url(/static/deck/occult-dark/plate-JH.webp?v=ce8e91bf); } [data-theme="occult-dark"] .card[data-card="JD"] .card__art { background-image: url(/static/deck/occult-dark/sigil-JD.webp?v=7e89525c); } [data-theme="occult-dark"] .card[data-card="JD"] .card__plate { background-image: url(/static/deck/occult-dark/plate-JD.webp?v=f1985f18); } [data-theme="occult-dark"] .card[data-card="JC"] .card__art { background-image: url(/static/deck/occult-dark/sigil-JC.webp?v=6ccc99ea); } [data-theme="occult-dark"] .card[data-card="JC"] .card__plate { background-image: url(/static/deck/occult-dark/plate-JC.webp?v=1ee39890); } [data-theme="occult-dark"] .card[data-card="JS"] .card__art { background-image: url(/static/deck/occult-dark/sigil-JS.webp?v=63da2c41); } [data-theme="occult-dark"] .card[data-card="JS"] .card__plate { background-image: url(/static/deck/occult-dark/plate-JS.webp?v=d6723b0d); } [data-theme="occult-dark"] .card[data-card="X"] .card__art { background-image: url(/static/deck/occult-dark/sigil-X.webp?v=f94665d6); } [data-theme="occult-dark"] .card[data-card="X"] .card__plate { background-image: url(/static/deck/occult-dark/plate-X.webp?v=a46bc834); } /* ── occult-light ───────────────────────────────────────────────────────────────── */ [data-theme="occult-light"] .card { background-image: url(/static/deck/occult-light/stock.webp?v=a76e657b); } [data-theme="occult-light"] .card.is-enemy { background-image: url(/static/deck/occult-light/stock-enemy.webp?v=7f805935); } [data-theme="occult-light"] .card.is-jester { background-image: url(/static/deck/occult-light/stock-heretic.webp?v=6251df6c); } [data-theme="occult-light"] .card[data-suit="H"] .card__mark, [data-theme="occult-light"] .card[data-suit="H"] .card__corner .pip { background-image: url(/static/deck/occult-light/suit-H.webp?v=7ee09337); } [data-theme="occult-light"] .card[data-suit="D"] .card__mark, [data-theme="occult-light"] .card[data-suit="D"] .card__corner .pip { background-image: url(/static/deck/occult-light/suit-D.webp?v=0d67b169); } [data-theme="occult-light"] .card[data-suit="C"] .card__mark, [data-theme="occult-light"] .card[data-suit="C"] .card__corner .pip { background-image: url(/static/deck/occult-light/suit-C.webp?v=2c1b27bd); } [data-theme="occult-light"] .card[data-suit="S"] .card__mark, [data-theme="occult-light"] .card[data-suit="S"] .card__corner .pip { background-image: url(/static/deck/occult-light/suit-S.webp?v=cca89eac); } [data-theme="occult-light"] .card[data-suit="X"] .card__mark, [data-theme="occult-light"] .card[data-suit="X"] .card__corner .pip { background-image: url(/static/deck/occult-light/suit-X.webp?v=e78ae677); } [data-theme="occult-light"] .card[data-rank="A"] .rank { background-image: url(/static/deck/occult-light/rank-A.webp?v=e276cf8b); } [data-theme="occult-light"] .card[data-rank="2"] .rank { background-image: url(/static/deck/occult-light/rank-2.webp?v=596bb3aa); } [data-theme="occult-light"] .card[data-rank="3"] .rank { background-image: url(/static/deck/occult-light/rank-3.webp?v=244d5913); } [data-theme="occult-light"] .card[data-rank="4"] .rank { background-image: url(/static/deck/occult-light/rank-4.webp?v=be3923ac); } [data-theme="occult-light"] .card[data-rank="5"] .rank { background-image: url(/static/deck/occult-light/rank-5.webp?v=f7490927); } [data-theme="occult-light"] .card[data-rank="6"] .rank { background-image: url(/static/deck/occult-light/rank-6.webp?v=ac6b5092); } [data-theme="occult-light"] .card[data-rank="7"] .rank { background-image: url(/static/deck/occult-light/rank-7.webp?v=50f8470c); } [data-theme="occult-light"] .card[data-rank="8"] .rank { background-image: url(/static/deck/occult-light/rank-8.webp?v=eeca6b8c); } [data-theme="occult-light"] .card[data-rank="9"] .rank { background-image: url(/static/deck/occult-light/rank-9.webp?v=f39cbf29); } [data-theme="occult-light"] .card[data-rank="10"] .rank { background-image: url(/static/deck/occult-light/rank-10.webp?v=cab5550f); } [data-theme="occult-light"] .card[data-rank="J"] .rank { background-image: url(/static/deck/occult-light/rank-J.webp?v=01daca49); } [data-theme="occult-light"] .card[data-rank="Q"] .rank { background-image: url(/static/deck/occult-light/rank-Q.webp?v=624685e6); } [data-theme="occult-light"] .card[data-rank="K"] .rank { background-image: url(/static/deck/occult-light/rank-K.webp?v=8ec9ccb4); } [data-theme="occult-light"] .card[data-rank="X"] .rank { background-image: url(/static/deck/occult-light/rank-X.webp?v=9b33e769); } [data-theme="occult-light"] .card[data-card="KH"] .card__art { background-image: url(/static/deck/occult-light/sigil-KH.webp?v=c1e564de); } [data-theme="occult-light"] .card[data-card="KH"] .card__plate { background-image: url(/static/deck/occult-light/plate-KH.webp?v=85398a56); } [data-theme="occult-light"] .card[data-card="KD"] .card__art { background-image: url(/static/deck/occult-light/sigil-KD.webp?v=fb93cc06); } [data-theme="occult-light"] .card[data-card="KD"] .card__plate { background-image: url(/static/deck/occult-light/plate-KD.webp?v=b0e8f217); } [data-theme="occult-light"] .card[data-card="KC"] .card__art { background-image: url(/static/deck/occult-light/sigil-KC.webp?v=586096f3); } [data-theme="occult-light"] .card[data-card="KC"] .card__plate { background-image: url(/static/deck/occult-light/plate-KC.webp?v=38948ab4); } [data-theme="occult-light"] .card[data-card="KS"] .card__art { background-image: url(/static/deck/occult-light/sigil-KS.webp?v=ddb10e38); } [data-theme="occult-light"] .card[data-card="KS"] .card__plate { background-image: url(/static/deck/occult-light/plate-KS.webp?v=4e6cbead); } [data-theme="occult-light"] .card[data-card="QH"] .card__art { background-image: url(/static/deck/occult-light/sigil-QH.webp?v=23f80b6a); } [data-theme="occult-light"] .card[data-card="QH"] .card__plate { background-image: url(/static/deck/occult-light/plate-QH.webp?v=c24ecad9); } [data-theme="occult-light"] .card[data-card="QD"] .card__art { background-image: url(/static/deck/occult-light/sigil-QD.webp?v=87896107); } [data-theme="occult-light"] .card[data-card="QD"] .card__plate { background-image: url(/static/deck/occult-light/plate-QD.webp?v=9d848723); } [data-theme="occult-light"] .card[data-card="QC"] .card__art { background-image: url(/static/deck/occult-light/sigil-QC.webp?v=a8d66932); } [data-theme="occult-light"] .card[data-card="QC"] .card__plate { background-image: url(/static/deck/occult-light/plate-QC.webp?v=80a1cfed); } [data-theme="occult-light"] .card[data-card="QS"] .card__art { background-image: url(/static/deck/occult-light/sigil-QS.webp?v=f42f4054); } [data-theme="occult-light"] .card[data-card="QS"] .card__plate { background-image: url(/static/deck/occult-light/plate-QS.webp?v=1c2e4e46); } [data-theme="occult-light"] .card[data-card="JH"] .card__art { background-image: url(/static/deck/occult-light/sigil-JH.webp?v=e403ce07); } [data-theme="occult-light"] .card[data-card="JH"] .card__plate { background-image: url(/static/deck/occult-light/plate-JH.webp?v=68db4156); } [data-theme="occult-light"] .card[data-card="JD"] .card__art { background-image: url(/static/deck/occult-light/sigil-JD.webp?v=1aa22ce3); } [data-theme="occult-light"] .card[data-card="JD"] .card__plate { background-image: url(/static/deck/occult-light/plate-JD.webp?v=7710ad1a); } [data-theme="occult-light"] .card[data-card="JC"] .card__art { background-image: url(/static/deck/occult-light/sigil-JC.webp?v=10043155); } [data-theme="occult-light"] .card[data-card="JC"] .card__plate { background-image: url(/static/deck/occult-light/plate-JC.webp?v=922b27f3); } [data-theme="occult-light"] .card[data-card="JS"] .card__art { background-image: url(/static/deck/occult-light/sigil-JS.webp?v=3f7b2f99); } [data-theme="occult-light"] .card[data-card="JS"] .card__plate { background-image: url(/static/deck/occult-light/plate-JS.webp?v=afb8dd3c); } [data-theme="occult-light"] .card[data-card="X"] .card__art { background-image: url(/static/deck/occult-light/sigil-X.webp?v=78b521a7); } [data-theme="occult-light"] .card[data-card="X"] .card__plate { background-image: url(/static/deck/occult-light/plate-X.webp?v=5af5253b); }