/* My page (MyPage.cs): the kit's top, my card down the left, and the page on the right with its
   cards standing behind its top edge. Every size is a share of the screen's height, the way the
   game measures it; the numbers in the comments are the game's own, in hundredths of a height. */

.mypage {
    /* The shelf my card stands on, and the side the page takes (MyPage.Shelf, MyPage.Side). */
    --S: clamp(calc(48 * var(--h)), calc(0.27 * var(--w)), calc(60 * var(--h)));
    --side: calc(9.5 * var(--h) + var(--S));
    --sheet-x: calc(var(--side) - 1.5 * var(--h));
    --sheet-w: calc(var(--w) - 3 * var(--h) - var(--side));
    --card: min(calc(12.5 * var(--h)), calc((var(--sheet-w) * 0.6 - 4.8 * var(--h)) / 4));
    --mw: calc(var(--S) - 3 * var(--h));
    --r: min(calc(var(--mw) * 0.24), calc(9.5 * var(--h)));
    --gold: #e2b64a;
    --ink: #2a1d10;
    --ink-soft: #6b5332;
    --cobalt: #1f3f8f;
    --navy: #16234f;
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --crimson: #a8151c;
    --paper: #f5e8c9;
    --edge: #b0935e;
    --card-paper: #fbf4e2;
    --tab-paper: #fdfbf5;
    --warning: #b3541e;
    --won: #2e6e52;

    position: fixed;
    inset: 0;
    width: var(--w);
    height: calc(100 * var(--h));
    overflow: hidden;
    background: #2b2418 url("../art/me/ground.jpg") center / cover;
    color: var(--ink);
    font-family: "Alegreya", Georgia, serif;
    user-select: none;
    -webkit-user-select: none;
}

.mypage button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mypage button:disabled { cursor: default; }
.mypage img { display: block; pointer-events: none; }
.mypage p { margin: 0; }

/* ---- the kit's enamel (Kit.Button): ivory, navy, and ivory with crimson words ---- */

.mypage .kit {
    --bh: calc(8.8 * var(--h));
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    height: var(--bh);
    min-width: calc(20 * var(--h));
    padding: 0 calc(8.5 * var(--h));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: calc(3.2 * var(--h));
    line-height: 1;
    color: var(--paper-ink);
    white-space: nowrap;
}

.mypage .kit > span { min-width: 0; overflow: hidden; white-space: nowrap; }
.mypage .kit.main { color: var(--on-navy); }
.mypage .kit.danger { color: var(--crimson); }

.mypage .kit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/button-plain.png") 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.mypage .kit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--bh) * 72 / 230);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: url("../art/kit/button-plain.png") center / auto 100% no-repeat;
}

.mypage .kit.main::before { border-image: url("../art/kit/button-main.png") 0 115 fill / 0 calc(var(--bh) * 0.518) stretch; }
.mypage .kit.main::after { width: calc(var(--bh) * 72 / 222); background-image: url("../art/kit/button-main.png"); }

.mypage button.kit:not(:disabled):hover { filter: brightness(1.15); }

/* Pressed, the enamel sinks under the finger and its words go down with it. */
.mypage button.kit:not(:disabled):active { padding-top: max(4px, calc(var(--bh) * 0.07)); }
.mypage button.kit:not(:disabled):active::after { visibility: hidden; }

.mypage button.kit:not(:disabled):active::before {
    border-image-source: url("../art/kit/button-plain-down.png");
    transform: translateY(max(2px, calc(var(--bh) * 0.035)));
    filter: brightness(0.9);
}

.mypage button.kit.main:not(:disabled):active::before { border-image-source: url("../art/kit/button-main-down.png"); }

/* ---- the top: the way back, the page's name, the purse ---- */

.mypage .back {
    --bh: calc(7.8 * var(--h));
    position: absolute;
    left: calc(3 * var(--h));
    top: calc(3 * var(--h));
    width: calc(24 * var(--h));
    min-width: 0;
    padding: 0 calc(var(--bh) * 0.25) 0 calc(var(--bh) * 0.9);
    font-size: calc(3 * var(--h));
    z-index: 4;
}

/* The arrow at the left end, pointing left in every language. */
.mypage .back .arrow {
    position: absolute;
    left: calc(var(--bh) * 0.42);
    top: 50%;
    width: calc(var(--bh) * 0.36);
    height: max(2px, calc(var(--bh) * 0.075));
    background: var(--paper-ink);
    transform: translateY(-50%);
}

.mypage .back .arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    border-right: calc(var(--bh) * 0.208) solid var(--paper-ink);
    border-top: calc(var(--bh) * 0.16) solid transparent;
    border-bottom: calc(var(--bh) * 0.16) solid transparent;
    transform: translateY(-50%);
}

.mypage button.kit.back:not(:disabled):active .arrow { margin-top: max(2px, calc(var(--bh) * 0.035)); }

