/* «جفت», the pairs game, as the game's PairsView lays it. 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 (H the
   height, W the width). The tray is the kit's cream panel, the cards lie on its floor. */

.pairs {
    /* The tray: as wide as the screen leaves, at most one and a half heights. */
    --wide: min(calc(var(--w) - 6 * var(--h)), calc(150 * var(--h)));
    --rim: calc(var(--wide) * 0.035);
    --head-h: calc(6.5 * var(--h));
    /* The floor the thirteen cards lie on, under the head. */
    --fw: calc(var(--wide) - 2 * var(--rim));
    --fh: calc(61 * var(--h) - 2 * var(--rim) - var(--head-h));
    /* Seven across with a card's sixth between them, two rows with a gap. */
    --cw: min(calc(var(--fw) * 0.96 / 7.96), calc(var(--fh) * 0.95 / 2.12 * 0.72));
    --ch: calc(var(--cw) / 0.72);
    --plaque-h: calc(7.8 * var(--h));
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --ink: #2a1d10;
    --ink-soft: #6b5332;
    --crimson: #a8151c;
    --gold-bright: #e2c268;

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

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

.pairs img { display: block; pointer-events: none; }

/* ---- the top: the way back, the name, the purse ---- */

/* The kit's ivory plaque (Kit.Button, Kind.Plain): its pointed ends whole, its middle star whole
   and in the middle, and only the plain strip between them stretched. */
.pairs .to-door,
.pairs .purse {
    position: absolute;
    top: calc(3 * var(--h));
    height: var(--plaque-h);
    display: flex;
    align-items: center;
    isolation: isolate;
    color: var(--paper-ink);
}

.pairs .to-door::before,
.pairs .purse::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(--plaque-h) * 0.5) stretch;
}

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

/* The way back (Kit.Back): 0.24H by 0.078H at (0.03H, 0.03H), the navy arrow at its left end
   pointing left in every language, and the name of where it goes. */
.pairs .to-door {
    left: calc(3 * var(--h));
    width: calc(24 * var(--h));
}

.pairs .to-door:hover { filter: brightness(1.1); }

.pairs .to-door:active::before {
    border-image-source: url("../art/kit/button-plain-down.png");
    transform: translateY(max(2px, calc(var(--plaque-h) * 0.035)));
}

.pairs .to-door:active::after { visibility: hidden; }

.pairs .to-door .arrow {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--plaque-h);
    height: var(--plaque-h);
}

.pairs .to-door .arrow path { stroke: var(--paper-ink); stroke-width: 7.5; fill: none; }
.pairs .to-door .arrow polygon { fill: var(--paper-ink); }

.pairs .to-door span {
    position: absolute;
    left: calc(var(--plaque-h) * 0.55);
    right: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-size: calc(3 * var(--h));
    font-weight: 800;
    line-height: var(--plaque-h);
}

/* The name of the screen (Kit.Title): cream with a dark edge, beside the way back and as tall. */
.pairs .title {
    position: absolute;
    left: calc(31 * var(--h));
    top: calc(3 * var(--h) + (7.8 * var(--h) - 6.5 * var(--h)) / 2);
    margin: 0;
    font-size: calc(5 * var(--h));
    line-height: calc(6.5 * var(--h));
    font-weight: 700;
    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;
}

/* The purse (Kit.Purse) at the top right, without the plus: the website sells no coins. */
.pairs .purse {
    right: calc(3 * var(--h));
    gap: calc(var(--plaque-h) * 0.18);
    padding: 0 calc(var(--plaque-h) * 0.55) 0 calc(var(--plaque-h) * 0.5);
}

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

/* Nothing said yet: the felt waits. */
.pairs .moment {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50 * var(--h));
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(3.6 * var(--h));
    color: var(--on-navy);
}

/* ---- the streak and the day's line ---- */

/* Five stars in a box 0.42H by 0.055H at (W/2 - 0.21H, 0.095H). */
.pairs .stars {
    position: absolute;
    left: calc(var(--w) / 2 - 21 * var(--h));
    top: calc(9.5 * var(--h));
    width: calc(42 * var(--h));
    height: calc(5.5 * var(--h));
    overflow: visible;
}

.pairs .day {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(16.8 * var(--h));
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: calc(2.6 * var(--h));
    color: var(--on-navy);
    white-space: nowrap;
}

