/* The page of my cards (MyCardsView.cs), over my page: the suits as standing cards behind the
   pack's panel, the suit's thirteen on it, and the sheet of the card picked on the right with the
   choice of what it wears and a small table playing it (FlourishPreview). Measured in shares of
   the screen's height as the game measures it. Its classes start with cd-. */

.mypage .cards-page {
    --pkw: calc(var(--w) * 0.56);
    --tw: min(calc(12.5 * var(--h)), calc((var(--pkw) * 0.75 - 3 * 1.6 * var(--h)) / 4));
    --cellw: calc((var(--pkw) - 13 * var(--h)) / 7);
    --cellh: calc(30 * var(--h));
    --cw: min(calc(var(--cellw) * 0.84), calc(var(--cellh) * 0.78 * 5 / 7));
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #2a1830 url("../art/grounds/cards.jpg") center / cover;
}

/* ---- a standing card for each suit behind the panel's top edge ---- */

.mypage .cd-suit {
    position: absolute;
    left: calc(6.5 * var(--h) + var(--i) * (var(--tw) + 1.6 * var(--h)));
    top: calc(32 * var(--h) - var(--tw) * 1.36);
    width: var(--tw);
    height: calc(var(--tw) * 1.36);
    z-index: 1;
}

[dir="rtl"] .mypage .cd-suit { left: calc(var(--pkw) - 0.5 * var(--h) - var(--tw) - var(--i) * (var(--tw) + 1.6 * var(--h))); }

.mypage .cd-suit .leaf {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    background: var(--tab-paper);
    border: max(1px, calc(var(--tw) * 0.02)) solid rgba(22, 35, 79, 0.7);
    border-radius: calc(var(--tw) * 0.08);
    box-shadow: 0 calc(var(--tw) * 0.016) calc(var(--tw) * 0.04) rgba(0, 0, 0, 0.25);
    transition: transform 0.12s;
}

.mypage .cd-suit:not(.on):hover .leaf { transform: translateY(-6%); }

/* The suit on show is picked up in front of the panel. */
.mypage .cd-suit.on { z-index: 3; transform-origin: 50% 100%; transform: translateY(calc(-2.5 * var(--h))) rotate(-4deg) scale(1.1); }
[dir="rtl"] .mypage .cd-suit.on { transform: translateY(calc(-2.5 * var(--h))) rotate(4deg) scale(1.1); }
.mypage .cd-suit.on .leaf { border: max(1px, calc(var(--tw) * 0.028)) solid var(--paper-ink); box-shadow: 0 0 calc(var(--tw) * 0.09) rgba(255, 245, 209, 0.75); }

