/* The door, as the game's tile door lays it (DoorTiles.cs). 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. */

.menu {
    --plaque-w: min(calc(40.5 * var(--h)), calc(0.27 * var(--w)));
    --plaque-h: calc(7.8 * var(--h));
    --pitch: calc(8.85 * var(--h));
    --left: calc(4.5 * var(--h));
    --column: calc(19 * var(--h));
    --from: calc(var(--left) + var(--plaque-w) + 4 * var(--h));
    --wall: calc(var(--w) - 7 * var(--h) - var(--column) - var(--from));
    --paper-ink: #16234f;
    --enamel-navy: #16234f;
    --on-navy: #f6ecd4;
    --crimson: #a8151c;
    --card-paper: #fbf4e2;
    --tile-ink: #2a1d10;
    --tile-soft: #6b5332;
    --tile-cobalt: #1f3f8f;
    --tile-red: #bf2a26;
    --veil: transparent;
    --painted: none;

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

/* Night (Night.cs): a lapis veil over the same wall, the inks turned, the paintings a little dimmer. */
.menu.night {
    --veil: rgba(5, 9, 23, 0.70);
    --paper-ink: #eee2c3;
    --card-paper: #212c50;
    --crimson: #e46a5e;
    --tile-ink: #f0e5c9;
    --tile-soft: #c2b28f;
    --tile-cobalt: #9fb5ec;
    --tile-red: #ff9a8a;
    --painted: brightness(0.84);
}

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

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

/* ---- the ways in, down the left ---- */

.menu .ways {
    position: absolute;
    left: var(--left);
    top: calc(4 * var(--h));
    display: flex;
    flex-direction: column;
    gap: calc(var(--pitch) - var(--plaque-h));
}

/* 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. */
.menu .way,
.menu .purse .coins {
    position: relative;
    height: var(--plaque-h);
    display: flex;
    align-items: center;
    isolation: isolate;
}

.menu .way::before,
.menu .purse .coins::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: var(--plain, url("../art/kit/button-plain.png")) 0 115 fill / 0 calc(var(--plaque-h) * 0.5) stretch;
    filter: var(--painted);
}

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

.menu .way {
    width: var(--plaque-w);
    padding: 0 calc(var(--plaque-h) * 0.45) 0 calc(var(--plaque-h) * 1.56);
    color: var(--paper-ink);
}

.menu .way:not(:disabled):hover { filter: brightness(1.15); }

.menu .way:not(:disabled):active::before,
.menu .purse .coins:not(:disabled):active::before {
    border-image-source: var(--plain-down, url("../art/kit/button-plain-down.png"));
    transform: translateY(max(2px, calc(var(--plaque-h) * 0.035)));
}

.menu .way:not(:disabled):active::after { visibility: hidden; }

/* A way not on the website yet is on the wall and quieter, and does not press. */
.menu .way:disabled { opacity: 0.55; }

.menu .way .sign {
    position: absolute;
    left: calc(var(--plaque-h) * 0.62);
    top: 50%;
    width: calc(var(--plaque-h) * 0.74);
    height: calc(var(--plaque-h) * 0.74);
    transform: translateY(-50%);
    object-fit: contain;
    filter: var(--painted);
}

.menu .way .word {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    font-size: calc(3.8 * var(--h));
    font-weight: 800;
    line-height: var(--plaque-h);
}

.menu .way:disabled .word { font-size: calc(3.4 * var(--h)); }

[dir="rtl"] .menu .way .word { direction: rtl; text-align: right; font-weight: 700; }

/* The count on a way: crimson for what waits for me, gold for what the house has on. */
.menu .badge {
    --dot: calc(var(--plaque-h) * 0.62);
    position: absolute;
    left: calc(var(--plaque-w) - var(--dot) * 0.95);
    top: calc(var(--dot) * -0.2);
    width: var(--dot);
    height: var(--dot);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: max(1.5px, calc(var(--dot) * 0.08)) solid var(--on-navy);
    background: var(--crimson);
    color: var(--on-navy);
    font-size: calc(var(--dot) * 0.5);
    font-weight: 800;
    line-height: 1;
}