.mypage .title {
    position: absolute;
    left: calc(31 * var(--h));
    top: calc(3.65 * var(--h));
    margin: 0;
    font-size: calc(5 * var(--h));
    line-height: calc(6.5 * var(--h));
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #f7ecd2;
    -webkit-text-stroke: calc(2 * max(3px, calc(5 * var(--h) / 12))) #1e1712;
    paint-order: stroke fill;
    white-space: nowrap;
}

.mypage .purse {
    --bh: calc(7.8 * var(--h));
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(3 * var(--h));
    min-width: 0;
    padding: 0 calc(var(--bh) * 0.55) 0 calc(var(--bh) * 0.5);
    gap: calc(var(--bh) * 0.18);
    direction: ltr;
}

.mypage .purse img { width: calc(var(--bh) * 0.56); height: calc(var(--bh) * 0.56); }
.mypage .purse b { font-size: calc(var(--bh) * 0.42); font-weight: 800; }

/* ---- the panel (Kit.DrawPanel): cream paper, a matte ochre edge, nard's sun in each corner ---- */

.mypage .panel {
    position: absolute;
    box-sizing: border-box;
    background-color: var(--paper);
    background-image: url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png");
    background-size: calc(6 * var(--h)) calc(6 * var(--h));
    background-position: left calc(1.2 * var(--h)) top calc(1.2 * var(--h)), right calc(1.2 * var(--h)) top calc(1.2 * var(--h)),
        left calc(1.2 * var(--h)) bottom calc(1.2 * var(--h)), right calc(1.2 * var(--h)) bottom calc(1.2 * var(--h));
    background-repeat: no-repeat;
    border: max(2px, calc(0.45 * var(--h))) solid var(--edge);
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.3);
}

/* A card inside a panel (Kit.DrawCard): a shade lighter, a thin navy line, a small shadow. */
.mypage .thing,
.mypage .number,
.mypage .near,
.mypage .played,
.mypage .motto-row {
    box-sizing: border-box;
    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);
}

/* ---- me, on the left ---- */

.mypage .me-card {
    left: calc(4.5 * var(--h));
    top: calc(20 * var(--h));
    width: var(--mw);
    height: calc(77 * var(--h));
    padding: 0 calc(4 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.mypage .face {
    position: relative;
    flex: none;
    margin-top: calc(4.5 * var(--h));
    width: calc(var(--r) * 2.2);
    height: calc(var(--r) * 2.2);
}

/* My face in a round gold frame. */
.mypage .face .disc {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: calc(var(--r) * 0.1);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1.5px rgba(42, 29, 16, 0.6);
}

.mypage .face .disc img,
.mypage .oval img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;
}

.mypage .face.open .disc { outline: max(2px, calc(0.5 * var(--h))) solid var(--cobalt); outline-offset: calc(0.6 * var(--h)); }

.mypage .initial {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f6e6c0;
    color: var(--cobalt);
    font-weight: 800;
    font-size: calc(var(--r) * 0.9);
}

/* The round cobalt button with the painted pen on it: this can be changed. */
.mypage .pen {
    --pen: calc(5.8 * var(--h));
    width: calc(var(--pen) * 0.92);
    height: calc(var(--pen) * 0.92);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cobalt) !important;
    border: max(1.5px, calc(var(--pen) * 0.05)) solid var(--gold) !important;
    box-shadow: 0 calc(var(--pen) * 0.05) 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.1s;
}

.mypage .pen img { width: 65%; height: 65%; object-fit: contain; }
.mypage .pen:hover { transform: translateY(-5%); }
.mypage .pen.small { --pen: calc(4 * var(--h)); }

.mypage .pen.on-rim {
    position: absolute;
    left: calc(var(--r) * 1.878 - var(--pen) * 0.46);
    top: calc(var(--r) * 1.878 - var(--pen) * 0.46);
}

.mypage .name {
    margin-top: calc(1 * var(--h));
    max-width: 100%;
    font-size: calc(4.4 * var(--h));
    line-height: 1.25;
    color: var(--cobalt);
}

.mypage .name .called { position: relative; display: inline-block; max-width: calc(var(--mw) - 22 * var(--h)); vertical-align: top; }
.mypage .name b { display: block; overflow: hidden; white-space: nowrap; font-weight: 800; }

.mypage .name .pen {
    position: absolute;
    left: calc(100% + 1.2 * var(--h));
    top: 50%;
    margin-top: calc(var(--pen) * -0.46);
}

.mypage .name .pen:hover { transform: translateY(-5%); }

.mypage .motto {
    margin-top: calc(0.3 * var(--h));
    max-width: 100%;
    font-size: calc(2.6 * var(--h));
    line-height: 1.4;
}

.mypage .motto .worn { position: relative; display: inline-block; max-width: calc(var(--mw) - 18 * var(--h)); }

.mypage .motto .words {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-style: italic;
    color: var(--ink);
}

.mypage .motto .words.none { font-style: normal; color: var(--ink-soft); }

.mypage .motto .pen {
    position: absolute;
    left: calc(100% + 1 * var(--h));
    top: 50%;
    margin-top: calc(var(--pen) * -0.46);
}

