:root { color-scheme: dark; }
[hidden] { display: none !important; }
body { margin: 0; background: #07151b; color: #edf9f6; font-family: system-ui, sans-serif; }
main { max-width: 28rem; margin: 0 auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
body.board-page main { max-width: 76rem; }
h1 { font-size: 1.6rem; margin: 0; }
.eyebrow { letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.75rem; color: #95f5cf; margin: 0; }
form, #actions, #host { display: flex; flex-direction: column; gap: 0.75rem; }
label { display: flex; flex-direction: column; gap: 0.35rem; }
button, input, select { font: inherit; min-height: 48px; border-radius: 10px; }
select { background: #0c1d24; color: inherit; padding: 0.5rem; max-width: 100%; }
button:disabled { opacity: 0.6; }
a { color: #95f5cf; }
input { border: 1px solid #42626b; background: #0c1d24; color: inherit; padding: 0.5rem 0.75rem; }
button { border: 1px solid #42626b; background: #203b45; color: inherit; font-weight: 700; }
#faces { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0; }
body.board-page #faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#faces figure { margin: 0; padding: 0.5rem 0.55rem 0.8rem; border-radius: 12px; box-sizing: border-box; }
#faces img { display: block; width: 100%; max-height: 12rem; object-fit: contain; background: #10242c; border-radius: 12px; }
body.board-page #faces img { max-height: 8rem; }
#faces figcaption { font-weight: 700; margin: 0.55rem 0 0; line-height: 1.25; }
#faces figcaption span { display: block; font-weight: 500; color: #95f5cf; font-size: 0.85rem; margin-top: 0.15rem; }
#faces figure.is-seated { box-shadow: inset 0 0 0 2px #7ec8d4; }
#faces figure.is-turn { box-shadow: inset 0 0 0 3px #95f5cf; }
#faces figure.is-you { box-shadow: inset 0 0 0 3px #f6d36b; }
#stage { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 0.75rem; align-items: start; }
#court { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(11, minmax(4.5rem, auto)); gap: 3px; margin: 0; padding: 0; list-style: none; }
#court .space { background: #10242c; border-radius: 6px; padding: 0.2rem 0.28rem 0.3rem; border-top: 4px solid var(--group, #42626b); box-shadow: inset 3px 0 0 var(--seat, transparent); }
#court .space strong, #court .space span { display: block; }
#court .space strong { font-size: 0.68rem; line-height: 1.15; }
#court .space span { font-size: 0.58rem; line-height: 1.2; color: #c5ddd6; }
#court .space.is-here { outline: 2px solid #95f5cf; outline-offset: -2px; }
#court .space.is-improved strong { color: #f6d36b; }
#readout { display: flex; flex-direction: column; gap: 0.45rem; background: #0c1d24; border-radius: 12px; padding: 0.75rem; }
#readout p { margin: 0; }
#scores, #holdings, #animations, #persona-log { margin: 0; padding-left: 1.2rem; }
#holdings { color: #d7f7ea; }
#error { color: #ffaf9a; min-height: 1.2em; }

body:not(.board-page) #faces img { aspect-ratio: 3 / 4; height: auto; min-height: 8rem; }
#error:empty { display:none; }
#court-setup { background:#235345; }