/* The sign-in: the four kings of the pack stand in a fan under the painted name, the hung crown
   above them, the house plaque in front. Everything here is sized by the height of the window, so
   the picture is the same one on a laptop and on a phone held either way; the kings are only
   bigger or smaller. The cards are dealt in when the page opens, then they breathe; the room
   leans a little after the pointer (or the tilt of the phone). Anybody who asked their browser
   for less motion gets the still picture. */

:root {
    --px: 0;
    --py: 0;
}

.door {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    isolation: isolate;
    /* The height of a card; its width follows the 5:7 of the pack. */
    --ch: clamp(230px, 60vh, 700px);
    --cw: calc(var(--ch) / 1.4);
}

/* The light: a warm fall from above the name, and the floor going dark under the kings. */
.door::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 48% at 50% -4%, rgba(255, 206, 110, 0.30), rgba(255, 206, 110, 0) 72%),
        radial-gradient(ellipse 90% 46% at 50% 108%, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 70%),
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35));
}

/* ---- the gold dust in the air ---- */

.door .dust {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.door .dust i {
    position: absolute;
    left: var(--x);
    bottom: -2vh;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle, #fff3c4 0%, #e2b64a 45%, rgba(226, 182, 74, 0) 72%);
    opacity: 0;
    animation: mote var(--t) linear var(--d) infinite;
    will-change: transform, opacity;
}

@keyframes mote {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    12% { opacity: var(--o); }
    50% { transform: translate(var(--w), -55vh) scale(1); }
    88% { opacity: var(--o); }
    100% { transform: translate(calc(var(--w) * -0.6), -108vh) scale(0.5); opacity: 0; }
}

/* ---- the kings ---- */

.door .stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    perspective: 1500px;
    pointer-events: none;
    overflow: hidden;
}

.door .hall {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--py) * -4deg)) rotateY(calc(var(--px) * 7deg));
    transition: transform 0.12s linear;
}

/* The floor under the fan. */
.door .hall::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-0.1 * var(--ch));
    width: calc(3.2 * var(--cw));
    height: calc(0.5 * var(--ch));
    margin-left: calc(-1.6 * var(--cw));
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 68%);
    transform: translateZ(-80px);
}

.door .king,
.door .shade {
    position: absolute;
    left: 50%;
    bottom: calc(-0.28 * var(--ch));
    width: var(--cw);
    height: var(--ch);
    margin-left: calc(var(--cw) / -2);
    transform-origin: 50% 190%;
    transform: rotate(var(--a)) translateZ(var(--z));
    animation: dealt 1.1s cubic-bezier(0.2, 0.9, 0.25, 1) var(--d) both;
    will-change: transform;
}

.door .king img,
.door .shade span {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6% / 4.3%;
    box-shadow:
        0 calc(0.03 * var(--ch)) calc(0.08 * var(--ch)) rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 234, 180, 0.35) inset;
    animation: breathe 5.5s ease-in-out var(--b) infinite;
}

/* The lamp on the card: a soft gold sheen across its top. */
.door .king::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6% / 4.3%;
    background: linear-gradient(165deg, rgba(255, 240, 200, 0.28), rgba(255, 240, 200, 0) 38%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.22));
    pointer-events: none;
}

/* Fereydun, Iraj, Tur, Salm from the left, and Iraj in front of them all (Mahdi, 2026-10-14). */
.door .king.diamonds { --a: -31deg; --z: 10px; --d: 0.15s; --b: 0s; z-index: 1; }
.door .king.hearts { --a: -11deg; --z: 70px; --d: 0.32s; --b: 1.4s; z-index: 3; }
.door .king.spades { --a: 11deg; --z: 40px; --d: 0.49s; --b: 2.7s; z-index: 2; }
.door .king.clubs { --a: 31deg; --z: 10px; --d: 0.66s; --b: 4.1s; z-index: 1; }

/* Two turned cards at the ends of the fan, farther back and in the dark. */
.door .shade { --z: -90px; z-index: 0; }
.door .shade.left { --a: -50deg; --d: 0s; --b: 0.7s; }
.door .shade.right { --a: 50deg; --d: 0.8s; --b: 3.3s; }

.door .shade span {
    background: url("../art/back.jpg") center / cover;
    filter: brightness(0.55) saturate(0.8);
}

