/* Deliberately small and dependency-free: this page is opened on phones, on
   tournament wifi, seconds before a match starts. */
:root {
    color-scheme: dark;
    --bg: #14171c;
    --fg: #e8ecf1;
    --muted: #97a1ad;
    --line: #2a303a;
    --steam: #2a475e;
    --connect: #3a8f3a;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    padding: calc(2rem + env(safe-area-inset-top, 0px)) 1rem
             calc(2rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 32rem; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0 0 1.5rem; }
.lead { font-size: 1.125rem; margin: 0 0 1.25rem; }
.note { color: var(--muted); font-size: .875rem; }
code {
    display: inline-block; margin-top: .35rem; padding: .35rem .5rem;
    background: #0d0f13; border: 1px solid var(--line); border-radius: 4px;
    font-size: .8125rem; word-break: break-all;
}
.btn {
    display: block; padding: 1rem; border-radius: 6px;
    color: #fff; text-align: center; text-decoration: none; font-weight: 600;
}
.btn-steam { background: var(--steam); }
.btn-connect { background: var(--connect); font-size: 1.25rem; }
.btn:hover { filter: brightness(1.15); }
.who {
    display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
    padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.who img { border-radius: 4px; }
.logout { margin-left: auto; color: var(--muted); font-size: .875rem; }