.mypage .me-card .under {
    margin-top: calc(0.2 * var(--h));
    font-size: calc(2.6 * var(--h));
    color: var(--ink-soft);
}

/* The name, changed where it stands: a field in its place, a tick and a cross. */
.mypage .renaming {
    margin-top: calc(1.8 * var(--h));
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(1 * var(--h));
    direction: ltr;
}

.mypage input {
    font: inherit;
    color: var(--paper-ink);
    user-select: text;
    -webkit-user-select: text;
}

.mypage .renaming input,
.mypage .city,
.mypage .digits input {
    flex: 1;
    min-width: 0;
    height: calc(7 * var(--h));
    box-sizing: border-box;
    padding: 0 calc(3.5 * var(--h));
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/field.png") 0 118 fill / 0 calc(7 * var(--h) * 118 / 158) stretch;
    background: none;
    outline: none;
    font-size: calc(3.4 * var(--h));
    font-weight: 700;
    text-align: center;
}

.mypage .renaming .tick,
.mypage .renaming .cross {
    position: relative;
    flex: none;
    width: calc(6 * var(--h));
    height: calc(6 * var(--h));
    box-sizing: border-box;
    border-radius: 50%;
    border: max(1.5px, calc(0.3 * var(--h))) solid var(--gold);
    box-shadow: 0 calc(0.3 * var(--h)) 0 rgba(0, 0, 0, 0.25);
}

.mypage .renaming .tick { background: var(--cobalt); }
.mypage .renaming .cross { background: var(--tab-paper); }
.mypage .renaming button:disabled { opacity: 0.45; }
.mypage .renaming button:not(:disabled):hover { transform: translateY(-5%); }

.mypage .renaming .tick i {
    position: absolute;
    left: 30%;
    top: 26%;
    width: 38%;
    height: 22%;
    border-left: max(2.5px, calc(0.48 * var(--h))) solid var(--gold);
    border-bottom: max(2.5px, calc(0.48 * var(--h))) solid var(--gold);
    transform: rotate(-45deg);
}

.mypage .renaming .cross i::before,
.mypage .renaming .cross i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42%;
    height: max(2px, calc(0.42 * var(--h)));
    background: var(--ink-soft);
    transform: translate(-50%, -50%) rotate(45deg);
}

.mypage .renaming .cross i::after { transform: translate(-50%, -50%) rotate(-45deg); }

.mypage .hint {
    margin-top: calc(0.8 * var(--h));
    width: 100%;
    text-align: center;
    font-size: calc(2.3 * var(--h));
    line-height: 1.3;
    color: var(--ink-soft);
}

.mypage .hint.warning { color: var(--warning); }

/* The gold rule with its dot, and my rank under it. */
.mypage .rule {
    position: relative;
    flex: none;
    margin-top: calc(2.4 * var(--h));
    width: 100%;
    height: max(1px, calc(0.2 * var(--h)));
    background: var(--gold);
}

.mypage .rule::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(1.2 * var(--h));
    height: calc(1.2 * var(--h));
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
}

.mypage .rank {
    margin-top: calc(2.2 * var(--h));
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(1.5 * var(--h));
}

.mypage .medal {
    --mr: min(calc((var(--mw) - 8 * var(--h)) * 0.13), calc(5 * var(--h)));
    position: relative;
    flex: none;
    width: calc(var(--mr) * 2.3);
    height: calc(var(--mr) * 2.1);
    display: grid;
    place-items: center;
}

.mypage .medal img:first-child { width: calc(var(--mr) * 2.1); height: calc(var(--mr) * 2.1); object-fit: contain; }

.mypage .medal .star {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--mr) * 0.74);
    transform: translate(-50%, -50%) rotate(calc(var(--slot) * 0.66rad)) translateY(calc(var(--mr) * -1.08)) rotate(calc(var(--slot) * -0.66rad));
}

.mypage .rank .spoken { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mypage .rank .spoken b { overflow: hidden; white-space: nowrap; font-size: calc(3.6 * var(--h)); font-weight: 800; color: var(--cobalt); }
.mypage .rank .spoken b.none { font-size: calc(2.8 * var(--h)); }
.mypage .rank .spoken small { font-size: calc(2.6 * var(--h)); color: var(--ink-soft); }

.mypage .road {
    margin-top: calc(2.2 * var(--h));
    width: 92%;
    height: calc(1.6 * var(--h));
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--gold);
    background: rgba(107, 83, 50, 0.22);
    overflow: hidden;
}

.mypage .road i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }

