:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #ebe9f3; background: #111018; }
body { margin: 0; }
main { max-width: 720px; margin: 56px auto; padding: 0 24px; }
.eyebrow { color: #b9a0ff; font-size: 12px; letter-spacing: .16em; font-weight: 700; }
h1 { font-size: clamp(28px, 5vw, 40px); letter-spacing: -.04em; }
p { color: #b9b5c8; line-height: 1.6; }
a { color: #c4b5fd; }
form { margin: 28px 0 36px; padding: 24px; background: #1d1a28; border: 1px solid #373045; border-radius: 12px; }
label { display: block; margin: 12px 0 8px; font-weight: 600; }
input { box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid #635875; border-radius: 6px; background: #100e17; color: white; font: inherit; }
button { padding: 12px 20px; border: 0; border-radius: 6px; background: #b99aff; color: #1a102a; font: 700 15px system-ui; cursor: pointer; }
.button-link { display: inline-block; padding: 10px 16px; border-radius: 6px; background: #b99aff; color: #1a102a; font-weight: 700; text-decoration: none; }
#twitch-auth span { margin-left: 8px; font-size: 13px; }
button:disabled { opacity: .45; cursor: not-allowed; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #e3d7ff; outline-offset: 3px; }
#hint, #connection { font-size: 13px; }
#status { min-height: 26px; margin-bottom: 0; }
h2 { font-size: 19px; }
.score-card { margin: 24px 0; padding: 12px 16px; border: 1px solid #635875; border-radius: 8px; background: #17141f; }
.access-card { margin: 24px 0; padding: 16px; border: 1px solid #7c65a0; border-radius: 8px; background: #17141f; }
.access-card h2, .access-card p { margin-top: 0; }
.access-card button + button { margin-left: 8px; }
.event-card { margin: 24px 0; padding: 16px; border: 1px solid #635875; border-radius: 8px; background: #17141f; }
.event-card h2, .event-card p { margin: 0; }
.event-card p + div, .event-card div + p { margin-top: 12px; }
#event-state { color: #fef08a; font-variant-numeric: tabular-nums; }
#event-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
#event-buttons button { padding: 9px 12px; font-size: 13px; }
.score-card h2 { margin: 0 0 4px; }
.score-card p { margin: 0; color: #fef08a; font-variant-numeric: tabular-nums; }
.score-card p + p { margin-top: 5px; color: #d8d2e5; font-size: 13px; }
#characters-available { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; padding: 0; list-style: none; }
#characters-available li { display: grid; justify-items: center; gap: 6px; padding: 10px; border: 1px solid #373045; border-radius: 8px; background: #1d1a28; }
#characters-available img { width: 48px; height: 48px; image-rendering: pixelated; }
.preview { overflow: auto; background: repeating-conic-gradient(#393444 0% 25%, #282332 0% 50%) 0 / 32px 32px; border: 1px solid #635875; border-radius: 8px; }
iframe { display: block; border: 0; color-scheme: normal; }