/* What is done at a table beside the cards: my two buttons and the tray over them, a phrase on
   its plate by the chair that said it, a thing thrown through the air, and what a face wears
   afterwards. Places are the chairs': 0 mine at the bottom left, then round the way the turn goes. */

.table {
    /* The middle of each chair's frame, which is where a phrase is said from and a throw lands. */
    --seat-0-x: calc(17.5 * var(--h));
    --seat-0-y: calc(86 * var(--h));
    --seat-1-x: calc(var(--w) - 11.5 * var(--h));
    --seat-1-y: calc(84 * var(--h));
    --seat-2-x: calc(var(--w) - 11.5 * var(--h));
    --seat-2-y: calc(15 * var(--h));
    --seat-3-x: calc(11.5 * var(--h));
    --seat-3-y: calc(15 * var(--h));
}

.my-buttons {
    position: absolute;
    left: calc(1.2 * var(--h));
    bottom: calc(2 * var(--h));
    display: grid;
    gap: calc(1.2 * var(--h));
}

.my-buttons button {
    width: calc(6.6 * var(--h));
    height: calc(6.6 * var(--h));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: transform 0.12s;
}

.my-buttons button img { width: 100%; height: 100%; display: block; }
.my-buttons button:hover { transform: scale(1.08); }
.my-buttons button.on { filter: drop-shadow(0 0 calc(1 * var(--h)) rgba(255, 214, 90, 1)); }

.tray {
    position: absolute;
    left: calc(9 * var(--h));
    bottom: calc(27 * var(--h));
    max-width: calc(64 * var(--h));
    display: flex;
    flex-wrap: wrap;
    gap: calc(1 * var(--h));
    padding: calc(1.6 * var(--h));
    border-radius: calc(1.6 * var(--h));
    background: rgba(246, 230, 192, 0.97);
    border: calc(0.35 * var(--h)) solid var(--gold);
    box-shadow: 0 calc(0.8 * var(--h)) calc(2.4 * var(--h)) rgba(0, 0, 0, 0.4);
    z-index: 4;
}

.tray button {
    padding: calc(0.7 * var(--h)) calc(1.8 * var(--h));
    border: calc(0.2 * var(--h)) solid var(--gold);
    border-radius: calc(2.4 * var(--h));
    background: #fffaf0;
    color: var(--ink);
    font: inherit;
    font-size: calc(2.6 * var(--h));
    cursor: pointer;
}