.mypage .me-card .farr {
    margin-top: calc(1.4 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(0.6 * var(--h));
    font-size: calc(3 * var(--h));
    font-weight: 800;
    color: var(--ink);
}

.mypage .me-card .farr img { height: calc(3.6 * var(--h)); }

/* ---- the cards standing behind the page's top edge ---- */

.mypage .tab {
    position: absolute;
    left: calc(var(--sheet-x) + 3.5 * var(--h) + var(--i) * (var(--card) + 1.6 * var(--h)));
    top: calc(15 * var(--h));
    width: var(--card);
    height: calc(var(--card) * 1.36);
    z-index: 1;
}

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

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

.mypage .tab.chosen {
    z-index: 3;
    transform-origin: 50% 100%;
    transform: translateY(calc(-2.5 * var(--h))) rotate(-4deg) scale(1.1);
}

.mypage .tab.chosen .leaf {
    border: max(1px, calc(var(--card) * 0.028)) solid var(--paper-ink);
    box-shadow: 0 0 calc(var(--card) * 0.09) rgba(255, 245, 209, 0.75);
}

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

.mypage .tab.tab-games img { width: calc(var(--card) * 0.692); height: calc(var(--card) * 0.783); }

.mypage .tab .label {
    position: absolute;
    left: 5%;
    right: 5%;
    top: calc(var(--card) * 0.952 - 1.8 * var(--h));
    line-height: calc(2.4 * var(--h));
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-size: clamp(calc(1.6 * var(--h)), calc(var(--card) * 0.17), calc(2.2 * var(--h)));
    color: var(--ink);
}

.mypage .tab.chosen .label { font-weight: 800; color: var(--cobalt); }

/* ---- the page ---- */

.mypage .sheet {
    left: var(--sheet-x);
    top: calc(28 * var(--h));
    width: var(--sheet-w);
    height: calc(64.5 * var(--h));
    z-index: 2;
}

.mypage .sheet .line {
    position: absolute;
    left: calc(12 * var(--h));
    right: calc(12 * var(--h));
    top: calc(4 * var(--h));
    height: calc(3.9 * var(--h));
    line-height: calc(3.9 * var(--h));
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-size: calc(2.6 * var(--h));
    color: var(--ink-soft);
}

.mypage .room {
    position: absolute;
    left: calc(9 * var(--h));
    right: calc(9 * var(--h));
    top: calc(5 * var(--h));
    bottom: calc(5 * var(--h));
}

.mypage .room.lined { top: calc(8.9 * var(--h)); }

.mypage .waiting {
    margin-top: calc(10 * var(--h));
    text-align: center;
    font-size: calc(3.2 * var(--h));
    line-height: 1.35;
    color: var(--ink-soft);
}

.mypage .trouble { margin-top: calc(1 * var(--h)); text-align: center; font-size: calc(2.6 * var(--h)); color: var(--warning); }

/* The lists scroll in a thin line of the page's own ink. */
.mypage .faces,
.mypage .mottos,
.mypage .games,
.mypage .rows,
.mypage .places,
.mypage .erase {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(22, 35, 79, 0.35) transparent;
}

/* ---- my look: what the table sees, three above and the rest under them ---- */

.mypage .things {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: calc(2.2 * var(--h));
}

.mypage .thing {
    position: relative;
    width: calc((100% - 4.4 * var(--h)) / 3);
    height: calc((100% - 2.2 * var(--h)) / 2);
    padding: calc(1.8 * var(--h)) 0 calc(2 * var(--h));
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.1s;
}

.mypage button.thing:hover { transform: translateY(calc(-0.6 * var(--h))); }

.mypage .thing .picture {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 84%;
    margin-bottom: calc(0.8 * var(--h));
}

.mypage .thing .picture > * {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

.mypage .thing .oval {
    height: 100%;
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 4.5%;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 1.5px rgba(42, 29, 16, 0.6);
}

.mypage .thing .picture img.throne,
.mypage .thing .picture img.cardback { height: 100%; object-fit: contain; }

.mypage .thing .picture img.cardback {
    width: auto;
    border-radius: calc(0.8 * var(--h));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 max(2px, calc(0.3 * var(--h))) rgba(42, 29, 16, 0.55);
}

.mypage .thing .picture img.dressed {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: calc(1.4 * var(--h));
    border: max(2px, calc(0.45 * var(--h))) solid var(--edge);
    box-sizing: border-box;
}

.mypage .thing .heading { font-size: calc(2.2 * var(--h)); line-height: 1.3; color: var(--ink-soft); }

.mypage .thing .chosen {
    max-width: 92%;
    overflow: hidden;
    white-space: nowrap;
    font-size: calc(3 * var(--h));
    font-weight: 800;
    line-height: 1.25;
    color: var(--cobalt);
}

.mypage .thing .change {
    --bh: calc(6.6 * var(--h));
    flex: none;
    margin-top: calc(1.4 * var(--h));
    width: 76%;
    min-width: 0;
    padding: 0;
    font-size: calc(2.7 * var(--h));
}

/* What is worn is shown here; it is changed in the game. */
.mypage .thing.quiet .change { opacity: 0.45; }

/* ---- a choice laid on the page: a face, a motto ---- */

.mypage .choice-head {
    position: relative;
    height: calc(6.5 * var(--h));
    display: flex;
    justify-content: center;
    align-items: center;
}

.mypage .choice-head .kit {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
}

.mypage .choice-head h2 { margin: 0; font-size: calc(3.2 * var(--h)); font-weight: 800; color: var(--cobalt); }

.mypage .kinds {
    margin-top: calc(1.2 * var(--h));
    display: flex;
    justify-content: center;
    gap: calc(1.2 * var(--h));
}

.mypage .kinds .kit {
    flex: none;
    width: min(calc(20 * var(--h)), calc((100% - 4 * var(--h)) / 5));
    min-width: 0;
    padding: 0 calc(2.5 * var(--h));
    font-size: calc(3 * var(--h));
}

.mypage .faces {
    margin-top: calc(1.6 * var(--h));
    height: calc(100% - 18.1 * var(--h));
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(15 * var(--h)));
    grid-auto-rows: calc(16 * var(--h));
    gap: calc(1.4 * var(--h));
    justify-content: center;
    align-content: start;
}

.mypage .face-tile { position: relative; }

.mypage .face-tile .oval {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(15 * var(--h) - 2px);
    height: calc(15 * var(--h) - 2px);
    box-sizing: border-box;
    padding: 3.8%;
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
    transition: transform 0.1s;
}

.mypage .face-tile:not(:disabled):hover .oval { transform: translate(-50%, -52%); }
.mypage .face-tile.mine .oval { background: var(--cobalt); }

/* The mark of what is worn (Kit.DrawWorn): a navy disc ringed in gold with a gold tick. */
.mypage .worn-tick {
    position: absolute;
    right: calc(1 * var(--h));
    top: calc(1 * var(--h));
    width: calc(4 * var(--h));
    height: calc(4 * var(--h));
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--cobalt);
    border: max(1.5px, calc(0.24 * var(--h))) solid var(--gold);
}

