/* The bazaar (Bazaar.cs): card tabs standing on a cream panel over the bazaar's ground. Sizes are
   shares of the screen's height, as the game measures them. */

.bazaar {
    --ink: #2a1d10;
    --soft: #6b5332;
    --cobalt: #1f3f8f;
    --navy: #16234f;
    --on-navy: #f6ecd4;
    --panel-top: calc(28.5 * var(--h));
    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: url("../art/bazaar/ground.jpg") center / cover;
    color: var(--ink);
    font-family: "Alegreya", Georgia, serif;
    user-select: none;
    -webkit-user-select: none;
}

.bazaar button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.bazaar button:disabled { cursor: default; }
.bazaar img { display: block; pointer-events: none; }

/* The way back: the kit's ivory pill with a navy arrow. */
.bazaar .back-pill {
    position: absolute;
    left: calc(3 * var(--h));
    top: calc(3 * var(--h));
    height: calc(7.8 * var(--h));
    min-width: calc(24 * var(--h));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(1.4 * var(--h));
    padding: 0 calc(3.5 * var(--h)) 0 calc(3.4 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/button-plain.png") 0 115 fill / 0 calc(3.9 * var(--h)) stretch;
    color: var(--navy);
    font-size: calc(3 * var(--h));
    font-weight: 800;
}

.bazaar .back-pill i {
    width: calc(1.8 * var(--h));
    height: calc(1.8 * var(--h));
    border-left: calc(0.6 * var(--h)) solid var(--navy);
    border-bottom: calc(0.6 * var(--h)) solid var(--navy);
    transform: rotate(45deg);
}

.bazaar .title {
    position: absolute;
    left: calc(31 * var(--h));
    top: calc(3.6 * var(--h));
    margin: 0;
    font-size: calc(5 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #f7ecd2;
    -webkit-text-stroke: max(3px, calc(5 * var(--h) / 12)) #1e1712;
    paint-order: stroke fill;
}

.bazaar .purse {
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(3 * var(--h));
    height: calc(7.8 * var(--h));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(1.6 * var(--h));
    padding: 0 calc(4.1 * var(--h)) 0 calc(3.9 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/button-plain.png") 0 115 fill / 0 calc(3.9 * var(--h)) stretch;
    color: var(--navy);
}

.bazaar .purse img { width: calc(4.4 * var(--h)); height: calc(4.4 * var(--h)); }
.bazaar .purse b { font-size: calc(3.3 * var(--h)); font-weight: 800; }

/* The panel the shelves stand on, the kit's paper with a sun in each corner. */
.bazaar .panel {
    position: absolute;
    left: calc(4.5 * var(--h));
    right: calc(4.5 * var(--h));
    top: var(--panel-top);
    height: calc(67 * var(--h));
    box-sizing: border-box;
    border-radius: calc(1.6 * var(--h));
    background:
        url("../art/kit/sun.png") calc(1.2 * var(--h)) calc(1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(100% - 1.2 * var(--h)) calc(1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(1.2 * var(--h)) calc(100% - 1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        url("../art/kit/sun.png") calc(100% - 1.2 * var(--h)) calc(100% - 1.2 * var(--h)) / calc(6 * var(--h)) no-repeat,
        #f5e8c9;
    border: max(2px, calc(0.45 * var(--h))) solid #b0935e;
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* The shelves as card tabs standing behind the panel's top edge; the chosen one in front. */
.bazaar .tabs {
    --card: calc(13 * var(--h));
    position: absolute;
    left: calc(8 * var(--h));
    top: calc(var(--panel-top) - var(--card) * 1.36 + 4 * var(--h));
    display: flex;
    gap: calc(1.8 * var(--h));
    z-index: 0;
}

.bazaar .tab {
    position: relative;
    width: var(--card);
    height: calc(var(--card) * 1.36);
    box-sizing: border-box;
    border-radius: calc(var(--card) * 0.08);
    background: #fdfbf5;
    border: calc(var(--card) * 0.02) solid rgba(22, 35, 79, 0.7);
    box-shadow: 0 calc(var(--card) * 0.016) calc(var(--card) * 0.04) rgba(0, 0, 0, 0.25);
    transition: transform 0.12s;
}

.bazaar .tab:not(.chosen):not(:disabled):hover { transform: translateY(-6%); }

.bazaar .tab img {
    position: absolute;
    left: 50%;
    top: 33%;
    width: calc(var(--card) * 0.5);
    height: calc(var(--card) * 0.5);
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.bazaar .tab span {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 58%;
    text-align: center;
    font-size: calc(2.1 * var(--h));
    line-height: 1.1;
}

.bazaar .tab.chosen {
    z-index: 2;
    border: calc(var(--card) * 0.028) solid var(--navy);
    box-shadow: 0 0 calc(var(--card) * 0.09) rgba(255, 245, 209, 0.75);
    transform-origin: 50% 100%;
    transform: translateY(calc(-2.5 * var(--h))) rotate(-4deg) scale(1.1);
}

.bazaar .tab.chosen span { font-weight: 800; color: var(--navy); }
.bazaar .tab.quiet { opacity: 0.55; }

/* The shelf's heading between two gold rules, and the line under it. */
.bazaar .panel header {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(3.2 * var(--h));
    text-align: center;
}

.bazaar .panel h2 {
    margin: 0 auto;
    width: 80%;
    display: flex;
    align-items: center;
    gap: calc(2 * var(--h));
    font-size: calc(3.4 * var(--h));
    font-weight: 400;
    color: var(--ink);
}

.bazaar .panel h2 span { white-space: nowrap; }

.bazaar .panel h2 i {
    flex: 1;
    height: 1.5px;
    background: #a8741a;
    position: relative;
}

.bazaar .panel h2 i::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(1 * var(--h));
    height: calc(1 * var(--h));
    background: #a8741a;
    transform: translateY(-50%) rotate(45deg);
}

.bazaar .panel h2 i:first-child::after { left: 0; }
.bazaar .panel h2 i:last-child::after { right: 0; }
.bazaar .panel header p { margin: calc(0.4 * var(--h)) 0 0; font-size: calc(2.4 * var(--h)); color: var(--soft); }

.bazaar .goods {
    position: absolute;
    left: calc(6 * var(--h));
    right: calc(6 * var(--h));
    top: calc(14 * var(--h));
    bottom: calc(7.5 * var(--h));
    overflow-y: auto;
}

.bazaar .empty { margin: calc(12 * var(--h)) 0 0; text-align: center; font-size: calc(3 * var(--h)); color: var(--soft); }

/* The goods on a shelf: up to five across, as tall as the shelf allows. */
.bazaar .cards {
    --gap: calc(3.5 * var(--h));
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap);
}

.bazaar .cards.with-limited { height: auto; }
.bazaar .cards.packs { flex-wrap: wrap; height: auto; align-items: flex-start; }

.bazaar .card {
    position: relative;
    width: min(calc(42 * var(--h)), calc((100% - var(--gap) * (var(--across) - 1)) / var(--across)));
    box-sizing: border-box;
    padding: calc(1.6 * var(--h)) calc(1.6 * var(--h)) calc(1.4 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.8 * var(--h));
    border-radius: calc(1.8 * var(--h));
    background: #fbf4e2;
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
}

.bazaar .cards.packs .card { width: calc(30 * var(--h)); height: calc(30 * var(--h)); }

.bazaar .card .name { font-size: calc(2.8 * var(--h)); font-weight: 800; color: var(--cobalt); text-align: center; line-height: 1.15; }
.bazaar .card small { font-size: calc(2.2 * var(--h)); color: var(--soft); }

.bazaar .rarity.common { color: var(--soft); }
.bazaar .rarity.rare { color: var(--cobalt); }
.bazaar .rarity.epic { color: #7a2e8c; }
.bazaar .rarity.legendary { color: #a8741a; }
.bazaar .rarity.limited { color: #e2506a; }
.bazaar b.rarity { font-size: calc(2.2 * var(--h)); font-weight: 800; }

/* A face in its oval window with a gold edge; faces are never named. */
.bazaar .oval {
    flex: 1;
    width: 72%;
    max-height: calc(36 * var(--h));
    border-radius: 50%;
    overflow: hidden;
    border: calc(0.5 * var(--h)) solid #e2b64a;
    box-shadow: 0 0 0 1px #3a2a12;
}

.bazaar .oval img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.bazaar .card .back {
    flex: none;
    height: calc(26 * var(--h));
    max-width: 80%;
    object-fit: contain;
    border-radius: calc(1 * var(--h));
}

.bazaar .flourish {
    position: relative;
    flex: 1;
    min-height: 0;
    aspect-ratio: 0.72;
}

.bazaar .flourish > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.bazaar .flourish > img { object-fit: contain; }

.bazaar .table-picture {
    flex: 1;
    width: 90%;
    min-height: calc(8 * var(--h));
    border-radius: calc(1 * var(--h));
    background: center / cover;
    display: grid;
    place-items: center;
}

.bazaar .table-picture img { height: 60%; }

.bazaar .card .thing { height: calc(10 * var(--h)); }

/* The pills at a good's foot: the navy one pays, the ivory one wears, the gold one is yours. */
.bazaar .pill {
    width: 84%;
    height: calc(6.6 * var(--h));
    flex: none;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(0.8 * var(--h));
    font-size: calc(2.8 * var(--h));
    font-weight: 800;
}

.bazaar .pill.pay { background: url("../art/kit/button-main.png") center / 100% 100% no-repeat; color: var(--on-navy); }
.bazaar .pill.pay img { width: calc(3.6 * var(--h)); height: calc(3.6 * var(--h)); }
.bazaar .pill.pay.armed { font-size: calc(2.2 * var(--h)); }
.bazaar .pill.pay:disabled { opacity: 0.55; }

.bazaar .pill.plain {
    width: 60%;
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/button-plain.png") 0 115 fill / 0 calc(3.3 * var(--h)) stretch;
    color: var(--navy);
    font-size: calc(2.4 * var(--h));
}

.bazaar .pill.plain:disabled { opacity: 0.6; }

.bazaar .pill.mine {
    border-radius: 999px;
    background: #e2b64a;
    color: var(--navy);
}

/* The limited ones, under the week's three. */
.bazaar .limited { margin-top: calc(2.4 * var(--h)); text-align: center; }
.bazaar .limited h3 { margin: 0; font-size: calc(3 * var(--h)); color: #e2506a; }
.bazaar .limited p { margin: 0 0 calc(1.2 * var(--h)); font-size: calc(2.2 * var(--h)); color: var(--soft); }
.bazaar .limited .row { display: flex; justify-content: center; gap: calc(2 * var(--h)); }
.bazaar .card.small { width: calc(24 * var(--h)); height: calc(34 * var(--h)); }

.bazaar .foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(3 * var(--h));
    margin: 0;
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: var(--soft);
}

.bazaar .foot.trouble { color: #bf2a26; }

[dir="rtl"] .bazaar { font-family: "Vazirmatn", "Alegreya", Tahoma, sans-serif; }
[dir="rtl"] .bazaar .title { font-family: "Vazirmatn", sans-serif; letter-spacing: 0; }
[dir="rtl"] .bazaar .panel,
[dir="rtl"] .bazaar .back-pill { direction: rtl; }
[dir="rtl"] .bazaar .tab.chosen { transform: translateY(calc(-2.5 * var(--h))) rotate(4deg) scale(1.1); }

/* Turned on its side on a phone held upright, as the door is. */
@media (orientation: portrait) {
    .bazaar { top: 50dvh; width: 100vw; transform: translateY(-50%); box-shadow: 0 0 0 100vmax #000; }
}

@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .bazaar {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
        box-shadow: none;
    }
}

.bazaar .cards.with-limited .card .back { height: calc(15 * var(--h)); }
.bazaar .card.small .back { height: calc(15 * var(--h)); }
.bazaar .card.small .table-picture { flex: none; height: calc(12 * var(--h)); }