.menu .badge.gold { background: #e2b64a; color: var(--enamel-navy); }

/* ---- the round buttons at the column's foot ---- */

.menu .rounds {
    --round: calc(8.5 * var(--h));
    position: absolute;
    left: var(--left);
    top: calc(88.5 * var(--h));
    height: var(--round);
    display: flex;
    align-items: center;
    gap: calc(2.2 * var(--h));
}

.menu .round {
    position: relative;
    width: var(--round);
    height: var(--round);
    flex: none;
}

.menu .round img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: calc(100% / 0.975);
    transform: translate(-50%, -50%);
    filter: var(--painted);
}

.menu .round:not(:disabled):hover { filter: brightness(1.15); }

.menu .round.pairs .base { width: 100%; height: 100%; }
.menu .round.pairs .mark { width: 62%; height: auto; opacity: 0.45; }

/* The pairs game's sign (DoorPairs.PairsMark): bright while today's board is open to play, with
   the gold dot at its foot; the streak's five beads along its brow once the board is unlocked. */
.menu .round.pairs.open .mark { opacity: 1; }

.menu .round.pairs .beads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.menu .promise {
    margin-left: calc(1.8 * var(--h) - 2.2 * var(--h));
    max-width: calc(52 * var(--h));
    overflow: hidden;
    white-space: nowrap;
    font-size: calc(3.2 * var(--h));
    font-weight: 800;
    color: var(--tile-ink);
}

[dir="rtl"] .menu .promise { direction: rtl; font-weight: 700; }

/* ---- down the right: my face, my farr, my purse ---- */

.menu .mine {
    position: absolute;
    right: calc(3 * var(--h));
    top: calc(2 * var(--h));
    width: var(--column);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(1.5 * var(--h));
}

/* A round frame with a face in its window (Tiles.DrawInOval): my own, and each house's king. */
.menu .me,
.menu .king {
    --a: calc(19 * var(--h));
    position: relative;
    width: var(--a);
    height: calc(var(--a) * 1.12);
    flex: none;
}

.menu .me .frame,
.menu .king .frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    filter: var(--painted);
}

.menu .me .window,
.menu .king .window {
    position: absolute;
    left: calc(var(--a) * 0.13);
    top: calc(var(--a) * 0.084);
    width: calc(var(--a) * 0.74);
    height: calc(var(--a) * 0.74);
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    border: max(1.5px, calc(var(--a) * 0.0167)) solid #e2b64a;
    box-shadow: 0 0 0 1px #3a2a12;
    background: var(--cream);
}

.menu .me .window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

/* My name on the plaque under my face, in the day's ink by night too. */
.menu .me .plaque {
    position: absolute;
    left: calc(var(--a) * 0.075);
    top: calc(var(--a) * 0.842);
    width: calc(var(--a) * 0.85);
    height: calc(var(--a) * 0.352);
    z-index: 2;
    display: grid;
    place-items: center;
    background: url("../art/table/my-plaque.png") center / 100% 100% no-repeat;
    color: #2a1d10;
    font-size: calc(var(--a) * 0.148);
}

.menu .me .plaque span {
    max-width: 72%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2;
}

/* The farr plaque (DoorFarr.cs): a plain card, my step's medal and name, the road's bar, my farr
   against where the next step begins, and my two places under a gold hairline. */
.menu .farr {
    --u: calc(10.5 * var(--h));
    position: relative;
    width: 100%;
    height: var(--u);
    border-radius: calc(1.8 * var(--h));
    background: var(--card-paper) !important;
    border: max(1px, calc(0.18 * var(--h))) solid rgba(22, 35, 79, 0.35) !important;
    box-shadow: 0 0 calc(0.6 * var(--h)) rgba(0, 0, 0, 0.14);
    flex: none;
}