.mypage .worn-tick::after {
    content: "";
    position: absolute;
    left: 26%;
    top: 24%;
    width: 44%;
    height: 22%;
    border-left: max(2px, calc(0.4 * var(--h))) solid var(--gold);
    border-bottom: max(2px, calc(0.4 * var(--h))) solid var(--gold);
    transform: rotate(-45deg);
}

.mypage .note {
    height: calc(3.9 * var(--h));
    line-height: calc(3.9 * var(--h));
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: var(--ink-soft);
}

.mypage .mottos {
    margin-top: calc(1.5 * var(--h));
    max-height: calc(100% - 12 * var(--h));
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: calc(9.5 * var(--h));
    gap: calc(1.4 * var(--h));
    padding: 2px calc(1.2 * var(--h)) 2px 2px;
}

.mypage .motto-row {
    position: relative;
    padding: 0 calc(2.7 * var(--h));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(1.4 * var(--h));
    font-size: calc(3 * var(--h));
    color: var(--ink);
}

.mypage .motto-row .spoken { min-width: 0; overflow: hidden; white-space: nowrap; font-style: italic; }
.mypage .motto-row .spoken.none { font-style: normal; color: var(--ink-soft); }
.mypage .motto-row.open:not(:disabled):hover { background: var(--tab-paper); }
.mypage .motto-row.mine { border: max(1px, calc(0.4 * var(--h))) solid var(--paper-ink); }
.mypage .motto-row.mine .worn-tick { top: 50%; margin-top: calc(-2 * var(--h)); }
.mypage .motto-row.shut { justify-content: flex-start; font-size: calc(2.6 * var(--h)); color: var(--ink-soft); }

/* A small padlock, for a motto not mine yet. */
.mypage .lock {
    position: relative;
    flex: none;
    width: calc(2.85 * var(--h));
    height: calc(2.1 * var(--h));
    margin-top: calc(0.9 * var(--h));
    border-radius: calc(0.3 * var(--h));
    background: var(--ink);
}

.mypage .lock::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1.4 * var(--h));
    width: calc(1.7 * var(--h));
    height: calc(1.5 * var(--h));
    box-sizing: border-box;
    border: calc(0.35 * var(--h)) solid var(--ink);
    border-bottom: 0;
    border-radius: calc(1 * var(--h)) calc(1 * var(--h)) 0 0;
    transform: translateX(-50%);
}

/* ---- my record: eight numbers, and the two names under them ---- */

.mypage .record {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: calc(1.2 * var(--h));
}

.mypage .record.named { grid-template-rows: 1fr 1fr calc(13 * var(--h)); }

.mypage .number {
    min-width: 0;
    padding: 0 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.25;
}

.mypage .number b { font-size: calc(5.2 * var(--h)); font-weight: 800; color: var(--cobalt); line-height: 1.15; }
.mypage .number .label { max-width: 100%; overflow: hidden; white-space: nowrap; margin-top: calc(0.8 * var(--h)); font-size: calc(2.1 * var(--h)); color: var(--ink-soft); }
.mypage .number strong { max-width: 100%; overflow: hidden; white-space: nowrap; font-size: calc(2.1 * var(--h)); font-weight: 800; color: var(--ink); }
.mypage .number .medal { --mr: calc(3.6 * var(--h)); }

