/* The tournaments page. It shares the play online page's header and measures; under it, the
   house's list down one side and the tournament that is open beside it. */

.online.cups {
    background-image: url("../art/cups/ground.jpg");
}

/* The two ways in, in the header: where I am, large, and the other one beside it to go to. */

.online h1 {
    display: flex;
    align-items: baseline;
    gap: calc(4 * var(--h));
}

.online h1 .other {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cream);
    opacity: 0.6;
    font: inherit;
    font-size: calc(3.4 * var(--h));
    letter-spacing: 0.04em;
    text-shadow: inherit;
    cursor: pointer;
}

.online h1 .other:hover { opacity: 1; }
.online h1 .other:disabled { opacity: 0.25; cursor: default; }

.cups .quiet {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(44 * var(--h));
    margin: 0;
    text-align: center;
    color: var(--cream);
    font-size: calc(3.4 * var(--h));
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.tablets {
    position: absolute;
    left: calc(4 * var(--h));
    top: calc(15 * var(--h));
    bottom: calc(8 * var(--h));
    width: calc(52 * var(--h));
    margin: 0;
    padding: 0 calc(1 * var(--h)) 0 0;
    list-style: none;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: calc(1.6 * var(--h));
}

.tablets li {
    position: relative;
    display: grid;
    gap: calc(0.3 * var(--h));
    padding: calc(1.6 * var(--h)) calc(9 * var(--h)) calc(1.6 * var(--h)) calc(2.4 * var(--h));
    border-radius: calc(1.4 * var(--h));
    background: rgba(246, 230, 192, 0.92);
    border: calc(0.3 * var(--h)) solid #c9974a;
    cursor: pointer;
    line-height: 1.15;
}

.tablets li.chosen {
    background: #fffaf0;
    border-color: var(--navy);
    box-shadow: 0 0 calc(2 * var(--h)) rgba(255, 255, 255, 0.45);
}

.tablets li.done,
.tablets li.off { opacity: 0.7; }

.tablets strong { font-size: calc(3.1 * var(--h)); color: var(--navy); }
.tablets span { font-size: calc(2.6 * var(--h)); }
.tablets small { font-size: calc(2.2 * var(--h)); color: var(--ink-soft); }

.tablets .seal {
    position: absolute;
    right: calc(1.4 * var(--h));
    top: 50%;
    height: calc(7 * var(--h));
    transform: translateY(-50%) rotate(-8deg);
}

.tablet {
    position: absolute;
    left: calc(60 * var(--h));
    right: calc(4 * var(--h));
    top: calc(15 * var(--h));
    bottom: calc(8 * var(--h));
    box-sizing: border-box;
    padding: calc(4 * var(--h)) calc(5 * var(--h));
    overflow-y: auto;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: calc(1.4 * var(--h));
    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);
    text-align: center;
    font-size: calc(2.7 * var(--h));
}

.tablet h2 { margin: 0; font-size: calc(5 * var(--h)); color: var(--navy); line-height: 1.1; }
.tablet h3 { margin: calc(1 * var(--h)) 0 0; font-size: calc(3 * var(--h)); color: var(--navy); }
.tablet p { margin: 0; }
.tablet .herald { color: var(--ink-soft); font-style: italic; }
.tablet .clock { font-size: calc(3.3 * var(--h)); font-weight: 600; }
.tablet .pot { font-size: calc(3.6 * var(--h)); font-weight: 700; color: var(--navy); }
.tablet .mine { color: var(--cobalt); font-weight: 600; }
.tablet .trouble { color: var(--red); font-weight: 600; }

.tablet .tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(1 * var(--h));
}

.tablet .tags span {
    padding: calc(0.3 * var(--h)) calc(1.6 * var(--h));
    border-radius: calc(2 * var(--h));
    background: #fffaf0;
    border: calc(0.2 * var(--h)) solid var(--gold);
    font-size: calc(2.2 * var(--h));
}

.tablet .tags:empty { display: none; }

.tablet .main {
    height: calc(8.5 * var(--h));
    aspect-ratio: 720 / 222;
    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(2.9 * var(--h));
    font-weight: 600;
    cursor: pointer;
}

.tablet .main.plain {
    background-image: url("../art/kit/button-plain.png");
    color: var(--navy);
}

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

.tablet .share {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cobalt);
    font: inherit;
    font-size: calc(2.2 * var(--h));
    text-decoration: underline;
    cursor: pointer;
}

/* The tables of a round, looked at from outside: two pairs and what each has won. */

.benches {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: calc(0.8 * var(--h));
}

.benches li {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: calc(2 * var(--h));
    padding: calc(0.8 * var(--h)) calc(2 * var(--h));
    border-radius: calc(1 * var(--h));
    background: #fffaf0;
    border: calc(0.2 * var(--h)) solid var(--gold);
    font-size: calc(2.5 * var(--h));
}

.benches li > span:first-child { text-align: end; }
.benches li > span:last-child { text-align: start; }
.benches b { font-size: calc(3.2 * var(--h)); color: var(--navy); direction: ltr; }
.benches li.playing { border-color: var(--navy); }
.benches li.waiting { opacity: 0.6; }

.result .cup {
    max-width: 78%;
    font-size: calc(2.6 * var(--h));
    color: var(--cobalt);
    text-align: center;
}