.menu .farr.placed { height: calc(var(--u) * 1.44); }

.menu .farr .step {
    position: absolute;
    left: 5%;
    right: 5%;
    top: calc(var(--u) * 0.28);
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--u) * 0.06);
}

.menu .farr .medal {
    --r: calc(var(--u) * 0.14);
    position: relative;
    width: calc(var(--r) * 2.1);
    height: calc(var(--r) * 2.1);
    flex: none;
}

.menu .farr .medal img:first-child { width: 100%; height: 100%; }

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

.menu .farr .step b {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: calc(var(--u) * 0.22);
    font-weight: 800;
    color: var(--tile-cobalt);
}

.menu .farr .bar {
    position: absolute;
    left: 10%;
    width: 80%;
    top: calc(var(--u) * 0.52);
    height: calc(var(--u) * 0.1);
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #e2b64a;
    background: rgba(107, 83, 50, 0.22);
    overflow: hidden;
}

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

.menu .farr .numbers {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--u) * 0.8);
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--u) * 0.06);
    font-size: calc(var(--u) * 0.19);
    color: var(--tile-ink);
    white-space: nowrap;
}

.menu .farr .numbers img { height: calc(var(--u) * 0.266); }

.menu .farr .places {
    position: absolute;
    left: 7%;
    right: 7%;
    top: calc(var(--u) * 0.98);
    height: calc(var(--u) * 0.42);
    display: flex;
    border-top: max(1px, calc(0.15 * var(--h))) solid rgba(226, 182, 74, 0.7);
}

.menu .farr .places span {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    line-height: 1.1;
}

.menu .farr .places span + span { border-left: max(1px, calc(0.15 * var(--h))) solid rgba(226, 182, 74, 0.7); }
.menu .farr .places b { font-size: calc(var(--u) * 0.19); font-weight: 800; color: var(--tile-cobalt); }
.menu .farr .places small { font-size: calc(var(--u) * 0.12); color: var(--tile-soft); }

/* The purse (Kit.Purse): the coin and the number on an ivory plaque, the round plus beside it. */
.menu .purse {
    display: flex;
    align-items: center;
    gap: calc(1 * var(--h));
}

.menu .purse .coins {
    gap: calc(var(--plaque-h) * 0.2);
    padding: 0 calc(var(--plaque-h) * 0.53) 0 calc(var(--plaque-h) * 0.5);
    color: var(--paper-ink);
}

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

.menu .purse .plus {
    position: relative;
    width: calc(var(--plaque-h) * 0.92);
    height: calc(var(--plaque-h) * 0.92);
    background: var(--main, url("../art/kit/round-main.png")) center / 100% 100% no-repeat;
    filter: var(--painted);
}

.menu .purse .plus::before,
.menu .purse .plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40%;
    height: max(2px, 8%);
    border-radius: 1px;
    background: var(--on-navy);
    transform: translate(-50%, -50%);
}

.menu .purse .plus::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ---- the wall in the middle ---- */

.menu .wall {
    position: absolute;
    left: var(--from);
    width: var(--wall);
    top: 0;
    height: 100%;
}

/* The game's name across the top: cobalt, ringed in gold, with a shadow under it. */
.menu .wall h1 {
    margin: calc(3 * var(--h)) 0 0;
    font-size: calc(10.5 * var(--h));
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    color: var(--tile-cobalt);
    -webkit-text-stroke: max(3px, calc(10.5 * var(--h) / 18)) #e2b64a;
    paint-order: stroke fill;
    text-shadow: 0 max(2px, calc(0.26 * var(--h))) 0 rgba(41, 26, 8, 0.35);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    direction: ltr;
}