.mypage .near {
    grid-column: span 2;
    padding: 0 calc(2.3 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(2 * var(--h));
}

.mypage .record.named .near:only-of-type { grid-column: span 4; }

.mypage .near .initial {
    flex: none;
    width: calc(8.3 * var(--h));
    height: calc(8.3 * var(--h));
    font-size: calc(3.8 * var(--h));
    box-shadow: 0 0 0 calc(0.35 * var(--h)) var(--gold);
}

.mypage .near .words { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mypage .near small { font-size: calc(2 * var(--h)); color: var(--ink-soft); }
.mypage .near small.ink { color: var(--ink); }
.mypage .near b { overflow: hidden; white-space: nowrap; font-size: calc(3.4 * var(--h)); font-weight: 800; color: var(--cobalt); }

/* ---- my games: one line a game, newest first (LadderView.Played) ---- */

.mypage .games {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(1.4 * var(--h));
    padding-inline-end: calc(2.5 * var(--h));
    box-sizing: border-box;
}

.mypage .played {
    position: relative;
    flex: none;
    height: calc(10.5 * var(--h));
}

.mypage .played .seal {
    position: absolute;
    inset-inline-start: calc(1.68 * var(--h));
    top: 50%;
    width: calc(6.3 * var(--h));
    transform: translateY(-50%);
}

.mypage .played > span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    min-width: 0;
}

.mypage .played > span > * { overflow: hidden; white-space: nowrap; }

.mypage .played .who { inset-inline-start: calc(9.45 * var(--h)); width: calc(42% - 9.45 * var(--h)); }
.mypage .played .who b { font-size: calc(2.4 * var(--h)); font-weight: 800; color: var(--ink); }
.mypage .played .who small { font-size: calc(2 * var(--h)); color: var(--ink-soft); }

.mypage .played .score { inset-inline-start: 43%; width: 30%; text-align: center; }
.mypage .played .score b { font-size: calc(2.8 * var(--h)); font-weight: 800; color: var(--cobalt); }
.mypage .played .score small { font-size: calc(1.8 * var(--h)); color: var(--ink-soft); }

.mypage .played .end { inset-inline-end: calc(3.15 * var(--h)); width: 24%; text-align: end; }
.mypage .played .end b { font-size: calc(2.6 * var(--h)); font-weight: 800; color: var(--won); }
.mypage .played .end b.lost { color: #bf2a26; }
.mypage .played .end small { font-size: calc(1.8 * var(--h)); color: var(--ink-soft); }

.mypage .games .foot { flex: none; height: calc(8.5 * var(--h)); display: flex; justify-content: center; align-items: center; }

/* ---- the settings: the kinds down the start side, the rows of the one chosen beside them ---- */

.mypage .prefs {
    --tw: min(calc(23 * var(--h)), calc(var(--sheet-w) * 0.3 - 5.4 * var(--h)));
    --line: max(2px, calc(0.3 * var(--h)));
    position: relative;
    height: 100%;
}

.mypage .sections {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--tw) + var(--line));
    z-index: 2;
}

.mypage .section {
    position: absolute;
    top: calc(3.4 * var(--h) + var(--i) * 9.56 * var(--h));
    inset-inline-start: calc(1.6 * var(--h));
    width: calc(var(--tw) - 1.6 * var(--h) - var(--line));
    height: calc(8.36 * var(--h));
    box-sizing: border-box;
    padding-inline-start: calc(1.4 * var(--h));
    padding-inline-end: calc(1.4 * var(--h));
    background: rgba(176, 147, 94, 0.2) !important;
    border: 1px solid rgba(22, 35, 79, 0.2) !important;
    border-inline-end: 0 !important;
    border-start-start-radius: calc(1.6 * var(--h));
    border-end-start-radius: calc(1.6 * var(--h));
    font-size: calc(3 * var(--h));
    color: rgba(42, 29, 16, 0.72) !important;
}

.mypage .section:not(:disabled):hover { background: rgba(176, 147, 94, 0.34) !important; }
.mypage .section span { display: block; overflow: hidden; white-space: nowrap; }

/* The one chosen is the card's own paper and line, grown out of its side, a navy mark at its outer end. */
.mypage .section.chosen {
    inset-inline-start: 0;
    width: calc(var(--tw) + var(--line));
    padding-inline-start: calc(3 * var(--h));
    background: var(--card-paper) !important;
    border: var(--line) solid rgba(22, 35, 79, 0.55) !important;
    border-inline-end: 0 !important;
    font-weight: 800;
    color: var(--paper-ink) !important;
}

.mypage .section.chosen::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(1.4 * var(--h));
    top: 26%;
    width: calc(0.6 * var(--h));
    height: 48%;
    border-radius: calc(0.3 * var(--h));
    background: var(--navy);
}

.mypage .rows-card {
    position: absolute;
    inset-inline-start: var(--tw);
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: calc(0.8 * var(--h)) calc(1.2 * var(--h)) calc(2 * var(--h)) calc(3 * var(--h));
    background: var(--card-paper);
    border: var(--line) solid rgba(22, 35, 79, 0.55);
    border-radius: calc(1.6 * var(--h));
    z-index: 1;
}

