.device-pair-screen{max-width:620px;margin:auto;text-align:center}.device-code{font:900 clamp(28px,7vw,48px)/1.3 system-ui,sans-serif;letter-spacing:.13em;padding:16px 8px;background:#092943;border:1px solid #4b7eaa;border-radius:12px;color:#fff}.device-pair-actions{display:grid;gap:10px}.device-pair-screen p{overflow-wrap:anywhere}.device-pair-screen #device-pair-status{min-height:2.7em;color:#bee0ff}
.phone-controller-page{margin:0;background:#081723;color:#f4f8ff;font:600 16px/1.45 system-ui,sans-serif;overscroll-behavior:none;overflow:hidden;height:100dvh;touch-action:none}.phone-controller-page *{box-sizing:border-box}.phone-controller-page button,.phone-controller-page input{font:inherit}.phone-controller-page button{color:inherit;background:#173e5c;border:2px solid #45738e;border-radius:14px;min-height:44px;padding:10px;touch-action:none;user-select:none;-webkit-user-select:none}.phone-controller-page button:focus-visible,.phone-controller-page a:focus-visible{outline:3px solid #fff;outline-offset:2px}.phone-controller-page .primary{background:#2577e8;border-color:#9dccff;font-weight:900}.phone-controller-page a{color:#c6e3ff}.phone-controller-page .eyebrow{letter-spacing:.16em;color:#a7caff}.phone-join{width:min(100%,520px);height:100dvh;margin:auto;overflow-y:auto;touch-action:pan-y;padding:max(28px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}.phone-join h1{font-size:32px;line-height:1.12}.phone-join form{display:grid;gap:12px;margin:25px 0}.phone-join input{min-width:0;width:100%;border:2px solid #6b95b3;border-radius:12px;background:#fff;color:#09213b;padding:16px;text-transform:uppercase;letter-spacing:.13em;font-weight:800}.phone-controls{height:100dvh;max-width:940px;margin:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px}.phone-controls header{display:flex;gap:12px;justify-content:space-between;align-items:center}.phone-controls header small{display:block;letter-spacing:.12em;font-size:11px;color:#a7caff}.phone-controls header strong{font-size:15px}.phone-controls #phone-status{font-size:12px;line-height:1.25;min-height:2.5em;margin:0;text-align:center;color:#bcdfff}.phone-shoulders{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.phone-shoulders button{padding:7px 4px;min-height:50px;font-weight:900}.phone-controls small{font-size:10px;font-weight:600}.phone-control-body{display:flex;align-items:center;justify-content:space-around;gap:8px;flex:1;min-height:155px}.phone-stick{position:relative;width:min(43vw,240px);height:min(43vw,240px);flex:none;touch-action:none;user-select:none}.phone-stick-ring{position:absolute;inset:4%;border-radius:50%;border:3px solid #557f9c;background:radial-gradient(circle,#13364d,#082238)}.phone-stick-thumb{position:absolute;inset:31%;border:2px solid #a1ccee;border-radius:50%;background:#2c5d80;pointer-events:none}.phone-stick span{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.18em;pointer-events:none}.phone-faces{display:grid;width:min(45vw,260px);height:min(45vw,260px);grid-template:repeat(3,1fr)/repeat(3,1fr);gap:4px}.phone-faces button{min-height:0;padding:0;border-radius:50%;font-size:28px;font-weight:900;display:flex;flex-direction:column;justify-content:center;align-items:center}.phone-faces small{font-size:9px;line-height:1.1}.phone-north{grid-area:1/2;color:#9eefc1!important}.phone-west{grid-area:2/1;color:#d7b6ff!important}.phone-east{grid-area:2/3;color:#ffb2b3!important}.phone-south{grid-area:3/2;color:#a7ceff!important}.phone-dpad{display:flex;gap:8px;justify-content:center}.phone-dpad button{padding:8px 14px;font-size:12px}.phone-controls footer{display:flex;align-items:center;gap:12px;justify-content:space-between}.phone-controls footer p{font-size:10px;text-align:center;max-width:290px;line-height:1.3;margin:0}.phone-controls footer button{font-size:12px}.phone-controls button.pressed{background:#4386b8;border-color:#fff;transform:scale(.96)}
@media(orientation:landscape) and (max-height:530px){.phone-controls{gap:3px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}.phone-controls header{height:38px}.phone-controls header button{min-height:32px;padding:4px 10px;font-size:12px}.phone-controls #phone-status{min-height:1.3em}.phone-shoulders{position:absolute;left:28%;right:28%;top:90px;z-index:1;grid-template-columns:repeat(2,1fr)}.phone-shoulders button{min-height:44px}.phone-control-body{justify-content:space-between;min-height:100px}.phone-stick{width:min(27vw,210px);height:min(27vw,210px)}.phone-faces{width:min(27vw,210px);height:min(27vw,210px)}.phone-dpad{position:absolute;left:30%;right:30%;bottom:60px;flex-wrap:wrap}.phone-controls footer p{font-size:9px}.phone-controls footer button{min-height:34px;padding:5px 14px}}