/* /coins (modules/economy coins.php, js/coins.js): the history and the deliveries in scroll areas of their own, the two
   columns ending together; the deliveries with the item's icon, name and options; the Zen purchase box. */

/* the two columns share one row as tall as the taller, at most about nine rows of history; each list fills its column */
.coin-split { grid-template-rows: fit-content(36rem); align-items: stretch; }
.coin-split > section, .coin-deliveries { display: flex; flex-direction: column; min-height: 0; }
.coin-deliveries { flex: 1 1 auto; }
.coin-split > section > :not(.coin-scroll, .coin-deliveries), .coin-deliveries > :not(.coin-scroll) { flex: none; }
.coin-scroll {
  flex: 1 1 auto; min-height: 7rem; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 6px; border-radius: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.55) transparent;
}
.coin-scroll::-webkit-scrollbar { width: 6px; }
.coin-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(var(--accent-rgb), 0.55); }
.coin-scroll::-webkit-scrollbar-track { background: transparent; }
.coin-scroll:focus-visible { outline: 1px solid var(--accent-hot); outline-offset: 3px; }
.coin-scroll.is-more { mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
.coin-scroll > .coin-list { margin: 0; }
.coin-list > li.is-arriving { animation: coin-arrive 900ms var(--ease) both; }
@keyframes coin-arrive { from { opacity: 0; translate: 0 -8px; background: rgba(var(--accent-rgb), 0.18); } to { opacity: 1; translate: 0 0; background: transparent; } }
[data-skin='parchment'] .coin-scroll { scrollbar-color: rgba(74, 48, 22, 0.5) transparent; }
[data-skin='parchment'] .coin-scroll::-webkit-scrollbar-thumb { background: rgba(74, 48, 22, 0.5); }

/* a delivery: the item's icon (a soft box when it has none), its name and options, where it is */
.coin-items > li.coin-item { grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 2px 12px; }
.coin-item-pic { position: relative; display: grid; place-items: center; grid-row: span 2; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: rgba(var(--accent-rgb), 0.08); }
.coin-list > li > .coin-item-pic::before { content: ''; position: absolute; inset: 11px; width: auto; height: auto; margin: 0; border: 1.5px solid rgba(var(--accent-rgb), 0.45); border-radius: 4px; background: none; box-shadow: none; animation: none; }
.coin-item-pic:has(img:not([hidden]))::before { display: none; }
/* the icons are the bag's canvases (a jewel a speck in its own): scaled by the item's height in cells, as the market's */
.coin-item-pic img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: calc((30px + 20px * var(--h, 1)) * 3.4 / var(--h, 1)); translate: -50% -50%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.coin-items .coin-item-text b::before { display: none; }
.coin-item-pic .tint-defs { position: absolute; width: 0; height: 0; }
.coin-item-pic .item-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.coin-item-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.coin-item-text b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.coin-item-text em { color: var(--text-2); font-size: 12px; font-style: normal; }
.coin-items > li.coin-item small { grid-column: 2; }
.coin-items > li.is-pending small::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-inline-end: 7px; border-radius: 50%; background: #ffd76a; box-shadow: 0 0 8px #ffd76a; vertical-align: 1px; animation: flicker 1.6s infinite; }
.coin-items > li.is-pending .coin-item-text::before { display: none; }
.coin-items .is-delivered small { color: #8dd88a; }
.coin-items .is-failed small, .coin-items .is-canceled small { color: #ff8a7a; }
[data-skin='parchment'] .coin-item-pic { background: rgba(74, 48, 22, 0.08); }
[data-skin='parchment'] .coin-items .is-delivered small { color: #1f6a34; }
[data-skin='parchment'] .coin-items :is(.is-failed, .is-canceled) small { color: #8a2a1a; }

@media (max-width: 760px) {
  .coin-split { grid-template-rows: none; }
  .coin-scroll { flex: none; max-height: 26rem; }
}
@media (prefers-reduced-motion: reduce) { .coin-list > li.is-arriving { animation: none; } }
[data-skin='parchment'] .coin-list .is-in { color: #1f6a34; }
[data-skin='parchment'] .coin-list .is-out { color: #8a2a1a; }
[data-skin='parchment'] .coin-items > li.is-pending small::before { background: #b07a12; box-shadow: none; }

/* Buy with Zen: the characters as portraits with their Zen and where each is, the amount or a pack as choices, the sum,
   a confirmation, and the site's loader while the game takes it */
.coin-zen { margin: 0 0 28px; }
.coin-zen-lead { max-width: 760px; margin: -4px 0 14px; font-size: 14px; }
.coin-zen-form { display: grid; gap: 10px; }
.coin-zen-form .modal-label { margin: 4px 0 0; }
.zen-chars, .zen-choice { display: flex; flex-wrap: wrap; gap: 10px; }
.zen-char, .zen-pick { position: relative; cursor: pointer; }
.zen-char input, .zen-pick > input { position: absolute; opacity: 0; pointer-events: none; }
.zen-char { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; transition: border-color 160ms, background 160ms; }
.zen-char img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.zen-char-text { display: grid; gap: 1px; line-height: 1.25; }
.zen-char-text b { font-size: 14px; }
.zen-held { color: #ffd76a; font-size: 13px; font-variant-numeric: tabular-nums; }
.zen-held small, .zen-state { color: var(--text-2); font-size: 11px; }
.zen-dot { display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: #6b7280; vertical-align: 1px; }
.zen-char.is-online .zen-dot { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); }
.zen-char.is-busy .zen-dot { background: #f5b942; }
.zen-char.is-busy, .zen-char.is-unknown { opacity: 0.6; }
.zen-char:has(input:checked), .zen-pick:has(> input:checked) .zen-pick-face { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.16); opacity: 1; }
.zen-char:has(input:focus-visible), .zen-pick:has(> input:focus-visible) .zen-pick-face { outline: 1px solid var(--accent-hot); outline-offset: 2px; }
.zen-pick-face { display: grid; gap: 4px; min-width: 150px; height: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; transition: border-color 160ms, background 160ms; }
.zen-pick-label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.zen-pick-label em { color: #8dd88a; font-size: 12px; font-style: normal; }
.zen-pick-face b { color: #ffd76a; font-variant-numeric: tabular-nums; }
.zen-pick-face small { color: var(--text-2); font-size: 12px; }
.zen-amount { display: flex; align-items: center; gap: 8px; }
.zen-amount .input { width: 120px; }
.zen-sum { margin: 2px 0 0; color: var(--text-1); font-size: 15px; }
.zen-sum.is-bad { color: #ff8a7a; }
.zen-go, .zen-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.zen-confirm { padding: 12px 14px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 12px; background: rgba(var(--accent-rgb), 0.1); }
.zen-confirm p { flex: 1 1 260px; margin: 0; font-weight: 600; }
.zen-confirm span { display: flex; gap: 8px; }
.zen-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(74, 222, 128, 0.1); color: #8dd88a; }
.zen-note.is-error { background: rgba(255, 110, 90, 0.1); color: #ff8a7a; }
.zen-wait { justify-items: start; text-align: start; grid-template-columns: auto 1fr; align-items: center; }
.zen-wait p { text-align: start; }
[data-skin='parchment'] :is(.zen-held, .zen-pick-face b) { color: #7a5410; }
[data-skin='parchment'] :is(.zen-char, .zen-pick-face) { border-color: rgba(74, 48, 22, 0.3); }
[data-skin='parchment'] .zen-sum.is-bad, [data-skin='parchment'] .zen-note.is-error { color: #8a2a1a; }
[data-skin='parchment'] .zen-note { color: #1f6a34; }
@media (max-width: 760px) { .zen-char, .zen-pick { flex: 1 1 100%; } .zen-wait { grid-template-columns: 1fr; justify-items: center; } }
.coin-zen [hidden] { display: none !important; }