/* The page of my card backs (BacksPage.cs), over my page: the niche of a world on the left with
   its backs on the shelf, the row of the worlds under it, and the sheet of the back picked on the
   right. Measured in shares of the screen's height as the game measures it; the niche is the
   painted one, in its own shape (1280 by 685). It is laid out the same way in every language:
   only the order of the backs on a shelf and of the worlds in the row turns round. Its classes
   start with bk-, since my page already has a .name, a .line, a .kind and a .shown of its own. */

.mypage .backs-page {
    /* The niche: as wide as its side of the page, never so tall that the row under it has no room. */
    --nw: min(calc(var(--w) * 0.56), calc(118 * var(--h)));
    --nh: calc(var(--nw) * 685 / 1280);
    --nx: calc(3 * var(--h));
    --ny: calc(16.5 * var(--h));

    position: absolute;
    inset: 0;
    z-index: 20;
    direction: ltr;
    background: #2b2418 url("../art/me/ground.jpg") center / cover;
}

/* ---- the niche, with the world's name on the plate over its arch ---- */

.mypage .bk-niche {
    position: absolute;
    left: var(--nx);
    top: var(--ny);
    width: var(--nw);
    height: var(--nh);
    touch-action: pan-y;
}

.mypage .bk-wall { position: absolute; inset: 0; width: 100%; height: 100%; }

.mypage .bk-plate {
    position: absolute;
    left: calc(var(--nw) * 0.365);
    top: calc(var(--nh) * 0.107);
    width: calc(var(--nw) * 0.27);
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(3.4 * var(--h));
    line-height: 1.2;
    font-weight: 800;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
}

/* The backs in one row on its floor: side by side up to five, more than five each a little over the one before. */
.mypage .bk-shelf {
    --high: min(calc(var(--nh) * 0.42 - 2.2 * var(--h)), calc(20 * var(--h)));
    --cw: calc(var(--high) * 5 / 7);
    --step: min(calc(var(--cw) * 1.13), calc((var(--nw) * 0.83 - var(--cw)) / max(var(--n) - 1, 1)));
    position: absolute;
    inset: 0;
}

.mypage .bk-on-shelf {
    position: absolute;
    left: calc(var(--nw) / 2 - (var(--cw) + var(--step) * (var(--n) - 1)) / 2 + var(--i) * var(--step));
    top: calc(var(--nh) * 0.835 - var(--high));
    width: var(--cw);
    height: var(--high);
    transition: transform 0.12s ease-out;
}

.mypage .bk-on-shelf img,
.mypage .bk-world img,
.mypage .bk-shown {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7% / 5%;
    box-shadow: 0 calc(0.4 * var(--h)) calc(0.9 * var(--h)) rgba(0, 0, 0, 0.45);
}

.mypage .bk-on-shelf:hover { transform: translateY(calc(-0.8 * var(--h))); }

/* The one picked stands forward, ringed in gold, in front of those it would be half behind. */
.mypage .bk-on-shelf.bk-picked { z-index: 1; transform: translateY(calc(-2.2 * var(--h))); }
.mypage .bk-on-shelf.bk-picked img { outline: max(2px, calc(0.5 * var(--h))) solid var(--gold); outline-offset: calc(0.5 * var(--h)); }

.mypage .bk-on-shelf .worn-tick { right: calc(1.2 * var(--h)); top: calc(1.2 * var(--h)); }
[dir="rtl"] .mypage .bk-on-shelf .worn-tick { right: auto; left: calc(1.2 * var(--h)); }

/* A new world's backs come onto the floor from the side it was leafed from. */
.mypage .bk-on-shelf.bk-from-right { animation: bk-onto-right 0.24s cubic-bezier(0.33, 1, 0.68, 1) backwards; animation-delay: calc(var(--i) * 25ms); }
.mypage .bk-on-shelf.bk-from-left { animation: bk-onto-left 0.24s cubic-bezier(0.33, 1, 0.68, 1) backwards; animation-delay: calc(var(--i) * 25ms); }

@keyframes bk-onto-right { from { transform: translateX(calc(9 * var(--h))); opacity: 0; } }
@keyframes bk-onto-left { from { transform: translateX(calc(-9 * var(--h))); opacity: 0; } }

/* ---- the arrows at the niche's sides ---- */