/* ---- the kit's panel: flat cream paper, a matte ochre edge, soft corners, a soft shadow and
   nard's sun in each corner close inside the edge (Kit.DrawPanel) ---- */

.pairs .lacquer,
.pairs .foot {
    position: absolute;
    box-sizing: border-box;
    background-color: #f5e8c9;
    background-image: url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png"), url("../art/kit/sun.png");
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: var(--sun) var(--sun);
    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));
    border: max(2px, calc(0.45 * var(--h))) solid #b0935e;
    border-radius: calc(1.6 * var(--h));
    box-shadow: 0 calc(0.6 * var(--h)) max(4px, calc(1.6 * var(--h))) rgba(0, 0, 0, 0.3);
}

/* The tray: wide by 0.61H, from 0.2H down, in the middle. */
.pairs .lacquer {
    --sun: min(calc(6 * var(--h)), calc(61 * var(--h) * 0.2));
    left: calc((var(--w) - var(--wide)) / 2);
    top: calc(20 * var(--h));
    width: var(--wide);
    height: calc(61 * var(--h));
}

/* The tray's head, inside the rim: the lanterns on one side, the shelf of won backs on the other. */
.pairs .head {
    position: absolute;
    left: calc(var(--rim) - max(2px, 0.45 * var(--h)));
    top: calc(var(--rim) - max(2px, 0.45 * var(--h)));
    width: var(--fw);
    height: var(--head-h);
}

/* A lantern a try, lit while it is left: 1.1 of the head tall, past the corner's star. */
.pairs .lantern {
    position: absolute;
    left: calc(var(--fw) * 0.04 + var(--i) * var(--head-h) * 1.1 * 0.62 * 1.15);
    top: calc(var(--head-h) * -0.05);
    width: calc(var(--head-h) * 1.1 * 0.62);
    height: calc(var(--head-h) * 1.1);
    object-fit: contain;
}

/* The shelf of the day's won backs at the head's right end, its label before them. */
.pairs .winnings {
    position: absolute;
    right: calc(var(--fw) * 0.04);
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: calc(var(--head-h) * 0.9 * 0.72 * 0.12);
}

.pairs .winnings .label {
    margin-right: calc(1.2 * var(--h));
    font-size: calc(2 * var(--h));
    color: var(--ink-soft);
    white-space: nowrap;
}


.pairs .mini {
    position: relative;
    width: calc(var(--head-h) * 0.9 * 0.72);
    height: calc(var(--head-h) * 0.9);
    flex: none;
}

.pairs .mini .card { --wide: 100%; aspect-ratio: auto; height: 100%; box-shadow: none; }

/* The floor under the head, where the thirteen cards lie in rows of seven and six. */
.pairs .floor {
    position: absolute;
    left: calc(var(--rim) - max(2px, 0.45 * var(--h)));
    top: calc(var(--rim) + var(--head-h) - max(2px, 0.45 * var(--h)));
    width: var(--fw);
    height: var(--fh);
}

/* ---- the cards ---- */

.pairs .slot {
    --gap: calc(var(--cw) * 0.16);
    --x: calc((var(--fw) - (var(--inrow) * var(--cw) + (var(--inrow) - 1) * var(--gap))) / 2 + var(--col) * (var(--cw) + var(--gap)));
    --y: calc((var(--fh) - 2.12 * var(--ch)) / 2 + var(--row) * 1.12 * var(--ch));
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--cw);
    height: var(--ch);
    transition: transform 0.12s cubic-bezier(0.61, 1, 0.88, 1);
}

.pairs .slot.tap { cursor: pointer; }

/* A card to touch lifts a little while the pointer is over it. */
.pairs .slot.tap:hover { transform: translateY(calc(var(--ch) * -0.05)) scale(1.03); }

.pairs .turn {
    position: absolute;
    inset: 0;
}

.pairs .front,
.pairs .behind {
    position: absolute;
    inset: 0;
}

.pairs .slot .card {
    --wide: 100%;
    aspect-ratio: auto;
    height: 100%;
    box-shadow: 0 calc(0.35 * var(--h)) calc(0.7 * var(--h)) rgba(0, 0, 0, 0.4);
}

.pairs .turn.down .front { visibility: hidden; }
.pairs .turn:not(.down) .behind { visibility: hidden; }

/* The card lying open, the first of a try: up off the tray, its shadow deeper. */
.pairs .slot.lifted .card { box-shadow: 0 calc(1 * var(--h)) calc(2 * var(--h)) rgba(0, 0, 0, 0.45); }

