:root{color-scheme:dark;font-family:system-ui,sans-serif}body{margin:0;background:#14161a;color:#e6e6e6}#root{min-height:100vh}.card{max-width:520px;margin:4rem auto;padding:1.5rem;background:#1d2026;border-radius:8px}.row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}h1{font-size:1.4rem}input{display:block;width:100%;box-sizing:border-box;margin:.4rem 0;padding:.5rem;background:#14161a;border:1px solid #2c3038;border-radius:4px;color:inherit}button{padding:.5rem .9rem;background:#3a6df0;color:#fff;border:none;border-radius:4px;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button.link{background:none;color:#8ab4ff;padding:.5rem .4rem}.error{color:#ff6b6b}ul.friends{list-style:none;padding:0}ul.friends li{padding:.5rem 0;border-bottom:1px solid #2c3038}.status{font-style:normal;font-size:.8rem;opacity:.7}.status.in-match{color:#4ade80;opacity:1}.watch{position:fixed;top:0;right:0;bottom:0;left:0;background:#000}.watch video{width:100%;height:100%;object-fit:contain}.watch .overlay{position:absolute;bottom:1rem;left:1rem;display:flex;align-items:center;gap:1rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center}.modal{background:#1d2026;padding:1.5rem;border-radius:8px;min-width:320px}