/* The Feud arena on top of the site kit's shell: the transparent top bar with a draft's options,
   then the table, with the board centred by itself and the tray anchored to it. Uses the
   site kit's tokens only; a game's stylesheet adds its board's. */

.arena-empty { flex: 1; }

.arena-view {
    position: relative;
    flex: 1;
    overflow: auto;
    padding: var(--space-medium) var(--space-large) var(--space-large);
    display: flex;
}

/* The top bar floats over the arena's top left corner, over nothing. */
.top-bar {
    position: absolute;
    top: var(--space-large);
    left: var(--space-large);
    z-index: 1;
    display: flex;
    gap: var(--space-medium);
}

/* The board sits at the centre of the panel and the tray just below it, in the flexible rows
   either side, so it never shifts the board. */
.table {
    margin: 0 auto;
    width: min(100%, 560px);
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    gap: var(--space-medium);
}

.board { grid-row: 2; position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; }
/* While the server rolls a board: a dot pulsing in the middle. */
.board.is-waiting::after { content: ''; position: absolute; inset: 0; margin: auto; width: var(--space-large); height: var(--space-large); border-radius: 50%; background: var(--gray-5); animation: waiting-pulse var(--duration-pulse) ease-in-out infinite; }
@keyframes waiting-pulse {
    0%, 100% { opacity: var(--opacity-dim); transform: scale(0.75); }
    50% { opacity: 1; transform: scale(1); }
}

.tray { grid-row: 3; align-self: start; display: grid; gap: var(--space-medium); }
.button-row { display: flex; gap: var(--space-medium); }
.button-row > button { flex: 1 1 0; min-width: 0; white-space: nowrap; }

.share { display: flex; gap: var(--space-medium); }
.share__input {
    flex: 1;
    min-width: 0;
    padding: var(--space-medium);
    border: 0;
    border-radius: var(--radius);
    background: var(--gray-3);
    color: var(--gray-6);
    font: inherit;
}

/* On desktop the bar's actions float in the arena's top right corner; a tall board starts below
   them so they never cover it. */
@media (min-width: 761px) {
    .arena-view { padding-top: calc(var(--size-avatar) + var(--space-large) * 2); }
}

/* On a phone the board sits low, within thumb reach, and the options join the flow above it. */
@media (max-width: 760px) {
    .table { grid-template-rows: 1fr auto auto; }
    .top-bar { position: static; }
    .arena-view { flex-direction: column; }
}