/* The day over: a pair won in a steady warm light with a gold ring (CardSlot.Won), and a card
   never matched held back a shade. */
.pairs .slot.won .card {
    box-shadow: 0 0 calc(var(--cw) * 0.2) calc(var(--cw) * 0.03) rgba(255, 214, 77, 0.9);
}

.pairs .slot.won .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: max(2px, calc(var(--cw) * 0.03)) solid #ffe680;
    border-radius: inherit;
}


.pairs .slot.passed .turn { filter: brightness(0.6); }

/* What the joker and a coin card hide, over the card's back: the simurgh's feather, the coins. */
.pairs .behind .feather,
.pairs .mini .feather {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 72%;
    transform: translate(-50%, -50%);
}

.pairs .behind .coins,
.pairs .mini .coins {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
}

/* A card turned over on its long axis (CardSlot.Flip): its width |cos(pi t)| over a sine in and
   out, the other side showing from half way. */
@keyframes pairs-flip {
    0% { transform: scaleX(1); }
    10% { transform: scaleX(0.997); }
    15% { transform: scaleX(0.985); }
    20% { transform: scaleX(0.955); }
    25% { transform: scaleX(0.896); }
    30% { transform: scaleX(0.798); }
    35% { transform: scaleX(0.654); }
    40% { transform: scaleX(0.467); }
    45% { transform: scaleX(0.243); }
    50% { transform: scaleX(0); }
    55% { transform: scaleX(0.243); }
    60% { transform: scaleX(0.467); }
    65% { transform: scaleX(0.654); }
    70% { transform: scaleX(0.798); }
    75% { transform: scaleX(0.896); }
    80% { transform: scaleX(0.955); }
    85% { transform: scaleX(0.985); }
    90% { transform: scaleX(0.997); }
    100% { transform: scaleX(1); }
}

@keyframes pairs-first-half {
    0%, 49.9% { visibility: visible; }
    50%, 100% { visibility: hidden; }
}

@keyframes pairs-second-half {
    0%, 49.9% { visibility: hidden; }
    50%, 100% { visibility: visible; }
}

.pairs .turn.to-down,
.pairs .turn.to-up { animation: pairs-flip 0.4s linear both; }

.pairs .turn.to-down .front,
.pairs .turn.to-up .behind { animation: pairs-first-half 0.4s linear both; }

.pairs .turn.to-down .behind,
.pairs .turn.to-up .front { animation: pairs-second-half 0.4s linear both; }

/* The day's end: the cards never matched go over one after another, and fall back a shade. */
@keyframes pairs-pass {
    from { filter: brightness(1); }
    to { filter: brightness(0.6); }
}

.pairs .slot.turning .turn {
    animation: pairs-flip 0.4s linear var(--turn) both, pairs-pass 0.3s linear calc(var(--turn) + 0.4s) both;
}

.pairs .slot.turning .turn .front { animation: pairs-first-half 0.4s linear var(--turn) both; }
.pairs .slot.turning .turn .behind { animation: pairs-second-half 0.4s linear var(--turn) both; }

/* Dealt from the pack just off the tray's top right corner: 0.32 s each, a sine out, growing from
   0.7, and seen at once. */
@keyframes pairs-deal {
    from {
        transform:
            translate(calc(var(--wide) - var(--rim) - 0.6 * var(--cw) - var(--x)), calc(0px - var(--rim) - var(--head-h) - 0.4 * var(--ch) - var(--y)))
            scale(0.7);
    }
    to { transform: translate(0, 0) scale(1); }
}

@keyframes pairs-seen {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pairs .slot.deal {
    animation:
        pairs-deal 0.32s cubic-bezier(0.61, 1, 0.88, 1) var(--deal) backwards,
        pairs-seen 0.12s linear var(--deal) backwards;
}

/* A pair won: both cards to the middle of the floor, side by side, and grown by a third. */
@keyframes pairs-together {
    to {
        transform:
            translate(calc(var(--fw) / 2 + var(--side) * 0.81 * var(--cw) - var(--cw) / 2 - var(--x)), calc(var(--fh) / 2 - var(--ch) / 2 - var(--y)))
            scale(1.35);
    }
}

.pairs .slot.paired {
    z-index: 5;
    animation: pairs-together 0.45s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

/* The back a pair won, said to be theirs under the two cards (the game opens its page here). */
.pairs .prize {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--fh) / 2 + var(--ch) * 1.35 / 2 + 1.2 * var(--h));
    z-index: 7;
    margin: 0;
    text-align: center;
    font-size: calc(4 * var(--h));
    font-weight: 800;
    color: var(--gold-bright);
    -webkit-text-stroke: max(1.5px, calc(0.22 * var(--h))) #1e1712;
    paint-order: stroke fill;
    text-shadow: 0 calc(0.3 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.45);
    animation: pairs-seen 0.25s linear both;
}

