.motion-controls { display: flex; flex-wrap: wrap; gap: 1rem; }
.motion-controls label { display: flex; flex-direction: row; align-items: center; }
.motion-controls input { min-height: 24px; width: 24px; }
#motion-status { min-height: 1.4em; color: #95f5cf; }
.event-emphasis { outline: 3px solid #f6d36b; outline-offset: -3px; }
.event-traveller { position: fixed; top: 0; left: 0; margin: -12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #07151b; background: #f6d36b; font-weight: 800; pointer-events: none; z-index: 10; }
@media (prefers-reduced-motion: reduce) { .event-traveller { display: none; } }

/* Keep the public board square at every width; phones use /play. */
body.board-page main { max-width: 100%; padding: .6rem; gap: .35rem; align-items: center; }
body.board-page .eyebrow { margin: 0; }
body.board-page h1 { font-size: 1rem; }
body.board-page #code-entry { flex-direction: row; align-items: end; }
body.board-page.has-code #code-entry, body.board-page.has-code .motion-controls, body.board-page.has-code > main > .eyebrow { display: none; }
body.board-page #motion-status:empty { display: none; }
body.board-page #stage { display: grid; grid-template-columns: repeat(11,minmax(0,1fr)); grid-template-rows: repeat(11,minmax(0,1fr)); width: min(96vw,calc(100svh - 5rem)); aspect-ratio: 1; gap: 0; container-type: inline-size; }
body.board-page #court { grid-area: 1/1/12/12; display: grid; grid-template-columns: repeat(11,minmax(0,1fr)); grid-template-rows: repeat(11,minmax(0,1fr)); gap: 2px; width: 100%; min-height: 0; }
body.board-page #court .space { min-width: 0; min-height: 0; padding: .3cqw; border-radius: 3px; overflow: hidden; border-top-width: .45cqw; }
body.board-page #court .space strong { font-size: clamp(6px,1.25cqw,16px); line-height: 1.08; overflow-wrap: anywhere; }
body.board-page #court .space > span { font-size: clamp(5px,1.02cqw,13px); line-height: 1.1; }
body.board-page #readout { grid-area: 2/2/11/11; margin: .65cqw; min-height: 0; overflow: hidden; display:flex; flex-direction:column; justify-content:center; gap:1cqw; padding:2cqw; text-align:center; font-size:clamp(8px,1.6cqw,20px); border:1px solid #42626b; background:radial-gradient(ellipse at center,#183630,#0c1d24); }
body.board-page #readout #turn { font-size:clamp(10px,2.7cqw,34px); font-weight:800; color:#95f5cf; }
body.board-page #faces { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8cqw; }
body.board-page #faces figure { padding:.5cqw .4cqw 1cqw; }
body.board-page #faces img { height:11cqw; max-height:11cqw; width:100%; object-fit:contain; }
body.board-page #faces figcaption { font-size:clamp(7px,1.5cqw,18px); margin:.5cqw 0 0; }
body.board-page #faces figcaption span { font-size:clamp(6px,1.2cqw,15px); }
body.board-page #last-move { font-weight:700; }
body.board-page #chatter { color:#ffd978; font-style:italic; min-height:0; }
body.board-page #chatter:empty, body.board-page #readout p:empty { display:none; }
body.board-page #scores { display:flex; flex-wrap:wrap; justify-content:center; list-style:none; padding:0; gap:.6cqw 1.8cqw; font-size:clamp(7px,1.25cqw,17px); }
body.board-page #scores li { max-width:31%; }
body.board-page #spot { font-size:clamp(7px,1.3cqw,16px); }
body.board-page.is-waiting #spot, body.board-page.is-waiting #scores, body.board-page.is-waiting #dice { display:none; }
.tokens { display:flex; flex-wrap:wrap; gap:1px; margin-top:.3cqw; }
#court .player-token { display:grid; place-items:center; width:1.9cqw; height:1.9cqw; min-width:8px; min-height:8px; border-radius:50%; color:#07151b; background:var(--token,#fff); font-size:clamp(6px,1.25cqw,15px); font-weight:900; border:1px solid #fff; box-shadow:0 1px 3px #000; }
.game-history { width:min(94vw,70rem); color:#c5ddd6; font-size:.8rem; }

body.board-page #stage { align-items:stretch; }
body.board-page #court { height:100%; align-self:stretch; }
body.board-page #readout { align-self:stretch; }

body.board-page.has-code #motion-status { display:none; }