[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: radial-gradient(ellipse at center, #3b7f55 0%, #2a6343 60%, #1d4a31 100%);
    color: #f3efe2;
    font: 15px/1.3 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

button {
    font: inherit;
    padding: 5px 12px;
    border: 1px solid #c8b885;
    border-radius: 6px;
    background: #f5edd3;
    color: #2b2b2b;
    cursor: pointer;
}

button:hover {
    background: #fff7dc;
}

#name-form {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 24px 28px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
}

#name-form input {
    font: inherit;
    padding: 5px 8px;
    border: 1px solid #c8b885;
    border-radius: 6px;
}

#table {
    /* The width of a large card. The window height holds the top hand, an open side seat
       (2.35 cards high) and the own hand, and about 270 px of the rest. The window width holds
       the trick, the talon and two side seats: about 9.4 cards and 466 px. */
    --large: clamp(60px, min((100vh - 270px) * 63 / 383, (100vw - 466px) * 10 / 94), 116px);
    box-sizing: border-box;
    height: 100vh;
    min-width: 1200px;
    /* The bottom padding holds the credit line. */
    padding: 10px 20px 22px;
    display: grid;
    grid-template-areas:
        "bar bar bar"
        "top top top"
        "left centre right"
        "hand hand hand"
        "head controls .";
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto auto;
    gap: 8px 16px;
}

/* A control that is not possible now keeps its place. */
.absent {
    visibility: hidden;
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

.bar {
    grid-area: bar;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    min-height: 32px;
}

.bar-middle {
    display: flex;
    gap: 8px;
}

.bar-right {
    justify-self: end;
}

.spectator {
    font-weight: 600;
}

.seat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.seat.top {
    grid-area: top;
    align-items: center;
}

.seat.left {
    grid-area: left;
    justify-content: center;
    align-items: flex-start;
}

.seat.right {
    grid-area: right;
    justify-content: center;
    align-items: flex-end;
}

/* The parts of the bottom seat take their own places in the table grid. */
.seat.bottom {
    display: contents;
}

.seat.bottom > .seat-head {
    grid-area: head;
}

.seat.bottom > .row {
    grid-area: hand;
    justify-content: center;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.seat.bottom > .controls {
    grid-area: controls;
    justify-self: center;
}

.seat-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 30px;
}

/* The head line wraps only between its items. */
.seat-head > * {
    white-space: nowrap;
}

.name {
    font-weight: 700;
    font-size: 17px;
}

button.own-name,
button.own-name:hover {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
}

button.own-name:hover {
    text-decoration: underline;
}

.mark {
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 13px;
}

.mark.offline {
    background: #5b5b5b;
    color: #e6e6e6;
}

.mark.dealer {
    background: #e2b84a;
    color: #2b2b2b;
    font-weight: 600;
}

.count,
.label {
    font-size: 14px;
    color: #dfe8d9;
}

.row {
    display: flex;
    gap: 36px;
    align-items: center;
}

.hand {
    display: flex;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    min-height: calc(var(--large) * 88 / 63);
}

/* A hand always fits its place in one row: its cards overlap. The rank and suit in the top
   left corner take about a fifth of the card. */
.hand .slot {
    flex: 0 1 var(--large);
    min-width: calc(var(--large) / 4);
}

.hand .slot:last-child {
    flex-shrink: 0;
}

.hand .slot.new-suit {
    margin-left: 12px;
}

.hand .slot:hover {
    z-index: 1;
}

/* Room above the own hand for a selected card; a third of each card stays visible. */
.own .hand {
    gap: 6px;
    padding-top: 14px;
}

.own .hand .slot {
    min-width: calc(var(--large) / 3);
}

/* The last card of a suit shows in full, so that the gap between suits stays visible. */
.own .hand .slot.suit-end {
    flex-shrink: 0;
}

.own .hand .slot.new-suit {
    margin-left: 22px;
}

.suit-rows {
    display: flex;
    flex-direction: column;
}

.seat.right .suit-rows {
    align-items: flex-end;
}

.suit-row {
    display: flex;
}

/* The rank and suit in the top left corner of each card stay visible. */
.suit-row + .suit-row {
    margin-top: calc(var(--large) * 88 / 63 * -0.72);
}

/* The cards of an open hand can be played: more of each row shows. */
.suit-rows.open .suit-row + .suit-row {
    margin-top: calc(var(--large) * 88 / 63 * -0.55);
}

.suit-row .card + .card {
    margin-left: calc(var(--large) * -0.6);
}

.suit-row .card.face-down + .card.face-down {
    margin-left: calc(var(--large) * -4 / 5);
}

.card.selected {
    transform: translateY(-14px);
}

.own-discard {
    display: flex;
    gap: 5px;
    align-items: center;
    flex: none;
}

.own-discard .label {
    margin-right: 4px;
}

.controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.set-open,
.hand-action {
    min-width: 140px;
}

/* The settings may reach into the wide middle column; the controls there stay in its centre. */
#settings {
    grid-row: 5;
    grid-column: 2 / 4;
    justify-self: end;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.setting {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
}

#suit-order {
    position: relative;
}