.menu .motto {
    margin: 0;
    font-size: calc(2.6 * var(--h));
    letter-spacing: 0.18em;
    line-height: 1.5;
    color: var(--tile-cobalt);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* The four sons' houses, each its king in a round frame with the suit's disc at its foot. */
.menu .kings {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(17 * var(--h));
    height: calc(54.5 * var(--h));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(min(calc(30 * var(--h)), calc(var(--wall) / 4.4)) * 0.07);
}

.menu .king {
    --a: min(calc(30 * var(--h)), calc(var(--wall) / 4.4));
    transition: transform 0.12s;
}

.menu .king:hover { transform: scale(1.04); }

.menu .king::before {
    content: "";
    position: absolute;
    left: calc(var(--a) * 0.05);
    top: calc(var(--a) * 0.004);
    width: calc(var(--a) * 0.9);
    height: calc(var(--a) * 0.9);
    border-radius: 45%;
    box-shadow: 0 calc(var(--a) * 0.02) calc(var(--a) * 0.05) rgba(51, 31, 8, 0.25);
}

.menu .king .window img {
    position: absolute;
    width: 161.29%;
    max-width: none;
    left: -35.48%;
    top: -17.74%;
}

.menu .king .suit {
    position: absolute;
    left: calc(var(--a) * 0.338);
    top: calc(var(--a) * 0.7535);
    width: calc(var(--a) * 0.324);
    height: calc(var(--a) * 0.324);
    box-sizing: border-box;
    z-index: 2;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f6e6c0;
    border: calc(var(--a) * 0.012) solid #1f3f8f;
    box-shadow: inset 0 0 0 calc(var(--a) * 0.015) #f6e6c0, inset 0 0 0 calc(var(--a) * 0.021) #e2b64a;
}

.menu .king .suit img { height: calc(var(--a) * 0.1575); }

/* The free chests' band (DoorGift.cs), with the shah's letter at its start. */
.menu .band {
    --tall: calc(9 * var(--h));
    position: absolute;
    left: 50%;
    top: calc(74.5 * var(--h));
    height: calc(10 * var(--h));
    width: min(var(--wall), max(calc(72 * var(--h)), calc(var(--wall) * 0.82)));
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 0 calc(3 * var(--h)) 0 calc(1.8 * var(--h));
    display: flex;
    align-items: flex-end;
    gap: calc(2 * var(--h));
    border-radius: calc(1.8 * var(--h));
    background: color-mix(in srgb, var(--card-paper) 55%, transparent);
    border: max(1px, calc(0.2 * var(--h))) solid rgba(22, 35, 79, 0.2);
}

.menu .band.lit {
    background: color-mix(in srgb, var(--card-paper) 85%, transparent);
    border-color: rgba(22, 35, 79, 0.4);
}

.menu .band .letter {
    position: relative;
    height: calc(var(--tall) * 1.05);
    width: calc(var(--tall) * 0.6);
    margin-bottom: calc(var(--tall) * 0.08);
    flex: none;
}

.menu .band .letter img { height: 100%; margin: 0 auto; filter: var(--painted); }

.menu .band .letter b {
    position: absolute;
    right: calc(var(--tall) * -0.12);
    top: 0;
    min-width: calc(var(--tall) * 0.3);
    height: calc(var(--tall) * 0.3);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--enamel-navy);
    border: max(1px, calc(var(--tall) * 0.02)) solid var(--on-navy);
    color: #fff;
    font-size: calc(var(--tall) * 0.2);
    font-weight: 800;
}

.menu .band .letter b.done { background: var(--crimson); }

.menu .band .chest {
    position: relative;
    height: calc(var(--tall) * 1.02);
    width: calc(var(--tall) * 1.07);
    margin-bottom: calc(var(--tall) * 0.08);
    flex: none;
    display: grid;
    place-items: center;
}

.menu .band .chest::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -4%;
    height: 22%;
    border-radius: 50%;
    background: rgba(42, 29, 16, 0.10);
}

.menu .band .chest img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.22;
    filter: grayscale(1) sepia(0.6);
}

