/* Play online: the sky ground, the halls as tabs standing on a cream felt, and on the felt one
   big table at a time. Measured in shares of the screen's height like the table itself. */

.online {
    position: fixed;
    inset: 0;
    background: url("../art/online/ground.jpg") center / cover;
    color: var(--ink);
    overflow: hidden;
}

.online header {
    position: absolute;
    left: calc(5 * var(--h));
    right: calc(5 * var(--h));
    top: calc(3 * var(--h));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.online h1 {
    margin: 0;
    font-size: calc(6 * var(--h));
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--cream);
    text-shadow: 0 calc(0.3 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.45);
}

.online .purse {
    display: flex;
    align-items: center;
    gap: calc(1.2 * var(--h));
    padding: calc(0.6 * var(--h)) calc(2.6 * var(--h)) calc(0.6 * var(--h)) calc(1 * var(--h));
    border-radius: calc(4 * var(--h));
    background: var(--cream);
    border: calc(0.35 * var(--h)) solid var(--gold);
    font-size: calc(3.6 * var(--h));
    font-weight: 700;
    color: var(--navy);
}

.online .purse img { height: calc(4.6 * var(--h)); }

/* The halls: tabs that stand on the felt's top edge, the chosen one taller. */

.halls {
    position: absolute;
    left: 50%;
    top: calc(11.5 * var(--h));
    height: calc(12.5 * var(--h));
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: calc(1.4 * var(--h));
}

.halls button {
    position: relative;
    width: calc(13 * var(--h));
    height: calc(10.5 * var(--h));
    padding: calc(1 * var(--h)) 0 0;
    display: grid;
    justify-items: center;
    align-content: start;
    border: 0;
    border-radius: calc(1 * var(--h)) calc(1 * var(--h)) 0 0;
    background: #fbf7ec;
    box-shadow: 0 0 0 calc(0.3 * var(--h)) var(--navy) inset;
    color: var(--ink);
    font: inherit;
    font-size: calc(2.1 * var(--h));
    cursor: pointer;
}

.halls button > img:first-child { height: calc(5.6 * var(--h)); }

.halls button.chosen {
    height: calc(12.5 * var(--h));
    color: var(--cobalt);
    font-weight: 700;
    box-shadow: 0 0 0 calc(0.45 * var(--h)) var(--navy) inset, 0 0 calc(2 * var(--h)) rgba(255, 255, 255, 0.5);
}

.halls button:disabled { cursor: default; }
.halls button:disabled:not(.chosen) { filter: saturate(0.5) brightness(0.9); }

.halls .lock {
    position: absolute;
    right: calc(0.6 * var(--h));
    top: calc(0.6 * var(--h));
    height: calc(3.4 * var(--h));
}

/* The felt and the one table on it. */

.felt {
    position: absolute;
    left: 50%;
    top: calc(24 * var(--h));
    width: min(calc(var(--w) - 4 * var(--h)), calc(170 * var(--h)));
    height: calc(66 * var(--h));
    transform: translateX(-50%);
    border-radius: calc(1.6 * var(--h));
    background: #f5e6c4;
    border: calc(0.4 * var(--h)) solid #c9974a;
    box-shadow: 0 calc(1 * var(--h)) calc(3 * var(--h)) rgba(0, 0, 0, 0.35);
}

.felt .oval {
    position: absolute;
    left: 50%;
    top: calc(21 * var(--h));
    width: calc(64 * var(--h));
    height: calc(34 * var(--h));
    transform: translate(-50%, -50%);
}