.mypage .bk-arrow-round {
    --across: calc(8.5 * var(--h));
    position: absolute;
    top: calc(var(--ny) + var(--nh) * 0.6 - var(--across) / 2);
    width: var(--across);
    height: var(--across);
    background: url("../art/kit/round-plain.png") center / contain no-repeat;
    z-index: 2;
}

.mypage .bk-arrow-round.bk-left { left: calc(var(--nx) - var(--across) * 0.22); }
.mypage .bk-arrow-round.bk-right { left: calc(var(--nx) + var(--nw) - var(--across) * 0.78); }
.mypage .bk-arrow-round:hover { filter: brightness(1.1); }

/* The arrow's head: two strokes of ink meeting at a point. */
.mypage .bk-arrow-round i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24%;
    height: 24%;
    box-sizing: border-box;
    border-left: max(2.5px, calc(var(--across) * 0.075)) solid var(--paper-ink);
    border-bottom: max(2.5px, calc(var(--across) * 0.075)) solid var(--paper-ink);
    transform: translate(-30%, -50%) rotate(45deg);
}

.mypage .bk-arrow-round.bk-right i { transform: translate(-70%, -50%) rotate(-135deg); }

/* ---- the row of the worlds under the niche, one small card a niche ---- */

.mypage .bk-worlds {
    --gap: calc(1.4 * var(--h));
    --ww: min(calc(10 * var(--h)), calc((var(--nw) - var(--gap) * (var(--n) - 1)) / var(--n)));
    position: absolute;
    left: var(--nx);
    width: var(--nw);
    top: min(calc(var(--ny) + var(--nh) + 5 * var(--h)), calc(95.5 * var(--h) - var(--ww) * 1.4));
    height: calc(var(--ww) * 1.4);
}

.mypage .bk-world {
    position: absolute;
    left: calc((var(--nw) - var(--n) * var(--ww) - (var(--n) - 1) * var(--gap)) / 2 + var(--i) * (var(--ww) + var(--gap)));
    top: 0;
    width: var(--ww);
    height: calc(var(--ww) * 1.4);
}

.mypage .bk-world img { filter: brightness(0.82); border-radius: 8% / 6%; }
.mypage .bk-world:hover img { filter: none; }
.mypage .bk-world.bk-on { transform: translateY(calc(-1.4 * var(--h))); }
.mypage .bk-world.bk-on img { filter: none; outline: max(2px, calc(0.5 * var(--h))) solid var(--gold); outline-offset: calc(0.4 * var(--h)); }

/* ---- the sheet of the back picked ---- */

.mypage .bk-sheet {
    --room: calc(73.5 * var(--h));
    left: calc(var(--nx) + var(--nw) + 3.5 * var(--h));
    top: calc(13.5 * var(--h));
    right: calc(3 * var(--h));
    height: calc(82.5 * var(--h));
    padding: calc(4.5 * var(--h)) calc(6 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

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

.mypage .bk-shown {
    flex: none;
    height: min(calc(33 * var(--h)), calc(var(--room) * 0.42));
    width: auto;
    aspect-ratio: 5 / 7;
}

.mypage .bk-shown.bk-hop { animation: bk-hop 0.45s ease-out; }

@keyframes bk-hop {
    40% { transform: translateY(calc(-3 * var(--h))) scale(1.04); }
    70% { transform: translateY(calc(0.4 * var(--h))); }
}

/* The name and the note are as wide as the sheet's room, so that a long one is brought down in size to fit it. */
.mypage .bk-name {
    margin-top: calc(2.4 * var(--h));
    align-self: stretch;
    font-size: calc(3.8 * var(--h));
    line-height: 1.3;
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
    overflow: hidden;
}

.mypage .bk-kind { font-size: calc(2.4 * var(--h)); line-height: 1.4; color: var(--ink-soft); }

.mypage .bk-line {
    flex: 1 1 0;
    min-height: 0;
    margin-top: calc(1.2 * var(--h));
    font-size: calc(2.7 * var(--h));
    line-height: 1.55;
    color: var(--ink);
    overflow: hidden;
}

.mypage .bk-wear { flex: none; margin-top: calc(1 * var(--h)); }

.mypage .bk-note {
    flex: none;
    align-self: stretch;
    overflow: hidden;
    margin-top: calc(0.8 * var(--h));
    font-size: calc(2.1 * var(--h));
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: nowrap;
}