/* The page of my tables (TablesPage.cs), over my page: the table itself from edge to edge, its
   ring in the middle with the glass in it, a trick of four cards on it, the arrows at the sides,
   and the plaque at the foot with the dots over it. Measured in shares of the screen's height as
   the game measures it. Its classes start with tb-, as the backs page's start with bk-. */

.mypage .tables-page {
    /* The ring, as wide as the game lays it from above with nobody at the table. */
    --rw: calc(112.5 * var(--h));
    --rh: calc(50 * var(--h));
    /* The plaque: as wide as the screen allows, never wider than one and a half heights. */
    --pw: min(calc(var(--w) - 6 * var(--h)), calc(150 * var(--h)));
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    background: #2b2418 url("../art/me/ground.jpg") center / cover;
    touch-action: pan-y;
}

/* ---- the table: its ground, the glass, the ring, the trick ---- */

.mypage .tb-ground {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* A new table's ground fades in over the one before. */
.mypage .tb-ground.fresh { animation: tb-fade 0.4s ease-in-out both; }
@keyframes tb-fade { from { opacity: 0; } }

/* The glass in the ring's window, under the ring as a pane is held by its frame: the ground seen
   through it blurred and a shade milky, greyer the smokier; none at all for no glass. */
.mypage .tb-glass {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--rw) * 0.9);
    height: calc(var(--rh) * 0.84);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(calc(240 - 100 * var(--smoke) * var(--smoke)), calc(247 - 100 * var(--smoke) * var(--smoke)), calc(245 - 95 * var(--smoke) * var(--smoke)), calc(0.18 + 0.5 * var(--smoke)));
    -webkit-backdrop-filter: blur(calc(var(--smoke) * 1.2 * var(--h)));
    backdrop-filter: blur(calc(var(--smoke) * 1.2 * var(--h)));
    opacity: min(1, calc(var(--smoke) * 1000));
    transition: background-color 0.15s, opacity 0.15s;
    pointer-events: none;
}

.mypage .tables-page .ring {
    top: 50%;
    width: var(--rw);
    pointer-events: none;
}

/* The ring's medallion, not my rank's medal, whose class it shares. */
.mypage .tables-page .ring .medal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: 22%;
    display: block;
    transform: translate(-50%, -50%);
}

/* Smaller than they are played and further apart, so the ring's whole band is seen round them and its medallion between them. */
.mypage .tb-trick { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }

.mypage .tb-laid {
    --wide: calc(10 * var(--h));
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r));
}

.mypage .tb-laid .card { --wide: calc(10 * var(--h)); }
.mypage .tb-laid.place-0 { --dx: 0px; --dy: calc(12.8 * var(--h)); }
.mypage .tb-laid.place-1 { --dx: calc(21 * var(--h)); --dy: 0px; }
.mypage .tb-laid.place-2 { --dx: 0px; --dy: calc(-12.8 * var(--h)); }
.mypage .tb-laid.place-3 { --dx: calc(-21 * var(--h)); --dy: 0px; }

/* The cards hop as what they lie on is drawn away from under them. */
.mypage .tb-laid.hop .card { animation: tb-hop 0.4s ease-out both; animation-delay: calc(var(--k) * 40ms); }

@keyframes tb-hop {
    35% { transform: translateY(calc(-2.4 * var(--h))) scale(1.04); }
    70% { transform: translateY(calc(0.3 * var(--h))); }
}

/* ---- over the table: the way back, the name, the arrows ---- */

.mypage .tables-page .back,
.mypage .tables-page .title { z-index: 3; }

.mypage .tb-arrow {
    --across: calc(10 * var(--h));
    position: absolute;
    top: calc(50 * var(--h) - var(--across) / 2);
    width: var(--across);
    height: var(--across);
    background: url("../art/kit/round-plain.png") center / contain no-repeat;
    z-index: 3;
}

.mypage .tb-arrow.tb-left { left: calc(3 * var(--h)); }
.mypage .tb-arrow.tb-right { right: calc(3 * var(--h)); }
.mypage .tb-arrow:hover { filter: brightness(1.1); }

.mypage .tb-arrow 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 .tb-arrow.tb-right i { transform: translate(-70%, -50%) rotate(-135deg); }

/* ---- the plaque at the foot, and a dot over it for every table I hold ---- */

.mypage .tb-plaque {
    position: absolute;
    left: calc((var(--w) - var(--pw)) / 2);
    top: calc(80.5 * var(--h));
    width: var(--pw);
    height: calc(17.5 * var(--h));
    box-sizing: border-box;
    padding: 0 calc(4 * var(--h)) calc(5.2 * var(--h));
    display: grid;
    grid-template-columns: calc(var(--pw) * 0.26) 1fr auto;
    align-items: center;
    column-gap: calc(3 * var(--h));
    background: var(--card-paper);
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35);
    border-radius: calc(1.8 * var(--h));
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
    z-index: 3;
}

[dir="rtl"] .mypage .tb-plaque { direction: rtl; }

.mypage .tb-called { min-width: 0; display: flex; flex-direction: column; }

.mypage .tb-name {
    font-size: calc(4 * var(--h));
    line-height: 1.25;
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
    overflow: hidden;
}

.mypage .tb-rarity { font-size: calc(2.4 * var(--h)); line-height: 1.3; color: var(--ink-soft); }
.mypage .tb-rarity.legendary { color: #a8741a; }
.mypage .tb-rarity.limited { color: #8e2a6b; }

.mypage .tb-glass-row { min-width: 0; display: flex; align-items: center; gap: calc(1.5 * var(--h)); }

.mypage .tb-word {
    flex: none;
    width: min(calc(17 * var(--h)), 32%);
    text-align: center;
    font-size: calc(2.6 * var(--h));
    font-weight: 800;
    color: var(--cobalt);
    white-space: nowrap;
}

.mypage .tb-slider {
    --v: 0%;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.mypage .tb-wear { --bh: calc(8 * var(--h)); min-width: calc(24 * var(--h)); }

.mypage .tb-note {
    position: absolute;
    left: calc(4 * var(--h));
    right: calc(4 * var(--h));
    bottom: calc(1.2 * var(--h));
    text-align: center;
    font-size: calc(2.1 * var(--h));
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
}

.mypage .tb-dots {
    --step: min(calc(4 * var(--h)), calc(var(--pw) / var(--n)));
    position: absolute;
    left: 0;
    right: 0;
    top: calc(75.5 * var(--h));
    height: calc(4 * var(--h));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.mypage .tb-dot {
    position: relative;
    width: var(--step);
    height: 100%;
}

/* Each dot: a dark rim, and in it the navy of one held, the gold of the one on show, the tick of the one worn. */
.mypage .tb-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(2.6 * var(--h));
    height: calc(2.6 * var(--h));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(246, 236, 212, 0.85) 0 calc(0.77 * var(--h)), rgba(30, 23, 18, 0.55) calc(0.8 * var(--h)));
}

.mypage .tb-dot.on::before { background: radial-gradient(circle, var(--gold) 0 calc(1.1 * var(--h)), rgba(30, 23, 18, 0.55) calc(1.15 * var(--h))); }

.mypage .tb-dot.worn::before {
    background: radial-gradient(circle, var(--cobalt) 0 calc(0.9 * var(--h)), var(--gold) calc(0.95 * var(--h)) calc(1.1 * var(--h)), rgba(30, 23, 18, 0.55) calc(1.15 * var(--h)));
}

.mypage .tb-dot:hover::before { filter: brightness(1.15); }