.felt .oval .ring {
    --ring-high: calc(34 * var(--h));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

.felt .seat {
    position: absolute;
    width: calc(9.5 * var(--h));
    height: calc(9.5 * var(--h));
    transform: translate(-50%, -50%);
}

.felt .seat > img:first-child { width: 100%; height: 100%; display: block; }

.felt .seat .crown {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62%;
    transform: translate(-50%, -50%);
}

/* The other three first, top, left and right; the near one is mine. */
.felt .seat.at-0 { left: 50%; top: 3%; }
.felt .seat.at-1 { left: 3%; top: 50%; }
.felt .seat.at-2 { left: 97%; top: 50%; }
.felt .seat.at-3 { left: 50%; top: 97%; }

.felt .price {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    line-height: 1.1;
}

.felt .price small { font-size: calc(2.4 * var(--h)); letter-spacing: 0.2em; color: var(--ink-soft); }
.felt .price strong { font-size: calc(9 * var(--h)); letter-spacing: 0.06em; color: var(--navy); }
.felt .price span { font-size: calc(3 * var(--h)); }

.felt .farr {
    display: flex;
    align-items: center;
    gap: calc(0.5 * var(--h));
    color: var(--ink-soft);
    font-size: calc(2.4 * var(--h)) !important;
}

.felt .farr img { height: calc(3.4 * var(--h)); }

.felt .waiting {
    position: absolute;
    right: 100%;
    top: 78%;
    margin-right: calc(-6 * var(--h));
    white-space: nowrap;
    font-size: calc(2.6 * var(--h));
    color: var(--ink-soft);
}

.felt .fits {
    position: absolute;
    left: 76%;
    top: 4%;
    padding: calc(0.4 * var(--h)) calc(1.4 * var(--h));
    border-radius: calc(0.6 * var(--h));
    background: #fffaf0;
    box-shadow: 0 calc(0.3 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.25);
    transform: rotate(6deg);
    white-space: nowrap;
    font-size: calc(2.4 * var(--h));
}

.felt .step {
    position: absolute;
    top: calc(21 * var(--h));
    right: calc(50% - 50 * var(--h));
    width: calc(8 * var(--h));
    height: calc(8 * var(--h));
    padding: 0;
    border: 0;
    background: none;
    transform: translate(50%, -50%);
    cursor: pointer;
}

.felt .step img { width: 100%; height: 100%; display: block; }

.felt .step.back {
    right: auto;
    left: calc(50% - 50 * var(--h));
    transform: translate(-50%, -50%) scaleX(-1);
}

.felt .step:disabled { opacity: 0.3; cursor: default; }

.felt .dots {
    position: absolute;
    left: 50%;
    top: calc(41.5 * var(--h));
    transform: translateX(-50%);
    display: flex;
    gap: calc(2 * var(--h));
}

.felt .dots button {
    width: calc(1.8 * var(--h));
    height: calc(1.8 * var(--h));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c9b386;
    cursor: pointer;
}

.felt .dots button.chosen { background: var(--navy); }

.felt p {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
}

.felt .takes { top: calc(45 * var(--h)); font-size: calc(3 * var(--h)); }
.felt .foot { top: calc(60 * var(--h)); font-size: calc(2.3 * var(--h)); color: var(--ink-soft); }

.felt .main {
    position: absolute;
    left: 50%;
    top: calc(50 * var(--h));
    height: calc(9 * var(--h));
    aspect-ratio: 720 / 222;
    transform: translateX(-50%);
    padding: 0 0 calc(0.6 * var(--h));
    border: 0;
    background: url("../art/kit/button-main.png") center / 100% 100% no-repeat;
    color: var(--cream);
    font: inherit;
    font-size: calc(3 * var(--h));
    font-weight: 600;
    cursor: pointer;
}

.felt .main:disabled { filter: saturate(0.3) brightness(1.1); opacity: 0.7; cursor: default; }

.online footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2 * var(--h));
    display: flex;
    justify-content: center;
    gap: calc(2 * var(--h));
    color: var(--cream);
    font-size: calc(2.4 * var(--h));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.online footer button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* The short hall: which length of game, three rounds or five, as two pills at the felt's top. */
.felt .lengths {
    position: absolute;
    top: calc(2.4 * var(--h));
    inset-inline-start: calc(3 * var(--h));
    display: flex;
    gap: calc(1 * var(--h));
    z-index: 2;
}

.felt .lengths button {
    padding: calc(0.7 * var(--h)) calc(2.2 * var(--h));
    border: calc(0.25 * var(--h)) solid var(--gold);
    border-radius: calc(3 * var(--h));
    background: #fffaf0;
    color: var(--navy);
    font: inherit;
    cursor: pointer;
}

.felt .lengths button.chosen { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.felt .lengths button:disabled { cursor: default; }