/* A chest opened at the door (Bazaar.cs, ChestOpening) and the shah's letter (DoorLetter.cs).
   Sizes are shares of the screen's height, as the game measures them. */

/* ---- the band's chests as things to press ---- */

.menu .band .chest:not(:disabled):hover img { filter: brightness(1.12); }
.menu .band .chest:disabled { cursor: default; }

.menu .band .chest .many {
    position: absolute;
    right: 0;
    top: 0;
    min-width: calc(var(--tall) * 0.28);
    height: calc(var(--tall) * 0.28);
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #1c1a2f;
    color: #fbdeb4;
    font-size: calc(var(--tall) * 0.18);
    font-weight: 800;
}

/* The letter glows while a decree is done and not paid. */
.menu .band .letter.glows::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--tall) * 0.9);
    height: calc(var(--tall) * 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(226, 182, 74, 0.45), rgba(226, 182, 74, 0));
    animation: letter-glow 2.6s ease-in-out infinite;
}

@keyframes letter-glow {
    50% { opacity: 0.35; }
}

/* ---- the opening ---- */

.menu .opening {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    background: rgba(10, 8, 5, 0.8);
    overflow: hidden;
    cursor: pointer;
}

.menu .opening.on { display: block; }

.menu .opening .chest,
.menu .opening .flying { position: absolute; pointer-events: none; }

.menu .opening .glow {
    position: absolute;
    left: 50%;
    top: 52%;
    width: calc(110 * var(--h));
    height: calc(110 * var(--h));
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 217, 115, 0.55), rgba(255, 217, 115, 0) 70%);
    opacity: 0;
    pointer-events: none;
}

.menu .opening .called {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(84 * var(--h));
    text-align: center;
    font-size: calc(4.5 * var(--h));
    font-weight: 800;
    color: #e2b64a;
}

