/* The exchange as a fair stall («Ярмарковий прилавок», exchange-picker.js) in the card picker's frame (card-picker.js,
   play.css): a striped awning with a scalloped edge, the stall's sign hanging from it, a wooden counter with three
   sockets for the cards to give up and the trader's two golden jokers at its end, the rest of the hand under it; on
   the trade an embroidered cloth (a rushnyk) covers the three cards and the jokers fly to the hand. The era gives the
   awning and the wood — the Cart Era red canvas and oak, the Steam Rail Era green canvas and walnut with an iron
   edge; the dark theme dims them. */
.cp.xs {
  --xs-a: #b8432f; --xs-b: #f3e7cc; --xs-sh: rgba(70, 30, 10, .28);
  --xs-wood: #c08c52; --xs-wood2: #a7733c; --xs-front: #7f5226; --xs-front2: #64401d; --xs-edge: #e2c08c; --xs-grain: rgba(90, 50, 18, .14);
  --xs-chalk: rgba(255, 248, 230, .82); --xs-sign: #6e4421; --xs-sign-ink: #fbefd3;
  border-top: 0; overflow: hidden; padding-top: 0;
  background: linear-gradient(to bottom, rgba(70, 40, 15, .1), transparent 70px), var(--panel); }
:root[data-ui-era="rail"] .cp.xs {
  --xs-a: #2f5c49; --xs-b: #efe4c6;
  --xs-wood: #8a5f3a; --xs-wood2: #74492a; --xs-front: #4f3320; --xs-front2: #3e2717; --xs-edge: #9aa3a6; --xs-sign: #2f3b3c; --xs-sign-ink: #f1e6cc; }
:root[data-theme="dark"] .cp.xs {
  --xs-a: #8a3428; --xs-b: #d7c9a6; --xs-sh: rgba(0, 0, 0, .45);
  --xs-wood: #6f4b2c; --xs-wood2: #5b3b20; --xs-front: #3e2816; --xs-front2: #2f1e10; --xs-edge: #a8875a; --xs-grain: rgba(0, 0, 0, .2);
  --xs-chalk: rgba(245, 236, 214, .62); --xs-sign: #4a2f18;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .25), transparent 70px), var(--panel); }
:root[data-theme="dark"][data-ui-era="rail"] .cp.xs { --xs-a: #29493c; --xs-b: #cbbf9e; --xs-wood: #5d4129; --xs-wood2: #4b3220; --xs-edge: #7b8487; --xs-sign: #273133; }

/* the awning: canvas stripes, a scalloped valance */
.xs-awning { position: relative; z-index: 2; flex: none; height: 24px; background: repeating-linear-gradient(90deg, var(--xs-a) 0 28px, var(--xs-b) 28px 56px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), inset 0 6px 8px -4px rgba(255, 255, 255, .25); }
.xs-awning::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 13px; filter: drop-shadow(0 3px 2px var(--xs-sh));
  background: radial-gradient(circle at 14px 0, var(--xs-a) 13.5px, transparent 14px) 0 0 / 56px 14px repeat-x,
    radial-gradient(circle at 42px 0, var(--xs-b) 13.5px, transparent 14px) 0 0 / 56px 14px repeat-x; }

/* the sign: a board on two ropes */
.cp.xs .xs-head { display: flex; justify-content: center; align-items: flex-start; padding: 16px 48px 2px; }
.xs-sign { position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 18px 7px 10px; border-radius: 5px; color: var(--xs-sign-ink);
  background: repeating-linear-gradient(178deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px), linear-gradient(var(--xs-sign), color-mix(in srgb, var(--xs-sign) 80%, #000));
  box-shadow: 0 4px 9px rgba(30, 15, 5, .3), inset 0 0 0 1px rgba(255, 230, 190, .22), inset 0 0 0 3px rgba(0, 0, 0, .12); }
.xs-rope { position: absolute; bottom: 100%; width: 2px; height: 14px; background: repeating-linear-gradient(170deg, #c9a874 0 2px, #8a6a3a 2px 4px); }
.xs-rope.l { left: 22px; }
.xs-rope.r { right: 22px; }
.xs-hico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 240, 210, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 236, 200, .45); }
.xs-hico .ico { width: 22px; height: 22px; color: var(--xs-sign-ink); }
.xs-st { min-width: 0; }
.xs-sign .kicker { display: block; color: color-mix(in srgb, var(--xs-sign-ink) 72%, transparent); letter-spacing: .26em; }
.cp.xs .xs-sign h3 { margin: 0; font-family: var(--f-title); font-size: 19px; font-weight: 600; line-height: 1.15; color: var(--xs-sign-ink); }
.cp.xs .cp-x { z-index: 3; top: 30px; }
.cp.xs .cp-body { padding: 8px 18px 10px; }
.xs-lead { margin: 4px auto 12px; max-width: 560px; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* the counter: the top with the sockets and the trader's goods, the front planks under it */
.xs-stall { width: max-content; max-width: 100%; margin: 0 auto; filter: drop-shadow(0 8px 10px rgba(40, 20, 5, .22)); }
.xs-top { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px 14px; border-radius: 7px 7px 0 0;
  background: repeating-linear-gradient(177deg, var(--xs-grain) 0 1.5px, transparent 1.5px 9px), radial-gradient(120% 140% at 30% 0%, rgba(255, 240, 210, .18), transparent 60%),
    linear-gradient(var(--xs-wood), var(--xs-wood2));
  box-shadow: inset 0 2px 0 rgba(255, 235, 200, .25), inset 0 -3px 0 var(--xs-edge); }
.xs-front { height: 20px; border-radius: 0 0 6px 6px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .32) 0 1.5px, transparent 1.5px 72px), linear-gradient(var(--xs-front), var(--xs-front2)); }
/* the sockets: chalk outlines on the wood (app.js lights them under a card dragged from the hand: .drop-hot) */
.cp.xs .xs-socks { position: relative; margin: 0; padding: 0; gap: 12px; background: none; box-shadow: none; border-radius: 6px; }
.cp.xs .xs-socks.drop-hot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--target) 75%, transparent), 0 0 22px color-mix(in srgb, var(--target) 55%, transparent); }
.cp.xs .xp-place:not(.full)::before { border: 2px dashed var(--xs-chalk); border-radius: 7px; background: rgba(0, 0, 0, .1); }
.cp.xs .xp-n { color: var(--xs-chalk); font-family: var(--f-title); }
/* (a card lies on the wood: its shadow falls on the counter — the card itself stays as in the hand) */
.cp.xs .xp-place.full .cp-slot { filter: drop-shadow(0 5px 5px rgba(30, 15, 5, .3)); }
/* the trader's goods: the two jokers on show, a little fanned, with a price tag */
.xs-arrow { font: 600 22px/1 var(--f-title); color: var(--xs-chalk); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.xs-goods { position: relative; display: flex; align-items: flex-end; padding: 6px 8px 4px; border-radius: 6px; background: rgba(0, 0, 0, .14); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .2); }
.xs-jk { position: relative; transform: rotate(calc(-4deg + var(--i) * 8deg)) translateY(calc(var(--i) * 3px)); transform-origin: 50% 100%; }
.xs-jk + .xs-jk { margin-left: -22px; }
.xs-jk { filter: drop-shadow(0 4px 5px rgba(30, 15, 5, .3)); }
.xs-jk .hcard, .cp.xs .xs-jk .hcard:hover { margin: 0; transform: none; } /* (on show: the sheen, no lift) */
.xs-tag { position: absolute; z-index: 2; top: -12px; right: -14px; padding: 3px 9px 3px 13px; border-radius: 3px 6px 6px 3px; transform: rotate(9deg);
  background: #f7eccd; color: #7a2c1c; font: 700 13px/1.2 var(--f-title); white-space: nowrap; box-shadow: 0 2px 4px rgba(30, 15, 5, .35), inset 0 0 0 1px rgba(122, 44, 28, .3); }
.xs-tag::before { content: ''; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(122, 44, 28, .4); }
.cp.xs .xp-how { margin: 12px 0 14px; }

/* the cloth: linen with an embroidered band near each end and a fringe; it comes down on the trade */
.xs-cloth { position: absolute; z-index: 4; inset: -8px -12px -6px; opacity: 0; pointer-events: none; border-radius: 3px 3px 6px 6px; transform-origin: 50% 0;
  background: linear-gradient(90deg, rgba(90, 70, 40, .1), transparent 14%, rgba(255, 255, 255, .25) 30%, rgba(90, 70, 40, .08) 44%, transparent 56%, rgba(90, 70, 40, .1) 72%, rgba(255, 255, 255, .2) 86%, rgba(90, 70, 40, .12)),
    linear-gradient(transparent 0 calc(100% - 22px), #a51f17 calc(100% - 22px) calc(100% - 20px), transparent calc(100% - 20px) calc(100% - 17px), #a51f17 calc(100% - 17px) calc(100% - 16px), transparent calc(100% - 16px)),
    repeating-linear-gradient(0deg, rgba(150, 130, 90, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(150, 130, 90, .06) 0 1px, transparent 1px 3px), #f7f1e2;
  box-shadow: 0 12px 20px rgba(30, 15, 5, .4), inset 0 0 0 1px rgba(150, 120, 70, .25), inset 0 -3px 6px rgba(90, 60, 20, .12); }
.xs-cloth::before, .xs-cloth::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9px; background: repeating-linear-gradient(180deg, #efe5cb 0 2px, transparent 2px 5px); }
.xs-cloth::before { left: -8px; }
.xs-cloth::after { right: -8px; }
.xs-band { position: absolute; top: 0; bottom: 0; width: 36px;
  background: linear-gradient(90deg, #a51f17 0 2px, transparent 2px 5px, #26201c 5px 6px, transparent 6px calc(100% - 6px), #26201c calc(100% - 6px) calc(100% - 5px), transparent calc(100% - 5px) calc(100% - 2px), #a51f17 calc(100% - 2px)),
    repeating-conic-gradient(from 45deg, #b8261c 0 25%, transparent 0 50%) 50% 0 / 11px 11px; }
.xs-band.l { left: 14px; }
.xs-band.r { right: 14px; }
.cp.xs.xs-trading .cp-cards, .cp.xs.xs-trading .xp-how { opacity: .5; transition: opacity .3s; }
/* a joker on its way to the hand */
.xs-fly { position: fixed; z-index: 85; pointer-events: none; transform-origin: 0 0; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .32)); }
.xs-fly .hcard { margin: 0; transform: none; }

@media (max-width: 760px) {
  .cp.xs .xs-head { padding: 14px 44px 0; }
  .xs-sign { padding: 5px 12px 6px 8px; gap: 8px; }
  .xs-hico { width: 30px; height: 30px; }
  .cp.xs .xs-sign h3 { font-size: 16.5px; }
  .cp.xs .cp-x { top: 26px; }
  .cp.xs .cp-body { padding: 6px 8px 8px; }
  .xs-lead { margin: 2px auto 10px; font-size: 12px; }
  .xs-top { gap: 10px; padding: 12px 10px 12px; }
  .cp.xs .xs-socks { gap: 6px; }
  .xs-arrow { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .cp.xs.xs-trading .cp-cards { transition: none; } }