.suit-order-current,
.suit-order-row {
    display: flex;
    gap: 5px;
    font-size: 17px;
    padding: 1px 6px;
}

/* The control is at the bottom of the screen. */
.suit-order-list {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 2px 6px;
    padding: 6px;
    border: 1px solid #c8b885;
    border-radius: 6px;
    background: #f5edd3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.suit-order-row {
    border-color: transparent;
    background: transparent;
}

.suit-order-row.chosen {
    border-color: #c8b885;
    background: #fff7dc;
}

.suit-s,
.suit-c {
    color: #1d1d1d;
}

.suit-d,
.suit-h {
    color: #c3261c;
}

.setting input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.card {
    width: 58px;
    aspect-ratio: 63 / 88;
    flex: none;
    padding: 0;
    border: none;
    /* The rounded corners of the pictures. */
    border-radius: 4.8% / 3.4%;
    background: none;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

button.card:hover {
    background: none;
}

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

.card.large {
    width: var(--large);
}

.trick button.card:hover {
    outline: 3px solid #f0c541;
}

.centre {
    grid-area: centre;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

.trick {
    display: grid;
    grid-template-columns: repeat(3, var(--large));
    /* Two rows and their gap hold one large card. */
    grid-template-rows: repeat(4, calc((var(--large) * 88 / 63 - 4px) / 2));
    gap: 4px 8px;
}

.card-place {
    box-sizing: border-box;
    width: var(--large);
    aspect-ratio: 63 / 88;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 2px dashed rgba(243, 239, 226, 0.35);
    border-radius: 6px;
    color: rgba(243, 239, 226, 0.75);
    font-size: 13px;
    text-align: center;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.trick .top {
    grid-column: 2;
    grid-row: 1 / 3;
}

.trick .left {
    grid-column: 1;
    grid-row: 2 / 4;
}

.trick .right {
    grid-column: 3;
    grid-row: 2 / 4;
}

.trick .bottom {
    grid-column: 2;
    grid-row: 3 / 5;
}

.talon {
    width: 238px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.talon-cards {
    display: flex;
    gap: 6px;
    min-height: calc(var(--large) * 88 / 63);
}

.talon-controls {
    display: flex;
    gap: 8px;
}

#credit {
    position: fixed;
    left: 20px;
    bottom: 4px;
    font-size: 11px;
    color: rgba(243, 239, 226, 0.65);
}

#credit a {
    color: inherit;
}

/* In the empty part of the top bar, between Leave and the middle controls. */
#no-connection {
    position: fixed;
    top: 10px;
    left: 25%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: 6px;
    background: #b3261e;
    color: #fff;
    font-weight: 600;
}

#last-trick {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

#last-trick .panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 18px 26px;
    border-radius: 10px;
    background: #24573a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

#last-trick .row {
    gap: 18px;
}

#last-trick .entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}