[dir="rtl"] .mypage .rows-card { padding: calc(0.8 * var(--h)) calc(3 * var(--h)) calc(2 * var(--h)) calc(1.2 * var(--h)); }

.mypage .rows { height: 100%; padding-inline-end: calc(1.2 * var(--h)); box-sizing: border-box; }
.mypage .rows-card:has(.foot) .rows { height: calc(100% - 11.8 * var(--h)); }

.mypage .row {
    min-height: calc(11.5 * var(--h));
    box-sizing: border-box;
    padding: calc(1.5 * var(--h)) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(1.2 * var(--h)) calc(4 * var(--h));
    border-bottom: max(1px, calc(0.15 * var(--h))) solid rgba(226, 182, 74, 0.5);
}

.mypage .row .words { flex: 1 1 calc(30 * var(--h)); min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mypage .row .words b { font-size: calc(3.3 * var(--h)); font-weight: 800; color: var(--ink); }
.mypage .row .words small { font-size: calc(2.3 * var(--h)); color: var(--ink-soft); overflow-wrap: anywhere; }
.mypage .row .does { flex: none; display: flex; align-items: center; }

.mypage .rows-card .foot {
    position: absolute;
    left: calc(3 * var(--h));
    right: calc(1.2 * var(--h));
    bottom: calc(2 * var(--h));
    display: flex;
    justify-content: space-between;
}

.mypage .foot .leave { width: calc(28 * var(--h)); min-width: 0; padding: 0; font-size: calc(3 * var(--h)); }

/* A slider: a navy line filling a pale one, and the kit's ivory bead to hold. */
.mypage .slider {
    -webkit-appearance: none;
    appearance: none;
    width: calc(34 * var(--h));
    height: calc(6 * var(--h));
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.mypage .slider::-webkit-slider-runnable-track {
    height: max(3px, calc(0.8 * var(--h)));
    border-radius: 999px;
    background: linear-gradient(to right, var(--navy) var(--v), rgba(107, 83, 50, 0.3) var(--v));
}

.mypage .slider::-moz-range-track {
    height: max(3px, calc(0.8 * var(--h)));
    border-radius: 999px;
    background: linear-gradient(to right, var(--navy) var(--v), rgba(107, 83, 50, 0.3) var(--v));
}

.mypage .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: calc(5 * var(--h));
    height: calc(5 * var(--h));
    margin-top: calc(max(3px, calc(0.8 * var(--h))) / 2 - 2.5 * var(--h));
    border: 0;
    background: url("../art/kit/round-plain.png") center / 100% 100% no-repeat;
}

.mypage .slider::-moz-range-thumb {
    width: calc(5 * var(--h));
    height: calc(5 * var(--h));
    border: 0;
    background: url("../art/kit/round-plain.png") center / 100% 100% no-repeat;
}

/* A switch: navy with its knob at the far end when on, pale with it at the near end when off. */
.mypage .switch {
    position: relative;
    width: calc(14 * var(--h));
    height: calc(7 * var(--h));
    box-sizing: border-box;
    border-radius: 999px;
    background: rgba(107, 83, 50, 0.25) !important;
    border: max(1px, calc(0.35 * var(--h))) solid rgba(107, 83, 50, 0.5) !important;
}

.mypage .switch.on { background: var(--navy) !important; border-color: var(--on-navy) !important; }

.mypage .switch i {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(0.1 * var(--h));
    width: calc(6.4 * var(--h));
    height: calc(6.4 * var(--h));
    background: url("../art/kit/round-plain.png") center / 100% 100% no-repeat;
    transform: translateY(-50%);
    transition: inset-inline-start 0.12s;
}

.mypage .switch.on i { inset-inline-start: calc(100% - 6.5 * var(--h)); }

/* Choices side by side, the one chosen in navy. */
.mypage .ways { display: flex; gap: calc(1.5 * var(--h)); }

.mypage .ways .kit {
    --bh: calc(7.48 * var(--h));
    width: calc(19 * var(--h));
    min-width: 0;
    padding: 0 calc(var(--bh) * 0.58);
    font-size: calc(2.8 * var(--h));
}

.mypage .ways .tune { width: calc(11 * var(--h)); }

/* The language: the ivory button, and the list that drops from it in the kit's own manner. */
.mypage .language { position: relative; display: block; }

.mypage .kit.chooser,
.mypage .kit.clock {
    --bh: calc(7.92 * var(--h));
    width: calc(34 * var(--h));
    min-width: 0;
    padding: 0 calc(4 * var(--h));
    gap: calc(1.4 * var(--h));
    font-size: calc(3.2 * var(--h));
}

.mypage .kit.clock { font-size: calc(3 * var(--h)); }

.mypage .chooser .down {
    flex: none;
    width: calc(1.4 * var(--h));
    height: calc(1.4 * var(--h));
    margin-top: calc(-0.7 * var(--h));
    border-right: max(2px, calc(0.4 * var(--h))) solid var(--paper-ink);
    border-bottom: max(2px, calc(0.4 * var(--h))) solid var(--paper-ink);
    transform: rotate(45deg);
}

.mypage .language .list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.6 * var(--h));
    min-width: 100%;
    box-sizing: border-box;
    z-index: 5;
    padding: calc(1.2 * var(--h));
    display: flex;
    flex-direction: column;
    background: var(--card-paper);
    border: max(2px, calc(0.35 * var(--h))) solid var(--edge);
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) calc(1.6 * var(--h)) rgba(0, 0, 0, 0.25);
}

