.spectator-panel { display: grid; gap: 14px; }
.spectator-panel h2 { margin: 0; font: 500 23px var(--font-display, Georgia, serif); }
.spectator-panel form, .spectator-panel fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.spectator-panel fieldset { padding: 14px; border: 1px solid #b5c38a33; }
.spectator-panel label { display: grid; flex: 1 1 170px; gap: 6px; color: #b6c1ac; font-size: 12px; }
.spectator-panel input, .spectator-panel select { width: 100%; min-width: 0; padding: 9px; border: 1px solid #b5c38a44; border-radius: 4px; background: #12251e; color: #eee8d3; font: inherit; }
.spectator-panel input[readonly] { cursor: text; }
.spectator-panel p { margin: 0; color: #a6b29d; font-size: 12px; }
.spectator-panel fieldset p, .spectator-panel fieldset > input { flex-basis: 100%; }
.spectator-panel [hidden] { display: none; }
#spectator-access { position: relative; }
#spectator-access > summary { cursor: pointer; }
#match-spectators { position: absolute; z-index: 20; right: 0; bottom: 30px; width: min(470px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; padding: 18px; border: 1px solid #b5c38a44; border-radius: 8px; background: #14271ff5; box-shadow: 0 12px 50px #0008; }