/* IN PIECES. Shares the OVER THE BOARD frame (chess.css) and the maze's clock and times (maze.css). This file adds the 16:9 stage. */
.ip-table { --bsz: min(calc(100vw - 2 * var(--gutter) - 400px), calc((100vh - var(--bar-h) - 200px) * 16 / 9), 1100px); }
.ip-table .otb-boardwrap.ip-stage { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; touch-action: none; -webkit-user-select: none; user-select: none; }
.ip-board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ip-gate, .ip-loading, .ip-msg, .ip-won { position: absolute; inset: 0; display: grid; place-items: center; }
.ip-gate[hidden], .ip-loading[hidden], .ip-msg[hidden], .ip-won[hidden] { display: none; }
.ip-gate { z-index: 3; background: #07070b; }
.ip-gate .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.ip-gate .in { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 20px; }
.ip-gate .in b { font: 700 clamp(22px, 2vw + 10px, 40px)/1.05 var(--display); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.ip-loading { z-index: 4; background: rgba(7, 7, 11, .92); gap: 12px; grid-auto-flow: row; font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; align-content: center; }
.ip-loading .spin { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--bc); animation: ipSpin .8s linear infinite; }
@keyframes ipSpin { to { transform: rotate(360deg); } }
.ip-msg { z-index: 5; background: rgba(7, 7, 11, .92); padding: 20px; text-align: center; font-size: var(--fs-body); }
.ip-won { z-index: 6; background: #000; animation: ipIn 1.2s ease-out both; }
.ip-won video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ip-won .in { position: relative; z-index: 1; align-self: end; margin-bottom: 6%; padding: 10px 18px; border-radius: 999px; background: rgba(7, 7, 11, .75); border: 1px solid color-mix(in srgb, var(--bc) 60%, transparent); font: 700 clamp(16px, 1.2vw + 10px, 24px)/1 var(--display); animation: ipRise .6s .4s both; }
@keyframes ipIn { from { opacity: 0; filter: brightness(0); } to { opacity: 1; filter: brightness(1); } }
@keyframes ipRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ip-moves { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .9; }
.ip-ref { display: grid; gap: 6px; }
.ip-ref video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #0b0b10 center / cover no-repeat; border: 1px solid var(--line); object-fit: cover; }
.ip-ref span { font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
@media (max-width: 899px) {
  .ip-table { --bsz: calc(100vw - 2 * var(--gutter)); }
  .ip-table .otb-side .meta { display: none; }
  .ip-ref { grid-template-columns: 120px 1fr; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .ip-won, .ip-won .in { animation: none; } .ip-loading .spin { animation: none; } }