.menu .opening .called.low { top: calc(93 * var(--h)); font-size: calc(3.4 * var(--h)); }
.menu .opening .called.refused { font-size: calc(3.2 * var(--h)); font-weight: 400; color: #f6e6c0; }

.menu .opening .sum {
    position: absolute;
    left: 50%;
    top: calc(83 * var(--h));
    opacity: 0;
    text-align: center;
    pointer-events: none;
}

.menu .opening .sum .sum-row { display: flex; align-items: center; gap: calc(1 * var(--h)); justify-content: center; }
.menu .opening .sum img { width: calc(7 * var(--h)); height: calc(7 * var(--h)); }

.menu .opening .sum b {
    font-size: calc(8.5 * var(--h));
    font-weight: 800;
    color: #e2b64a;
    -webkit-text-stroke: max(4px, calc(8.5 * var(--h) / 8)) rgba(31, 15, 5, 0.9);
    paint-order: stroke fill;
}

.menu .opening .sum small { display: block; font-size: calc(3.2 * var(--h)); color: #f6e6c0; }

/* The purse over the door's own, counting up as the coins land. */
.menu .opening .wallet {
    position: absolute;
    display: flex;
    align-items: center;
    gap: calc(var(--plaque-h) * 0.2);
    box-sizing: border-box;
    padding: 0 calc(var(--plaque-h) * 0.53) 0 calc(var(--plaque-h) * 0.5);
    border-image: url("../art/kit/button-plain.png") 0 115 fill / 0 calc(var(--plaque-h) * 0.5) stretch;
    color: #16234f;
    pointer-events: none;
}

.menu .opening .wallet img { width: calc(var(--plaque-h) * 0.56); height: calc(var(--plaque-h) * 0.56); }
.menu .opening .wallet b { font-size: calc(var(--plaque-h) * 0.42); font-weight: 800; }
.menu .opening .wallet.bump { animation: bump 0.15s ease-out; }

@keyframes bump {
    50% { transform: scale(1.15); }
}

/* One thing the chest held, on a panel in the middle. */
.menu .opening .shown {
    position: absolute;
    left: 50%;
    top: calc(52 * var(--h));
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.menu .opening .shown .card {
    --wide: min(calc(60 * var(--h)), calc(var(--w) * 0.8));
    width: var(--wide);
    height: calc(var(--wide) * 0.62);
    box-sizing: border-box;
    padding: calc(var(--wide) * 0.05);
    display: grid;
    grid-template-rows: 1fr auto auto;
    justify-items: center;
    align-items: center;
    border-radius: calc(var(--wide) * 0.04);
    background: #f5e8c9;
    border: max(2px, calc(var(--wide) * 0.008)) solid #b0935e;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
    color: #2a1d10;
    text-align: center;
}

.menu .opening .shown img { max-width: 60%; max-height: calc(var(--wide) * 0.32); object-fit: contain; }
.menu .opening .shown img.round { border-radius: 50%; border: calc(0.4 * var(--h)) solid #e2b64a; }
.menu .opening .shown b { font-size: calc(var(--wide) * 0.08); font-weight: 800; }
.menu .opening .shown small { font-size: calc(var(--wide) * 0.047); color: #6b5332; }

.menu .opening .hint {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(93 * var(--h));
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: rgba(246, 230, 192, 0.7);
    pointer-events: none;
}

/* ---- the shah's letter ---- */

.menu .letter-veil {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: rgba(4, 14, 9, 0.55);
    animation: open 0.15s ease-out;
}

.menu .letter-card {
    --wide: min(calc(var(--w) - 10 * var(--h)), max(calc(115 * var(--h)), calc(var(--w) * 0.62)));
    position: absolute;
    left: 50%;
    top: calc(5 * var(--h));
    width: var(--wide);
    height: calc(90 * var(--h));
    transform: translateX(-50%);
    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);
    color: #2a1d10;
    cursor: default;
}

/* The way back, the kit's ivory pill with a navy arrow. */
.menu .letter-card .back {
    position: absolute;
    left: calc(8.5 * var(--h));
    top: calc(3 * var(--h));
    height: calc(7.8 * var(--h));
    min-width: calc(24 * var(--h));
    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: #16234f;
    font-size: calc(3 * var(--h));
    font-weight: 800;
    z-index: 2;
}

.menu .letter-card .back i {
    width: calc(1.8 * var(--h));
    height: calc(1.8 * var(--h));
    border-left: calc(0.6 * var(--h)) solid #16234f;
    border-bottom: calc(0.6 * var(--h)) solid #16234f;
    transform: rotate(45deg);
}

.menu .letter-card .banner {
    position: absolute;
    left: calc(5 * var(--h));
    right: calc(5 * var(--h));
    top: calc(11 * var(--h));
    height: calc(13 * var(--h));
}

.menu .letter-card .banner img {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
}

.menu .letter-card .banner h2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22%;
    margin: 0;
    text-align: center;
    font-size: calc(5 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1f3f8f;
}

.menu .letter-card .rows {
    position: absolute;
    left: calc(5 * var(--h));
    right: calc(5 * var(--h));
    top: calc(29 * var(--h));
    bottom: calc(7.5 * var(--h));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: calc(1.2 * var(--h));
    padding-right: calc(1 * var(--h));
}

.menu .letter-card h3 {
    margin: calc(0.6 * var(--h)) 0 0;
    font-size: calc(3.6 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #1f3f8f;
}

.menu .letter-card .rule {
    flex: none;
    height: calc(3 * var(--h));
    background:
        radial-gradient(circle, #bf2a26 0 calc(0.9 * var(--h)), #e2b64a calc(0.9 * var(--h)) calc(1.2 * var(--h)), transparent calc(1.2 * var(--h))) center / calc(3 * var(--h)) 100% no-repeat,
        linear-gradient(#e2b64a, #e2b64a) center / 100% 1.5px no-repeat;
}

.menu .letter-card .waiting { margin: auto; font-size: calc(3 * var(--h)); color: #6b5332; }

.menu .letter-card .decree {
    --row: calc(8.5 * var(--h));
    flex: none;
    height: var(--row);
    display: grid;
    grid-template-columns: calc(var(--row) * 0.86) 2fr 1.36fr 0.56fr calc(24 * var(--h));
    align-items: center;
    gap: calc(1.5 * var(--h));
    padding: 0 calc(1.5 * var(--h)) 0 calc(var(--row) * 0.14);
    border-radius: calc(1.2 * var(--h));
    background: #f7ecd2;
    border: max(1px, calc(0.2 * var(--h))) solid #e2b64a;
}

.menu .letter-card .motif {
    width: calc(var(--row) * 0.72);
    height: calc(var(--row) * 0.72);
    border-radius: 50%;
    background: #f6e6c0;
    box-shadow: inset 0 0 0 calc(var(--row) * 0.05) #1f3f8f;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.menu .letter-card .motif img { width: 86%; height: 86%; object-fit: contain; }
.menu .letter-card .decree.paid .motif img { opacity: 0.5; }

.menu .letter-card .sentence { font-size: calc(3 * var(--h)); line-height: 1.15; }
.menu .letter-card .decree.paid .sentence { color: #6b5332; }

.menu .letter-card .bar {
    height: calc(1.8 * var(--h));
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #e2b64a;
    background: rgba(107, 83, 50, 0.22);
    overflow: hidden;
}

.menu .letter-card .bar i { display: block; height: 100%; background: #e2b64a; border-radius: 999px; }
.menu .letter-card .count { font-size: calc(2.6 * var(--h)); color: #6b5332; text-align: center; white-space: nowrap; }

.menu .letter-card .end { display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--h)); }

.menu .letter-card .take {
    width: 100%;
    height: calc(var(--row) * 0.66);
    background: url("../art/kit/button-main.png") center / 100% 100% no-repeat;
    color: #f6ecd4;
    font-size: calc(2.8 * var(--h));
    font-weight: 800;
}

.menu .letter-card .paid { font-size: calc(2.6 * var(--h)); color: #6b5332; }
.menu .letter-card .coins { display: flex; align-items: center; gap: calc(0.6 * var(--h)); }
.menu .letter-card .coins b { font-size: calc(3 * var(--h)); font-weight: 800; color: #1f3f8f; }
.menu .letter-card .coins img { width: calc(3.2 * var(--h)); height: calc(3.2 * var(--h)); }

.menu .letter-card .swap {
    width: calc(var(--row) * 0.6);
    height: calc(var(--row) * 0.6);
    border-radius: 50%;
    background: #1f3f8f;
    box-shadow: inset 0 0 0 calc(0.25 * var(--h)) #e2b64a;
    display: grid;
    place-items: center;
}

.menu .letter-card .swap svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.menu .letter-card .foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.2 * var(--h));
    margin: 0;
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: #6b5332;
}

.menu .letter-card .foot.trouble { color: #bf2a26; }

[dir="rtl"] .menu .letter-card .rows,
[dir="rtl"] .menu .letter-card .foot,
[dir="rtl"] .menu .letter-card h3 { direction: rtl; }
[dir="rtl"] .menu .letter-card h3,
[dir="rtl"] .menu .letter-card .banner h2 { letter-spacing: 0; }
[dir="rtl"] .menu .opening .shown .card { direction: rtl; }