/* The circle's page. It shares the play online page's header and measures: a shelf down one
   side, and the open circle (or its waiting table) beside it. */

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

/* An emblem: the tinted field, the symbol, the rim. */

.emblem {
    position: relative;
    display: inline-block;
    width: var(--size);
    aspect-ratio: 1;
    flex: none;
}

.emblem .ground,
.emblem .rim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.emblem .ground {
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.emblem .symbol {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.emblem b {
    position: absolute;
    inset: 6%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy);
    border: calc(var(--size) * 0.05) solid var(--gold);
    color: var(--cream);
    font-size: calc(var(--size) * 0.45);
    line-height: 1;
}

/* The shelf. */

.shelf {
    position: absolute;
    left: calc(4 * var(--h));
    top: calc(15 * var(--h));
    bottom: calc(8 * var(--h));
    width: calc(54 * var(--h));
    padding-right: calc(1 * var(--h));
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: calc(1.4 * var(--h));
    font-size: calc(2.4 * var(--h));
    color: var(--ink);
}

.shelf form {
    display: flex;
    gap: calc(1 * var(--h));
}

.shelf input {
    flex: 1;
    min-width: 0;
    padding: calc(1 * var(--h)) calc(1.6 * var(--h));
    border: calc(0.3 * var(--h)) solid var(--gold);
    border-radius: calc(1.2 * var(--h));
    background: #fffaf0;
    color: var(--ink);
    font: inherit;
    user-select: text;
    -webkit-user-select: text;
}

.shelf form button,
.shelf .bid button,
.page .lengths button,
.page .tabs button {
    padding: calc(0.8 * var(--h)) calc(2 * var(--h));
    border: 0;
    border-radius: calc(3 * var(--h));
    background: var(--navy);
    color: var(--cream);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.shelf form button:disabled { opacity: 0.45; cursor: default; }

.shelf .quiet {
    margin: 0;
    padding: calc(1.6 * var(--h));
    border-radius: calc(1.2 * var(--h));
    background: rgba(246, 230, 192, 0.9);
}

.shelf .circle,
.shelf .bid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: calc(1.6 * var(--h));
    align-items: center;
    padding: calc(1.2 * var(--h)) calc(1.8 * var(--h));
    border-radius: calc(1.4 * var(--h));
    background: rgba(246, 230, 192, 0.92);
    border: calc(0.3 * var(--h)) solid #c9974a;
    color: var(--ink);
    font: inherit;
    text-align: start;
    line-height: 1.2;
}

.shelf .circle { cursor: pointer; }
.shelf .circle .emblem, .shelf .bid .emblem { grid-row: span 2; }
.shelf .circle strong, .shelf .bid strong { font-size: calc(3 * var(--h)); color: var(--navy); }
.shelf .circle small, .shelf .bid small { color: var(--ink-soft); }
.shelf .circle.chosen { background: #fffaf0; border-color: var(--navy); }
.shelf .bid span { grid-column: 1 / -1; display: flex; gap: calc(1 * var(--h)); justify-content: flex-end; margin-top: calc(0.8 * var(--h)); }
.shelf .bid button.no { background: #fffaf0; color: var(--navy); box-shadow: 0 0 0 calc(0.25 * var(--h)) var(--navy) inset; }

/* The open circle, or its waiting table. */

.page {
    position: absolute;
    left: calc(62 * var(--h));
    right: calc(4 * var(--h));
    top: calc(15 * var(--h));
    bottom: calc(8 * var(--h));
    box-sizing: border-box;
    padding: calc(3 * var(--h)) calc(4 * var(--h));
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: calc(1.6 * 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);
    color: var(--ink);
    font-size: calc(2.6 * var(--h));
}

.page h2 { margin: 0; font-size: calc(4.6 * var(--h)); color: var(--navy); line-height: 1.1; }
.page h3 { margin: 0; font-size: calc(3 * var(--h)); color: var(--navy); }
.page p { margin: 0; }
.page .quiet { color: var(--ink-soft); }
.page .trouble { color: var(--red); font-weight: 600; }

.page .head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: calc(2.4 * var(--h));
}

.page .main {
    height: calc(8 * 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.8 * var(--h));
    font-weight: 600;
    cursor: pointer;
}

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

.page .plain,
.page .share {
    justify-self: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cobalt);
    font: inherit;
    font-size: calc(2.4 * var(--h));
    text-decoration: underline;
    cursor: pointer;
}

.page .tabs { display: flex; gap: calc(1 * var(--h)); border-bottom: calc(0.3 * var(--h)) solid var(--gold); padding-bottom: calc(1.2 * var(--h)); }
.page .tabs button, .page .lengths button { background: #fffaf0; color: var(--navy); box-shadow: 0 0 0 calc(0.25 * var(--h)) var(--gold) inset; }
.page .tabs button.chosen, .page .lengths button.chosen { background: var(--navy); color: var(--cream); box-shadow: none; }

.ranks { width: 100%; border-collapse: collapse; text-align: center; }
.ranks th { font-weight: 400; font-size: calc(2.1 * var(--h)); color: var(--ink-soft); padding: 0 calc(1 * var(--h)) calc(0.8 * var(--h)); }
.ranks td { padding: calc(0.9 * var(--h)) calc(1 * var(--h)); border-top: calc(0.15 * var(--h)) solid rgba(201, 151, 74, 0.5); }
.ranks .who { text-align: start; font-weight: 600; }
.ranks b { color: var(--navy); font-size: calc(3 * var(--h)); }

.titles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.4 * var(--h)); }
.titles div { display: grid; gap: calc(0.4 * var(--h)); padding: calc(1.6 * var(--h)); border-radius: calc(1.2 * var(--h)); background: #fffaf0; border: calc(0.25 * var(--h)) solid var(--gold); text-align: center; }
.titles small { color: var(--ink-soft); }
.titles strong { font-size: calc(3 * var(--h)); color: var(--navy); }

.people { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(0.8 * var(--h)); }
.people li { display: flex; justify-content: space-between; gap: calc(1 * var(--h)); padding: calc(0.8 * var(--h)) calc(1.6 * var(--h)); border-radius: calc(1 * var(--h)); background: #fffaf0; border: calc(0.2 * var(--h)) solid var(--gold); }
.people small { color: var(--ink-soft); }

/* A table of the circle, waiting. */

.page.lobby { justify-items: center; text-align: center; }
.lobby .code { font-size: calc(9 * var(--h)); font-weight: 700; letter-spacing: 0.25em; color: var(--navy); line-height: 1; }
.lobby .chairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1.4 * var(--h)); width: 100%; }