@keyframes dealt {
    from { transform: rotate(0deg) translateY(calc(1.3 * var(--ch))) translateZ(var(--z)); opacity: 0; }
    30% { opacity: 1; }
    to { transform: rotate(var(--a)) translateY(0) translateZ(var(--z)); opacity: 1; }
}

@keyframes breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(-0.012 * var(--ch))); }
}

/* ---- the crown and the name ---- */

.door header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    width: 100%;
    pointer-events: none;
}

.door .hung {
    height: clamp(56px, 15vh, 170px);
    margin-bottom: clamp(-18px, -3.2vh, -8px);
    animation: dropped 1.3s cubic-bezier(0.3, 1.5, 0.45, 1) 0.1s both;
}

.door .hung img {
    display: block;
    height: 100%;
    width: auto;
    transform-origin: 50% 0;
    animation: swing 6s ease-in-out 1.3s infinite;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

@keyframes dropped {
    from { transform: translateY(-120%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes swing {
    0%, 100% { transform: rotate(-2.2deg); }
    50% { transform: rotate(2.2deg); }
}

.door > header .name {
    position: relative;
    width: min(84vw, 32vh * 2.355, 980px);
    aspect-ratio: 1100 / 467;
    transform: translate(calc(var(--px) * -1vmin), calc(var(--py) * -0.6vmin));
    transition: transform 0.12s linear;
}

.door .title {
    position: absolute;
    inset: 0;
    background: url("../art/door/title.png") center / contain no-repeat;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
    animation: named 1.2s cubic-bezier(0.2, 0.9, 0.25, 1) 0.5s both;
}

/* A light sweeping over the letters every few seconds, cut to their shape. The cut stands still
   and only the light inside it moves, by a transform, so the browser slides it without painting
   anything again (it used to move a background under the mask, inside the title's shadow, and
   painted both on every frame of the sweep). */
.door .shine {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask: url("../art/door/title.png") center / contain no-repeat;
    mask: url("../art/door/title.png") center / contain no-repeat;
}

.door .shine b {
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 250, 225, 0.75) 49%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-100%);
    animation: shine 7s ease-in-out 2.4s infinite;
    will-change: transform;
}

@keyframes named {
    from { transform: scale(1.12); opacity: 0; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(2); }
    to { transform: scale(1); opacity: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)) brightness(1); }
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    28%, 100% { transform: translateX(100%); }
}

.door .purse {
    position: absolute;
    top: 2vh;
    right: 3vw;
    pointer-events: auto;
}

/* ---- the plaque ---- */

/* The sun of the kit, faint and turning, behind the plaque. */
.door .halo {
    display: none;
    position: relative;
    z-index: 2;
    pointer-events: none;
    background: url("../art/kit/sun.png") center / contain no-repeat;
    opacity: 0.14;
    animation: turning 120s linear infinite, lit 2s ease-out 0.8s both;
    mix-blend-mode: screen;
}

@keyframes turning {
    to { transform: rotate(360deg); }
}

@keyframes lit {
    from { opacity: 0; }
    to { opacity: 0.14; }
}

.door .panel {
    position: relative;
    z-index: 3;
    margin: auto 0 4.5vh;
    width: min(92vw, 600px);
    transform-origin: 50% 100%;
    animation: arrived 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) var(--wait, 0s) both;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(226, 182, 74, 0.18));
}

.door .panel.first { --wait: 1s; }

@keyframes arrived {
    from { transform: perspective(900px) rotateX(38deg) translateY(10%); opacity: 0; }
    to { transform: perspective(900px) rotateX(0deg) translateY(0); opacity: 1; }
}

.door h2 {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.door input {
    transition: filter 0.15s, transform 0.15s;
}

.door input:focus {
    transform: scale(1.02);
    filter: brightness(1.05) drop-shadow(0 0 10px rgba(226, 182, 74, 0.55));
}

/* The code is six figures set wide apart, as on a ticket (in every language: the figures do not join). */
.door.coded input,
[dir="rtl"] .door.coded input {
    font-size: 1.7em;
    letter-spacing: 0.45em !important;
    text-indent: 0.45em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--navy);
}

.door button.main {
    transition: transform 0.15s, filter 0.15s;
}

.door button.main:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.12) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.door button.main:not(:disabled):active {
    transform: translateY(1px) scale(0.98);
    filter: brightness(0.95);
}

.door footer {
    position: relative;
    z-index: 3;
}

