/* The leaderboard (LadderView.cs). Its places and sizes are laid in pixels by the page from its
   own size, in the shares of the screen's height the game measures them in; what is here is how
   each piece looks: the kit's panel and cards, the medals, the road, the tabs. */

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

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

.ladder button:disabled { cursor: default; }
.ladder img { display: block; pointer-events: none; }

.ladder .say,
.ladder .head,
.ladder .title,
.ladder .back,
.ladder .tab,
.ladder .medal *,
.ladder .disc *,
.ladder .coin,
.ladder .crown,
.ladder .plate,
.ladder .band,
.ladder .lines,
.ladder .panel,
.ladder .how,
.ladder .mine,
.ladder .strip,
.ladder .gift,
.ladder .take,
.ladder .news,
.ladder .station,
.ladder .avatar {
    position: absolute;
    box-sizing: border-box;
}

/* A line of text laid where the game writes it: its box starts a little over its baseline. */
.ladder .say {
    font-size: var(--fs);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
}

.ladder .bold { font-weight: 700; }
.ladder .caps { letter-spacing: 0.12em; }

.ladder .farr img {
    display: inline-block;
    height: 1.3em;
    margin-inline-end: 0.25em;
    vertical-align: -0.29em;
}

/* ---- the way back and the name of the screen (Kit.Back, Kit.Title) ---- */

.ladder .back {
    display: flex;
    align-items: center;
    isolation: isolate;
    color: #16234f;
    filter: drop-shadow(0 calc(0.3 * var(--h)) calc(0.4 * var(--h)) rgba(0, 0, 0, 0.3));
}

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

.ladder .back:hover { filter: brightness(1.08) drop-shadow(0 calc(0.3 * var(--h)) calc(0.4 * var(--h)) rgba(0, 0, 0, 0.3)); }
.ladder .back:active::before { border-image-source: url("../art/kit/button-plain-down.png"); transform: translateY(2px); }

.ladder .back .arrow {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(7.8 * var(--h));
    height: calc(7.8 * var(--h));
    fill: #16234f;
    stroke: #16234f;
    stroke-width: 7.5;
}

.ladder .back .word {
    flex: 1;
    min-width: 0;
    margin-left: calc(4.3 * var(--h));
    padding: 0 calc(2 * var(--h)) 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    font-size: var(--fs);
    font-weight: 700;
}

.ladder .title {
    margin: 0;
    font-size: var(--fs);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    color: #f7ecd2;
    -webkit-text-stroke: max(6px, calc(var(--fs) / 6)) #1e1712;
    paint-order: stroke fill;
}

/* ---- the kit's panel, its cards, and a card's place in it ---- */

.ladder .panel {
    background: #f5e8c9;
    border-style: solid;
    border-color: #b0935e;
}

.ladder .panel .sun { position: absolute; }

.ladder .plate {
    display: block;
    background: #fbf4e2;
    border-style: solid;
    border-color: rgba(22, 35, 79, 0.35);
}

