/* Money displays: bills and coins from the wallet, out in the showcase (money-display.js). */
.money-display {
    position: relative;
    display: block;
    user-select: none;
}

/* A piece is drawn bare, even as a button inside a showcase, whose own buttons are boxed, and it
   stays where it lies when the pointer is on it. */
.money-display .money-display-piece {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    transform: none;
    transition: none;
}

.money-display button.money-display-piece { cursor: zoom-in; }

/* A little paper label under a piece, written on by hand. A blank one shows only while the display is customised.
   It hangs under the recess without taking room in the slot, so a labelled piece sits level with the others. */
.money-display-label {
    position: absolute;
    top: calc(50% + var(--recess, 38px) / 2 - 2px);
    left: 50%;
    z-index: 2;
    display: block;
    box-sizing: border-box;
    min-width: 32px;
    max-width: 100%;
    min-height: 11px;
    margin: 0;
    padding: 1px 4px;
    overflow: hidden;
    border: 1px solid #d6c9a8;
    border-radius: 1px;
    background: #fbf6e6;
    color: #2d2618;
    font: 700 7px/1.3 'Courier New', Courier, monospace;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
    translate: -50% 0;
    transform: rotate(-1.5deg);
}
.money-display-slot:nth-child(even) .money-display-label { transform: rotate(1.2deg); }
.money-display-label.is-blank { opacity: .65; }
.money-display-label[role="button"] { cursor: text; }
.money-display-label input {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: center;
    outline: none;
}