.lobby .chairs span {
    display: grid;
    place-items: center;
    min-height: calc(9 * var(--h));
    padding: calc(1 * var(--h));
    border-radius: calc(1.2 * var(--h));
    border: calc(0.3 * var(--h)) dashed var(--gold);
    color: var(--ink-soft);
    font-size: calc(2.2 * var(--h));
}

.lobby .chairs span.taken { border-style: solid; border-color: var(--navy); background: #fffaf0; color: var(--navy); font-size: calc(3 * var(--h)); font-weight: 600; }
.lobby .lengths { display: flex; gap: calc(1 * var(--h)); }

/* The settings: a name down one side and what it is set to beside it. */
.settings { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(1.6 * var(--h)) calc(3 * var(--h)); }
.settings label { color: var(--ink-soft); }
.settings form { display: flex; gap: calc(1 * var(--h)); }
.settings input { flex: 1; min-width: 0; padding: calc(0.8 * var(--h)) calc(1.6 * var(--h)); border: calc(0.3 * var(--h)) solid var(--gold); border-radius: calc(1.2 * var(--h)); background: #fffaf0; color: var(--ink); font: inherit; user-select: text; -webkit-user-select: text; }
.settings form button { padding: calc(0.8 * var(--h)) calc(2 * var(--h)); border: 0; border-radius: calc(3 * var(--h)); background: var(--navy); color: var(--cream); font: inherit; cursor: pointer; }
.settings form button:disabled { opacity: 0.45; cursor: default; }
.settings .lengths { flex-wrap: wrap; align-items: center; }
.settings small { color: var(--ink-soft); font-size: calc(2.1 * var(--h)); }
.settings b { min-width: calc(8 * var(--h)); text-align: center; font-size: calc(3 * var(--h)); color: var(--navy); }

.people li button { padding: calc(0.3 * var(--h)) calc(1.4 * var(--h)); border: 0; border-radius: calc(2 * var(--h)); background: var(--navy); color: var(--cream); font: inherit; font-size: calc(2 * var(--h)); cursor: pointer; }
.people { grid-template-columns: 1fr; }
.people li span { flex: 1; }