.ladder .plate.lit { border-color: #16234f; }

/* ---- a medal (RankMark) ---- */

.ladder .medal { display: contents; }
.ladder .medal img { position: absolute; }
.ladder .medal.dim img { opacity: 0.45; }

.ladder .medal .shade {
    display: block;
    background: radial-gradient(circle closest-side, rgba(42, 29, 16, 0.4) 68%, rgba(42, 29, 16, 0.16) 84%, rgba(42, 29, 16, 0) 100%);
}

.ladder .medal .shade.dim {
    background: radial-gradient(circle closest-side, rgba(42, 29, 16, 0.16) 68%, rgba(42, 29, 16, 0.064) 84%, rgba(42, 29, 16, 0) 100%);
}

.ladder .medal .halo {
    display: block;
    background: radial-gradient(circle closest-side, rgba(226, 182, 74, 0.5) 68%, rgba(226, 182, 74, 0.2) 84%, rgba(226, 182, 74, 0) 100%);
}

/* A place on its disc. */
.ladder .disc { display: contents; }

.ladder .disc b {
    display: grid;
    place-items: center;
    font-size: var(--fs);
    font-weight: 700;
    line-height: 1;
}

.ladder .station { border-radius: 50%; }

/* ---- my rank, on the left ---- */

.ladder .mine .bar {
    position: absolute;
    display: flex;
    box-sizing: border-box;
    border: 1px solid #e2b64a;
    border-radius: 999px;
    background: rgba(107, 83, 50, 0.22);
    overflow: hidden;
}

.ladder .mine .bar i { display: block; height: 100%; background: #e2b64a; border-radius: 999px; }

.ladder .lines { overflow: visible; pointer-events: none; }
.ladder .lines .track { stroke: rgba(107, 83, 50, 0.2); fill: none; }
.ladder .lines .gold { stroke: #e2b64a; fill: none; }

.ladder .how {
    margin: 0;
    font-size: var(--fs);
    line-height: 1.25;
    text-align: center;
    color: #6b5332;
}

/* ---- the page's head, beside the cards ---- */

.ladder .head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    color: #f7ecd2;
    pointer-events: none;
}

.ladder .head .named {
    font-size: var(--fs);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    -webkit-text-stroke: max(6px, calc(var(--fs) / 6)) #1e1712;
    paint-order: stroke fill;
}

.ladder .head .counted {
    font-size: var(--fs);
    white-space: nowrap;
    overflow: hidden;
    color: rgba(247, 236, 210, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ---- the tabs: white cards standing behind the panel's top, the one on show in front ---- */

.ladder .tab { transform-origin: 50% 100%; z-index: 1; }
.ladder .tab.on { z-index: 3; }
.ladder .sheet { z-index: 2; }

.ladder .tab .face {
    position: absolute;
    inset: 0;
    background: #fdfbf5;
    border-style: solid;
    border-color: rgba(22, 35, 79, 0.7);
    transition: transform 0.12s;
}

.ladder .tab.on .face { border-color: #16234f; }
.ladder .tab:not(:disabled):hover .face { transform: translateY(-6%); }

.ladder .tab .face img,
.ladder .tab .face .star { position: absolute; object-fit: contain; }
.ladder .tab .star polygon { fill: #1f3f8f; stroke: #e2b64a; stroke-width: 0.05; }

.ladder .tab .name {
    position: absolute;
    font-size: var(--fs);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    color: #2a1d10;
}

.ladder .tab .name.bold { color: #1f3f8f; }

/* ---- the list in the panel ---- */

.ladder .list {
    position: absolute;
    z-index: 4;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b0935e transparent;
}

.ladder .column {
    display: flex;
    flex-direction: column;
}

.ladder .quiet {
    margin: 0;
    font-size: var(--fs);
    color: #6b5332;
    text-align: start;
}

.ladder .chips {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
}

.ladder .chips button { position: relative; flex: none; }

.ladder .chips .all {
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    color: #16234f;
    font-weight: 700;
}

.ladder .chips .all::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 14%;
    bottom: 14%;
    z-index: -1;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/button-plain.png") 0 115 fill / 0 calc(var(--pill) * 0.5) stretch;
}

.ladder .chips .all.on { color: #f6ecd4; }
.ladder .chips .all.on::before { border-image-source: url("../art/kit/button-main.png"); }
.ladder .chips .all span { font-size: var(--fs); white-space: nowrap; overflow: hidden; }

/* ---- the hall: its two windows, its ten tiles, a face in a round window ---- */

.ladder .pills {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
}

.ladder .pill {
    position: relative;
    flex: none;
    isolation: isolate;
    color: #16234f;
    font-size: var(--fs);
    font-weight: 700;
    white-space: nowrap;
}

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

.ladder .pill.on { color: #f6ecd4; }
.ladder .pill.on::before { border-image-source: url("../art/kit/button-main.png"); }
.ladder .pill:not(:disabled):hover { filter: brightness(1.08); }
.ladder .pill:not(:disabled):active::before { border-image-source: url("../art/kit/button-plain-down.png"); transform: translateY(2px); }

.ladder .tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: none;
}

.ladder .tiles .tile { position: relative; display: block; }
.ladder .tiles .tile:hover { filter: brightness(1.03); }

.ladder .avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    border-style: solid;
    border-color: rgba(226, 182, 74, 0.7);
    background: #8c6f63;
    color: #f7ecd2;
    font-size: var(--fs);
    font-weight: 700;
    line-height: 1;
}

.ladder .avatar.empty { border-color: rgba(226, 182, 74, 0.3); background: rgba(185, 173, 147, 0.18); color: #6b5332; }
.ladder .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ladder .chips .chip:not(:disabled):hover { filter: brightness(1.08); }

.ladder .podium,
.ladder .row,
.ladder .road {
    position: relative;
    flex: none;
}

/* My own place under the list, in the kit's navy. */
.ladder .strip {
    z-index: 4;
    background: #16234f;
}

/* ---- the road ---- */

.ladder .road .band {
    display: block;
    background: rgba(251, 244, 226, 0.4);
    border: 1px solid rgba(22, 35, 79, 0.15);
}

.ladder .road .band.reached {
    background: rgba(251, 244, 226, 0.8);
    border-color: rgba(22, 35, 79, 0.3);
}

.ladder .gift {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs);
    color: #6b5332;
    white-space: nowrap;
    pointer-events: none;
}

.ladder .gift .coin,
.ladder .take .coin {
    position: relative;
    flex: none;
}

.ladder .gift .tick {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #2a1d10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A gift waiting: the coin and its number, shining, larger under the mouse, sunk when pressed. */
.ladder .take {
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
    transition: transform 0.08s;
    z-index: 1;
}

.ladder .take:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.05); }
.ladder .take:not(:disabled):active { transform: translate(-50%, -50%) scale(0.92); }
.ladder .take:disabled { opacity: 0.5; }

.ladder .take b {
    font-size: var(--fs);
    font-weight: 700;
    color: #2a1d10;
    line-height: 1;
}

.ladder .take .shine {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(226, 182, 74, 0.07);
    animation: ladder-shine 0.9s ease-in-out infinite alternate;
}

@keyframes ladder-shine {
    from { transform: scale(1); background: rgba(226, 182, 74, 0.07); }
    to { transform: scale(var(--grow)); background: rgba(226, 182, 74, 0.14); }
}

/* ---- news on the felt: a refusal, a gift given, what idle months took ---- */

.ladder .news {
    margin: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: 0 calc(2.5 * var(--h));
    border: 1px solid #b0935e;
    border-radius: calc(2 * var(--h));
    background: rgba(245, 232, 201, 0.95);
    font-size: var(--fs);
    color: #1f3f8f;
    white-space: nowrap;
    overflow: hidden;
    z-index: 5;
}

.ladder .news.bad { color: #bf2a26; }

/* Persian: the places stay as they are, and the words are written in Vazirmatn and from the right. */
[dir="rtl"] .ladder { font-family: "Vazirmatn", "Alegreya", Tahoma, sans-serif; }
[dir="rtl"] .ladder .say,
[dir="rtl"] .ladder .how,
[dir="rtl"] .ladder .quiet,
[dir="rtl"] .ladder .head,
[dir="rtl"] .ladder .news,
[dir="rtl"] .ladder .gift,
[dir="rtl"] .ladder .take,
[dir="rtl"] .ladder .tab .name,
[dir="rtl"] .ladder .back .word,
[dir="rtl"] .ladder .title { direction: rtl; }
[dir="rtl"] .ladder .title,
[dir="rtl"] .ladder .head .named,
[dir="rtl"] .ladder .caps { letter-spacing: 0; }