/* Customised by its owner: each slot is pressed to fill it, and a filled one has a cross to empty it. */
.money-display .is-editable { position: relative; cursor: pointer; }
.money-display .is-editable:hover, .money-display .is-editable:focus-visible { outline: 2px dashed #f3d98c; outline-offset: 2px; }
/* While the showcase is being arranged, an empty slot is outlined: it can be seen where something goes. */
.is-arranging .money-display .is-empty { outline: 2px dashed #f3d98c; outline-offset: 2px; }
/* On its page, an empty slot shows its owner where to press, a pile's first coins included. */
.money-display.is-editing .is-empty { outline: 2px dashed #f3d98c; outline-offset: 2px; }
.money-display .money-display-take {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #1f1b24;
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
    color: #1f1b24;
    font: 800 10px/1 system-ui, sans-serif;
}
.money-display .money-display-take:hover, .money-display .money-display-take:active { transform: none; background: #ffe1e1; box-shadow: none; }

/* The pedestal: a tufted velvet cushion with a gold cord (a photograph, cut out), for one very special coin
   resting in its dimple. */
.money-display.is-coin-pedestal { width: 120px; height: 74px; }
.money-display-cushion {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3));
    pointer-events: none;
}
.money-display-pillow {
    position: absolute;
    top: 4px;
    left: 38px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.money-display-pillow .bouzopp-coin { width: calc(30px * var(--piece-size, 1)); height: calc(30px * var(--piece-size, 1)); }
/* The coin rests in the dimple, leaning back a little, its shadow on the velvet. */
.money-display-pillow .money-display-piece {
    transform: perspective(140px) rotateX(32deg);
    filter: drop-shadow(0 5px 2px rgba(40, 0, 6, .6));
}

/* A cabinet: a wooden frame round felt and glass, each piece in its recess. */
.money-display.is-coin-cabinet-4, .money-display.is-coin-cabinet-8, .money-display.is-bill-cabinet {
    box-sizing: border-box;
    height: 128px;
    padding: 10px;
    border: 6px solid #5b3a1e;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 40%, #1d4a36, #0f2c20);
    box-shadow: inset 0 0 0 1px #2a1706, 0 4px 0 #3c2412;
}
.money-display.is-coin-cabinet-4 { width: 150px; }
.money-display.is-coin-cabinet-8 { width: 260px; }
.money-display.is-bill-cabinet { width: 200px; height: 124px; }
.money-display-slots {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
    gap: 4px 6px;
    height: 100%;
}
.is-coin-cabinet-8 .money-display-slots { --columns: 4; }
.is-bill-cabinet .money-display-slots { --columns: 1; }
.money-display-slot { position: relative; display: grid; align-content: center; justify-items: center; min-width: 0; }
.is-bill-cabinet .money-display-slot { --recess: 70px; }
.money-display-recess {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, #0a1d15, #163a2b);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .55);
}
.money-display-recess .bouzopp-coin { width: calc(34px * var(--piece-size, 1)); height: calc(34px * var(--piece-size, 1)); }
.is-bill-cabinet .money-display-recess { width: 150px; height: 70px; border-radius: 3px; }
.is-bill-cabinet .money-display-recess .bouzopp-bill { zoom: calc(1.05 * var(--piece-size, 1)); }
.money-display-glass {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 2px;
    background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .16) 38%, transparent 46%, transparent 62%, rgba(255, 255, 255, .08) 68%, transparent 74%);
    pointer-events: none;
}

/* The briefcase: an attaché case lying open (a photograph, cut out), its six velvet compartments laid over
   with the stacks of bills they hold, each under a paper band. */
.money-display.is-bill-briefcase { width: 200px; height: 198px; }
.money-display-briefcase {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3));
    pointer-events: none;
}
/* Where the compartments are on the photograph: two columns of three. */
.money-display-compartments {
    position: absolute;
    top: 28%;
    left: 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 79.5%;
    height: 57%;
}
.money-display-compartment { position: relative; border-radius: 2px; }
.money-display-compartment .money-display-piece {
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 36px);
}
/* The rest of a stack shows only as the edges of its paper under the top bill. */
.money-display-edges {
    position: absolute;
    top: calc(50% + 15px);
    left: calc(50% - 36px);
    width: 71px;
    height: calc(var(--below, 1) * 1.5px);
    border-radius: 0 0 2px 2px;
    background: repeating-linear-gradient(180deg, #efe7d2 0 1px, #a99d80 1px 1.5px);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.money-display-compartment .bouzopp-bill { zoom: calc(.54 * var(--piece-size, 1)); box-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
/* A stack is held by a paper band round its middle. */
.money-display-band {
    position: absolute;
    top: calc(50% - 19px);
    left: calc(50% - 5px);
    z-index: 2;
    width: 10px;
    height: 36px;
    background: linear-gradient(90deg, #d9c9a0, #f3e8cb 40%, #e4d6b2);
    box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .35), 0 1px 2px rgba(0, 0, 0, .4);
}
.money-display-count {
    position: absolute;
    right: 3px;
    bottom: 2px;
    z-index: 3;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

/* The pile: coins dropped one on the other. */
.money-display.is-coin-pile { width: 84px; height: 84px; }
/* Its one slot fills the display, the same while it is customised: empty, it is still there to press. */
.money-display .money-display-heap { position: absolute; right: 0; bottom: 0; left: 0; display: block; height: 84px; }
.money-display-heap .money-display-piece {
    position: absolute;
    bottom: 6px;
    left: calc(50% - 20px);
    z-index: var(--z, 0);
    transform: translate(var(--x, 0), var(--y, 0)) rotateX(52deg);
}
.money-display-heap .bouzopp-coin { width: calc(40px * var(--piece-size, 1)); height: calc(40px * var(--piece-size, 1)); }

/* On the showcase the display is one button, looked at up close in the inspector. */
.money-display-showcase .money-display-preview {
    display: block;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: zoom-in;
}
.money-display-showcase .money-display-preview:hover, .money-display-showcase .money-display-preview:active { transform: none; background: transparent; box-shadow: none; }

/* Its page: the display up close, where its owner customises it. */
.money-display-page-stage { display: grid; place-items: center; padding: 24px; }
.money-display-page-stage .money-display { zoom: 1.8; }
.money-display-picker { margin-top: 18px; }
.money-display-picker h2 { margin: 0 0 10px; font-size: 1.1rem; }
.money-display-picker-actions { display: flex; gap: 8px; margin-top: 12px; }