/* The picture is laid the same way from either side; only the writing on the plaque turns. */
[dir="rtl"] .door { direction: ltr; }
[dir="rtl"] .door .panel,
[dir="rtl"] .door .rule,
[dir="rtl"] .door .cups-list,
[dir="rtl"] .door footer { direction: rtl; }

/* ---- the kings' table: the game's table in a gold frame, measured by the frame's own height ---- */

/* The frame and its line under it, one box. */
.door .play {
    flex: none;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.door .arena {
    flex: none;
    position: relative;
    z-index: 2;
    --fh: min(calc((100vw - 32px) * 9 / 16), 44vh);
    height: var(--fh);
    width: calc(var(--fh) * 16 / 9);
    --h: calc(var(--fh) / 100);
    --w: calc(var(--fh) * 16 / 9);
    margin: 1vh 0 0;
    border: 3px solid var(--gold);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5);
    animation: arrived 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) both;
    background: #10261d;
}

.door .arena .table {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
}

.door .rule {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.2em 0.8em;
    margin: 0.6vh 16px 0;
    color: var(--cream);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    font-size: clamp(13px, 2vh, 17px);
    text-align: center;
}

.door .rule strong { color: var(--gold); }
.door .rule .plain { color: var(--cream); font-size: 0.9em; opacity: 0.85; }

/* The plaque that brings the sign-in back from a table the whole of the window: small, in the
   top right, on the bare wood between the score and the partner's chair, measured as the table
   is (by --h), so it never lies on a chair or a card. */
.back-to-door {
    position: fixed;
    right: calc(25 * var(--h));
    top: calc(1.5 * var(--h));
    z-index: 6;
    padding: 3px 16px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: rgba(20, 32, 79, 0.92);
    color: var(--cream);
    font: 600 14px var(--face);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* An upright window on a desk lays the table as a band across the middle: the plaque in the
   black above it. */
@media (orientation: portrait) {
    .back-to-door { right: 12px; top: 10px; }
}

/* A phone held upright lays the table on its side (play.css): the plaque turns with it, at the
   same spot of the table. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .back-to-door {
        right: calc(1.5 * var(--h));
        top: calc(100dvh - 25 * var(--h));
        transform-origin: 100% 0;
        transform: rotate(90deg);
    }
}

/* ---- the tournaments under the plaque ---- */

.door .cups-list {
    position: relative;
    z-index: 3;
    width: min(92vw, 600px);
    box-sizing: border-box;
    margin: 0 0 4vh;
    padding: 0 8px;
    color: var(--cream);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    font-size: clamp(13px, 2vh, 17px);
    animation: arrived 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) 0.3s both;
}

.door .cups-list h3 {
    margin: 0 0 0.3em;
    font-size: 1.15em;
    color: var(--gold);
    letter-spacing: 0.04em;
}

.door .cups-list .quiet { margin: 0; opacity: 0.75; }

.door .cups-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.door .cups-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 0.8em;
    padding: 0.35em 0.9em;
    border: 1px solid rgba(226, 182, 74, 0.55);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.32);
}

.door .cups-list li strong { color: var(--cream); }
.door .cups-list li span { color: var(--gold); white-space: nowrap; }
.door .cups-list li small { grid-column: 1 / -1; opacity: 0.8; }
.door .cups-list li.playing { border-color: var(--red); }

/* The nearest one as a small poster: the cream of the tournaments page with its band on the top
   edge, the name, the pot, a gold bar for how full it is and a clock running to its start. */