.tray button:hover { background: #fff; border-color: var(--navy); }
.tray button.face { padding: calc(0.2 * var(--h)) calc(1 * var(--h)); font-size: calc(4.2 * var(--h)); line-height: 1.2; }

.tray.things button {
    position: relative;
    width: calc(10 * var(--h));
    height: calc(10 * var(--h));
    padding: calc(0.8 * var(--h));
    border-radius: calc(1.4 * var(--h));
}

.tray.things img { width: 100%; height: 100%; object-fit: contain; display: block; }

.tray.things small {
    position: absolute;
    right: calc(-0.8 * var(--h));
    top: calc(-0.8 * var(--h));
    min-width: calc(3 * var(--h));
    padding: 0 calc(0.6 * var(--h));
    border-radius: calc(2 * var(--h));
    background: var(--navy);
    color: var(--cream);
    font-size: calc(2 * var(--h));
    line-height: calc(3 * var(--h));
}

/* A chair that can be thrown at, while something is in my hand. */
.seat.target { cursor: crosshair; }
.seat.target .portrait { animation: breathe 0.7s ease-in-out infinite alternate; }

/* A phrase: the painted plate, by the chair, towards the table. */
.said {
    position: absolute;
    min-width: calc(22 * var(--h));
    max-width: calc(40 * var(--h));
    padding: calc(1.6 * var(--h)) calc(3.4 * var(--h));
    box-sizing: border-box;
    background: url("../art/table/said.png") center / 100% 100% no-repeat;
    text-align: center;
    font-size: calc(2.8 * var(--h));
    line-height: 1.15;
    color: var(--ink);
    animation: said-in 0.22s ease-out backwards;
    pointer-events: none;
    z-index: 3;
}

.said.face { min-width: 0; padding: calc(0.6 * var(--h)) calc(2.6 * var(--h)); font-size: calc(5.4 * var(--h)); }

.said.place-0 { left: calc(27 * var(--h)); bottom: calc(27 * var(--h)); }
.said.place-1 { right: calc(22 * var(--h)); bottom: calc(27 * var(--h)); }
.said.place-2 { right: calc(22 * var(--h)); top: calc(29 * var(--h)); }
.said.place-3 { left: calc(22 * var(--h)); top: calc(29 * var(--h)); }

@keyframes said-in {
    from { transform: scale(0.6); opacity: 0; }
}

/* A thing thrown: from the middle of the table, or from my chair when it is mine, turning as it
   goes and gone when it lands. What it leaves is the mark on the face. */
.thrown {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(11 * var(--h));
    margin: calc(-5.5 * var(--h)) 0 0 calc(-5.5 * var(--h));
    --from-x: calc(var(--w) / 2);
    --from-y: calc(43 * var(--h));
    animation: thrown 1.05s cubic-bezier(0.3, 0.1, 0.5, 1) forwards;
    pointer-events: none;
    z-index: 6;
}

.thrown.from-me { --from-x: var(--seat-0-x); --from-y: var(--seat-0-y); }
.thrown.to-0 { --to-x: var(--seat-0-x); --to-y: var(--seat-0-y); }
.thrown.to-1 { --to-x: var(--seat-1-x); --to-y: var(--seat-1-y); }
.thrown.to-2 { --to-x: var(--seat-2-x); --to-y: var(--seat-2-y); }
.thrown.to-3 { --to-x: var(--seat-3-x); --to-y: var(--seat-3-y); }

@keyframes thrown {
    0% { transform: translate(var(--from-x), var(--from-y)) scale(0.5) rotate(0deg); opacity: 0.2; }
    15% { opacity: 1; }
    55% { transform: translate(calc((var(--from-x) + var(--to-x)) / 2), calc((var(--from-y) + var(--to-y)) / 2 - 12 * var(--h))) scale(1.25) rotate(260deg); }
    88% { transform: translate(var(--to-x), var(--to-y)) scale(1) rotate(420deg); opacity: 1; }
    100% { transform: translate(var(--to-x), var(--to-y)) scale(1.5) rotate(430deg); opacity: 0; }
}

/* Where it lands it leaves its mark for a moment. */
.splat {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(15 * var(--h));
    margin: calc(-7.5 * var(--h)) 0 0 calc(-7.5 * var(--h));
    transform: translate(var(--to-x), var(--to-y));
    animation: splat 2.6s linear forwards;
    pointer-events: none;
    z-index: 5;
}

.splat.to-0 { --to-x: var(--seat-0-x); --to-y: var(--seat-0-y); }
.splat.to-1 { --to-x: var(--seat-1-x); --to-y: var(--seat-1-y); }
.splat.to-2 { --to-x: var(--seat-2-x); --to-y: var(--seat-2-y); }
.splat.to-3 { --to-x: var(--seat-3-x); --to-y: var(--seat-3-y); }

@keyframes splat {
    0%, 36% { opacity: 0; }
    40% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* What a chair has thrown this round: a small disc beside its frame with the thing on it, and
   how many when more than one. */
.seat .mood {
    position: absolute;
    right: -14%;
    top: 50%;
    width: 30%;
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 4%;
    object-fit: contain;
    border-radius: 50%;
    background: var(--cream);
    border: calc(0.3 * var(--h)) solid var(--gold);
    transform: translateY(-50%);
    pointer-events: none;
}

.seat .mood-count {
    position: absolute;
    right: -18%;
    top: 36%;
    min-width: calc(2.6 * var(--h));
    border-radius: calc(2 * var(--h));
    background: var(--red);
    color: var(--cream);
    text-align: center;
    font-size: calc(1.8 * var(--h));
    line-height: calc(2.6 * var(--h));
}

.seat.place-1 .mood, .seat.place-2 .mood { right: auto; left: -14%; }
.seat.place-1 .mood-count, .seat.place-2 .mood-count { right: auto; left: -18%; }