input[type="color"] { width: 3.2em; height: 2.2em; padding: 2px; cursor: pointer; }
td input:not([type="color"]) { width: 11em; }
td.soft { font-size: 0.9em; }
#limit { vertical-align: middle; }
img.sign { display: block; background: #fff; border-radius: 10px; border: 1px solid #d0d4da; }
#script { margin: 4px 0; padding-left: 1.6em; }
#script li { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; }
#script li img.sign { width: 64px; height: 48px; flex: none; }
#script li .they { flex: 1 1 14em; }
#script li .you { flex: 1 1 12em; font-weight: 600; }
#script li.now { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 2px solid var(--accent); }
#script li.done { opacity: 0.5; }
@media (max-width: 560px) { #script li { flex-wrap: wrap; } }
#live { font-size: 1.9rem; font-weight: 600; line-height: 1.3; min-height: 1.3em; margin: 6px 0; }
#live.guess, .talk p.guess { opacity: 0.6; }
.talk { max-height: 16em; overflow-y: auto; }
.talk p { margin: 4px 0; padding: 6px 10px; border-radius: 10px; max-width: 80%; }
.talk p.me { margin-left: auto; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.talk p.them { background: color-mix(in srgb, var(--soft) 18%, transparent); }
#captions-state.warn { color: #d9480f; font-weight: 600; }
#meter { position: relative; display: flex; height: 2.4em; border-radius: 10px; overflow: hidden; margin: 6px 0; font-weight: 700; }
#meter-slow, #meter-fast { display: flex; align-items: center; padding: 0 10px; color: #fff; }
#meter-slow { background: #0a84ff; }
#meter-fast { background: #ff9500; flex: 1; justify-content: flex-end; }
#needle { position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: var(--ink); border: 2px solid var(--card); border-radius: 3px; left: 0; transition: left 0.1s linear; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 10px; }
.tile { border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; transition: background 0.2s; }
.tile.slow { border-color: #0a84ff; }
.tile.fast { border-color: #ff9500; }
.tile input { width: 100%; min-width: 0; flex: 1; }
.tile img.sign { width: 96px; height: 72px; }
.tile.hit { background: color-mix(in srgb, var(--accent) 22%, transparent); }
#caption-bar { position: sticky; top: 0; z-index: 5; margin-top: 0; box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); }
#caption-bar p { margin: 4px 0; }
#live:empty::before { content: 'What the other person says shows here.'; opacity: 0.45; font-weight: 400; }
#motion-rate.warn { color: #d9480f; font-weight: 600; }
#board { width: var(--board-size, 70%); min-width: min(100%, 320px); }
#stage { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #fff; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; margin: 8px 0; container-type: size; }
#stage video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The board keeps 4:3 inside whatever space it gets (full screen is wider). */
#stage canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100cqw, 133.33cqh); height: min(75cqw, 100cqh); }
/* Full screen: the board fills the screen, with the other person's words on top and yours below. */
#board-caption, #board-said, #board-exit { display: none; }
#board:fullscreen #board-exit, #board.full #board-exit { display: block; position: absolute; top: 12px; right: 16px; z-index: 2; }
/* .full: the same when the browser does not allow full screen, filling the window instead. */
#board.full { position: fixed; inset: 0; z-index: 50; }
#board:fullscreen, #board.full { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--paper); box-sizing: border-box; }
#board:fullscreen #stage, #board.full #stage { flex: 1; aspect-ratio: auto; margin: 0; }
#board:fullscreen #board-caption, #board.full #board-caption { display: block; margin: 0; min-height: 1.3em; font-size: 2.2rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
#board:fullscreen #board-caption:empty::before, #board.full #board-caption:empty::before { content: 'What the other person says shows here.'; opacity: 0.45; font-weight: 400; }
#board:fullscreen #board-said, #board.full #board-said { display: block; margin: 0; min-height: 1.3em; font-size: 1.8rem; font-weight: 700; text-align: right; }
/* The camera picture is never shown: the video only feeds the hand model, so it plays unseen. */
#stage video { opacity: 0; pointer-events: none; }
#stage canvas { touch-action: none; cursor: crosshair; }
#pen-state { position: absolute; top: 8px; left: 8px; padding: 2px 10px; border-radius: 8px; background: #e5446d; color: #fff; font-weight: 700; }
#pen-state:empty { display: none; }
.shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 8px; }
.shape { display: flex; align-items: center; gap: 10px; border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; transition: background 0.2s; }
.shape svg { flex: none; }
.shape div { flex: 1; min-width: 0; }
.shape input { width: 100%; }
.shape.hit { background: color-mix(in srgb, #e5446d 22%, transparent); border-color: #e5446d; }
#guess { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #ffd60a 25%, transparent); border: 2px solid #ffd60a; }