.mypage .cd-suit img {
    position: absolute;
    left: 50%;
    top: 36%;
    height: 36%;
    max-width: 50%;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

/* How many of the suit's cards have a flourish and wear none. */
.mypage .cd-suit b {
    position: absolute;
    left: 0;
    right: 0;
    top: 70%;
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(var(--tw) * 1.36 * 0.17);
    line-height: 1;
    font-weight: 500;
    color: var(--ink);
}

.mypage .cd-suit.on b { font-weight: 800; color: var(--paper-ink); }

/* ---- the suit's thirteen ---- */

.mypage .cd-pack {
    left: calc(3 * var(--h));
    top: calc(28 * var(--h));
    width: var(--pkw);
    height: calc(68 * var(--h));
    padding: calc(4 * var(--h)) calc(6.5 * var(--h)) 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.mypage .cd-row { display: flex; justify-content: center; height: var(--cellh); }
[dir="rtl"] .mypage .cd-pack .cd-row { direction: rtl; flex-direction: row; }

.mypage .cd-cell { position: relative; width: var(--cellw); height: var(--cellh); flex: none; }

/* The card in the middle of its share above the mark (the game fits it in the cell's upper 78%). */
.mypage .cd-art {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    transition: transform 0.12s;
}

.mypage .cd-art .card { --wide: var(--cw); }
.mypage .cd-cell:hover .cd-art { transform: translate(-50%, -53%); }
.mypage .cd-cell.bare .cd-art { opacity: 0.42; filter: saturate(0.6); }

/* The card picked in the kit's navy line, as a lit card is. */
.mypage .cd-cell.picked .cd-art .card { outline: max(2px, calc(0.4 * var(--h))) solid var(--navy); outline-offset: calc(0.5 * var(--h)); }

/* The mark: navy for worn, a ring for owned, nothing for nothing. */
.mypage .cd-mark {
    position: absolute;
    left: 50%;
    top: 90%;
    width: calc(var(--cellw) * 0.14);
    height: calc(var(--cellw) * 0.14);
    box-sizing: border-box;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.mypage .cd-mark.owned { border: max(1px, calc(var(--cellw) * 0.021)) solid var(--ink-soft); }
.mypage .cd-mark.worn { background: var(--navy); border: max(1px, calc(var(--cellw) * 0.021)) solid var(--navy); }

/* ---- the card picked ---- */

.mypage .cd-sheet {
    left: calc(3 * var(--h) + var(--pkw) + 4 * var(--h));
    right: calc(3 * var(--h));
    top: calc(13 * var(--h));
    height: calc(83 * var(--h));
    padding: calc(3.5 * var(--h)) calc(7 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 2;
}

[dir="rtl"] .mypage .cd-sheet { direction: rtl; }

.mypage .cd-name {
    text-align: center;
    font-size: calc(3 * var(--h));
    line-height: 1.4;
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
    overflow: hidden;
}

.mypage .cd-none { margin-top: calc(1.5 * var(--h)); text-align: center; font-size: calc(2.6 * var(--h)); line-height: 1.5; color: var(--ink-soft); }

.mypage .cd-chips { display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--h)) calc(1.5 * var(--h)); margin-top: calc(1.8 * var(--h)); }

.mypage .cd-chip {
    --bh: calc(6 * var(--h));
    min-width: 0;
    padding: 0 calc(3.2 * var(--h));
    font-size: calc(2.6 * var(--h));
}

.mypage .cd-turns { margin-top: calc(1.2 * var(--h)); font-size: calc(2.6 * var(--h)); color: var(--ink-soft); }

/* The small table: the tile table's ground in a gold edge, one trick on it. */
.mypage .cd-play {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    margin-top: calc(1.8 * var(--h));
    container-type: size;
    border-radius: calc(2 * var(--h));
    border: max(1.5px, calc(0.3 * var(--h))) solid var(--gold);
    background: url("../art/table/ground.jpg") center / cover;
    box-shadow: inset 0 0 calc(2 * var(--h)) rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.mypage .cd-trick { position: absolute; inset: 0; }

.mypage .cd-trick .flourish-under,
.mypage .cd-trick .flourish-over {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.mypage .cd-trick .flourish-under { z-index: 0; }
.mypage .cd-trick .flourish-over { z-index: 5; }

.mypage .cd-laid {
    --wide: min(calc(34cqh * 5 / 7), 22cqw);
    position: absolute;
    left: calc(50cqw + var(--x));
    top: calc(50cqh + var(--y));
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--fx), var(--fy));
}

.mypage .cd-laid .card { --wide: min(calc(34cqh * 5 / 7), 22cqw); }
.mypage .cd-laid.place-0 { --x: 0cqh; --y: 19cqh; --fx: 0cqh; --fy: 45cqh; z-index: 2; }
.mypage .cd-laid.place-1 { --x: 26cqh; --y: 0cqh; --fx: 45cqh; --fy: 0cqh; }
.mypage .cd-laid.place-2 { --x: 0cqh; --y: -19cqh; --fx: 0cqh; --fy: -45cqh; }
.mypage .cd-laid.place-3 { --x: -26cqh; --y: 0cqh; --fx: -45cqh; --fy: 0cqh; }

/* Landing: thrown in from its chair's side; gathered, gone at once. */
.mypage .cd-laid.in { opacity: 1; transform: translate(-50%, -50%); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.15s; }

.mypage .cd-laid .flier { position: relative; transform: rotate(var(--r, 0deg)); }
.mypage .cd-laid.won .flier { animation: cd-rise 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes cd-rise {
    from { transform: rotate(var(--r, 0deg)) scale(1); }
    to { transform: rotate(var(--r, 0deg)) scale(1.12); }
}

.mypage .cd-caption {
    margin-top: calc(1 * var(--h));
    text-align: center;
    font-size: calc(2.4 * var(--h));
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
}

/* Nothing worn: the card stands there as it is. */
.mypage .cd-still { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.mypage .cd-still .card { --wide: min(calc(70cqh * 5 / 7), 40cqw); }
.mypage .cd-still.bare .card { opacity: 0.42; filter: saturate(0.6); }

/* ---- a card face on my page ----
   My page has a .face (my portrait), a .rank (my rank's row) and a .back (the way back) of its
   own, and a card's pieces carry the same names: here they are put back as the table draws them. */

.mypage .card > .face { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; flex: none; }
.mypage .card > img.back { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: 0; z-index: auto; visibility: hidden; }

.mypage .card > .rank {
    position: absolute;
    left: 13%;
    top: 9.75%;
    width: 22%;
    height: 10.5%;
    margin: 0;
    display: block;
    gap: 0;
    transform: translate(-50%, -50%);
}