*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:#eef1f6;font:15px/1.45 system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif}
#watch{display:flex;flex-direction:column;height:100dvh;background:#000}
header,footer{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#11151c;flex-wrap:wrap}
header strong{font-size:15px}
#state,#room{color:#9aa4b2;font-size:13px}
#room{flex:1;text-align:right}
.badge{background:#2f6fed;color:#fff;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600}
#screen{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#screen canvas{max-width:100%;max-height:100%;width:auto;height:auto;image-rendering:auto}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72)}
#overlay[hidden]{display:none}
.card{max-width:360px;width:100%;background:#1a202a;border:1px solid #2c3442;border-radius:14px;padding:20px;text-align:center}
.eyebrow{color:#7fb0ff;font-size:12px;letter-spacing:.12em;font-weight:700}
.card h1{font-size:20px;margin:6px 0 10px}
.hint{color:#8b95a3;font-size:12.5px}
#error{color:#ff8b8b;font-size:13px;min-height:1em}
button{font:inherit;color:#eef1f6;background:#263042;border:1px solid #3a465b;border-radius:10px;padding:8px 14px;cursor:pointer}
button.primary{background:#2f6fed;border-color:#2f6fed;font-weight:700;padding:11px 22px;font-size:16px}
button[hidden]{display:none}
:fullscreen header,:fullscreen footer{display:none}