.door .cups-list .bill {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.3em 0.8em;
    margin: 1.1em 0 0.6em;
    padding: 1.2em 1em 0.8em;
    border: 2px solid var(--gold);
    border-radius: 12px;
    background: linear-gradient(#f8ecce, #ecd6a6);
    color: var(--navy);
    text-shadow: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.door .cups-list .bill.playing { border-color: var(--red); }

.door .cups-list .band {
    grid-column: 1 / -1;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: -2em;
    padding: 0.2em 1.1em;
    border: 1px solid var(--gold);
    border-radius: 6px;
    color: #f6ecd4;
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.door .cups-list .band svg { width: 0.7em; height: 0.7em; fill: var(--gold); }

.door .cups-list .named {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1.45em;
    line-height: 1.15;
    color: var(--navy);
}

.door .cups-list .pot {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    color: #8a5312;
}

.door .cups-list .fill {
    height: 8px;
    border-radius: 4px;
    background: rgba(22, 35, 79, 0.16);
    overflow: hidden;
}

.door .cups-list .fill i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0cf72, #c18d22);
}

.door .cups-list .count { font-size: 0.85em; color: #6b5332; white-space: nowrap; }

.door .cups-list .clock {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin-top: 0.2em;
    padding-top: 0.35em;
    border-top: 1px solid rgba(193, 141, 34, 0.55);
}

.door .cups-list .clock small { font-size: 0.85em; color: #6b5332; }
.door .cups-list .clock b { font-size: 1.35em; font-variant-numeric: tabular-nums; color: var(--navy); }

.door .cups-list button.ask {
    display: block;
    width: 100%;
    margin: 0.7em 0 0;
    padding: 0.45em 1em;
    border: 1px solid var(--gold);
    border-radius: 22px;
    background: rgba(20, 32, 79, 0.92);
    color: var(--cream);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.door .cups-list button.ask:hover { filter: brightness(1.15); }

/* ---- the language, one chooser in the corner, and the sound beside it ---- */

.tongues select.chooser {
    appearance: none;
    -webkit-appearance: none;
    padding: 3px 28px 3px 14px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: rgba(246, 230, 192, 0.92) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%2314204f'/></svg>") no-repeat right 10px center;
    color: var(--navy);
    font: 14px var(--face);
    cursor: pointer;
}

.tongues select.chooser:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---- the sign-in with the table live: the kings stand behind the frame, their crowns over it ---- */

.door.live .hung { height: clamp(44px, 10vh, 110px); }
.door.live > header .name { width: min(80vw, 22vh * 2.355, 760px); }

/* The language chooser moves to the top corner while the tournaments sit at the bottom. */
.door.live ~ .tongues { top: 10px; bottom: auto; }

/* The sign-in, a small button in the other top corner; its plaque drops under it when pressed. */
.door .signin-pill { display: none; }

.door.live .signin-pill {
    display: block;
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 7;
    padding: 3px 16px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: rgba(20, 32, 79, 0.92);
    color: var(--cream);
    font: 600 14px var(--face);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.door.live .signin-pill:hover { filter: brightness(1.15); }
.door.live .signin-pill.open { background: var(--gold); color: var(--navy); }

.door.live .panel {
    position: fixed;
    top: 44px;
    right: 12px;
    z-index: 7;
    width: min(calc(100vw - 24px), 360px);
    margin: 0;
    padding: 30px 30px;
    gap: 10px;
    font-size: 14px;
    transform-origin: 90% 0;
    animation: opened 0.25s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.door.live .panel.folded { display: none; }
.door.live .panel h2 { font-size: 1.4em; }

/* The kings stand behind the tournaments while the table is live: a dark ground to read them on. */
.door.live .cups-list {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(8, 20, 14, 0.78);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

@keyframes opened {
    from { transform: translateY(-8px) scale(0.92); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
    /* The plaque has left the page for its corner: two columns that never lie over each other
       (Mahdi, 2026-10-14: «آیتم ها کمتر روی هم بیفتند و فضای خالی کمتری باشه»). On the left, one
       under the other, the crown and the name, the tournaments, and the four kings standing small
       at the foot; on the right the table, as big as the window lets it be, with its line. */
    .door.live {
        --side: clamp(240px, 25vw, 440px);
        grid-template-columns: var(--side) 1fr;
        grid-template-rows: auto 1fr;
        align-items: start;
        /* Four kings across the column's width, at the most a third of the window's height. */
        --ch: clamp(100px, min(30vh, calc(var(--side) * 0.42)), 280px);
    }

    .door.live header { grid-area: 1 / 1; padding: 46px 12px 0; box-sizing: border-box; }
    .door.live .hung { height: clamp(34px, 8vh, 90px); margin-bottom: clamp(-14px, -2.4vh, -6px); }
    .door.live > header .name { width: min(calc(var(--side) - 24px), 26vh * 2.355); }

    .door.live .cups-list {
        grid-area: 2 / 1;
        align-self: start;
        justify-self: center;
        width: calc(var(--side) - 24px);
        margin: 2vh 0 0;
        font-size: clamp(12px, 1.8vh, 16px);
    }

    .door.live .play {
        grid-area: 1 / 2 / 3 / 3;
        align-self: center;
        justify-self: center;
        gap: 1vh;
    }

    /* As wide as its column lets it, and never taller than the window less its line. */
    .door.live .arena {
        --fh: min(calc((100vw - var(--side) - 32px) * 9 / 16), calc(100vh - 64px));
        margin: 0;
    }

    .door.live .rule { margin: 0; }

    /* The kings at the left column's foot, under the tournaments, never behind the table. */
    .door.live .hall { left: 0; right: auto; width: var(--side); }
    /* A close fan, so all four stand whole inside the column. */
    .door.live .king { bottom: 1.5vh; }
    .door.live .king.diamonds { --a: -9.5deg; }
    .door.live .king.hearts { --a: -3.4deg; }
    .door.live .king.spades { --a: 3.4deg; }
    .door.live .king.clubs { --a: 9.5deg; }
    .door.live .hall::after { width: calc(3.4 * var(--cw)); margin-left: calc(-1.7 * var(--cw)); }
    .door.live .halo { display: none; }
    .door.live .panel { grid-area: auto; align-self: auto; justify-self: auto; width: min(calc(100vw - 24px), 360px); }
}

@media (orientation: portrait) {
    .door.live { overflow: auto; --ch: clamp(200px, 40vh, 560px); }
    /* Upright, the kings would stand behind the tournaments and the table's line: they step aside. */
    .door.live .stage { display: none; }
    .door.live .cups-list { margin-top: 3vh; }
}

/* A wide window, a desk or a phone on its side: the crown, the name and the plaque in the left
   part, the four kings standing whole in the right, a tighter fan on a nearer pivot so they fit. */
@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
    .door {
        display: grid;
        grid-template-columns: 40% 1fr;
        grid-template-rows: auto 1fr auto;
        align-items: start;
        --ch: clamp(240px, min(50vh, 27vw), 760px);
    }

    .door .hall { left: 40%; }
    .door .hall::after { bottom: calc(-0.3 * var(--ch)); width: calc(4 * var(--cw)); margin-left: calc(-2 * var(--cw)); }

    /* The pivot far below the floor: the kings stand nearly upright, side by side, the inner two
       whole and the outer two a third behind them. */
    .door .king {
        bottom: calc(-0.04 * var(--ch));
        transform-origin: 50% 400%;
    }

    .door .king.diamonds { --a: -13.6deg; }
    .door .king.hearts { --a: -5.9deg; }
    .door .king.spades { --a: 5.9deg; }
    .door .king.clubs { --a: 13.6deg; }
    .door .shade { display: none; }

    /* The crown and the name over the kings; the plaque alone on the left, a sun behind it. */
    .door header { grid-area: 1 / 2; }
    .door .hung { height: clamp(56px, 13vh, 140px); }
    .door > header .name { width: min(50vw, 34vh * 2.355, 900px); }

    .door .halo {
        display: block;
        grid-area: 1 / 1 / 3 / 2;
        align-self: center;
        justify-self: center;
        width: min(60vw, 118vh);
        aspect-ratio: 1;
        margin-left: 0;
    }

    .door .panel {
        grid-area: 1 / 1 / 3 / 2;
        align-self: center;
        justify-self: center;
        margin: 0;
        width: min(86%, 560px);
    }

    .door footer { grid-area: 3 / 1; justify-self: center; }
    .door .purse { right: auto; left: 3vw; }
}

/* A low window: the crown smaller, the plaque closer to the floor. */
@media (max-height: 520px) {
    .door .hung { height: 10vh; }
    .door .panel { margin-bottom: 2vh; }
}

/* A phone held upright: the name across the top, the kings tall behind the plaque, their heads
   over it. */
@media (orientation: portrait) {
    .door { --ch: clamp(240px, 50vh, 700px); }

    /* The fan on a near pivot, spilling off both edges, its feet behind the plaque. */
    .door .king, .door .shade {
        bottom: calc(0.15 * var(--ch));
        transform-origin: 50% 130%;
    }

    .door .hall::after { bottom: calc(0.1 * var(--ch)); }
    .door .king.diamonds { --a: -40deg; }
    .door .king.hearts { --a: -16deg; }
    .door .king.spades { --a: 16deg; }
    .door .king.clubs { --a: 40deg; }
    .door .shade.left { --a: -58deg; }
    .door .shade.right { --a: 58deg; }

    .door .hung { height: clamp(50px, 14vh, 150px); }
    .door > header .name { width: min(90vw, 26vh * 2.355); }

    .door .panel {
        font-size: clamp(14px, 2vh, 18px);
        padding: 3.5vh 6vw;
        margin-bottom: 9vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .door *, .door *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
    .door .dust { display: none; }
    .door .hall, .door > header .name { transform: none; }
}