.menu .band .chest.full::before { background: rgba(42, 29, 16, 0.16); }
.menu .band .chest.full img { opacity: 1; filter: var(--painted); }
.menu .band .chest.full:first-of-type img { animation: breathe 1.8s ease-in-out infinite; }

@keyframes breathe {
    50% { transform: scale(1.03); }
}

.menu .band .chest small {
    position: absolute;
    font-size: calc(var(--tall) * 0.2);
    font-weight: 800;
    color: var(--tile-cobalt);
    white-space: nowrap;
}

.menu .band .caption {
    flex: 1;
    align-self: center;
    font-size: calc(3.2 * var(--h));
    color: var(--tile-soft);
    line-height: 1.2;
}

.menu .band.lit .caption { font-weight: 800; color: var(--tile-cobalt); }
[dir="rtl"] .menu .band .caption { direction: rtl; font-weight: 400; }
[dir="rtl"] .menu .band.lit .caption { font-weight: 700; }

.menu .line {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(85.5 * var(--h));
    margin: 0;
    text-align: center;
    font-size: calc(2.4 * var(--h));
    font-weight: 800;
    color: var(--tile-red);
}

/* ---- the music player (MusicPlayer.cs): a capsule of frosted glass in the corner ---- */

.menu .music {
    --u: min(calc(100 * var(--h)), calc(var(--w) / 1.6));
    position: absolute;
    right: calc(3 * var(--h));
    bottom: calc(3 * var(--h));
    width: calc(var(--u) * 0.534);
    height: calc(var(--u) * 0.092);
    box-sizing: border-box;
    padding: 0 calc(var(--u) * 0.03);
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.012);
    border-radius: 999px;
    background: rgba(253, 246, 230, 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: max(1px, calc(var(--u) * 0.002)) solid rgba(255, 254, 247, 0.85);
    box-shadow: 0 calc(var(--u) * 0.004) calc(var(--u) * 0.01) rgba(38, 26, 8, 0.22);
    color: var(--paper-ink);
    direction: ltr;
}

.menu.night .music {
    background: rgba(20, 28, 56, 0.58);
    border-color: rgba(153, 128, 82, 0.85);
}

.menu .music .name {
    width: calc(var(--u) * 0.10);
    display: grid;
    justify-items: center;
    gap: calc(var(--u) * 0.006);
}

.menu .music .tune { font-size: calc(var(--u) * 0.026); white-space: nowrap; }
.menu .music .tune i { display: none; font-style: normal; }
.menu .music .tune i.on { display: inline; }
.menu .music .dots { display: flex; gap: calc(var(--u) * 0.007); align-items: center; }

.menu .music .dots i {
    width: calc(var(--u) * 0.0076);
    height: calc(var(--u) * 0.0076);
    border-radius: 50%;
    background: var(--paper-ink);
    opacity: 0.28;
}

.menu .music .dots i.on { width: calc(var(--u) * 0.0096); height: calc(var(--u) * 0.0096); opacity: 1; }

.menu .music .rule {
    width: 1px;
    height: 52%;
    background: var(--paper-ink);
    opacity: 0.45;
}

.menu .music button { width: calc(var(--u) * 0.044); height: calc(var(--u) * 0.044); display: grid; place-items: center; }

.menu .music svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--paper-ink);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu .music svg .fill { fill: var(--paper-ink); stroke: none; }
.menu .music svg text { font: 700 7px sans-serif; fill: var(--paper-ink); stroke: none; text-anchor: middle; }

.menu .music [data-do="loop"] { opacity: 0.45; }
.menu .music.looping [data-do="loop"] { opacity: 1; }

.menu .music .play {
    width: calc(var(--u) * 0.058);
    height: calc(var(--u) * 0.058);
    border-radius: 50%;
    background: var(--enamel-navy);
}