.mypage .language .list button {
    display: flex;
    align-items: center;
    gap: calc(1.6 * var(--h));
    padding: calc(1.4 * var(--h)) calc(2 * var(--h));
    border-radius: calc(1 * var(--h));
    font-size: calc(3.2 * var(--h));
    font-weight: 800;
    color: var(--paper-ink);
    text-align: start;
}

.mypage .language .list button:hover { background: rgba(176, 147, 94, 0.24); }

.mypage .language .list i {
    width: calc(3 * var(--h));
    height: calc(3 * var(--h));
    background: url("../art/kit/round-plain.png") center / 100% 100% no-repeat;
}

.mypage .language .list .chosen i { background-image: url("../art/kit/round-main.png"); }

/* The places a clock is chosen from, each with the hour it shows now. */
.mypage .clocks { height: 100%; display: flex; flex-direction: column; }

.mypage .clocks-head {
    flex: none;
    height: calc(10.8 * var(--h));
    display: flex;
    align-items: center;
    gap: calc(2 * var(--h));
}

.mypage .clocks-head .words { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mypage .clocks-head b { font-size: calc(3.3 * var(--h)); font-weight: 800; }
.mypage .clocks-head small { font-size: calc(2.3 * var(--h)); color: var(--ink-soft); }
.mypage .clocks-head .kit { flex: none; min-width: calc(16 * var(--h)); }

.mypage .city { flex: none; margin-top: calc(1 * var(--h)); width: 100%; text-align: start; font-size: calc(2.8 * var(--h)); padding: 0 calc(5 * var(--h)); }

.mypage .places {
    flex: 1;
    min-height: 0;
    margin-top: calc(1.4 * var(--h));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(calc(36 * var(--h)), calc(50% - 0.7 * var(--h))), 1fr));
    grid-auto-rows: calc(7.48 * var(--h));
    gap: calc(1.4 * var(--h));
    align-content: start;
    padding-inline-end: calc(1.2 * var(--h));
}

.mypage .places .kit {
    --bh: calc(7.48 * var(--h));
    width: 100%;
    min-width: 0;
    padding: 0 calc(4 * var(--h));
    font-size: calc(2.7 * var(--h));
}

.mypage .places .none { grid-column: 1 / -1; text-align: center; font-size: calc(2.5 * var(--h)); line-height: 1.4; color: var(--ink-soft); }

/* Deleting my account: what will happen, then the digits that went to my address. */
.mypage .erase { height: 100%; box-sizing: border-box; padding: calc(1 * var(--h)) calc(2 * var(--h)) 0 0; }
.mypage .erase h2 { margin: 0 0 calc(1.4 * var(--h)); font-size: calc(3.6 * var(--h)); font-weight: 800; color: var(--cobalt); }
.mypage .erase p { margin-bottom: calc(1.2 * var(--h)); font-size: calc(2.6 * var(--h)); line-height: 1.4; }
.mypage .erase .digits { margin-top: calc(1.6 * var(--h)); display: flex; align-items: center; gap: calc(2 * var(--h)); direction: ltr; }
.mypage .erase .digits input { flex: none; width: calc(26 * var(--h)); letter-spacing: 0.2em; }
.mypage .erase .trouble { text-align: start; }
.mypage .erase .not-now { margin-top: calc(1.6 * var(--h)); font-size: calc(2.6 * var(--h)); color: var(--ink-soft); text-decoration: underline; }

/* ---- a language written right to left: the page keeps its places, its words run from the right ---- */

[dir="rtl"] .mypage { font-family: "Vazirmatn", "Alegreya", Tahoma, sans-serif; }
[dir="rtl"] .mypage .me-card,
[dir="rtl"] .mypage .sheet,
[dir="rtl"] .mypage .tab .label,
[dir="rtl"] .mypage .back > span { direction: rtl; }
[dir="rtl"] .mypage .title { letter-spacing: 0; font-weight: 700; }
[dir="rtl"] .mypage .motto .words,
[dir="rtl"] .mypage .motto-row .spoken { font-style: normal; }

/* An upright window on a desk lays the page as a wide band, and a phone held upright on its side, as the table does. */
@media (orientation: portrait) {
    .mypage {
        width: 100vw;
        height: calc(100 * var(--h));
        top: 50dvh;
        transform: translateY(-50%);
        box-shadow: 0 0 0 100vmax #000;
    }
}

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