/* The coins a pair paid, flown to the purse (pairs.js): 0.4H wide over the middle of the floor. */
.pairs .coins-won {
    position: absolute;
    left: calc(var(--w) / 2 - 20 * var(--h));
    top: calc(20 * var(--h) + var(--rim) + var(--head-h) + var(--fh) / 2 - 3 * var(--h));
    width: calc(40 * var(--h));
    height: calc(6 * var(--h));
    z-index: 7;
    text-align: center;
    font-size: calc(5 * var(--h));
    line-height: calc(6 * var(--h));
    font-weight: 800;
    color: var(--gold-bright);
    pointer-events: none;
}

/* The shower over a pair won is drawn here by pairs.js, over the whole page. */
.pairs .sky {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.pairs .sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- the foot: the day's sentence, and the button when there is one ---- */

/* rect(0.06H, 0.83H, W - 0.12H, 0.155H) */
.pairs .foot {
    --sun: calc(15.5 * var(--h) * 0.2);
    --foot-w: calc(var(--w) - 12 * var(--h));
    left: calc(6 * var(--h));
    top: calc(83 * var(--h));
    width: var(--foot-w);
    height: calc(15.5 * var(--h));
}

.pairs .foot .line,
.pairs .foot .second {
    position: absolute;
    left: 5%;
    right: 5%;
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    line-height: 1.15;
}

/* The day's sentence round 0.32 of the sheet down, the smaller line under it round 0.66. */
.pairs .foot .line {
    top: calc(15.5 * var(--h) * 0.32 - max(2px, 0.45 * var(--h)));
    font-size: calc(3 * var(--h));
    color: var(--ink);
}

.pairs .foot .line.refused { color: var(--crimson); }

.pairs .foot .second {
    top: calc(15.5 * var(--h) * 0.66 - max(2px, 0.45 * var(--h)));
    font-size: calc(2.7 * var(--h));
    color: var(--ink-soft);
}

/* The navy enamel button (Kit.Button, Kind.Main): min(0.4 of the sheet, 0.42H) by 0.07H, its top
   half way down the sheet. */
.pairs .foot .main {
    --button-h: calc(7 * var(--h));
    position: absolute;
    left: 50%;
    top: calc(15.5 * var(--h) * 0.5 - max(2px, 0.45 * var(--h)));
    width: min(calc(var(--foot-w) * 0.4), calc(42 * var(--h)));
    height: var(--button-h);
    transform: translateX(-50%);
    isolation: isolate;
    color: var(--on-navy);
    font-size: calc(3 * var(--h));
    font-weight: 800;
    white-space: nowrap;
}

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

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

.pairs .foot .main:hover { filter: brightness(1.15); }
.pairs .foot .main:disabled { opacity: 0.6; cursor: default; filter: none; }

/* ---- Persian: the page keeps its places, and its words are written in Vazirmatn and from the right ---- */

[dir="rtl"] .pairs {
    direction: ltr;
    font-family: "Vazirmatn", "Alegreya", Tahoma, sans-serif;
}

[dir="rtl"] .pairs .title,
[dir="rtl"] .pairs .day,
[dir="rtl"] .pairs .winnings .label,
[dir="rtl"] .pairs .foot p,
[dir="rtl"] .pairs .foot .main,
[dir="rtl"] .pairs .to-door span,
[dir="rtl"] .pairs .prize,
[dir="rtl"] .pairs .coins-won,
[dir="rtl"] .pairs .moment { direction: rtl; }

[dir="rtl"] .pairs .title,
[dir="rtl"] .pairs .to-door span,
[dir="rtl"] .pairs .foot .main { font-weight: 700; }

/* The page turns on its side on a phone held upright, as the door does. */
@media (orientation: portrait) {
    .pairs {
        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) {
    .pairs {
        inset: auto;
        left: 0;
        top: 0;
        width: 100dvh;
        height: 100dvw;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
        box-shadow: none;
    }
}