.menu.night .music .play { background: #34509c; }
.menu .music .play svg { width: 70%; height: 70%; stroke: var(--on-navy); stroke-width: 2.6; }
.menu .music .play svg .fill { fill: var(--on-navy); }
.menu .music .play .off { display: none; }
.menu .music.playing .play .off { display: inline; }
.menu .music.playing .play .on { display: none; }

.menu .music .cross { display: none; }
.menu .music.quiet .cross { display: inline; }
.menu .music.quiet .waves { display: none; }

.menu .music .loud { width: calc(var(--u) * 0.08); display: flex; align-items: center; }

.menu .music .loud input {
    width: 100%;
    accent-color: var(--paper-ink);
    margin: 0;
}

.menu .music .less {
    position: absolute;
    right: calc(var(--u) * 0.02);
    top: calc(var(--u) * 0.004);
    width: calc(var(--u) * 0.026);
    height: calc(var(--u) * 0.026);
    opacity: 0.7;
}

.menu .music .more { display: none; }

/* The small form: the pause and the two notes that open it again. */
.menu .music.small {
    width: calc(var(--u) * 0.075 * 1.74);
    height: calc(var(--u) * 0.075);
    padding: 0;
    justify-content: center;
}

.menu .music.small > :not(.play):not(.more) { display: none; }
.menu .music.small .more { display: grid; }

.menu .stamp {
    position: absolute;
    right: calc(0.6 * var(--h));
    bottom: calc(0.2 * var(--h));
    font-size: max(10px, calc(1.85 * var(--h)));
    color: rgba(92, 77, 51, 0.75);
    direction: ltr;
}

/* ---- a house's page, opened from its king ---- */

.menu .house {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(13, 10, 5, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(6 * var(--h));
    animation: open 0.15s ease-out;
}

@keyframes open {
    from { opacity: 0; }
}

.menu .house .cards {
    display: grid;
    grid-template-columns: repeat(2, calc(20 * var(--h)));
    grid-auto-rows: calc(28 * var(--h));
    gap: calc(2.5 * var(--h));
}

.menu .house .cards > * { width: 100%; height: 100%; }

.menu .house .panel {
    width: min(calc(80 * var(--h)), calc(var(--w) * 0.5));
    height: calc(50 * var(--h));
    box-sizing: border-box;
    padding: calc(4.5 * var(--h)) calc(5 * var(--h));
    border-radius: calc(1.8 * var(--h));
    background: #fbf4e2;
    border: max(1px, calc(0.2 * var(--h))) solid #c9974a;
    color: #2a1d10;
}

.menu .house h2 { margin: 0; font-size: calc(5.5 * var(--h)); font-weight: 800; }
.menu .house .side { margin: calc(1 * var(--h)) 0 calc(2 * var(--h)); font-size: calc(2.8 * var(--h)); color: #6b5332; white-space: pre; }
.menu .house .story { margin: 0; font-size: calc(3.1 * var(--h)); line-height: 1.4; }
[dir="rtl"] .menu .house .panel { direction: rtl; }

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

/* The way back to the door on every page beside it. */
.online h1 .to-door {
    width: calc(5.4 * var(--h));
    height: calc(5.4 * var(--h));
    margin-right: calc(1.4 * var(--h));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    vertical-align: middle;
}

.online h1 .to-door img { width: 100%; height: 100%; transform: scaleX(-1); display: block; }
.online h1 .to-door:disabled { opacity: 0.3; cursor: default; }

/* Persian: the door keeps its places, and its words are written in Vazirmatn and from the right.
   The game's name stays as the game writes it. */
[dir="rtl"] .menu {
    direction: ltr;
    font-family: "Vazirmatn", "Alegreya", Tahoma, sans-serif;
}

[dir="rtl"] .menu .wall h1 { font-family: "Alegreya", Georgia, serif; }
[dir="rtl"] .menu .motto,
[dir="rtl"] .menu .me .plaque,
[dir="rtl"] .menu .farr { direction: rtl; }
[dir="rtl"] .menu .motto { letter-spacing: 0; }