*{box-sizing:border-box}body{margin:0;background:#eaf3f8;color:#18354a;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}main{width:min(100%,540px);margin:auto;padding:14px 16px 10px}header{display:flex;align-items:center;justify-content:space-between}small{font-size:10px;letter-spacing:2px;color:#64869b}h1{font-size:23px;margin:3px 0 12px}button,select,input{font:inherit;border:0;border-radius:12px;padding:12px}button{cursor:pointer;background:#187ed2;color:white;font-weight:700;touch-action:manipulation}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #efb533}button.secondary{background:#18354a}button.quiet{background:#ddebf3;color:#315c76;padding:9px;font-size:12px}select,input{background:#edf4f8;color:#18354a;max-width:100%}.score{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13px}.score strong{font-size:30px;margin:0 10px}.score>span{font-size:11px;color:#6b8494}.blue{color:#167ed2}.red{color:#e46760}.table-wrap{position:relative;width:min(100%,calc((100dvh - 160px)*.6));min-width:220px;margin:auto;border-radius:25px;overflow:hidden;background:#f7fcff;box-shadow:0 12px 35px #163b5b20}canvas{width:100%;display:block;aspect-ratio:3/5;touch-action:none;user-select:none;outline:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ecf6fcde;backdrop-filter:blur(5px);padding:14px}.panel{width:100%;max-width:340px;text-align:center}.panel h2{font-size:clamp(23px,6vw,35px);line-height:1.3;margin:12px 0}.panel p{font-size:13px;line-height:1.65}.panel>button,.panel>select{display:block;width:100%;margin:9px 0}.panel details{font-size:12px;margin-top:16px}.panel details p{text-align:left}.join{display:flex;gap:6px;margin-top:12px}.join input{min-width:0;flex:1}#roomDisplay{font-size:26px;letter-spacing:5px;font-weight:800}#status{min-height:42px;font-size:12px}#notice{position:absolute;top:44%;left:0;right:0;text-align:center;pointer-events:none;font-weight:800;font-size:32px;color:#18354a;text-shadow:0 2px 10px white}footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin-top:10px;color:#668096}[hidden]{display:none!important}@media(max-height:620px){main{padding-top:6px}h1{font-size:18px;margin-bottom:5px}.score strong{font-size:23px}.panel h2{font-size:21px}.panel>button,.panel>select{padding:8px;margin:5px 0}.panel details{margin-top:6px}.table-wrap{width:min(100%,calc((100dvh - 125px)*.6))}}