/* Warfeud's board on top of the site kit's tokens: gray for the field, blue for you, red for them.
   Dark is the default; ThemeSwitch.js sets data-theme. */
:root {
    --size-status: 12px;
    --size-symbol: 14px;
    --gap-tile: 2px;

    /* Height taken up around the board by the bar, the chips and the tray. */
    --board-chrome: 216px;
    --board-chrome-building: 296px;

    --stroke-mark: 0.05;
    --duration-spin: 1s;
}

/* -- The table: the board at the panel's centre, its chips and tray hung either side -- */

.table {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    padding: var(--space-medium) var(--space-large) var(--space-large);
    --board-height: calc(100dvh - var(--board-chrome));
}
.table.is-building { --board-height: calc(100dvh - var(--board-chrome-building)); }

.table__column {
    margin: 0 auto;
    width: min(100%, calc(var(--board-height) * 8 / 12));
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    gap: var(--space-medium);
}
.table__above { align-self: end; min-height: var(--size-avatar); }
.table__below { align-self: start; display: grid; gap: var(--space-medium); }
.table__stage { position: relative; }

/* On a phone the board and its controls sit at the bottom, within reach of a thumb. */
@media (max-width: 760px) {
    .table__column { grid-template-rows: 1fr auto auto; width: 100%; }
    .table__stage { width: min(100%, calc(var(--board-height) * 8 / 12)); justify-self: center; }
    .table { padding-bottom: max(var(--space-large), env(safe-area-inset-bottom)); }
}

/* -- Chips -- */

.chip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-small) var(--space-medium); min-width: 0; }
.chip--you { color: var(--blue); }
.chip--them { color: var(--red); }
.chip__name-row { min-width: 0; display: flex; align-items: center; gap: var(--space-medium); }
.chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chip__note { color: var(--gray-5); font-size: var(--text-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip__note.is-over { color: var(--red); }
.chip__list { display: flex; flex-wrap: wrap; gap: var(--space-small) var(--space-medium); font-size: var(--text-tiny); font-variant-numeric: tabular-nums; }
.chip__item { display: inline-flex; align-items: center; gap: 1px; }
.chip__item .symbol { width: var(--size-symbol); height: var(--size-symbol); }
.chip__item.is-gone { opacity: var(--opacity-dim); }

.status-dot { position: relative; flex: none; width: var(--size-status); height: var(--size-status); opacity: 0; transition: opacity var(--duration-fade); }
.chip.is-waiting .status-dot, .chip.is-ready .status-dot { opacity: 1; }
.status-dot > * { position: absolute; inset: 0; transition: opacity var(--duration-fade); }
.status-dot__check { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.status-dot__spinner, .spinner {
    border-radius: 50%;
    background: conic-gradient(transparent, currentColor);
    animation: status-spin var(--duration-spin) linear infinite;
}
.status-dot__spinner {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--size-status) / 6), black calc(100% - var(--size-status) / 6));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--size-status) / 6), black calc(100% - var(--size-status) / 6));
}
.chip.is-ready .status-dot__check { opacity: 1; }
.chip.is-ready .status-dot__spinner { opacity: 0; }
@keyframes status-spin {
    to { transform: rotate(1turn); }
}

.spinner {
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--size-avatar);
    height: var(--size-avatar);
    color: var(--gray-5);
    pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--size-avatar) / 6), black calc(100% - var(--size-avatar) / 6));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--size-avatar) / 6), black calc(100% - var(--size-avatar) / 6));
}

/* -- Board: lakes are simply gaps where no tile stands -- */

.board {
    position: relative;
    width: 100%;
    aspect-ratio: var(--columns) / var(--rows);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--duration-fade);
}
.board.is-waiting { opacity: var(--opacity-dim); }

.board__tiles {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
}
.tile {
    margin: calc(var(--gap-tile) / 2);
    border-radius: var(--space-small);
    background: var(--gray-3);
    transition: background var(--duration-quick);
}
.tile.is-setup { background: var(--gray-4); }
.tile.is-selected { background: var(--gray-5); }

.board__pieces, .board__marks { position: absolute; inset: 0; pointer-events: none; }
.board__marks { width: 100%; height: 100%; }

/* A piece is one tile's share of the board, moved by whole tiles. */
.piece {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / var(--columns));
    height: calc(100% / var(--rows));
    padding: calc(var(--gap-tile) / 2);
    transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
    transition: transform var(--duration-move) ease-in-out, opacity var(--duration-fade);
}
.piece.is-arriving, .piece.is-falling { opacity: 0; }
.piece.is-arriving { transition: none; }
.piece.is-sliding { z-index: 1; }

.piece__face {
    position: relative;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: var(--space-small);
}
.piece.is-turning .piece__face { animation: piece-turn var(--duration-fade) ease-in-out; }
@keyframes piece-turn {
    50% { transform: scaleX(0); }
}

/* A face only you can see is a light tint with the symbol in your colour. A face everyone can see
   is solid, and so is the back of an enemy piece, which shows nothing else. */
.piece--own .piece__face { background: color-mix(in srgb, var(--blue) 22%, var(--gray-2)); color: var(--blue); }
.piece--enemy .piece__face { background: var(--red); color: var(--white); }
.piece--own.is-public .piece__face { background: var(--blue); color: var(--white); }
/* An enemy piece that has moved can't be a bomb or the flag. */
.piece.is-moved { opacity: var(--opacity-strong); }

.piece.is-selected .piece__face { outline: var(--border-selected) solid var(--gray-6); outline-offset: -1px; }

.piece__symbol { display: grid; width: 66%; }
.symbol { width: 100%; height: 100%; fill: currentColor; }
.symbol__line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.symbol__line--thin { stroke-width: 2; }
.piece__rank { position: absolute; top: 1px; right: 3px; font-size: var(--text-tiny); line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }

.mark-target { fill: var(--gray-6); opacity: var(--opacity-strong); }
.mark-line { stroke-width: var(--stroke-mark); stroke-linecap: round; }
.mark-line--own { stroke: var(--gray-6); }
.mark-line--enemy { stroke: var(--gray-6); }
.mark-end { fill: var(--gray-6); }

/* -- Building: the palette -- */

.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-small); }
.palette__kind {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-small);
    padding: var(--space-small);
    border: 0;
    border-radius: var(--radius);
    background: var(--gray-3);
    color: var(--blue);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
}
.palette__kind:hover { background: var(--gray-4); }
.palette__kind .symbol { flex: none; width: calc(var(--size-symbol) * 1.5); height: calc(var(--size-symbol) * 1.5); }
.palette__count { color: var(--gray-6); font-weight: 600; }
.palette__cost { position: absolute; top: 0; right: var(--space-small); color: var(--gray-5); font-size: var(--text-tiny); }

/* -- Tray -- */

.tray { display: flex; align-items: center; gap: var(--space-medium); min-height: calc(var(--size-avatar) + var(--space-small)); }
.tray__button {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-medium) var(--space-small);
    border: 0;
    border-radius: var(--radius);
    background: var(--gray-3);
    white-space: nowrap;
}
.tray__button:not(:disabled):hover { background: var(--gray-4); }
.tray__button--danger { color: var(--red); }
.tray__button--primary, .tray__button--primary:not(:disabled):hover { background: var(--blue); color: var(--white); font-weight: 600; }
.tray__result { flex: 1 1 0; font-weight: 600; text-align: center; white-space: nowrap; }