@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@800&display=swap");

/* Bouzopp money: six bills and two coins. Each bill has its colour, its ink and its paper. */
.bouzopp-bill {
    --bill: var(--legendary, #a96812);
    --ink: color-mix(in srgb, var(--bill) 32%, #000);
    --paper: color-mix(in srgb, var(--bill) 20%, #fbf5e6);
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 132px;
    height: 60px;
    zoom: var(--piece-size, 1);
    overflow: hidden;
    /* Its lettering is raised over its paper (z-index) inside the bill only: in a stack, the bills
       under it never print through the one on top. */
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--ink) 70%, transparent);
    border-radius: 3px;
    background:
        repeating-linear-gradient(62deg, transparent 0 2.6px, color-mix(in srgb, var(--ink) 7%, transparent) 2.6px 3.1px),
        repeating-radial-gradient(ellipse 60% 120% at 0% 50%, transparent 0 4.4px, color-mix(in srgb, var(--bill) 30%, transparent) 4.4px 5px),
        repeating-radial-gradient(ellipse 60% 120% at 100% 50%, transparent 0 4.4px, color-mix(in srgb, var(--ink) 9%, transparent) 4.4px 5px),
        linear-gradient(100deg, var(--paper) 0%, color-mix(in srgb, var(--bill) 45%, var(--paper)) 48%, color-mix(in srgb, var(--bill) 85%, var(--paper)) 100%);
    box-shadow: inset 0 0 0 2.5px var(--paper), inset 0 0 0 3.1px color-mix(in srgb, var(--ink) 45%, transparent),
        1px 1px 0 rgba(0, 0, 0, 0.18);
    color: var(--ink);
    font-family: "Sora", sans-serif;
    line-height: 1;
    user-select: none;
}
/* A bill is the colour of the rarity its face is drawn from (FACE_RARITIES in mint.py): the 250
   legendary, the 100 epic, the 50 rare, the 20 uncommon, and the two small ones common, the 5 paler.
   A country's bills take their colours by rank down its own bills (`data-rank`, wallet.js), since a
   country has whichever values it likes. */
.bouzopp-bill[data-rank="legendary"] { --bill: var(--legendary, #a96812); }
.bouzopp-bill[data-rank="epic"] { --bill: var(--epic, #7543c5); }
.bouzopp-bill[data-rank="rare"] { --bill: var(--rare, #315bcf); }
.bouzopp-bill[data-rank="uncommon"] { --bill: var(--uncommon, #257b53); }
.bouzopp-bill[data-rank="common"] { --bill: var(--common, #75818f); }
.bouzopp-bill[data-rank="small"] { --bill: color-mix(in srgb, var(--common, #75818f) 65%, #fff); }
.bouzopp-bill[data-value="250"], .navbar-wallet-bill[data-value="250"] { --bill: var(--legendary, #a96812); }
.bouzopp-bill[data-value="100"], .navbar-wallet-bill[data-value="100"] { --bill: var(--epic, #7543c5); }
.bouzopp-bill[data-value="50"], .navbar-wallet-bill[data-value="50"] { --bill: var(--rare, #315bcf); }
.bouzopp-bill[data-value="20"], .navbar-wallet-bill[data-value="20"] { --bill: var(--uncommon, #257b53); }
.bouzopp-bill[data-value="10"], .navbar-wallet-bill[data-value="10"] { --bill: var(--common, #75818f); }
.bouzopp-bill[data-value="5"], .navbar-wallet-bill[data-value="5"] { --bill: color-mix(in srgb, var(--common, #75818f) 65%, #fff); }
.bouzopp-bill-value { position: absolute; top: 5px; left: 7px; z-index: 2; font-size: 14px; font-weight: 900; letter-spacing: -0.02em; text-shadow: 0.6px 0.6px 0 var(--paper); }
.bouzopp-bill-value.is-end { top: auto; left: auto; right: 7px; bottom: 5px; font-size: 16px; color: color-mix(in srgb, var(--ink) 85%, var(--bill)); }
.bouzopp-bill-name { position: absolute; bottom: 5px; left: 8px; z-index: 2; font-size: 5.4px; font-weight: 800; letter-spacing: 0.3em; opacity: 0.85; }
.bouzopp-bill-series { position: absolute; top: 4px; left: 38%; z-index: 2; font-size: 3.6px; font-weight: 800; letter-spacing: 0.28em; opacity: 0.8; transform: translateX(-50%); white-space: nowrap; }
.bouzopp-bill-serial { position: absolute; top: 5px; right: 7px; z-index: 2; color: #b3243a; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 4.6px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
/* Money is a country's (issue #770), and each country's is printed its own way, on the paper of its
   passport (`--country-paper`: the same patterns as the passport pages, in the country's ink), inside
   the frame that country tools into its cover, its emblem for a seal under the portrait, its thread and
   its series line in its ink, and the paper itself tinted a little its way. The value keeps its colour,
   so a 50 is a 50 whoever printed it. Money printed before countries did carries none of this. */
.bouzopp-bill[data-country] { --country-line: color-mix(in srgb, var(--country) 16%, transparent); --paper: color-mix(in srgb, var(--country) 9%, color-mix(in srgb, var(--bill) 20%, #fbf5e6)); }
.bouzopp-bill[data-country="bouzopp"] { --country: #36496c; --country-paper: repeating-linear-gradient(0deg, transparent 0 5px, var(--country-line) 5px 5.6px), repeating-linear-gradient(90deg, transparent 0 5px, var(--country-line) 5px 5.6px); }
.bouzopp-bill[data-country="mongolistan"] { --country: #8a2a2a; --country-paper: repeating-radial-gradient(circle at 38% 50%, transparent 0 4px, var(--country-line) 4px 4.6px); }
.bouzopp-bill[data-country="pedalistan"] { --country: #23634a; --country-paper: repeating-conic-gradient(from 0deg at 38% 50%, transparent 0 5deg, var(--country-line) 5deg 6deg); }
.bouzopp-bill[data-country="tagoustan"] { --country: #1f5f74; --country-paper: repeating-radial-gradient(ellipse 70% 38% at 18% 84%, transparent 0 5px, var(--country-line) 5px 5.7px), repeating-radial-gradient(ellipse 46% 60% at 88% 16%, transparent 0 6px, var(--country-line) 6px 6.7px); }
.bouzopp-bill[data-country="andasmas"] { --country: #3b3594; --country-paper: repeating-linear-gradient(60deg, transparent 0 5px, var(--country-line) 5px 5.6px), repeating-linear-gradient(-60deg, transparent 0 5px, var(--country-line) 5px 5.6px); }
.bouzopp-bill[data-country="boulemia"] { --country: #8a4b1f; --country-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='12'><path d='M0 .5H16M0 6.5H16M.5 0V6M8.5 6V12' fill='none' stroke='%238a4b1f' stroke-opacity='.22'/></svg>"); }
.bouzopp-bill[data-country="merguez"] { --country: #b9461a; --country-paper: radial-gradient(circle, var(--country-line) 0.8px, transparent 1.2px) 0 0 / 6px 6px, radial-gradient(circle, color-mix(in srgb, var(--country) 22%, transparent) 0.6px, transparent 1px) 3px 2px / 6px 9px; }
/* The series line and the name step in from the frame's bands. */
.bouzopp-bill[data-country] .bouzopp-bill-series { top: 8.5px; color: var(--country); opacity: 0.95; }
.bouzopp-bill[data-country] .bouzopp-bill-name { bottom: 9px; }
.bouzopp-bill[data-country] .bouzopp-bill-thread { background: repeating-linear-gradient(0deg, var(--country) 0 3px, transparent 3px 5px); opacity: 0.6; }
.bouzopp-bill-frame { position: absolute; inset: 0; background: var(--country-paper); }
/* The frame of each, in the country's ink: a beaded band for Mongolistan, a chain for Roulistan, peaks for
   Tagoustan, a double rule for Andasmas, battlements for Boulemia, a string of links for Merguez, a ledger's
   rules for the Federation. */
.bouzopp-bill-frame::after { content: ''; position: absolute; inset: 3px 4px; box-sizing: border-box; opacity: 0.6; color: var(--country); pointer-events: none; }
.bouzopp-bill[data-country="mongolistan"] .bouzopp-bill-frame::after { background: linear-gradient(currentColor, currentColor) 0 0 / 100% 0.8px no-repeat, repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px) 0 1.6px / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 4.4px / 100% 0.8px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 0.8px no-repeat, repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px) 0 calc(100% - 1.6px) / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 calc(100% - 4.4px) / 100% 0.8px no-repeat; }
.bouzopp-bill[data-country="pedalistan"] .bouzopp-bill-frame::after { border: 1.8px dotted currentColor; border-radius: 5px; }
.bouzopp-bill[data-country="tagoustan"] .bouzopp-bill-frame::after { background: linear-gradient(135deg, currentColor 25%, transparent 25%) 0 0 / 6px 3px repeat-x, linear-gradient(225deg, currentColor 25%, transparent 25%) 0 0 / 6px 3px repeat-x, linear-gradient(45deg, currentColor 25%, transparent 25%) 0 100% / 6px 3px repeat-x, linear-gradient(315deg, currentColor 25%, transparent 25%) 0 100% / 6px 3px repeat-x; }
.bouzopp-bill[data-country="andasmas"] .bouzopp-bill-frame::after { border: 2.4px double currentColor; border-radius: 3px; }
.bouzopp-bill[data-country="boulemia"] .bouzopp-bill-frame::after { background: linear-gradient(currentColor, currentColor) 0 2.6px / 100% 0.8px no-repeat, repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px) 0 0 / 100% 2.6px no-repeat, linear-gradient(currentColor, currentColor) 0 calc(100% - 2.6px) / 100% 0.8px no-repeat, repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px) 0 100% / 100% 2.6px no-repeat; }
.bouzopp-bill[data-country="merguez"] .bouzopp-bill-frame::after { border: 1.8px dashed currentColor; border-radius: 8px; }
.bouzopp-bill[data-country="bouzopp"] .bouzopp-bill-frame::after { background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.2px no-repeat, repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 11px) 0 2.4px / 100% 0.7px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1.2px no-repeat, repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 11px) 0 calc(100% - 2.4px) / 100% 0.7px no-repeat; }
.bouzopp-bill-issuer { position: absolute; bottom: 9px; left: 38%; z-index: 2; width: 13px; height: 13px; color: var(--country, var(--ink)); opacity: 0.85; transform: translateX(-50%); }
.bouzopp-bill-issuer .bouzopp-passport-emblem { display: block; width: 100%; height: 100%; stroke-width: 3.6; }
/* And each country lays its bills out its own way (`data-layout`, app/services/coinage.py), on a
   sheet of its own size: the Federation's is the ledger every bill was before. Mongolistan sets the
   portrait at the left end in the sun's rays and the value large at the right; Roulistan's portrait
   rides on the right in a cog, the values leaning on the left; Tagoustan's stands at the top centre
   with its corners cut, over contour lines; Andasmas sets its own under an arch in the middle, in the
   royal serif; Boulemia's is a square plate on the left, the value at the top right and the serial at
   the foot; Merguez prints the value large on the left and its portrait an oval in a string of
   links on the right, the series along the foot. */
.bouzopp-bill[data-layout="banner"] :is(.bouzopp-bill-rosette, .bouzopp-bill-portrait, .bouzopp-bill-issuer) { left: 24%; }
.bouzopp-bill[data-layout="banner"] .bouzopp-bill-rosette { width: 60px; height: 60px; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ink) 24%, transparent) 0 4deg, transparent 4deg 15deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 72%); mask: radial-gradient(circle, #000 20%, transparent 72%); }
.bouzopp-bill[data-layout="banner"] .bouzopp-bill-thread { left: 50%; }
.bouzopp-bill[data-layout="banner"] .bouzopp-bill-foil { left: 42%; }
.bouzopp-bill[data-layout="banner"] .bouzopp-bill-value:not(.is-end) { font-size: 11px; }
.bouzopp-bill[data-layout="banner"] .bouzopp-bill-value.is-end { right: 12px; bottom: 9px; font-size: 24px; }
.bouzopp-bill[data-layout="banner"] .bouzopp-bill-watermark { right: 50px; }
.bouzopp-bill[data-layout="road"] :is(.bouzopp-bill-rosette, .bouzopp-bill-portrait, .bouzopp-bill-issuer) { left: 70%; }
.bouzopp-bill[data-layout="road"] .bouzopp-bill-rosette { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ink) 30%, transparent) 0 15deg, transparent 15deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 50% 62%, transparent 66%); mask: radial-gradient(circle, transparent 0 48%, #000 50% 62%, transparent 66%); }
.bouzopp-bill[data-layout="road"] .bouzopp-bill-thread { left: 30%; }
.bouzopp-bill[data-layout="road"] .bouzopp-bill-foil { left: 36%; }
.bouzopp-bill[data-layout="road"] .bouzopp-bill-value { font-style: italic; }
.bouzopp-bill[data-layout="road"] .bouzopp-bill-value.is-end { right: auto; left: 8px; bottom: 9px; font-size: 20px; }
.bouzopp-bill[data-layout="road"] .bouzopp-bill-name { right: 8px; left: auto; }
.bouzopp-bill[data-layout="road"] .bouzopp-bill-series { left: 56%; }
.bouzopp-bill[data-layout="road"] .bouzopp-bill-watermark { right: auto; left: 38%; }
.bouzopp-bill[data-layout="summit"] :is(.bouzopp-bill-rosette, .bouzopp-bill-portrait) { left: 50%; top: 46%; }
.bouzopp-bill[data-layout="summit"] .bouzopp-bill-rosette { background: repeating-radial-gradient(circle, transparent 0 3px, color-mix(in srgb, var(--ink) 24%, transparent) 3px 3.6px); -webkit-mask: radial-gradient(circle, #000 45%, transparent 72%); mask: radial-gradient(circle, #000 45%, transparent 72%); }
.bouzopp-bill[data-layout="summit"] .bouzopp-bill-portrait { border-radius: 0; clip-path: polygon(16% 0, 84% 0, 100% 11%, 100% 100%, 0 100%, 0 11%); }
.bouzopp-bill[data-layout="summit"] .bouzopp-bill-thread { left: 82%; }
.bouzopp-bill[data-layout="summit"] .bouzopp-bill-foil { left: 14%; }
.bouzopp-bill[data-layout="summit"] .bouzopp-bill-series { top: auto; bottom: 9px; left: 60%; }
.bouzopp-bill[data-layout="summit"] .bouzopp-bill-issuer { top: 17px; right: 9px; bottom: auto; left: auto; transform: none; }
.bouzopp-bill[data-layout="summit"] .bouzopp-bill-watermark { top: 64%; }
.bouzopp-bill[data-layout="royal"] :is(.bouzopp-bill-rosette, .bouzopp-bill-portrait) { left: 50%; }
.bouzopp-bill[data-layout="royal"] .bouzopp-bill-portrait { border-radius: 15px 15px 3px 3px; }
.bouzopp-bill[data-layout="royal"] .bouzopp-bill-rosette { background: repeating-linear-gradient(60deg, transparent 0 3px, color-mix(in srgb, var(--ink) 24%, transparent) 3px 3.6px), repeating-linear-gradient(-60deg, transparent 0 3px, color-mix(in srgb, var(--ink) 24%, transparent) 3px 3.6px); }
.bouzopp-bill[data-layout="royal"] :is(.bouzopp-bill-value, .bouzopp-bill-name, .bouzopp-bill-series) { font-family: Georgia, "Times New Roman", serif; }
.bouzopp-bill[data-layout="royal"] .bouzopp-bill-thread { left: 20%; }
.bouzopp-bill[data-layout="royal"] .bouzopp-bill-foil { left: 76%; }
.bouzopp-bill[data-layout="royal"] .bouzopp-bill-name { left: 50%; transform: translateX(-50%); }
.bouzopp-bill[data-layout="royal"] .bouzopp-bill-issuer { top: 22px; bottom: auto; left: 10px; transform: none; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-rosette { display: none; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-portrait { left: 27%; width: 32px; height: 38px; border-radius: 2px; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.6px color-mix(in srgb, var(--ink) 70%, transparent); }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-thread { left: 54%; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-foil { left: 60%; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-value:not(.is-end) { top: 6px; right: 8px; left: auto; font-size: 18px; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-value.is-end { right: auto; left: 8px; bottom: 9px; font-size: 13px; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-serial { top: auto; right: 8px; bottom: 9px; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-name { top: 8px; bottom: auto; left: 8px; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-series { top: auto; bottom: 9px; left: 44%; }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-issuer { top: 50%; bottom: auto; left: 84%; transform: translate(-50%, -50%); }
.bouzopp-bill[data-layout="gate"] .bouzopp-bill-watermark { right: auto; left: 62%; transform: translate(-50%, -58%); }
.bouzopp-bill[data-layout="grill"] :is(.bouzopp-bill-rosette, .bouzopp-bill-portrait) { left: 68%; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-portrait { width: 28px; height: 38px; outline: 1.4px dashed color-mix(in srgb, var(--ink) 70%, transparent); outline-offset: 2px; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-rosette { background: radial-gradient(circle, color-mix(in srgb, var(--ink) 32%, transparent) 0.9px, transparent 1.4px) 0 0 / 5px 5px; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-thread { left: 40%; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-foil { left: 48%; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-value:not(.is-end) { top: 50%; left: 12px; font-size: 26px; font-weight: 900; transform: translateY(-50%); }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-value.is-end { top: 6px; bottom: auto; font-size: 11px; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-serial { top: auto; bottom: 7px; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-name { top: 8px; bottom: auto; left: 10px; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-series { top: auto; bottom: 8px; left: 32%; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-issuer { top: 6px; bottom: auto; left: 52%; }
.bouzopp-bill[data-layout="grill"] .bouzopp-bill-watermark { right: 6px; }
/* And a country's coin wears the country's emblem on its reverse, struck in the heart's metal. */
.bouzopp-coin .bouzopp-coin-emblem { fill: none; }
.bouzopp-coin .is-body .bouzopp-coin-emblem { stroke: var(--metal-light); fill: var(--metal-light); }
.bouzopp-coin .is-shade .bouzopp-coin-emblem { stroke: rgba(0, 0, 0, 0.45); fill: rgba(0, 0, 0, 0.5); }
.bouzopp-coin .is-glint .bouzopp-coin-emblem { stroke: rgba(255, 255, 255, 0.6); fill: rgba(255, 255, 255, 0.7); }
/* The guilloche rosette the portrait sits in. */
.bouzopp-bill-rosette {
    position: absolute;
    top: 50%;
    left: 50%;
    left: 38%;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 58%, color-mix(in srgb, var(--ink) 30%, transparent) 59% 60%, transparent 61% 68%, color-mix(in srgb, var(--ink) 22%, transparent) 69% 70%, transparent 71%),
        repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ink) 20%, transparent) 0 2.5deg, transparent 2.5deg 7.5deg);
    -webkit-mask: radial-gradient(circle, #000 55%, transparent 71%);
    mask: radial-gradient(circle, #000 55%, transparent 71%);
    transform: translate(-50%, -50%);
}
/* A security thread woven through the paper. */
.bouzopp-bill-thread { position: absolute; top: 0; bottom: 0; left: 67%; width: 1.6px; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 70%, transparent) 0 3px, transparent 3px 5px); opacity: 0.5; }
/* On the two largest bills, a foil strip whose colours follow the light the inspector casts. */
.bouzopp-bill-foil {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 55%;
    width: 10px;
    background:
        linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%) var(--card-light-x, 30%) 0 / 300% 100% no-repeat,
        linear-gradient(170deg, #ffc4ec, #b9f0ff 18%, #fff4ae 36%, #bfffcf 54%, #dcc3ff 72%, #ffc4ec 90%) 0 var(--card-light-y, 30%) / 100% 300%;
    box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.8), 0 0 0 0.5px color-mix(in srgb, var(--ink) 35%, transparent);
    opacity: 0.92;
}
.bouzopp-bill-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    font-size: 14px;
    transform: translate(-50%, -50%);
}
/* A series' card, printed in the bill's own ink like an engraved portrait. */
.bouzopp-bill-portrait {
    position: absolute;
    top: 50%;
    left: 50%;
    left: 38%;
    z-index: 1;
    width: 30px;
    height: 40px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.2px color-mix(in srgb, var(--ink) 55%, transparent);
    transform: translate(-50%, -50%);
    isolation: isolate;
}
.bouzopp-bill-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
    filter: grayscale(1) brightness(1.3) contrast(1.7);
}
/* Black becomes the bill's ink, white stays paper. */
.bouzopp-bill-portrait::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--ink);
    mix-blend-mode: screen;
}
.bouzopp-bill-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: repeating-linear-gradient(0deg, transparent 0 1px, color-mix(in srgb, var(--paper) 35%, transparent) 1px 1.5px);
}
/* The same face again, faint in the clear part of the paper, as a watermark. */
.bouzopp-bill-watermark {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 20px;
    height: 27px;
    overflow: hidden;
    border-radius: 50%;
    opacity: 0.22;
    transform: translateY(-58%);
    -webkit-mask: radial-gradient(ellipse, #000 45%, transparent 72%);
    mask: radial-gradient(ellipse, #000 45%, transparent 72%);
}
.bouzopp-bill-watermark img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) brightness(1.4) contrast(1.4); mix-blend-mode: multiply; }
.bouzopp-bill-watermark .bouzopp-logo { display: block; width: 100%; height: 100%; padding: 2px; box-sizing: border-box; color: var(--ink); }
/* A bill's finishes are a card's: the foil sheet (card-foil.css) and the prismatic film lie over the
   whole note, above its lettering, and a negative bill is printed inverted. A misprint moves the
   whole print, paper and all, inside the note's own frame (renderMisprint in trading-card.js). */
.bouzopp-bill > .misprint-art { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: inherit; background: inherit; box-shadow: inherit; }
.bouzopp-bill-print { position: absolute; inset: 0; border-radius: inherit; background: inherit; box-shadow: inherit; }
.bouzopp-bill[data-card-foil] > .card-foil { z-index: 3; }
.bouzopp-bill > .card-rarity-effect { position: absolute; inset: 0; z-index: 3; width: auto; height: auto; border-radius: inherit; background: none; box-shadow: none; isolation: auto; mix-blend-mode: hard-light; pointer-events: none; }
.bouzopp-bill > .card-rarity-effect > .prismatic-surface { mix-blend-mode: normal; }
.bouzopp-bill.is-negative { filter: invert(1); }

/* The defs every coin shares take no room on the page. */
.bouzopp-mint { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Coins are struck: see coin() in wallet.js. Everything is sized from the coin's own width. */
.bouzopp-coin {
    --metal-light: #eeb083;
    --metal: #bd7244;
    --metal-shade: #7a3a18;
    --metal-deep: #3a1605;
    position: relative;
    display: block;
    /* Its effect is raised inside the coin only, never through the coin lying on it. */
    isolation: isolate;
    /* A special series, or a country, may strike its coins larger or smaller than the regular money:
       wherever a coin is given a size, it is that size times its own (`--piece-size`). Not `zoom`,
       which Firefox does not carry into the shared clip, lettering and strike the coin's drawing
       refers to, so its card and its words slid off it. */
    width: calc(44px * var(--piece-size, 1));
    height: calc(44px * var(--piece-size, 1));
    container-type: inline-size;
    border-radius: 50%;
    transform-style: preserve-3d;
    user-select: none;
}
.bouzopp-coin[data-metal="silver"] { --metal-light: #e8ecf0; --metal: #b4bdc6; --metal-shade: #6c7680; --metal-deep: #2c3238; }
.bouzopp-coin[data-metal="gold"] { --metal-light: #f5d684; --metal: #d19f36; --metal-shade: #8f6210; --metal-deep: #452c02; }
.bouzopp-coin[data-metal="iron"] { --metal-light: #555b63; --metal: #2e3238; --metal-shade: #16191d; --metal-deep: #07080a; }
/* The ? card's static round a coin that wears some (the coin?): drawn larger than the coin, never in the way. */
.bouzopp-coin > .coin-rarity-effect { position: absolute; inset: 0; z-index: 2; width: auto; height: auto; border-radius: 50%; overflow: visible; background: none; box-shadow: none; pointer-events: none; }
.bouzopp-coin-side { position: absolute; inset: 0; border-radius: 50%; }
.bouzopp-coin:not(.is-thick) > .bouzopp-coin-side { box-shadow: 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.42), 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.3); }
.bouzopp-coin svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.bouzopp-coin-legend, .bouzopp-coin-mark, .bouzopp-coin-numeral, .bouzopp-coin-unit { font-family: "Cinzel", Georgia, serif; font-weight: 800; text-anchor: middle; }
.bouzopp-coin-legend { font-size: 10.6px; letter-spacing: 2.4px; }
.bouzopp-coin-mark { font-size: 8px; }
.bouzopp-coin-numeral { font-size: 64px; font-weight: 900; dominant-baseline: central; }
.bouzopp-coin-unit { font-size: 10px; letter-spacing: 3px; }
/* What stands up from the field: its shadow falls down and right, the light catches its top left. */
.bouzopp-coin .is-shade { fill: rgba(0, 0, 0, 0.5); stroke: rgba(0, 0, 0, 0.45); transform: translate(0.45px, 0.7px); }
.bouzopp-coin .is-glint { fill: rgba(255, 255, 255, 0.7); stroke: rgba(255, 255, 255, 0.6); transform: translate(-0.35px, -0.5px); }
.bouzopp-coin .is-body { stroke: none; }
.bouzopp-coin text { stroke: none; }
.bouzopp-coin-beads { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 0.01 3.35; }
.bouzopp-coin g.bouzopp-coin-beads { fill: none; }
.bouzopp-coin .bouzopp-coin-beads.is-body { stroke: var(--metal-light); }
/* A hairline standing just inside the beads frames the listel the legends run in. */
.bouzopp-coin g.bouzopp-coin-fillet { fill: none; stroke-width: 0.55; }
.bouzopp-coin .bouzopp-coin-fillet.is-body { stroke: var(--metal-light); }
.bouzopp-coin .bouzopp-coin-fillet.is-glint { stroke: rgba(255, 255, 255, 0.45); }
.bouzopp-coin .bouzopp-coin-fillet.is-shade { stroke: rgba(0, 0, 0, 0.35); }
/* The rim is milled: fine reeding cut round it, a shadow in each groove. */
.bouzopp-coin-reeding { fill: none; stroke: rgba(0, 0, 0, 0.13); stroke-width: 3.6; stroke-dasharray: 0.5 1.7; }
.bouzopp-coin-stem { fill: none; stroke-width: 1.3; }
.bouzopp-coin .is-body .bouzopp-coin-stem { stroke: var(--metal-light); }
.bouzopp-coin .is-shade .bouzopp-coin-stem { stroke: rgba(0, 0, 0, 0.45); }
.bouzopp-coin .is-glint .bouzopp-coin-stem { stroke: rgba(255, 255, 255, 0.6); }
/* A small coin shows the card struck from a softer die: its shapes, not its noise. */
@container (max-width: 110px) {
    .bouzopp-coin-art.is-bronze { filter: url(#bouzopp-strike-bronze-small); }
    .bouzopp-coin-art.is-silver { filter: url(#bouzopp-strike-silver-small); }
    .bouzopp-coin-art.is-gold { filter: url(#bouzopp-strike-gold-small); }
    /* Its reeding is finer than a pixel there: it would only dull the rim. */
    .bouzopp-coin-reeding { display: none; }
}
/* The walls where the rim and the bezel drop to the field: dark where the light cannot reach. */
/* A country may strike a coin with a polygon for a rim (`data-sides`, wallet.js): the coin is cut to it,
   and its shadow follows the cut rather than the round. */
.bouzopp-coin[data-sides] > .bouzopp-coin-side { box-shadow: none; }
.bouzopp-coin[data-sides]:not(.is-thick) { filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, 0.4)); }
/* A medal's enamel (`medal`, wallet.js): glossy, the light catching its top left. */
.bouzopp-coin-enamel-gloss { stroke: rgba(255, 255, 255, 0.28); stroke-width: 7.6; stroke-dasharray: 60 410; stroke-dashoffset: 250; }
.bouzopp-coin-wall { fill: none; stroke: url(#bouzopp-coin-wall); stroke-width: 1.4; }
.bouzopp-coin-wall.is-outer { stroke: url(#bouzopp-coin-wall-outer); }
.bouzopp-coin-lip { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.2; }
/* The mirror answers the light as the coin turns: bright bands sweep round the metal. */
.bouzopp-coin-sheen {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at var(--card-light-x, 32%) var(--card-light-y, 26%), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 38%),
        conic-gradient(from calc(20deg + var(--card-rotate-y, 0deg) * 5 - var(--card-rotate-x, 0deg) * 3),
            rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.5) 18deg, rgba(255, 255, 255, 0) 44deg,
            rgba(0, 0, 0, 0.22) 100deg, rgba(255, 255, 255, 0) 150deg, rgba(255, 255, 255, 0.4) 200deg,
            rgba(255, 255, 255, 0) 228deg, rgba(0, 0, 0, 0.25) 290deg, rgba(255, 255, 255, 0) 340deg);
    mix-blend-mode: soft-light;
    pointer-events: none;
}
/* Up close a coin has two sides and its thickness: discs stacked between them make the edge. */
.bouzopp-coin-body { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.3, 1); }
.bouzopp-coin.is-turned .bouzopp-coin-body { transform: rotateY(180deg); }
.bouzopp-coin.is-thick .bouzopp-coin-side { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bouzopp-coin.is-thick .bouzopp-coin-side.is-obverse { transform: translateZ(3.4cqw); }
.bouzopp-coin.is-thick .bouzopp-coin-side.is-reverse { transform: rotateY(180deg) translateZ(3.4cqw); }
.bouzopp-coin-edge {
    position: absolute;
    inset: 0.2cqw;
    border-radius: 50%;
    background: radial-gradient(circle, var(--metal-shade) 0 60%, var(--metal-deep) 100%);
    box-shadow: inset 0 0 0 0.7cqw var(--metal);
    transform: translateZ(calc(var(--depth) * 6.8cqw));
}
.bouzopp-coin-edge:nth-child(odd) { box-shadow: inset 0 0 0 0.7cqw var(--metal-light); }
.motion-reduced .bouzopp-coin-body { transition: none; }

/* The navbar wallet: a leather fold with the largest bills sticking out. */
.credit-panel .navbar-wallet {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 30px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
}
.credit-panel .navbar-wallet:hover,
.credit-panel .navbar-wallet:active { transform: none; background: transparent; }
.credit-panel .navbar-wallet:focus-visible { outline: 3px solid #2d2d2d; outline-offset: 2px; }
/* Focus comes back to the wallet when it closes; the credit tip waits for a hover. */
.credit-panel:has(.navbar-wallet:focus):not(:hover) .credit-tooltip { opacity: 0; pointer-events: none; transform: translateY(-6px); }
.navbar-wallet-leather {
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    z-index: 1;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid #2d2d2d;
    border-radius: 4px;
    background: linear-gradient(180deg, #9a6440, #734425);
}
.navbar-wallet-leather::after {
    content: '';
    position: absolute;
    top: 3px;
    right: -3px;
    width: 9px;
    height: 8px;
    border: 2px solid #2d2d2d;
    border-radius: 2px;
    background: #e5b75c;
}
.navbar-wallet-peek { position: absolute; top: 0; right: 4px; left: 3px; height: 16px; }
.navbar-wallet-bill {
    --bill: var(--legendary, #a96812);
    position: absolute;
    bottom: 0;
    left: calc(var(--peek) * 4px);
    width: 17px;
    height: 12px;
    box-sizing: border-box;
    border: 1.5px solid #2d2d2d;
    border-radius: 1px;
    background: var(--bill);
    transform: rotate(calc(var(--peek) * 7deg - 6deg));
    transition: transform 0.2s ease;
}
.navbar-wallet:hover .navbar-wallet-bill { transform: translateY(-3px) rotate(calc(var(--peek) * 9deg - 8deg)); }
.navbar-wallet.is-paying { animation: wallet-cough 0.9s ease; }
/* Full (wallet.js, `is-full`): the regenerating credits are at their cap and no more come. Every few seconds the
   wallet swells, its clasp strains and the bills rise out of it, so nobody misses that it is time to spend. */
.navbar-wallet.is-full:not(.is-paying) { animation: wallet-full 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
.navbar-wallet.is-full .navbar-wallet-leather { background: linear-gradient(180deg, #b27449, #7d4a28); }
.navbar-wallet.is-full .navbar-wallet-leather::after { background: #ffd56b; box-shadow: 0 0 6px 1px #ffd56bcc; }
.navbar-wallet.is-full:not(.is-paying) .navbar-wallet-bill { animation: wallet-full-bills 4.5s ease-in-out infinite; }
@keyframes wallet-full {
    0%, 70%, 100% { transform: none; }
    76% { transform: scale(1.14, 1.2); }
    82% { transform: scale(1.04, 0.96) rotate(-4deg); }
    88% { transform: scale(1.1, 1.14) rotate(3deg); }
    94% { transform: scale(1, 1); }
}
@keyframes wallet-full-bills {
    0%, 70%, 100% { transform: rotate(calc(var(--peek) * 7deg - 6deg)); }
    78%, 90% { transform: translateY(-5px) rotate(calc(var(--peek) * 12deg - 12deg)); }
}
@keyframes wallet-cough {
    0%, 100% { transform: none; }
    15% { transform: translateY(-4px) rotate(-8deg) scale(1.12); }
    30% { transform: translateY(0) rotate(6deg) scale(1.05); }
    45% { transform: rotate(-4deg); }
    60% { transform: rotate(2deg); }
}

/* Money in flight, from the wallet to whatever was bought, and into it from whatever was won. */
.wallet-flight-layer { position: fixed; inset: 0; z-index: 30000; overflow: hidden; pointer-events: none; }
.wallet-flight { position: fixed; display: block; will-change: transform, opacity; }
.wallet-flight .bouzopp-bill { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.38), 4px 6px 10px rgba(0, 0, 0, 0.25); }
.wallet-flight-total {
    position: fixed;
    padding: 3px 8px;
    border: 2px solid #2d2d2d;
    background: #fff;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
    color: #b3243a;
    font-family: "Sora", sans-serif;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}
.wallet-flight-total.is-received { color: #1f7a4d; }
.wallet-paid { animation: wallet-paid 0.5s ease 0.9s; }
@keyframes wallet-paid {
    40% { transform: scale(1.06); }
}

/* The wallet, lying open on a desk under a warm lamp. */
.wallet-dialog {
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    --leather:
        var(--grain),
        radial-gradient(ellipse at 28% 14%, rgba(255, 214, 170, 0.2), transparent 55%),
        linear-gradient(160deg, #8e502c, #6b391d 46%, #4a2412);
    --leather-light:
        var(--grain),
        radial-gradient(ellipse at 30% 0%, rgba(255, 222, 184, 0.22), transparent 60%),
        linear-gradient(170deg, #9c5b33, #7a4323 55%, #5d3018);
    --stitch: 2px dashed rgba(255, 219, 178, 0.5);
    width: min(900px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #f6e7cf;
    overflow: auto;
}
.wallet-dialog::backdrop { background: radial-gradient(ellipse at 50% 42%, rgba(24, 14, 8, 0.55), rgba(6, 3, 2, 0.88)); }
.wallet-desk {
    position: relative;
    overflow: hidden;
    padding: 16px 20px 22px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 65% 55% at 50% 40%, rgba(255, 196, 120, 0.24), transparent 72%),
        var(--grain),
        repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px 9px, rgba(255, 232, 200, 0.035) 9px 11px, transparent 11px 26px),
        repeating-linear-gradient(89.4deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 17px),
        linear-gradient(180deg, #3d2818, #211309);
    background-blend-mode: normal, soft-light, normal, normal, normal;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 220, 180, 0.12);
}
.wallet-desk-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wallet-desk-header h2 { margin: 0; color: rgba(246, 231, 207, 0.66); font-family: "Sora", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.42em; text-transform: uppercase; }
.wallet-dialog .wallet-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1.5px solid rgba(246, 231, 207, 0.3);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: none;
    color: #f6e7cf;
    font-size: 20px;
}
.wallet-dialog .wallet-close:hover { transform: none; background: rgba(255, 255, 255, 0.1); }
.wallet-dialog .wallet-close:focus-visible { outline: 2px solid #f2c55c; outline-offset: 3px; }

.wallet-stage { position: relative; height: calc(440px * var(--wallet-scale, 1)); }
.wallet-book { position: absolute; top: 0; left: 50%; width: 780px; height: 440px; transform: translateX(-50%) scale(var(--wallet-scale, 1)); transform-origin: top center; }
.wallet-leaf { position: absolute; top: 0; width: 390px; height: 440px; }
.wallet-leaf.is-right {
    right: 0;
    border-radius: 6px 20px 20px 6px;
    background: var(--leather);
    background-blend-mode: soft-light, normal, normal;
    box-shadow: inset 30px 0 32px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 220, 180, 0.18), 0 22px 36px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
}
.wallet-leaf.is-left { left: 0; z-index: 3; perspective: 1900px; perspective-origin: 100% 50%; }
/* The left leaf swings open on the spine, showing its outer cover on the way. */
.wallet-flap { position: absolute; inset: 0; transform-origin: 100% 50%; transform-style: preserve-3d; }
.wallet-book.is-opening .wallet-flap { animation: wallet-open 1.1s cubic-bezier(0.2, 0.85, 0.22, 1) both; }
@keyframes wallet-open {
    from { transform: rotateY(179deg); }
    to { transform: rotateY(0deg); }
}
.wallet-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wallet-face.is-inside {
    border-radius: 20px 6px 6px 20px;
    background: var(--leather);
    background-blend-mode: soft-light, normal, normal;
    box-shadow: inset -30px 0 32px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 220, 180, 0.18), 0 22px 36px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
}
.wallet-face.is-cover {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    border-radius: 6px 20px 20px 6px;
    background: var(--leather);
    background-blend-mode: soft-light, normal, normal;
    box-shadow: inset 30px 0 32px -20px rgba(0, 0, 0, 0.5), 0 22px 36px rgba(0, 0, 0, 0.55);
    transform: rotateY(180deg);
}
/* The tower and the name, stamped in gold leaf. */
.wallet-face.is-cover .bouzopp-logo { width: 96px; height: 96px; fill: #f2c55c; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)); }
.wallet-face.is-cover span {
    background: linear-gradient(180deg, #fff3c4, #f2c55c 40%, #a8731a 64%, #ffe08a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
}
.wallet-face.is-cover span { font-family: "Sora", sans-serif; font-size: 18px; font-weight: 800; letter-spacing: 0.5em; }
.wallet-leaf.is-right::after, .wallet-face::after {
    content: '';
    position: absolute;
    inset: 11px;
    border: var(--stitch);
    border-radius: 12px;
    pointer-events: none;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

/* The bill pocket: stacks standing straight up out of it side by side, value on top,
   behind a front panel stitched and cut for a thumb. */
.wallet-bills { position: absolute; top: 0; right: 0; bottom: 124px; left: 0; z-index: 1; }
.wallet-bill-pocket {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    height: 232px;
    border-radius: 10px 10px 16px 16px;
    background: var(--leather-light);
    background-blend-mode: soft-light, normal, normal;
    box-shadow: 0 -10px 18px -6px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 224, 188, 0.28);
    -webkit-mask: radial-gradient(circle 38px at 50% 0, transparent 37px, #000 38px);
    mask: radial-gradient(circle 38px at 50% 0, transparent 37px, #000 38px);
    pointer-events: none;
}
.wallet-bill-pocket::after { content: ''; position: absolute; inset: 9px; border: var(--stitch); border-radius: 8px 8px 12px 12px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.wallet-dialog .wallet-stack {
    position: absolute;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: translate 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.wallet-dialog .wallet-stack:hover, .wallet-dialog .wallet-stack:focus-visible { background: transparent; translate: 0 -18px; outline: none; }
.wallet-dialog .wallet-stack:active { background: transparent; }
.wallet-dialog .wallet-stack:focus-visible .wallet-count { outline: 2px solid #f2c55c; outline-offset: 2px; }
.wallet-bills .wallet-stack {
    /* The largest stands at the back on the right, each smaller one in front and to its left,
       so every value in its top corner shows; the group stays centred in the pocket. */
    --step: min(54px, calc(232px / max(1, var(--slots) - 1)));
    /* The shared button rule pins top and left; this stack hangs from the bottom right. */
    top: auto;
    bottom: 0;
    left: auto;
    right: calc(28px + (334px - 102px - (var(--slots) - 1) * var(--step)) / 2 + var(--slot) * var(--step));
    width: 102px;
    height: calc(224px + (var(--layers) - 1) * 3px);
    transform: translateY(var(--rise));
}
.wallet-bills .wallet-stack:hover, .wallet-bills .wallet-stack:focus-visible { transform: translateY(var(--rise)); }
/* Each bill lies on its side, its left end up, so the value in its corner shows over the pocket. */
.wallet-bills .wallet-layer { left: calc(-61px + var(--layer) * 2px); top: calc(61px + (var(--layers) - 1 - var(--layer)) * 3px); transform: rotate(90deg); }
.wallet-stack .bouzopp-bill { zoom: calc(1.7 * var(--piece-size, 1)); box-shadow: inset 0 0 0 2.5px var(--paper), inset 0 0 0 3.1px color-mix(in srgb, var(--ink) 45%, transparent), 0 2px 5px rgba(0, 0, 0, 0.35); }
.wallet-layer { position: absolute; left: calc(var(--layer) * 2px); top: calc((var(--layers) - 1 - var(--layer)) * 3px); }
.wallet-count {
    position: absolute;
    top: -12px;
    right: -10px;
    z-index: 3;
    padding: 2px 8px;
    border: 1.5px solid #2a170b;
    border-radius: 20px;
    background: #f6e7cf;
    color: #2a170b;
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* The inside of the left leaf: a clear window, the spare pocket and the coin purse. */
.wallet-window {
    position: absolute;
    top: 30px;
    right: 30px;
    left: 30px;
    height: 150px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), inset 0 10px 22px rgba(0, 0, 0, 0.18);
}
.wallet-window::after { content: ''; position: absolute; inset: -8px; border: var(--stitch); border-radius: 14px; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.wallet-pocket, .wallet-purse { position: absolute; bottom: 24px; width: 156px; height: 196px; }
.wallet-pocket { left: 26px; }
.wallet-purse { right: 26px; }
/* Each holds its contents behind a front panel, so only their tops show. */
.wallet-pocket::after, .wallet-purse-front {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 118px;
    border-radius: 14px 14px 12px 12px;
    background: var(--leather-light);
    background-blend-mode: soft-light, normal, normal;
    box-shadow: 0 -8px 14px -6px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 224, 188, 0.28), inset 0 0 0 8px transparent;
    pointer-events: none;
}
.wallet-pocket::before {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    height: 102px;
    border: var(--stitch);
    border-radius: 10px;
    pointer-events: none;
}
.wallet-purse-front { border-radius: 40px 40px 14px 14px; }
/* The purse's snap. */
.wallet-purse-front::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff4c4, #d9a441 45%, #7a5214);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
}
.wallet-dialog .wallet-pocket .wallet-locket { position: absolute; top: 4px; left: 50%; z-index: 1; display: block; padding: 0; border: 0; border-radius: 40%; background: transparent; box-shadow: none; transform: translateX(-50%) rotate(-6deg); transition: translate 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); cursor: zoom-in; }
.wallet-dialog .wallet-pocket .wallet-locket:hover, .wallet-dialog .wallet-pocket .wallet-locket:focus-visible { transform: translateX(-50%) rotate(-6deg); background: transparent; translate: 0 -12px; outline: none; }
.wallet-locket .locket { width: 92px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.wallet-locket:hover .locket-glass::after { transform: translateX(70%); }
.wallet-coins { position: absolute; top: 34px; right: 8px; left: 8px; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.wallet-coins .wallet-stack { position: relative; width: 60px; height: calc(60px + (var(--layers) - 1) * 5px); transform: rotate(var(--tilt)); }
.wallet-coins .wallet-layer { left: 0; top: calc((var(--layers) - 1 - var(--layer)) * 5px); }
.wallet-coins .bouzopp-coin { width: calc(60px * var(--piece-size, 1)); height: calc(60px * var(--piece-size, 1)); }
.wallet-coins .wallet-count { top: -10px; right: -12px; }

/* A stack laid out piece by piece over the desk, straight, in rows. */
.wallet-spread {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at 50% 50%, rgba(12, 7, 3, 0.45), rgba(12, 7, 3, 0.86));
    animation: wallet-spread-in 0.2s ease both;
}
.wallet-spread[hidden] { display: none; }
@keyframes wallet-spread-in { from { opacity: 0; } }
.wallet-spread-fan {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 18px 22px;
    box-sizing: border-box;
    width: 100%;
    max-height: 88%;
    padding: 24px;
    overflow-y: auto;
}
.wallet-dialog .wallet-spread-piece {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    transition: translate 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
    animation: wallet-deal 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
    animation-delay: calc(var(--index) * 35ms);
}
.wallet-dialog .wallet-spread-piece:hover, .wallet-dialog .wallet-spread-piece:focus-visible { transform: none; background: transparent; translate: 0 -8px; outline: none; }
.wallet-spread-piece:focus-visible .bouzopp-bill, .wallet-spread-piece:focus-visible .bouzopp-coin { outline: 3px solid #f2c55c; outline-offset: 3px; }
@keyframes wallet-deal {
    from { opacity: 0; transform: translateY(-16px); }
}
.wallet-spread-piece .bouzopp-bill { zoom: calc(1.6 * var(--piece-size, 1)); box-shadow: inset 0 0 0 2.5px var(--paper), inset 0 0 0 3.1px color-mix(in srgb, var(--ink) 45%, transparent), 0 8px 18px rgba(0, 0, 0, 0.45); }
.wallet-spread-piece .bouzopp-coin { width: calc(100px * var(--piece-size, 1)); height: calc(100px * var(--piece-size, 1)); }
/* Its holder's favorite coin, flipped and scratched with unless another is picked. */
.wallet-piece-star { position: absolute; top: -8px; left: -8px; z-index: 5; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #25252d; border-radius: 50%; background: #fff4c7; color: #c8942e; font-size: 12px; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.35); }
/* A protected piece, kept out of what can be spent. */
.wallet-piece-lock { position: absolute; top: -8px; right: -8px; z-index: 5; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #25252d; border-radius: 50%; background: #f2c55c; color: #25252d; font-size: 11px; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.35); }
.wallet-spread-fan.is-many .bouzopp-bill { zoom: calc(1.2 * var(--piece-size, 1)); }
.wallet-spread-fan.is-many .bouzopp-coin { width: calc(72px * var(--piece-size, 1)); height: calc(72px * var(--piece-size, 1)); }

/* The total, in gold leaf. */
.wallet-total { display: grid; justify-items: center; margin: 16px 0 0; font-family: "Sora", sans-serif; }
.wallet-total strong {
    background: linear-gradient(180deg, #fff3c4 0%, #f2c55c 38%, #b8801f 62%, #ffe08a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 46px;
    font-weight: 900;
    line-height: 1;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
}
.wallet-total span { margin-top: 6px; color: rgba(246, 231, 207, 0.62); font-size: 11px; font-weight: 800; letter-spacing: 0.42em; text-transform: uppercase; }
.wallet-total small { margin-top: 8px; color: rgba(246, 231, 207, 0.5); font-size: 12px; }
.wallet-status { min-height: 1em; margin: 6px 0 0; color: #ff9aa8; font-size: 13px; text-align: center; }

/* The way to the change counter, under the total. */
.wallet-dialog .wallet-change {
    display: block;
    margin: 12px auto 0;
    padding: 8px 18px;
    border: 1.5px solid rgba(242, 197, 92, 0.55);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: none;
    color: #f2c55c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.wallet-dialog .wallet-change:hover { transform: none; background: rgba(242, 197, 92, 0.12); }
.wallet-dialog .wallet-change:focus-visible { outline: 2px solid #f2c55c; outline-offset: 3px; }
.wallet-dialog .wallet-change[hidden] { display: none; }
/* Where change landed, the stack springs up once. */
.wallet-stack.is-fresh { animation: wallet-fresh 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes wallet-fresh {
    40% { translate: 0 -26px; scale: 1.06; }
}

/* The change counter: a felt tray for what is handed over, the denominations to take back beside it. */
.wallet-spread.is-counter { place-items: start center; overflow-y: auto; background: radial-gradient(ellipse at 50% 30%, rgba(40, 24, 12, 0.96), rgba(16, 9, 4, 0.98)); }
.wallet-counter { display: grid; gap: 14px; box-sizing: border-box; width: min(720px, 100%); padding: 18px 22px 22px; color: #f6e7cf; font-family: "Sora", sans-serif; }
.wallet-counter header h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 0.02em; }
.wallet-counter header p { margin: 4px 0 0; color: rgba(246, 231, 207, 0.66); font-size: 13px; }
.wallet-counter-side {
    padding: 12px 14px 14px;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 4px),
        #1d4a37;
    box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.55), 0 0 0 3px #3b2414, 0 0 0 4px rgba(255, 220, 180, 0.12);
}
.wallet-counter-side h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; color: rgba(246, 231, 207, 0.72); font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.wallet-counter-side h4 b { color: #f2c55c; font-size: 20px; letter-spacing: 0; }
.wallet-counter-money { max-height: 236px; padding: 8px 4px 4px; overflow-y: auto; }
/* What is handed over is the piece picker (piece-picker.css), on the felt: its total and its buttons read on the dark. */
.wallet-counter-money .piece-picker-total { color: rgba(246, 231, 207, 0.8); }
.wallet-counter-money .piece-picker-total.is-met { color: #f2c55c; }
.wallet-dialog .wallet-counter-money .piece-picker-piece { border-color: transparent; background: transparent; box-shadow: none; }
.wallet-dialog .wallet-counter-money .piece-picker-piece:hover { background: rgba(255, 255, 255, 0.08); }
.wallet-dialog .wallet-counter-money .piece-picker-piece[aria-pressed="true"] { border-color: #f2c55c; background: rgba(242, 197, 92, 0.14); }
.wallet-dialog .wallet-counter-money .piece-picker-piece:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wallet-dialog .wallet-counter-money .piece-picker-presets button { padding: 4px 12px; border: 1.5px solid rgba(246, 231, 207, 0.35); border-radius: 999px; background: rgba(0, 0, 0, 0.2); box-shadow: none; color: #f6e7cf; font-size: 12px; font-weight: 800; }
.wallet-dialog .wallet-counter-money .piece-picker-presets button:hover { transform: none; background: rgba(255, 255, 255, 0.1); }
.wallet-dialog .wallet-counter-add {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    transition: translate 0.15s ease, opacity 0.15s ease;
}
.wallet-dialog .wallet-counter-add:hover { transform: none; background: transparent; translate: 0 -4px; }
.wallet-dialog .wallet-counter-add:disabled { opacity: 0.35; cursor: not-allowed; translate: none; }
.wallet-counter-add:focus-visible > * { outline: 3px solid #fff; outline-offset: 2px; }
.wallet-counter-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.wallet-counter-value { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 6px 8px; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.18); }
.wallet-counter-value.is-taken { background: rgba(242, 197, 92, 0.14); box-shadow: inset 0 0 0 1.5px rgba(242, 197, 92, 0.5); }
.wallet-counter-add { grid-column: 1 / -1; justify-self: center; min-height: 48px; }
.wallet-counter-add .bouzopp-bill { zoom: calc(0.75 * var(--piece-size, 1)); }
.wallet-counter-add .bouzopp-coin { width: calc(46px * var(--piece-size, 1)); height: calc(46px * var(--piece-size, 1)); }
.wallet-counter-count { color: #f6e7cf; font-size: 15px; font-weight: 800; }
.wallet-dialog .wallet-counter-remove, .wallet-dialog .wallet-counter-presets button, .wallet-dialog .wallet-counter-cancel {
    padding: 4px 12px;
    border: 1.5px solid rgba(246, 231, 207, 0.35);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    color: #f6e7cf;
    font-size: 12px;
    font-weight: 800;
}
.wallet-dialog .wallet-counter-remove { justify-self: end; width: 30px; height: 30px; padding: 0; font-size: 16px; }
.wallet-dialog .wallet-counter-remove:disabled, .wallet-dialog .wallet-counter-presets button:disabled { opacity: 0.35; cursor: not-allowed; }
.wallet-dialog .wallet-counter-remove:hover, .wallet-dialog .wallet-counter-presets button:hover, .wallet-dialog .wallet-counter-cancel:hover { transform: none; background: rgba(255, 255, 255, 0.1); }
.wallet-counter-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wallet-counter footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.wallet-counter-status { flex: 1 1 200px; margin: 0; color: rgba(246, 231, 207, 0.8); font-size: 13px; }
.wallet-dialog .wallet-counter-cancel { padding: 10px 18px; font-size: 13px; }
.wallet-dialog .wallet-counter-confirm {
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff3c4, #f2c55c 45%, #b8801f);
    box-shadow: 0 3px 0 #6f4a10, 0 6px 14px rgba(0, 0, 0, 0.4);
    color: #3b2414;
    font-size: 13px;
    font-weight: 900;
}
.wallet-dialog .wallet-counter-confirm:hover { transform: translateY(-1px); background: linear-gradient(180deg, #fff6d4, #f5cf70 45%, #c58b25); }
.wallet-dialog .wallet-counter-confirm:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.wallet-counter button:focus-visible { outline: 2px solid #f2c55c; outline-offset: 3px; }
.motion-reduced .wallet-stack.is-fresh { animation: none; }

/* Up in the shared inspector, a bill or a coin is drawn large enough to read. */
.inspector-object.is-bill { border-radius: 10px; }
.inspector-object.is-bill .bouzopp-bill { zoom: calc(3.4 * var(--piece-size, 1)); }
.inspector-object.is-coin { border-radius: 50%; }
.inspector-object.is-coin .bouzopp-coin { width: calc(min(300px, 70vw) * var(--piece-size, 1)); height: calc(min(300px, 70vw) * var(--piece-size, 1)); }
/* On its page, as on a card's, the piece fits the preview beside the details. */
.card-page-preview .inspector-object.is-bill .bouzopp-bill { zoom: calc(2.8 * var(--piece-size, 1)); }
.card-page-inspected .card-page-preview .inspector-object.is-bill .bouzopp-bill { zoom: calc(2.6 * var(--piece-size, 1)); }
.card-page-preview .inspector-object.is-coin .bouzopp-coin { width: calc(min(280px, 60vw) * var(--piece-size, 1)); height: calc(min(280px, 60vw) * var(--piece-size, 1)); }
.card-page-preview .inspector-object.is-id .bouzopp-id { zoom: 1.3; }
.inspector-object.is-locket { --locket: min(200px, 34vw); border-radius: 50%; transition: transform 140ms ease-out, padding 0.7s cubic-bezier(0.34, 1.3, 0.5, 1); }
.inspector-object.is-locket .locket { width: var(--locket); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3)); }
/* In the inspector's narrower preview it comes smaller, so that open it still fits. */
.card-page-inspected .card-page-preview .inspector-object.is-locket { --locket: min(150px, 30vw); }
/* Open, its door stands beside it, still inside what tilts and what the magnifier looks at. */
.inspector-object.is-locket:has(.locket.is-open) { padding-left: calc(var(--locket) * 1.04); }
/* A coin brings its own light, and its shadow falls from its middle so the edge stays lit. It turns over when clicked. */
.inspector-object.is-coin .card-inspector-glare { display: none; }
.inspector-object .bouzopp-coin-edge.is-middle { box-shadow: inset 0 0 0 0.7cqw var(--metal), 0 2cqw 4cqw rgba(0, 0, 0, 0.35); }
.inspector-object .bouzopp-coin.is-thick { cursor: pointer; }
@media (max-width: 560px) {
    .inspector-object.is-bill .bouzopp-bill, .card-page-preview .inspector-object.is-bill .bouzopp-bill { zoom: calc(2.2 * var(--piece-size, 1)); }
    .wallet-desk { padding: 12px 10px 16px; }
}

/* The collector's ID: security paper, a band with the tower, their photo twice, their signature,
   and a holographic sheen that follows the light the inspector casts. */
.bouzopp-id {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 300px;
    height: 189px;
    overflow: hidden;
    border: 1px solid rgba(28, 39, 66, 0.35);
    border-radius: 12px;
    background:
        repeating-radial-gradient(circle at 80% 58%, transparent 0 5px, rgba(60, 90, 160, 0.075) 5px 5.6px),
        repeating-linear-gradient(35deg, transparent 0 3px, rgba(120, 90, 170, 0.05) 3px 3.5px),
        linear-gradient(135deg, #f7f3ea 0%, #e7eff6 50%, #f2e8f5 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(0, 0, 0, 0.25);
    color: #1c2742;
    font-family: "Sora", sans-serif;
    line-height: 1.1;
    text-align: left;
}
.bouzopp-id-band {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    background: linear-gradient(90deg, #1c2742, #34426e);
    color: #f2c55c;
}
.bouzopp-id-band .bouzopp-logo { font-size: 17px; }
.bouzopp-id-band b { font-size: 12px; letter-spacing: 0.32em; }
.bouzopp-id-band em { margin-left: auto; color: rgba(255, 255, 255, 0.78); font-size: 7.5px; font-style: normal; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; }
.bouzopp-id-photo {
    position: absolute;
    top: 42px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 74px;
    height: 94px;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(160deg, #dfe5ee, #c7cfdb);
    box-shadow: inset 0 0 0 1px rgba(28, 39, 66, 0.3);
}
.bouzopp-id-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.bouzopp-id-photo .avatar-initial { color: #1c2742; font-size: 42px; font-weight: 900; }
.bouzopp-id-ghost { position: absolute; top: 44px; right: 14px; width: 30px; height: 40px; overflow: hidden; border-radius: 50%; opacity: 0.2; }
.bouzopp-id-ghost img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3); }
.bouzopp-id-fields { position: absolute; top: 40px; right: 52px; left: 98px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.bouzopp-id-fields > span { display: grid; gap: 1px; min-width: 0; }
.bouzopp-id-fields > span:first-child { grid-column: 1 / -1; }
.bouzopp-id-fields small { color: rgba(28, 39, 66, 0.55); font-size: 5.8px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.bouzopp-id-fields strong { display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 9.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.bouzopp-id-fields > span:first-child strong { font-size: 14px; }
.bouzopp-id-fields strong img { flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.bouzopp-id-signature { position: absolute; top: 108px; right: 58px; left: 98px; height: 28px; border-bottom: 1px solid rgba(28, 39, 66, 0.35); color: #1f3c96; }
.bouzopp-id-signature .signature-ink { display: block; width: auto; max-width: 100%; height: 100%; overflow: visible; stroke-width: 7; }
/* A holographic seal, stamped over the corner of the photo's line. */
.bouzopp-id-seal {
    position: absolute;
    right: 14px;
    bottom: 38px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: conic-gradient(from var(--seal-turn, 0deg), #ffb3e6, #b3f1ff, #fff5a8, #c2ffcf, #d7c2ff, #ffb3e6);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(28, 39, 66, 0.3);
    color: rgba(28, 39, 66, 0.55);
    font-size: 15px;
    opacity: 0.8;
}
.bouzopp-id-machine {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px 12px 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.55);
    color: #2b3345;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 7.2px;
    letter-spacing: 0.14em;
    line-height: 1.3;
    white-space: nowrap;
}
.bouzopp-id-holo {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 22%, rgba(255, 120, 220, 0.2) 36%, rgba(120, 240, 255, 0.22) 46%, rgba(255, 250, 150, 0.2) 56%, transparent 70%)
        var(--card-light-x, 30%) var(--card-light-y, 40%) / 260% 260% no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Finishes (app/services/id_finishes.py): the same ID, made another way. Each restyles what is on
   it, and may add something of its own on the layer kept for that. */
.bouzopp-id-finish { position: absolute; inset: 0; pointer-events: none; }

/* Paper: buff card typed on a typewriter, the photo glued on and gone brown, stamped in violet ink. */
.bouzopp-id.is-paper {
    border-color: rgba(90, 70, 30, 0.45);
    border-radius: 5px;
    background:
        repeating-linear-gradient(7deg, rgba(120, 95, 50, 0.05) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(96deg, rgba(120, 95, 50, 0.045) 0 1px, transparent 1px 7px),
        radial-gradient(ellipse at 50% 40%, #efe3c2, #e2d3a8 75%, #d3c191);
    color: #2b2416;
    font-family: "Courier New", Courier, monospace;
}
.bouzopp-id.is-paper .bouzopp-id-band { border-bottom: 3px double rgba(60, 45, 20, 0.6); background: transparent; color: #2b2416; }
.bouzopp-id.is-paper .bouzopp-id-band em { color: rgba(43, 36, 22, 0.7); }
.bouzopp-id.is-paper .bouzopp-id-photo { border-radius: 2px; background: #cdbf9c; box-shadow: 0 0 0 3px #f6efd9, 0 1px 3px 3px rgba(0, 0, 0, 0.25); }
.bouzopp-id.is-paper .bouzopp-id-photo img { filter: sepia(0.75) contrast(1.05); }
.bouzopp-id.is-paper .bouzopp-id-ghost, .bouzopp-id.is-paper .bouzopp-id-holo { display: none; }
.bouzopp-id.is-paper .bouzopp-id-fields small { color: rgba(60, 45, 20, 0.65); }
.bouzopp-id.is-paper .bouzopp-id-signature { border-bottom: 1px dotted rgba(60, 45, 20, 0.6); color: #1d2a6b; }
.bouzopp-id.is-paper .bouzopp-id-seal { border: 2px solid rgba(98, 48, 150, 0.7); background: transparent; box-shadow: none; color: rgba(98, 48, 150, 0.75); transform: rotate(-14deg); }
.bouzopp-id.is-paper .bouzopp-id-machine { border-top: 1px dashed rgba(60, 45, 20, 0.45); background: transparent; color: #3a301c; }

/* Well-Worn: years in a back pocket. Faded and yellowed, creased where it was folded, scuffed at
   the edges, and ringed by a cup somebody put down on it. */
.bouzopp-id.is-well-worn {
    background:
        repeating-radial-gradient(circle at 80% 58%, transparent 0 5px, rgba(60, 90, 160, 0.05) 5px 5.6px),
        linear-gradient(135deg, #efe6d0 0%, #e3e2d4 50%, #eadfd0 100%);
}
.bouzopp-id.is-well-worn .bouzopp-id-band, .bouzopp-id.is-well-worn .bouzopp-id-photo, .bouzopp-id.is-well-worn .bouzopp-id-fields, .bouzopp-id.is-well-worn .bouzopp-id-seal { filter: saturate(0.6) sepia(0.22); }
.bouzopp-id.is-well-worn .bouzopp-id-band { background: linear-gradient(90deg, #2b3452, #48537d 70%, #3a4467); }
.bouzopp-id.is-well-worn .bouzopp-id-holo { opacity: 0.35; }
.bouzopp-id.is-well-worn .bouzopp-id-finish {
    background:
        linear-gradient(92deg, transparent 47.9%, rgba(255, 255, 255, 0.5) 48.3%, rgba(60, 50, 40, 0.16) 48.7%, transparent 49.1%),
        linear-gradient(178deg, transparent 57.2%, rgba(255, 255, 255, 0.4) 57.6%, rgba(60, 50, 40, 0.12) 58%, transparent 58.5%),
        radial-gradient(circle at 76% 36%, transparent 0 21px, rgba(120, 72, 20, 0.3) 22px 24px, rgba(120, 72, 20, 0.09) 25px 27px, transparent 28px),
        radial-gradient(ellipse 30% 12% at 22% 90%, rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(ellipse 16% 22% at 98% 96%, rgba(255, 255, 255, 0.7), transparent 70%),
        radial-gradient(ellipse 14% 18% at 1% 3%, rgba(255, 255, 255, 0.6), transparent 70%),
        linear-gradient(180deg, rgba(190, 150, 70, 0.12), rgba(190, 150, 70, 0.22));
}

/* Holographic: struck in foil all over, its colours running with the light. */
.bouzopp-id.is-holographic {
    background:
        repeating-linear-gradient(115deg, rgba(255, 110, 210, 0.24) 0 7%, rgba(110, 225, 255, 0.24) 7% 14%, rgba(255, 245, 140, 0.24) 14% 21%, rgba(140, 255, 180, 0.24) 21% 28%, rgba(190, 150, 255, 0.24) 28% 35%)
            var(--card-light-x, 30%) var(--card-light-y, 40%) / 220% 220%,
        repeating-radial-gradient(circle at 80% 58%, transparent 0 5px, rgba(255, 255, 255, 0.4) 5px 5.6px),
        linear-gradient(135deg, #f1f5ff, #e9f7ff 50%, #f7ecff);
}
.bouzopp-id.is-holographic .bouzopp-id-band { background: linear-gradient(90deg, #5a2bd6, #1c84d6 55%, #14b89a); color: #fff; }
.bouzopp-id.is-holographic .bouzopp-id-band em { color: rgba(255, 255, 255, 0.9); }
.bouzopp-id.is-holographic .bouzopp-id-machine { background: rgba(255, 255, 255, 0.7); }
.bouzopp-id.is-holographic .bouzopp-id-finish { background: repeating-conic-gradient(from 45deg, rgba(255, 255, 255, 0.32) 0 25%, transparent 0 50%) 0 0 / 14px 14px; mix-blend-mode: soft-light; }
.bouzopp-id.is-holographic .bouzopp-id-holo {
    background: linear-gradient(115deg, transparent 14%, rgba(255, 120, 220, 0.42) 32%, rgba(120, 240, 255, 0.46) 46%, rgba(255, 250, 150, 0.42) 58%, transparent 76%)
        var(--card-light-x, 30%) var(--card-light-y, 40%) / 260% 260% no-repeat;
}

/* Diplomatic: burgundy, grained like a passport's cover, and everything on it in gold. */
.bouzopp-id.is-diplomatic {
    border-color: rgba(217, 180, 90, 0.55);
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        radial-gradient(ellipse at 28% 16%, rgba(255, 200, 160, 0.16), transparent 60%),
        linear-gradient(150deg, #74182a, #4c0e1b 58%, #380a14);
    background-blend-mode: soft-light, normal, normal;
    color: #f0dca2;
}
.bouzopp-id.is-diplomatic .bouzopp-id-band { border-bottom: 1px solid rgba(217, 180, 90, 0.6); background: transparent; color: #e7c873; }
.bouzopp-id.is-diplomatic .bouzopp-id-band em { color: rgba(240, 220, 162, 0.8); }
.bouzopp-id.is-diplomatic .bouzopp-id-photo { box-shadow: 0 0 0 1.5px #d9b45a; }
.bouzopp-id.is-diplomatic .bouzopp-id-ghost { opacity: 0.14; }
.bouzopp-id.is-diplomatic .bouzopp-id-fields small { color: rgba(240, 220, 162, 0.6); }
.bouzopp-id.is-diplomatic .bouzopp-id-signature { border-bottom-color: rgba(217, 180, 90, 0.6); color: #f0dca2; }
.bouzopp-id.is-diplomatic .bouzopp-id-seal { background: radial-gradient(circle at 35% 30%, #fff4c4, #d9a441 45%, #7a5214); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); color: #4c0e1b; opacity: 1; }
.bouzopp-id.is-diplomatic .bouzopp-id-machine { background: rgba(0, 0, 0, 0.28); color: #d9b45a; }
.bouzopp-id.is-diplomatic .bouzopp-id-holo { opacity: 0.45; }
/* A crest's rings in gold leaf, running off the edge. */
.bouzopp-id.is-diplomatic .bouzopp-id-finish::after {
    content: '';
    position: absolute;
    top: 40px;
    right: -42px;
    width: 124px;
    height: 124px;
    border: 1px solid rgba(217, 180, 90, 0.28);
    border-radius: 50%;
    box-shadow: inset 0 0 0 7px rgba(217, 180, 90, 0), inset 0 0 0 8px rgba(217, 180, 90, 0.2);
}

/* Black Card: matte black under a gold band, lettered in gold, a chip set where the second photo was. */
.bouzopp-id.is-black {
    border-color: rgba(201, 162, 74, 0.6);
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 4px),
        linear-gradient(140deg, #26272e, #0e0f13 55%, #1c1d23);
    color: #f1e6c4;
}
.bouzopp-id.is-black .bouzopp-id-band { background: linear-gradient(90deg, #a8802a, #f3df9f 42%, #c9a24a 70%, #8f6a1c); color: #15161a; }
.bouzopp-id.is-black .bouzopp-id-band em { color: rgba(21, 22, 26, 0.75); }
.bouzopp-id.is-black .bouzopp-id-photo { background: linear-gradient(160deg, #3a3c45, #24252b); box-shadow: 0 0 0 1.5px #c9a24a; }
.bouzopp-id.is-black .bouzopp-id-photo img { filter: grayscale(1) contrast(1.1); }
.bouzopp-id.is-black .bouzopp-id-photo .avatar-initial { color: #f1e6c4; }
.bouzopp-id.is-black .bouzopp-id-ghost { display: none; }
.bouzopp-id.is-black .bouzopp-id-fields small { color: rgba(241, 230, 196, 0.5); }
.bouzopp-id.is-black .bouzopp-id-signature { border-bottom-color: rgba(201, 162, 74, 0.55); color: #f3df9f; }
.bouzopp-id.is-black .bouzopp-id-seal { background: radial-gradient(circle at 35% 30%, #fff4c4, #d9a441 45%, #7a5214); color: #15161a; opacity: 1; }
.bouzopp-id.is-black .bouzopp-id-machine { background: rgba(255, 255, 255, 0.06); color: #b9a56a; }
.bouzopp-id.is-black .bouzopp-id-holo {
    background: linear-gradient(115deg, transparent 30%, rgba(255, 220, 140, 0.18) 46%, rgba(255, 255, 255, 0.12) 52%, transparent 66%)
        var(--card-light-x, 30%) var(--card-light-y, 40%) / 260% 260% no-repeat;
}
.bouzopp-id.is-black .bouzopp-id-finish::after {
    content: '';
    position: absolute;
    top: 46px;
    right: 14px;
    width: 32px;
    height: 25px;
    border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 31%, rgba(90, 62, 12, 0.55) 31% 34%, transparent 34% 66%, rgba(90, 62, 12, 0.55) 66% 69%, transparent 69%),
        linear-gradient(180deg, transparent 46%, rgba(90, 62, 12, 0.55) 46% 54%, transparent 54%),
        linear-gradient(135deg, #f3df9f, #c9a24a 55%, #8f6a1c);
    box-shadow: inset 0 0 0 1px rgba(90, 62, 12, 0.6);
}

/* Its holder picks among the finishes they own, on its page. */
.id-finish-chooser { display: flex; flex-wrap: wrap; gap: 8px; }
.card-page-actions .id-finish-chooser button { padding: 8px 12px; background: var(--white); box-shadow: 2px 2px 0 var(--ink-shadow); font-size: 12px; }
.card-page-actions .id-finish-chooser button[aria-pressed="true"] { background: var(--pastel-purple-light); }
.card-page-actions .id-finish-chooser button:disabled { opacity: 0.6; cursor: wait; }

/* In the wallet, the ID lies behind the clear window, the plastic's shine over it. */
.wallet-window .wallet-id {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%) rotate(-1.2deg);
    cursor: zoom-in;
}
.wallet-window .wallet-id:hover, .wallet-window .wallet-id:active { transform: translate(-50%, -50%) rotate(-1.2deg); background: transparent; }
.wallet-window .wallet-id:focus-visible { outline: 3px solid #f2c55c; outline-offset: 4px; }
.wallet-window .bouzopp-id { zoom: 0.78; }
.wallet-window::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 10px;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.05) 36%, transparent 58%, rgba(255, 255, 255, 0.12));
    pointer-events: none;
}
.inspector-object.is-id { border-radius: 20px; }
.inspector-object.is-id .bouzopp-id { zoom: 1.75; }
@media (max-width: 560px) {
    .inspector-object.is-id .bouzopp-id, .card-page-preview .inspector-object.is-id .bouzopp-id { zoom: 1.05; }
}

/* The passport (passport.js), carried in the ID's place: a booklet one page wide, shut. Its cover
   is hinged on the spine, at the left of that page, and swings open to the left, so it is two pages
   wide once open: the inside of the cover, and the page that says who its holder is. */
.bouzopp-passport {
    position: relative;
    display: block;
    width: 190px;
    height: 270px;
    color: #1c2742;
    font-family: "Sora", sans-serif;
    line-height: 1.15;
    text-align: left;
    transition: width 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.bouzopp-passport.is-open { width: 380px; }
/* Each country's cover, the ink its pages are printed in, and the pattern that ink prints on their
   paper (`--paper`): the sun's rings for Mongolistan, a wheel's spokes and rims for Roulistan,
   contour lines for Tagoustan, a lattice for Andasmas, courses of brick for Boulemia, grains of
   spice for Merguez, the squares of a ledger for the Federation. A country's forms are printed in the
   same ink on the same paper (`country-paper`, passport-forms.css). By night (docs/design-system.md,
   Themes) a citizen's card (a profile's, the directory's) is read by lamplight: the same cover and foil
   over the country's night paper, dark and tinted with its ink, printed in its night ink, the day's
   lifted so it reads there. A document (a form, a certificate, a letter) is paper in any light. */
:is(.bouzopp-passport, .country-paper) {
    --cover: #7a1d22;
    --cover-deep: #470e12;
    --ink: #8a2a2a;
    --ink-night: #e8807a;
    --paper-night: color-mix(in srgb, var(--ink-night) 12%, #1c1e20);
    --foil: #e6c877;
    --line: color-mix(in srgb, var(--ink) 9%, transparent);
    --paper: repeating-radial-gradient(circle at 78% 30%, transparent 0 5px, var(--line) 5px 5.6px), repeating-linear-gradient(35deg, transparent 0 3px, color-mix(in srgb, var(--ink) 6%, transparent) 3px 3.5px);
}
:is(.bouzopp-passport, .country-paper).is-pedalistan {
    --cover: #1f4d38; --cover-deep: #0e2a1e; --ink: #23634a; --ink-night: #6fd39b;
    --paper: repeating-conic-gradient(from 0deg at 80% 26%, transparent 0 5deg, var(--line) 5deg 6deg), radial-gradient(circle at 80% 26%, transparent 0 46px, var(--line) 46px 48px, transparent 48px 53px, var(--line) 53px 54px, transparent 54px);
}
:is(.bouzopp-passport, .country-paper).is-tagoustan {
    --cover: #1b4553; --cover-deep: #0c252e; --ink: #1f5f74; --ink-night: #6fc6de;
    --paper: repeating-radial-gradient(ellipse 70% 38% at 18% 84%, transparent 0 6px, var(--line) 6px 6.7px), repeating-radial-gradient(ellipse 46% 60% at 88% 16%, transparent 0 7px, var(--line) 7px 7.7px);
}
:is(.bouzopp-passport, .country-paper).is-andasmas {
    --cover: #302a70; --cover-deep: #181442; --ink: #3b3594; --ink-night: #a39cf5;
    --paper: repeating-linear-gradient(60deg, transparent 0 7px, var(--line) 7px 7.6px), repeating-linear-gradient(-60deg, transparent 0 7px, var(--line) 7px 7.6px);
}
:is(.bouzopp-passport, .country-paper).is-boulemia {
    --cover: #6d3a1a; --cover-deep: #3d1f0c; --ink: #8a4b1f; --ink-night: #e3a063;
    --paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='18'><path d='M0 .5H24M0 9.5H24M.5 0V9M12.5 9V18' fill='none' stroke='%238a4b1f' stroke-opacity='.15'/></svg>");
}
:is(.bouzopp-passport, .country-paper).is-merguez {
    --cover: #cf4a1c; --cover-deep: #8a2a0c; --ink: #b9461a; --ink-night: #ff8c5a; --foil: #ffe6ad;
    --paper: radial-gradient(circle, var(--line) 0.9px, transparent 1.3px) 0 0 / 9px 9px, radial-gradient(circle, color-mix(in srgb, var(--ink) 14%, transparent) 0.7px, transparent 1.1px) 4.5px 3px / 9px 13px;
}
/* The Federation is steel blue and grey, its foil silver rather than gilt. */
:is(.bouzopp-passport, .country-paper).is-bouzopp {
    --cover: #2e3f5f; --cover-deep: #141c2e; --ink: #36496c; --ink-night: #8fa6d6; --foil: #d3dae6;
    --paper: repeating-linear-gradient(0deg, transparent 0 7px, var(--line) 7px 7.6px), repeating-linear-gradient(90deg, transparent 0 7px, var(--line) 7px 7.6px);
}
/* A strip of a country's cover drawn off its passport (`country-cover`: a card of the collectors'
   directory, a row of the ranking; a profile card's crest is one too), in the cover's foil. Each
   country closes it the way it tools its passport's: a beaded band for Mongolistan, a chain for
   Roulistan, peaks for Tagoustan, a double rule for Andasmas, battlements for Boulemia, a string of
   links for Merguez, a ledger's rule for the Federation. Where that edge runs (`top` or `bottom`) is for
   whoever draws the strip. */
.country-cover { position: relative; background: linear-gradient(115deg, var(--cover), var(--cover-deep)); color: var(--foil); }
.country-paper :is(.profile-card-crest, .country-cover)::after, .country-paper.country-cover::after { content: ''; position: absolute; right: 0; left: 0; height: 7px; box-sizing: border-box; opacity: .85; pointer-events: none; background: linear-gradient(var(--foil), var(--foil)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--foil) 0 3px, transparent 3px 6px) 0 2px / 100% 3px no-repeat, linear-gradient(var(--foil), var(--foil)) 0 6px / 100% 1px no-repeat; }
.is-pedalistan :is(.profile-card-crest, .country-cover)::after, .is-pedalistan.country-cover::after { border-top: 2.6px dotted var(--foil); background: none; }
.is-tagoustan :is(.profile-card-crest, .country-cover)::after, .is-tagoustan.country-cover::after { background: linear-gradient(45deg, var(--foil) 25%, transparent 25%) 0 100% / 10px 5px repeat-x, linear-gradient(315deg, var(--foil) 25%, transparent 25%) 0 100% / 10px 5px repeat-x; }
.is-andasmas :is(.profile-card-crest, .country-cover)::after, .is-andasmas.country-cover::after { border-top: 4px double var(--foil); background: none; }
.is-boulemia :is(.profile-card-crest, .country-cover)::after, .is-boulemia.country-cover::after { background: linear-gradient(var(--foil), var(--foil)) 0 4px / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--foil) 0 5px, transparent 5px 10px) 0 0 / 100% 4px no-repeat; }
.is-merguez :is(.profile-card-crest, .country-cover)::after, .is-merguez.country-cover::after { border-top: 3px dashed var(--foil); background: none; }
.is-bouzopp :is(.profile-card-crest, .country-cover)::after, .is-bouzopp.country-cover::after { background: linear-gradient(var(--foil), var(--foil)) 0 0 / 100% 2px no-repeat, repeating-linear-gradient(90deg, var(--foil) 0 12px, transparent 12px 16px) 0 4px / 100% 1px no-repeat; }
/* The diplomatic kind is black whatever the country; its pages keep the country's ink. */
.bouzopp-passport.is-diplomatic { --cover: #26272e; --cover-deep: #0b0c10; --foil: #ecd590; }
.bouzopp-passport-page, .bouzopp-passport-hinge { position: absolute; top: 0; right: 0; width: 190px; height: 270px; }
.bouzopp-passport-page, .bouzopp-passport-face.is-inside {
    box-sizing: border-box;
    overflow: hidden;
    background: var(--paper), linear-gradient(135deg, #f8f4ea, color-mix(in srgb, var(--ink) 9%, #f6f1e6));
}
.bouzopp-passport-page { border-radius: 3px 10px 10px 3px; box-shadow: inset 6px 0 8px -6px rgba(0, 0, 0, 0.35), 1px 1px 0 #d8d0bc, 2px 2px 0 #f3eee0, 3px 3px 0 #cbc2ab, 0 3px 8px rgba(0, 0, 0, 0.25); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bouzopp-passport-hinge { z-index: 1; perspective: 1400px; }
/* The page that says who its holder is is a leaf: it turns on the spine like the cover, onto the
   double page of stamps, its back on the left and the next page on the right. Turned, it lies over
   the inside of the cover; it changes sides halfway through the turn. */
.bouzopp-passport-hinge.is-leaf { z-index: 0; transition: z-index 0s linear 0.35s; }
.bouzopp-passport.is-open.is-turned .bouzopp-passport-hinge.is-leaf { z-index: 2; }
.bouzopp-passport-leaf { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1); }
.bouzopp-passport.is-open.is-turned .bouzopp-passport-leaf { transform: rotateY(-180deg); }
/* Firefox draws the identity page mirrored over the stamps once it has turned, whatever its
   `backface-visibility`: each side is also hidden by `visibility`, halfway through the turn. */
.bouzopp-passport-page, .bouzopp-passport-visas.is-left { transition: visibility 0s linear 0.35s; }
.bouzopp-passport-visas.is-left { visibility: hidden; }
.bouzopp-passport.is-open.is-turned .bouzopp-passport-page { visibility: hidden; }
.bouzopp-passport.is-open.is-turned .bouzopp-passport-visas.is-left { visibility: visible; }
.bouzopp-passport-visas { position: absolute; top: 0; right: 0; width: 190px; height: 270px; box-sizing: border-box; overflow: hidden; background: var(--paper), linear-gradient(135deg, #f8f4ea, color-mix(in srgb, var(--ink) 9%, #f6f1e6)); }
.bouzopp-passport-visas.is-right { border-radius: 3px 10px 10px 3px; box-shadow: inset 6px 0 8px -6px rgba(0, 0, 0, 0.35), 1px 1px 0 #d8d0bc, 2px 2px 0 #f3eee0, 3px 3px 0 #cbc2ab, 0 3px 8px rgba(0, 0, 0, 0.25); }
.bouzopp-passport-visas.is-left { border-radius: 10px 3px 3px 10px; box-shadow: inset -6px 0 8px -6px rgba(0, 0, 0, 0.35), -1px 1px 0 #d8d0bc, 0 3px 8px rgba(0, 0, 0, 0.25); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(180deg); }
.bouzopp-passport-visas-head { position: absolute; top: 12px; right: 0; left: 0; color: color-mix(in srgb, var(--ink) 70%, transparent); font-size: 7px; font-weight: 800; letter-spacing: 0.4em; text-align: center; text-indent: 0.4em; text-transform: uppercase; }
.bouzopp-passport-folio { position: absolute; right: 0; bottom: 10px; left: 0; color: color-mix(in srgb, var(--ink) 60%, transparent); font-size: 6px; font-weight: 800; text-align: center; }
/* A stamp: the country's emblem, its code and the day, in its own ink, a little askew. Each country
   has a stamp of its own shape. */
.bouzopp-passport-stamp { position: absolute; display: grid; grid-template-columns: 24px auto; gap: 1px 5px; align-items: center; padding: 5px 8px 5px 6px; border: 1.6px solid var(--ink); border-radius: 5px; color: var(--ink); opacity: 0.8; mix-blend-mode: multiply; }
.bouzopp-passport-stamp .bouzopp-passport-emblem { grid-row: 1 / span 2; width: 24px; height: 24px; stroke-width: 3; }
.bouzopp-passport-stamp b { align-self: end; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; line-height: 1; }
.bouzopp-passport-stamp small { align-self: start; font-size: 4.8px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.bouzopp-passport-stamp.is-mongolistan { padding: 9px 13px 9px 11px; border-radius: 50%; }
.bouzopp-passport-stamp.is-pedalistan { border-style: dashed; border-radius: 12px; }
.bouzopp-passport-stamp.is-tagoustan { border-width: 3px 1px; border-style: double solid; border-radius: 0; }
.bouzopp-passport-stamp.is-andasmas { border: 3px double var(--ink); border-radius: 5px 5px 16px 16px; }
.bouzopp-passport-stamp.is-boulemia { border-width: 2.4px; border-radius: 0; }
.bouzopp-passport-stamp.is-merguez { border-style: dashed; border-radius: 999px; padding: 5px 12px 5px 9px; }
.bouzopp-passport-stamp.is-bouzopp { border-width: 1px; border-radius: 2px; outline: 1px solid var(--ink); outline-offset: 2px; }
.bouzopp-passport-cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1); }
.bouzopp-passport.is-open .bouzopp-passport-cover { transform: rotateY(-180deg); }
.bouzopp-passport-face { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* The cover's sheen, the hologram and the stamps blend with what is under them; Firefox flattens the
   whole turn for any blending inside it, and draws each side mirrored over the other. Each side
   blends on its own. */
.bouzopp-passport-face, .bouzopp-passport-page, .bouzopp-passport-visas { isolation: isolate; }
/* The cover: grained, and everything on it struck in foil that catches the light. */
.bouzopp-passport-face.is-outside {
    overflow: hidden;
    border-radius: 3px 10px 10px 3px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 5%, rgba(255, 255, 255, 0.07) 7%, transparent 10%),
        radial-gradient(ellipse at 30% 14%, rgba(255, 255, 255, 0.14), transparent 60%),
        linear-gradient(150deg, var(--cover), var(--cover-deep));
    background-blend-mode: soft-light, normal, normal, normal;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 3px 8px rgba(0, 0, 0, 0.3);
    color: var(--foil);
    text-align: center;
    text-shadow: 0 0.6px 0 rgba(0, 0, 0, 0.45);
}
.bouzopp-passport-face.is-outside .bouzopp-passport-issuer { position: absolute; top: 25px; right: 18px; left: 18px; font-size: 7.4px; font-weight: 800; letter-spacing: 0.16em; line-height: 1.5; text-transform: uppercase; }
.bouzopp-passport-face.is-outside .bouzopp-passport-emblem { position: absolute; top: 72px; left: 41px; width: 108px; height: 108px; filter: drop-shadow(0 0.6px 0 rgba(0, 0, 0, 0.45)); }
.bouzopp-passport-title { position: absolute; top: 198px; right: 0; left: 0; display: grid; gap: 4px; font-size: 14px; font-weight: 800; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; }
.bouzopp-passport-title small { font-size: 7.4px; letter-spacing: 0.3em; text-indent: 0.3em; }
/* The mark of a booklet with a chip in it. */
.bouzopp-passport-chip { position: absolute; bottom: 20px; left: 50%; width: 20px; height: 12px; box-sizing: border-box; border: 1.6px solid currentColor; border-radius: 2px; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.6px no-repeat; translate: -50% 0; }
.bouzopp-passport-chip::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border: 1.6px solid currentColor; border-radius: 50%; background: var(--cover-deep); translate: -50% -50%; }
/* Each country tools its cover its own way, in the same foil: a beaded band for Mongolistan, a
   chain for Roulistan, peaks for Tagoustan, a double rule for Andasmas, battlements for Boulemia,
   a string of links for Merguez, a ledger's rules for the Federation. */
.bouzopp-passport-face.is-outside::after { content: ''; position: absolute; inset: 10px 12px 10px 17px; box-sizing: border-box; opacity: 0.85; pointer-events: none; }
.bouzopp-passport.is-mongolistan .bouzopp-passport-face.is-outside::after {
    background:
        linear-gradient(var(--foil), var(--foil)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--foil), var(--foil)) 0 6px / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, var(--foil) 0 3px, transparent 3px 6px) 0 2px / 100% 3px no-repeat,
        linear-gradient(var(--foil), var(--foil)) 0 100% / 100% 1px no-repeat, linear-gradient(var(--foil), var(--foil)) 0 calc(100% - 6px) / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, var(--foil) 0 3px, transparent 3px 6px) 0 calc(100% - 2px) / 100% 3px no-repeat;
}
.bouzopp-passport.is-pedalistan .bouzopp-passport-face.is-outside::after { border: 2.6px dotted var(--foil); border-radius: 9px; }
.bouzopp-passport.is-tagoustan .bouzopp-passport-face.is-outside::after {
    background:
        linear-gradient(135deg, var(--foil) 25%, transparent 25%) 0 0 / 10px 5px repeat-x, linear-gradient(225deg, var(--foil) 25%, transparent 25%) 0 0 / 10px 5px repeat-x,
        linear-gradient(45deg, var(--foil) 25%, transparent 25%) 0 100% / 10px 5px repeat-x, linear-gradient(315deg, var(--foil) 25%, transparent 25%) 0 100% / 10px 5px repeat-x;
}
.bouzopp-passport.is-andasmas .bouzopp-passport-face.is-outside::after { border: 1px solid var(--foil); border-radius: 6px; outline: 1px solid var(--foil); outline-offset: -5px; }
.bouzopp-passport.is-boulemia .bouzopp-passport-face.is-outside::after {
    background:
        linear-gradient(var(--foil), var(--foil)) 0 4px / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--foil) 0 5px, transparent 5px 10px) 0 0 / 100% 4px no-repeat,
        linear-gradient(var(--foil), var(--foil)) 0 calc(100% - 4px) / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--foil) 0 5px, transparent 5px 10px) 0 100% / 100% 4px no-repeat;
}
.bouzopp-passport.is-merguez .bouzopp-passport-face.is-outside::after { border: 3px dashed var(--foil); border-radius: 12px; }
.bouzopp-passport.is-bouzopp .bouzopp-passport-face.is-outside::after {
    background:
        linear-gradient(var(--foil), var(--foil)) 0 0 / 100% 2px no-repeat, repeating-linear-gradient(90deg, var(--foil) 0 12px, transparent 12px 16px) 0 4px / 100% 1px no-repeat,
        linear-gradient(var(--foil), var(--foil)) 0 100% / 100% 2px no-repeat, repeating-linear-gradient(90deg, var(--foil) 0 12px, transparent 12px 16px) 0 calc(100% - 4px) / 100% 1px no-repeat;
}
/* What a country tools into its cover round the emblem (passport.js), in the same foil. */
.bouzopp-passport-tooling { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Each country lays its cover out its own way, and letters it its own way: Mongolistan's emblem
   stands in the sun's rays; Roulistan's rides a road, over a title leaning forward; Tagoustan's is
   small over its range, widely spaced; Andasmas sets everything in the royal serif between fleurons;
   Boulemia sets its title on the city wall; Merguez sets its own large and heavy over the fire; the
   Federation's stands small and widely spaced over its skyline, between the ledger's rules. */
.bouzopp-passport.is-regular.is-pedalistan .bouzopp-passport-face.is-outside .bouzopp-passport-issuer { top: 22px; }
.bouzopp-passport.is-regular.is-pedalistan .bouzopp-passport-face.is-outside .bouzopp-passport-emblem { top: 46px; left: 39px; width: 112px; height: 112px; }
.bouzopp-passport.is-regular.is-pedalistan .bouzopp-passport-title { top: 199px; font-size: 16px; font-style: italic; font-weight: 900; letter-spacing: 0.2em; text-indent: 0.2em; }
.bouzopp-passport.is-regular.is-tagoustan .bouzopp-passport-face.is-outside .bouzopp-passport-issuer { top: 27px; font-size: 10px; font-weight: 700; letter-spacing: 0.44em; text-indent: 0.44em; }
.bouzopp-passport.is-regular.is-tagoustan .bouzopp-passport-face.is-outside .bouzopp-passport-emblem { top: 52px; left: 50px; width: 90px; height: 90px; }
.bouzopp-passport.is-regular.is-tagoustan .bouzopp-passport-title { top: 218px; font-size: 12px; font-weight: 700; letter-spacing: 0.5em; text-indent: 0.5em; }
.bouzopp-passport.is-regular.is-andasmas .bouzopp-passport-face.is-outside .bouzopp-passport-issuer { top: 36px; font-family: Georgia, "Times New Roman", serif; font-size: 7.8px; font-weight: 700; letter-spacing: 0.14em; }
.bouzopp-passport.is-regular.is-andasmas .bouzopp-passport-face.is-outside .bouzopp-passport-emblem { top: 68px; left: 43px; width: 104px; height: 104px; }
.bouzopp-passport.is-regular.is-andasmas .bouzopp-passport-title { top: 199px; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 700; letter-spacing: 0.3em; text-indent: 0.3em; }
.bouzopp-passport.is-regular.is-boulemia .bouzopp-passport-face.is-outside .bouzopp-passport-issuer { top: 24px; font-weight: 900; letter-spacing: 0.2em; }
.bouzopp-passport.is-regular.is-boulemia .bouzopp-passport-face.is-outside .bouzopp-passport-emblem { top: 56px; left: 45px; width: 100px; height: 100px; }
.bouzopp-passport.is-regular.is-boulemia .bouzopp-passport-title { top: 203px; font-size: 15px; font-weight: 900; letter-spacing: 0.26em; text-indent: 0.26em; }
.bouzopp-passport.is-regular.is-merguez .bouzopp-passport-face.is-outside .bouzopp-passport-issuer { top: 26px; font-weight: 900; letter-spacing: 0.22em; text-indent: 0.22em; }
.bouzopp-passport.is-regular.is-merguez .bouzopp-passport-face.is-outside .bouzopp-passport-emblem { top: 58px; left: 41px; width: 108px; height: 108px; }
.bouzopp-passport.is-regular.is-merguez .bouzopp-passport-title { top: 199px; font-size: 17px; font-weight: 900; letter-spacing: 0.14em; text-indent: 0.14em; }
.bouzopp-passport.is-regular.is-bouzopp .bouzopp-passport-face.is-outside .bouzopp-passport-issuer { top: 26px; font-size: 8px; font-weight: 700; letter-spacing: 0.36em; text-indent: 0.36em; }
.bouzopp-passport.is-regular.is-bouzopp .bouzopp-passport-face.is-outside .bouzopp-passport-emblem { top: 54px; left: 47px; width: 96px; height: 96px; }
.bouzopp-passport.is-regular.is-bouzopp .bouzopp-passport-title { top: 220px; font-size: 11px; font-weight: 700; letter-spacing: 0.5em; text-indent: 0.5em; }
/* The wall stands where Boulemia's lower band of battlements would. */
.bouzopp-passport.is-regular.is-boulemia .bouzopp-passport-face.is-outside::after {
    background: linear-gradient(var(--foil), var(--foil)) 0 4px / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--foil) 0 5px, transparent 5px 10px) 0 0 / 100% 4px no-repeat;
}
/* The diplomatic cover keeps to one gilt rule, whatever the country, and has no tooling. */
.bouzopp-passport.is-diplomatic .bouzopp-passport-tooling { display: none; }
.bouzopp-passport.is-diplomatic .bouzopp-passport-face.is-outside::after { inset: 9px 9px 9px 14px; border: 1px solid color-mix(in srgb, var(--foil) 70%, transparent); border-radius: 5px; outline: 0; background: none; box-shadow: inset 0 0 0 2px var(--cover-deep), inset 0 0 0 2.6px color-mix(in srgb, var(--foil) 45%, transparent); opacity: 1; }
.bouzopp-passport-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 170, 0.2) 46%, rgba(255, 255, 255, 0.12) 52%, transparent 66%)
        var(--card-light-x, 30%) var(--card-light-y, 40%) / 260% 260% no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
}
/* The inside of the cover: the emblem again, the motto, and what the country asks of whoever is handed it. */
.bouzopp-passport-face.is-inside {
    padding: 22px 18px 0;
    border-radius: 10px 3px 3px 10px;
    box-shadow: inset -6px 0 8px -6px rgba(0, 0, 0, 0.35), -1px 1px 0 #d8d0bc, 0 3px 8px rgba(0, 0, 0, 0.25);
    color: var(--ink);
    text-align: center;
    transform: rotateY(180deg);
}
.bouzopp-passport-face.is-inside .bouzopp-passport-emblem { display: block; width: 84px; height: 84px; margin: 0 auto 12px; }
.bouzopp-passport-face.is-inside .bouzopp-passport-issuer { display: block; font-size: 7px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.5; text-transform: uppercase; }
.bouzopp-passport-motto { display: block; margin: 8px 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: 9.5px; font-style: italic; }
.bouzopp-passport-motto::before { content: '“'; }
.bouzopp-passport-motto::after { content: '”'; }
.bouzopp-passport-request { display: block; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); color: #3a3f52; font-family: Georgia, "Times New Roman", serif; font-size: 7.6px; line-height: 1.55; }
/* It is framed the way the country rules its papers. */
.bouzopp-passport-face.is-inside::after { content: ''; position: absolute; inset: 8px; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 6px; pointer-events: none; }
.bouzopp-passport.is-pedalistan .bouzopp-passport-face.is-inside::after { border: 2px dotted color-mix(in srgb, var(--ink) 45%, transparent); }
.bouzopp-passport.is-tagoustan .bouzopp-passport-face.is-inside::after { border-width: 2px 0; border-radius: 0; }
.bouzopp-passport.is-andasmas .bouzopp-passport-face.is-inside::after { border: 3px double color-mix(in srgb, var(--ink) 45%, transparent); }
.bouzopp-passport.is-boulemia .bouzopp-passport-face.is-inside::after { border: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 0; }
.bouzopp-passport.is-merguez .bouzopp-passport-face.is-inside::after { border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 12px; }
.bouzopp-passport.is-bouzopp .bouzopp-passport-face.is-inside::after { border-radius: 0; outline: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); outline-offset: -4px; }
.bouzopp-passport.is-pedalistan .bouzopp-passport-motto { font-family: inherit; font-weight: 800; }
.bouzopp-passport.is-merguez .bouzopp-passport-motto { font-family: inherit; font-style: normal; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.bouzopp-passport.is-bouzopp .bouzopp-passport-motto { font-family: inherit; font-size: 7.6px; font-style: normal; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.bouzopp-passport.is-andasmas .bouzopp-passport-face.is-inside .bouzopp-passport-issuer { font-family: Georgia, "Times New Roman", serif; font-size: 7.6px; }
/* The page that says who its holder is. */
/* The scene the country prints across its foot (passport.js), behind what is written there. */
.bouzopp-passport-scene { position: absolute; right: 0; bottom: 31px; left: 0; width: 100%; height: 70px; color: var(--ink); opacity: 0.36; pointer-events: none; }
.bouzopp-passport-watermark { position: absolute; top: 96px; right: -34px; color: var(--ink); opacity: 0.08; }
.bouzopp-passport-watermark .bouzopp-passport-emblem { display: block; width: 150px; height: 150px; }
.bouzopp-passport-head { position: absolute; top: 10px; right: 10px; left: 12px; display: grid; grid-template-columns: 24px 1fr; gap: 1px 7px; align-items: center; color: var(--ink); }
.bouzopp-passport-head .bouzopp-passport-emblem { grid-row: 1 / span 2; width: 24px; height: 24px; }
.bouzopp-passport-head b { font-size: 5.4px; font-weight: 800; letter-spacing: 0.1em; line-height: 1.35; text-transform: uppercase; }
.bouzopp-passport-head em { font-size: 7.4px; font-style: normal; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; }
/* Each country heads its page its own way: Roulistan on a band of its ink, Tagoustan with its emblem
   on the right over a rule, Andasmas centred in serif over a double rule, Boulemia over a toothed one,
   Merguez in a cartouche as round as a link, the Federation over a heavy rule, widely spaced. */
.bouzopp-passport.is-pedalistan .bouzopp-passport-head { top: 0; right: 0; left: 0; padding: 7px 10px 6px 12px; background: var(--ink); color: #fff; }
.bouzopp-passport.is-pedalistan .bouzopp-passport-head em { font-style: italic; font-weight: 900; }
.bouzopp-passport.is-tagoustan .bouzopp-passport-head { grid-template-columns: 1fr 24px; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); text-align: right; }
.bouzopp-passport.is-tagoustan .bouzopp-passport-head .bouzopp-passport-emblem { grid-column: 2; }
.bouzopp-passport.is-tagoustan .bouzopp-passport-head b, .bouzopp-passport.is-tagoustan .bouzopp-passport-head em { grid-column: 1; }
.bouzopp-passport.is-tagoustan .bouzopp-passport-head b { grid-row: 1; }
.bouzopp-passport.is-andasmas .bouzopp-passport-head { padding-bottom: 3px; border-bottom: 3px double color-mix(in srgb, var(--ink) 55%, transparent); font-family: Georgia, "Times New Roman", serif; text-align: center; }
.bouzopp-passport.is-andasmas .bouzopp-passport-head b { font-size: 5.8px; }
.bouzopp-passport.is-boulemia .bouzopp-passport-head { padding-bottom: 4px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 60%, transparent); }
.bouzopp-passport.is-boulemia .bouzopp-passport-head b { font-weight: 900; }
.bouzopp-passport.is-merguez .bouzopp-passport-head { top: 8px; right: 8px; left: 9px; padding: 4px 10px 4px 5px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.bouzopp-passport.is-merguez .bouzopp-passport-head em { font-weight: 900; }
.bouzopp-passport.is-bouzopp .bouzopp-passport-head { padding-bottom: 4px; border-bottom: 2px solid color-mix(in srgb, var(--ink) 60%, transparent); }
.bouzopp-passport.is-bouzopp .bouzopp-passport-head em { font-weight: 700; letter-spacing: 0.42em; }
.bouzopp-passport-photo { position: absolute; top: 46px; left: 12px; display: grid; place-items: center; width: 62px; height: 80px; overflow: hidden; border-radius: 4px; background: linear-gradient(160deg, #dfe5ee, #c7cfdb); box-shadow: inset 0 0 0 1px rgba(28, 39, 66, 0.3); }
.bouzopp-passport-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.bouzopp-passport-photo .avatar-initial { color: #1c2742; font-size: 34px; font-weight: 900; }
/* And frames its holder its own way: a plain rule, cut corners, an arch, a double frame, an oval in a
   string of links, a square frame for the Federation. */
.bouzopp-passport.is-pedalistan .bouzopp-passport-photo { border-radius: 2px; box-shadow: 0 0 0 1.5px var(--ink); }
.bouzopp-passport.is-tagoustan .bouzopp-passport-photo { border-radius: 0; clip-path: polygon(16% 0, 84% 0, 100% 11%, 100% 100%, 0 100%, 0 11%); }
.bouzopp-passport.is-andasmas .bouzopp-passport-photo { border-radius: 31px 31px 3px 3px; box-shadow: inset 0 0 0 1px rgba(28, 39, 66, 0.3), 0 0 0 1.5px #f8f4ea, 0 0 0 2.5px color-mix(in srgb, var(--ink) 60%, transparent); }
.bouzopp-passport.is-boulemia .bouzopp-passport-photo { border-radius: 0; box-shadow: inset 0 0 0 1px rgba(28, 39, 66, 0.3), 0 0 0 2px #f8f4ea, 0 0 0 3px color-mix(in srgb, var(--ink) 70%, transparent); }
.bouzopp-passport.is-merguez .bouzopp-passport-photo { top: 48px; left: 14px; width: 58px; height: 76px; border-radius: 50%; outline: 1.6px dashed color-mix(in srgb, var(--ink) 70%, transparent); outline-offset: 1.6px; }
.bouzopp-passport.is-bouzopp .bouzopp-passport-photo { border-radius: 0; box-shadow: inset 0 0 0 1px rgba(28, 39, 66, 0.3), 0 0 0 1px color-mix(in srgb, var(--ink) 70%, transparent), 0 0 0 3px #f8f4ea, 0 0 0 4px color-mix(in srgb, var(--ink) 40%, transparent); }
.bouzopp-passport.is-andasmas .bouzopp-passport-fields > .is-name strong { font-family: Georgia, "Times New Roman", serif; font-size: 12.6px; }
.bouzopp-passport.is-pedalistan .bouzopp-passport-fields > .is-name strong { font-style: italic; font-weight: 900; }
.bouzopp-passport-fields { position: absolute; top: 47px; right: 10px; left: 84px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.bouzopp-passport-fields.is-below { top: 135px; left: 12px; }
/* The seal of its holder's district (#1005), struck low on the right page of visas in the country's ink, a
   little askew like the stamps, and the way to the district's page. */
.bouzopp-passport-seal-of-district { position: absolute; right: 18px; bottom: 26px; display: block; width: 58px; height: 58px; color: var(--ink); opacity: 0.82; mix-blend-mode: multiply; rotate: 8deg; }
.bouzopp-passport-seal-of-district .district-seal { display: block; width: 100%; height: 100%; }
.bouzopp-passport-seal-of-district:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bouzopp-passport-fields > span { display: grid; gap: 1px; min-width: 0; }
.bouzopp-passport-fields > .is-wide { grid-column: 1 / -1; }
.bouzopp-passport-fields small { color: color-mix(in srgb, var(--ink) 75%, #1c2742); font-size: 4.9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.bouzopp-passport-fields strong { display: flex; align-items: center; gap: 3px; overflow: hidden; font-size: 8.2px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.bouzopp-passport-fields > .is-name strong { font-size: 12px; }
.bouzopp-passport-fields strong img { flex: 0 0 auto; border-radius: 1.5px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.bouzopp-passport-signature { position: absolute; top: 190px; right: 50px; left: 12px; height: 26px; border-bottom: 1px solid rgba(28, 39, 66, 0.35); color: #1f3c96; }
.bouzopp-passport-signature .signature-ink { display: block; width: auto; max-width: 100%; height: 100%; overflow: visible; stroke-width: 7; }
/* The country's seal in holographic film, beside the signature. */
.bouzopp-passport-seal {
    position: absolute;
    right: 12px;
    bottom: 50px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: conic-gradient(from var(--seal-turn, 0deg), #ffb3e6, #b3f1ff, #fff5a8, #c2ffcf, #d7c2ff, #ffb3e6);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(28, 39, 66, 0.3);
    color: rgba(28, 39, 66, 0.6);
    opacity: 0.85;
}
.bouzopp-passport-seal .bouzopp-passport-emblem { width: 24px; height: 24px; stroke-width: 3; }
/* Each country's seal has a shape of its own: a cog, a hexagon, a shield, a block, a flame, a lozenge. */
.bouzopp-passport.is-pedalistan .bouzopp-passport-seal { outline: 2px dashed color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 1px; }
.bouzopp-passport.is-tagoustan .bouzopp-passport-seal { border-radius: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.bouzopp-passport.is-andasmas .bouzopp-passport-seal { border-radius: 5px 5px 50% 50%; }
.bouzopp-passport.is-boulemia .bouzopp-passport-seal { border-radius: 5px; }
.bouzopp-passport.is-merguez .bouzopp-passport-seal { border-radius: 0 50% 50% 50%; rotate: 45deg; }
.bouzopp-passport.is-merguez .bouzopp-passport-seal .bouzopp-passport-emblem { rotate: -45deg; }
.bouzopp-passport.is-bouzopp .bouzopp-passport-seal { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.bouzopp-passport-machine {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 7px 0 8px 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.55);
    color: #2b3345;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 6px;
    letter-spacing: 0.1em;
    line-height: 1.45;
    white-space: nowrap;
}
.bouzopp-passport-holo {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 22%, rgba(255, 120, 220, 0.2) 36%, rgba(120, 240, 255, 0.22) 46%, rgba(255, 250, 150, 0.2) 56%, transparent 70%)
        var(--card-light-x, 30%) var(--card-light-y, 40%) / 260% 260% no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
}
/* In the wallet a passport does not fit behind the ID's window: the window becomes a sleeve its
   size, and the booklet stands in it shut, its top out over the wallet's edge as it would be. */
.wallet-window.has-passport { right: 96px; left: 96px; z-index: 1; height: 176px; }
.wallet-window.has-passport .wallet-id { top: auto; bottom: 8px; border-radius: 4px 10px 10px 4px; transform: translateX(-50%) rotate(-1.5deg); transition: translate 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); }
.wallet-window.has-passport .wallet-id:hover, .wallet-window.has-passport .wallet-id:active { transform: translateX(-50%) rotate(-1.5deg); }
.wallet-window.has-passport .wallet-id:hover, .wallet-window.has-passport .wallet-id:focus-visible { translate: 0 -12px; }
.wallet-window.has-passport .bouzopp-passport { zoom: 0.86; }
/* The plastic only shines over what is behind it. */
.wallet-window.has-passport::before { z-index: 3; }
.motion-reduced .wallet-window.has-passport .wallet-id { transition: none; }
.inspector-object.is-passport { border-radius: 14px; }
.inspector-object.is-passport .bouzopp-passport { zoom: 1.5; cursor: pointer; }
.card-page-preview .inspector-object.is-passport .bouzopp-passport { zoom: 1.25; }
/* The light that crosses a card would cross the empty half of a shut booklet; its foil has its own. */
.inspector-object.is-passport .card-inspector-glare { display: none; }
.motion-reduced .bouzopp-passport, .motion-reduced .bouzopp-passport-cover, .motion-reduced .bouzopp-passport-leaf, .motion-reduced .bouzopp-passport-hinge.is-leaf { transition: none; }

/* Its holder chooses the document they carry on its page, and finds there the forms they have yet to sign. */
.id-document-chooser { display: grid; gap: 12px; width: 100%; }
.id-document-chooser > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.id-document-chooser > div > span { font-size: 12px; font-weight: 800; }
.card-page-actions .id-document-chooser button { padding: 8px 12px; background: var(--white); box-shadow: 2px 2px 0 var(--ink-shadow); font-size: 12px; }
.card-page-actions .id-document-chooser button[aria-pressed="true"] { background: var(--pastel-purple-light); }
.card-page-actions .id-document-chooser button:disabled { opacity: 0.6; cursor: wait; }

/* The Locket: a brass rim on its bail, shut by a glass door hinged on its left. Shut, the card
   inside shows through the glass; open, it lies bare, and the door stands beside it. */
.locket { position: relative; display: block; width: 96px; aspect-ratio: 96 / 136; container-type: inline-size; }
.locket-bail {
    position: absolute;
    top: 0;
    left: 50%;
    width: 22%;
    aspect-ratio: 1;
    box-sizing: border-box;
    border: 4px solid #c99a3d;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #7a5516, 0 0 0 1px #7a5516;
    transform: translateX(-50%);
}
.locket-case {
    position: absolute;
    top: 17%;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 3px solid #c99a3d;
    border-radius: 50%;
    background: rgba(214, 236, 248, 0.14);
    box-shadow: 0 0 0 1px #7a5516, 0 6px 14px rgba(40, 60, 80, 0.22);
}
.locket-card { position: absolute; inset: 5%; display: block; width: 90%; height: 90%; overflow: hidden; border-radius: 50%; }
.locket-card > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.locket-hinge { position: absolute; top: 17%; right: 0; bottom: 0; left: 0; perspective: 520cqw; }
/* The hinge's knuckle, on the rim's left edge. */
.locket-hinge::before {
    content: '';
    position: absolute;
    top: 43%;
    left: -4%;
    z-index: 1;
    width: 8%;
    height: 14%;
    border-radius: 2px;
    background: linear-gradient(90deg, #7a5516, #f0cc74 45%, #8a6320);
    box-shadow: 0 0 0 1px #6a4812;
}
/* The door: a pane of glass in a thin brass frame, which swings back beside the rim when open. */
.locket-glass {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 34% 20% at 32% 20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 18% 9% at 70% 84%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0) 55%, rgba(170, 210, 235, 0.2));
    box-shadow: 0 0 0 1px #7a5516, inset 0 0 0 2px #c99a3d, inset 0 0 0 3.5px rgba(255, 255, 255, 0.55),
        inset 0 -8px 14px rgba(110, 150, 185, 0.28), inset 0 8px 12px rgba(255, 255, 255, 0.3);
    transform-origin: 0 50%;
    transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.locket.is-open .locket-glass { transform: rotateY(-156deg); }
/* A band of light crosses the glass when it is looked at. */
.locket-glass::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
    transform: translateX(-70%);
    transition: transform 0.9s ease;
}
.locket-preview:hover .locket-glass::after { transform: translateX(70%); }
/* Up close, it opens and shuts at a touch. */
.card-page-preview .inspector-object.is-locket .locket { cursor: pointer; }
/* Its owner chooses its card under it, across the page, with the showcase's card picker. */
.locket-chooser { grid-column: 1 / -1; min-width: 0; }
.locket-chooser[hidden] { display: none; }
.locket-chooser .picker-grid { max-height: 460px; }
/* One card, so no order to set, as in the showcase's card slot editor. */
.locket-chooser .picker-order { display: none; }
.locket-chooser .card-page-actions { justify-content: flex-end; margin-top: 16px; }
.locket-chooser .card-page-status { margin: 0 auto 0 0; }

/* On the showcase it hangs like any other object, and comes closer in the inspector. */
.locket-showcase { width: 96px; }
.profile-showcase .locket-preview,
.locket-showcase .locket-preview {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    cursor: zoom-in;
}
.locket-showcase .locket-preview:hover { transform: none; background: transparent; }

/* The Pocket Watch: a gold hunter case on its bow. Its lid is hinged at six and falls open below
   it, polished inside; the box leaves that room under the case. It hangs by its bow, which is
   what it swings on. */
.pocket-watch { position: relative; display: block; width: 100px; aspect-ratio: 200 / 336; container-type: inline-size; transform-origin: 50% 8%; }
.pocket-watch-body { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 77.381%; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.pocket-watch-numeral { fill: #2b2314; font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 700; text-anchor: middle; }
.pocket-watch-name { fill: rgba(43, 35, 20, 0.72); font-family: "Sora", sans-serif; font-size: 6.5px; font-weight: 800; letter-spacing: 2.2px; text-anchor: middle; }
.pocket-watch-hinge { position: absolute; top: 18.75%; left: 1.5%; width: 97%; height: 57.738%; perspective: 800cqw; perspective-origin: 50% 100%; pointer-events: none; }
.pocket-watch-lid { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.5, 1); }
.pocket-watch.is-open .pocket-watch-lid { transform: rotateX(-110deg); }
.pocket-watch-lid-face { position: absolute; inset: 0; display: block; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pocket-watch-lid-face.is-inside { transform: rotateX(180deg); }
.pocket-watch-chain { display: block; width: 12px; height: auto; overflow: visible; }

/* It hangs under the wallet's right leaf by its chain, from an eyelet in the leather, over the desk. */
.wallet-fob { position: absolute; top: 430px; right: 30px; z-index: 4; width: 112px; }
/* The desk reaches further down under a wallet that has one, so it hangs clear with its lid open. */
.wallet-desk:has(.wallet-watch) { padding-bottom: 100px; }
.wallet-fob:not(:empty)::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle, #170c05 0 30%, #f0cc74 34% 50%, #a8731a 62%, #6a4812 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    translate: -50% 0;
}
.wallet-dialog .wallet-fob .wallet-watch { position: relative; display: grid; justify-items: center; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; transform-origin: 50% 0; cursor: zoom-in; }
.wallet-dialog .wallet-fob .wallet-watch:hover, .wallet-dialog .wallet-fob .wallet-watch:active { transform: none; background: transparent; }
.wallet-dialog .wallet-fob .wallet-watch:focus-visible { outline: 3px solid #f2c55c; outline-offset: 4px; }
.wallet-watch .pocket-watch-chain { width: 16px; margin-bottom: -6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.wallet-watch .pocket-watch { width: 112px; }

/* On the showcase it hangs like any other object, and comes closer in the inspector, where it opens and shuts at a touch. */
.pocket-watch-showcase { width: 120px; }
.pocket-watch-preview .pocket-watch { width: 100%; }
.profile-showcase .pocket-watch-preview,
.pocket-watch-showcase .pocket-watch-preview {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    cursor: zoom-in;
}
.pocket-watch-showcase .pocket-watch-preview:hover { transform: none; background: transparent; }
.inspector-object.is-watch { --watch: min(320px, 62vw); border-radius: 40%; }
.inspector-object.is-watch .pocket-watch { width: var(--watch); cursor: pointer; }
.card-page-inspected .card-page-preview .inspector-object.is-watch { --watch: min(290px, 58vw); }
/* Gold brings its own light. */
.inspector-object.is-watch .card-inspector-glare { display: none; }

.motion-reduced .wallet-book.is-opening .wallet-flap,
.motion-reduced .wallet-spread,
.motion-reduced .wallet-dialog .wallet-spread-piece,
.motion-reduced .navbar-wallet.is-paying,
.motion-reduced .navbar-wallet.is-full,
.motion-reduced .navbar-wallet.is-full .navbar-wallet-bill,
.motion-reduced .wallet-paid { animation: none; }
.motion-reduced .locket-glass::after,
.motion-reduced .locket-glass,
.motion-reduced .pocket-watch-lid,
.motion-reduced .navbar-wallet-bill,
.motion-reduced .wallet-dialog .wallet-stack,
.motion-reduced .wallet-dialog .wallet-spread-piece,
.motion-reduced .wallet-pocket .wallet-locket { transition: none; }

/* Out on the showcase: the ID lies there as in the wallet's window, a passport beside it, the cash in a loose pile. */
.id-card-showcase { width: 150px; }
.passport-showcase { width: 152px; }
.cash-showcase { position: relative; width: 230px; height: 110px; }
/* The showcase's own button look stays off: what shows is the ID, the passport or the money itself. */
:is(.id-card-showcase, .passport-showcase, .cash-showcase) .wallet-showcase-button { display: block; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; cursor: zoom-in; }
:is(.id-card-showcase, .passport-showcase, .cash-showcase) .wallet-showcase-button:hover,
:is(.id-card-showcase, .passport-showcase, .cash-showcase) .wallet-showcase-button:active { transform: none; background: transparent; box-shadow: none; }
.wallet-showcase-button:focus-visible { outline: 3px solid #7543c5; outline-offset: 3px; }
/* Both are scaled down rather than zoomed: a browser holds zoomed small print at a size it can be
   read at, which leaves it out of proportion with the document it is printed on. */
.id-card-showcase .wallet-showcase-button { position: relative; width: 150px; height: 94.5px; }
.id-card-showcase .bouzopp-id { position: absolute; top: 0; left: 0; transform: scale(0.5); transform-origin: 0 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }
/* A passport is one page wide shut and two open, in the room the showcase gives each (app/services/passports.py). */
.passport-showcase:has(.bouzopp-passport.is-open) { width: 304px; }
.passport-showcase .wallet-showcase-button { position: relative; width: 100%; height: 216px; }
.passport-showcase .bouzopp-passport { position: absolute; top: 0; left: 0; transform: scale(0.8); transform-origin: 0 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); transition: none; }
.wallet-showcase-bills { position: absolute; top: 10px; right: 0; left: 0; height: 60px; }
.wallet-showcase-coins { position: absolute; right: 4px; bottom: 0; display: flex; gap: 8px; }
.cash-showcase .wallet-showcase-stack { position: absolute; top: auto; left: auto; transition: translate 0.2s ease; }
.cash-showcase .wallet-showcase-stack:hover { translate: 0 -6px; }
.cash-showcase .wallet-showcase-stack.is-bill { top: 0; left: calc(var(--index) * 28px); width: 82px; height: 38px; transform: rotate(var(--tilt)); }
.cash-showcase .wallet-showcase-stack.is-bill:hover { transform: rotate(var(--tilt)); }
.wallet-showcase-stack.is-coin { position: relative; width: 34px; height: 34px; }
.wallet-showcase-layer { position: absolute; top: calc(var(--layer) * -2px); left: calc(var(--layer) * 1px); }
.wallet-showcase-stack.is-bill .bouzopp-bill { zoom: calc(0.62 * var(--piece-size, 1)); }
.wallet-showcase-stack.is-coin .bouzopp-coin { width: calc(34px * var(--piece-size, 1)); height: calc(34px * var(--piece-size, 1)); }
.wallet-showcase-count { position: absolute; top: -8px; right: -8px; z-index: 2; padding: 1px 5px; border-radius: 999px; background: #fdf6e3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); color: #3b2414; font-size: 9px; font-weight: 900; }

/* The wallet's way to the scratch tickets kept with it. */
.wallet-tickets {
    display: block;
    margin: 6px auto 0;
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    text-align: center;
}

.wallet-tickets[hidden] {
    display: none;
}

/* Several are being picked at once: what is picked stands up, ringed in gold, and Done stays above the spread stack. */
.wallet-dialog .wallet-spread-piece[aria-pressed="true"] { translate: 0 -10px; }
.wallet-spread-piece[aria-pressed="true"] .bouzopp-coin, .wallet-spread-piece[aria-pressed="true"] .bouzopp-bill { outline: 3px solid #f2c55c; outline-offset: 4px; }
.wallet-dialog.is-picking-many :is(.wallet-status, .wallet-pick-done) { position: relative; z-index: 31; }
.wallet-dialog .wallet-pick-done { background: #f2c55c; color: #25252d; }
.wallet-dialog .wallet-pick-done:hover { background: #ffd978; }

/* A coin or a bill is being picked: the other kind steps back, and the kind wanted asks to be chosen. */
.wallet-dialog.is-picking-coin .wallet-bills,
.wallet-dialog.is-picking-bill .wallet-purse {
    opacity: .45;
}

.wallet-dialog.is-picking-coin .wallet-stack.is-coin,
.wallet-dialog.is-picking-bill .wallet-stack.is-bill {
    cursor: pointer;
}

.wallet-dialog.is-picking-coin .wallet-stack.is-coin:hover,
.wallet-dialog.is-picking-bill .wallet-stack.is-bill:hover {
    transform: translateY(-4px);
}