.turn-hud {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: static;
    width: min(100%, 720px);
    height: 32px;
    margin: 0;
    color: #28232d;
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-variant-numeric: tabular-nums;
    pointer-events: auto;
}
.turn-hud--right { margin-bottom: 16px; }
.turn-hud--left { margin-top: 16px; }

.turn-hud__player { display: inline-flex; align-items: center; gap: 8px; }
.turn-hud__value { text-decoration: none; text-decoration-thickness: .125rem; text-underline-offset: .25rem; }
.turn-hud--right .turn-hud__player--left { display: none; }
.turn-hud__value--active, .turn-hud__value--winner, .turn-hud__value--resigned { font-weight: 700; }
.turn-hud__value--active { text-decoration: underline; }
.board-stack { display: grid; flex: 0 0 auto; grid-template-rows: auto auto auto; width: 100%; height: auto; min-height: 0; }

.game-preview { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; min-height: min-content; gap: 16px; width: 100%; margin: 0 auto; }
.board { display: grid; grid-row: 2; align-self: center; justify-self: center; width: 100%; height: auto; }
.board-cell { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; cursor: default; overflow: visible; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.board-cell--clickable { cursor: pointer; }
.board-void { display: block; min-width: 0; min-height: 0; pointer-events: none; }
.board-cell--beacon, .board-cell--obelisk, .board-cell--nihil { z-index: 1; }
.board-cell--gate { z-index: 2; }
.cell-graphic { position: absolute; top: 50%; left: 50%; display: block; width: var(--graphic-width); height: auto; max-width: none; pointer-events: none; transform: translate(-50%, -50%); }
.board-cell--direction-1 .cell-graphic--object { transform: translate(-50%, -50%) rotate(180deg); }
.board-cell--direction-2 .cell-graphic--object { transform: translate(-50%, -50%) rotate(90deg); }
.board-cell--direction-3 .cell-graphic--object { transform: translate(-50%, -50%) rotate(-90deg); }
.board-cell--gate.board-cell--direction-1 .cell-graphic--object { filter: hue-rotate(210deg); }
.board-cell--gate.board-cell--direction-2 .cell-graphic--object { filter: hue-rotate(120deg); }
.board-cell--gate.board-cell--direction-3 .cell-graphic--object { filter: hue-rotate(30deg); }

.tray { position: relative; display: flex; flex: 1 0 auto; align-items: center; justify-content: center; align-self: stretch; width: min(100%, 720px); min-height: var(--piece-size); }
.tray-player { display: contents; }
.tray--multiple { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 16px; }
.tray--multiple .tray-player { display: flex; align-items: center; justify-content: center; min-width: 0; }
.tray-pieces { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, var(--piece-size)); gap: 8px; align-content: center; justify-content: center; width: 100%; overflow: visible; transition: height var(--animation-duration) cubic-bezier(.2, .8, .2, 1); }
.tray-piece-move, .tray-piece-enter-active, .tray-piece-leave-active { transition: transform var(--animation-duration) cubic-bezier(.2, .8, .2, 1), opacity var(--animation-duration) ease; }
.tray-piece-enter-from, .tray-piece-leave-to { opacity: 0; }
.tray-piece-leave-active { position: absolute; }
.board-piece-enter-active, .board-piece-leave-active { transition: opacity var(--animation-duration) ease; }
.board-piece-enter-from, .board-piece-leave-to { opacity: 0; }
.piece-button { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; background: transparent; cursor: default; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.piece-button--clickable { cursor: pointer; }
.piece {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    isolation: isolate;
    pointer-events: none;
}
.tray-return-placeholder { min-width: 0; aspect-ratio: 1; padding: 0; cursor: pointer; }
.piece-button--legacy .piece { width: 99.6514%; }
.piece--board[data-piece-kind="legacy"] { width: 80.615%; }
.piece-base {
    inset: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.piece-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.piece-frame__body { fill: #fff; stroke: #151515; stroke-width: 49.72; stroke-miterlimit: 22.9256; }
.piece-frame__direction { fill: #151515; }
.piece-grid { position: absolute; top: 29%; left: 20.9%; display: grid; width: 58.2%; height: 58.7%; }
.piece-grid-cell { display: grid; min-width: 0; min-height: 0; place-items: center; }
.piece-center, .piece-dot { position: relative; display: block; height: auto; }
.piece-center { width: 75%; }
.piece-dot { width: 66.666%; aspect-ratio: 1; border-radius: 50%; background: #f00; }
.piece.legacy .piece-center, .piece.legacy .piece-dot { width: 100%; transform: scale(.75); }
.piece--direction-1 { transform: rotate(180deg); }
.piece--direction-2 { transform: rotate(90deg); }
.piece--direction-3 { transform: rotate(-90deg); }
.piece--direction-1 .piece-dot { background-color: #0088ff; }
.piece.player-color-2 .piece-dot { background-color: #00aa00; }
.piece.player-color-3 .piece-dot { background-color: #aa5500; }
.piece.player-color-neutral .piece-dot { background-color: #151515; }
.piece.player-color-2.piece--selected .piece-frame__body { stroke: #00aa00; }
.piece.player-color-3.piece--selected .piece-frame__body { stroke: #aa5500; }
.piece--active:not(.piece--selected) .piece-frame__body { stroke: #8822bb; }
.piece--selected .piece-frame__body { stroke: #f00; }
.piece--direction-1.piece--selected .piece-frame__body { stroke: #0088ff; }
.piece--board { position: absolute; top: 50%; left: 50%; z-index: 4; width: var(--piece-size); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.piece--board.piece--direction-1 { transform: translate(-50%, -50%) rotate(180deg); }
.piece--board.piece--direction-2 { transform: translate(-50%, -50%) rotate(90deg); }
.piece--board.piece--direction-3 { transform: translate(-50%, -50%) rotate(-90deg); }
.move-hint { position: relative; z-index: 20; align-self: stretch; justify-self: stretch; margin: 8px; border: .140625rem solid currentColor; border-radius: 50%; opacity: .88; pointer-events: none; }
.tray-return-placeholder.move-hint { margin: 0; pointer-events: auto; }
.move-hint--move { color: #080; background: #0806; }
.move-hint--capture { color: #f00; background: #f006; }
.move-hint--setup { color: #080; background: #0806; }

@media (prefers-reduced-motion: reduce) {
    :root { --animation-duration: 0ms !important; }
}

.game-preview--horizontal { flex-direction: row; align-items: stretch; }
.game-preview--horizontal .board-stack { order: 1; flex: 0 0 var(--board-width); grid-template-rows: auto minmax(0, 1fr) auto; align-self: center; width: var(--board-width); height: var(--board-stack-height); }
.game-preview--horizontal .board { width: 100%; height: 100%; }
.game-preview--horizontal .tray { flex: 1 0 var(--tray-min-width); width: auto; }
.game-preview--horizontal .tray--left { order: 0; }
.game-preview--horizontal .tray--right { order: 2; }

@media (min-width: 1240px) {
    .turn-hud--right { display: none; }
    .turn-hud--left { display: none; }
}