:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111820;background:#f4f7fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--red: #b00020;--blue: #01579b;--light-red: #ff6666;--light-blue: #66ccff;--serve: #f75b02;--muted: #8a96a3}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.home-shell{min-height:100dvh;padding:24px;display:flex;flex-direction:column;gap:28px;background:#10151b;color:#f6f8fb}.home-topline{display:flex;justify-content:space-between;align-items:center;gap:16px}.home-topline h1{margin:0;font-size:clamp(2rem,9vw,5rem);letter-spacing:0}.home-topline p{margin:4px 0 0;color:#aab5c0}.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;flex:1}.role-panel{border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:22px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:280px;gap:10px;text-align:left}.role-panel strong{font-size:clamp(2rem,7vw,4rem)}.role-panel span{color:#ffffffc7}.host-panel{background:linear-gradient(135deg,#4a0712,#10151b 58%)}.remote-panel{background:linear-gradient(135deg,#07395d,#10151b 58%)}.home-links{display:flex;flex-wrap:wrap;gap:10px}.home-links button{min-height:44px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#ffffff14;color:#f6f8fb;padding:10px 12px;display:inline-flex;align-items:center;gap:8px}.icon-button{width:44px;height:44px;border:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#ffffff1f;color:inherit}.host-screen{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#fff;color:#10151b}.host-screen--dark{background:#000;color:#f4f7fa}.scoreboard{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:row}.score-side{flex:1 1 0;min-width:0;border:0;padding:0;background:transparent;display:flex;align-items:center;justify-content:center}.score-side:active{background:#0000000a}.score-side--red{color:var(--red)}.score-side--blue{color:var(--blue)}.host-screen--dark .score-side--red{color:var(--light-red)}.host-screen--dark .score-side--blue{color:var(--light-blue)}.score-number{font-weight:800;line-height:1;letter-spacing:0;-webkit-user-select:none;user-select:none}.court-name{position:absolute;z-index:3;border:0;padding:0;background:transparent;font-size:clamp(1.6rem,8vw,5rem);font-weight:800;color:#dfe5ea;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.25)}.court-name:active{opacity:.82}.court-name--serving{color:var(--serve)}.hand11{top:calc(env(safe-area-inset-top) + 48px);left:10px}.hand12{bottom:calc(env(safe-area-inset-bottom) + 10px);left:10px}.hand21{top:calc(env(safe-area-inset-top) + 48px);right:10px;text-align:right}.hand22{bottom:calc(env(safe-area-inset-bottom) + 10px);right:10px;text-align:right}.match-time{position:absolute;z-index:3;left:50%;bottom:calc(env(safe-area-inset-bottom) + 16px);transform:translate(-50%);font-size:clamp(2rem,9vw,5rem);color:currentColor}.host-toolbar{position:absolute;z-index:4;top:calc(env(safe-area-inset-top) + 8px);display:flex;align-items:center;gap:8px}.host-toolbar--left{left:8px}.host-toolbar--right{right:8px}.mode-badge{width:44px;height:44px;border:0;border-radius:8px;background:#94a0ac38;color:currentColor;display:inline-flex;align-items:center;justify-content:center}.status-dot{width:18px;height:18px;border-radius:999px;display:inline-block;background:#d82729;border:2px solid rgba(255,255,255,.8)}.status-dot--ready{background:#22ba46}.status-dot--loading{background:#f2a900}.status-dot--disconnected{background:#d82729}.host-warning,.toast-line{position:absolute;z-index:5;left:50%;transform:translate(-50%);max-width:min(92vw,720px);padding:10px 14px;border-radius:8px;background:#10151be6;color:#fff;display:flex;align-items:center;gap:8px}.host-warning{top:64px}.toast-line{top:112px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#00000085;display:flex;align-items:center;justify-content:center;padding:16px}.settings-sheet,.name-sheet{width:min(94vw,520px);max-height:92dvh;overflow:auto;background:#fff;color:#10151b;border-radius:8px;padding:18px;box-shadow:0 24px 80px #00000052}.sheet-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.sheet-header h2{margin:0}.sheet-header button,.settings-list button,.secondary-button,.plain-link{border:1px solid #ccd5df;border-radius:8px;background:#fff;color:#10151b;padding:8px 12px}.pairing-box{display:grid;place-items:center;gap:12px;padding:16px 0}.pairing-box h3{margin:0;justify-self:start}.code-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;overflow-wrap:anywhere;color:#4f5e6d}.primary-button,.danger-button{border:0;border-radius:8px;color:#fff;min-height:44px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary-button{background:#01579b}.danger-button{width:100%;background:#b00020;margin-top:14px}.settings-list{display:grid;gap:10px}.settings-list label{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #edf1f5;padding-top:10px}.range-row input{flex:0 1 220px}.content-page{min-height:100dvh;background:#f4f7fa;color:#10151b;padding:22px}.page-header{width:min(100%,860px);margin:0 auto 22px;display:grid;gap:18px}.page-header h1{margin:0;font-size:clamp(2.2rem,9vw,4.8rem);line-height:1}.page-back{color:#10151b;display:inline-flex;align-items:center;gap:8px}.content-panel,.legal-content{width:min(100%,860px);margin:0 auto}.content-panel{display:grid;gap:16px}.settings-list--page{border:1px solid #d9e1e8;border-radius:8px;background:#fff;padding:4px 16px 16px}.legal-content{background:#fff;border:1px solid #d9e1e8;border-radius:8px;padding:20px;line-height:1.62}.legal-content h2{margin:28px 0 8px;font-size:1.08rem}.legal-content p{margin:12px 0}.legal-content a{color:#01579b}.legacy-links{margin-top:28px;padding-top:18px;border-top:1px solid #e5ebf1;display:flex;flex-wrap:wrap;gap:10px}.legacy-links a{min-height:40px;border:1px solid #ccd5df;border-radius:8px;padding:8px 10px;display:inline-flex;align-items:center;text-decoration:none}.remote-connect{min-height:100dvh;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:14px;background:#10151b;color:#fff}.remote-connect h1{margin:0;font-size:clamp(2.5rem,12vw,5rem)}.remote-connect label{display:grid;gap:8px;color:#c8d2dc}.remote-connect input{width:100%;min-height:48px;border-radius:8px;border:1px solid #3c4a57;background:#fff;color:#10151b;padding:10px 12px}.plain-link{align-self:flex-start;background:transparent;color:#fff;border-color:#ffffff3d}.remote-screen{width:100vw;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(74px,18vw) minmax(0,1fr);overflow:hidden;background:#f3f6f9}.remote-add{border:0;font-size:clamp(7rem,36vw,16rem);font-weight:700;line-height:1;background:#fff}.remote-add--red{color:var(--red)}.remote-add--blue{color:var(--blue)}.remote-center{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border-left:1px solid #e1e7ed;border-right:1px solid #e1e7ed;background:#f8fafc}.remote-settings{width:min(92px,16vw);aspect-ratio:1;border:1px solid #ccd5df;border-radius:8px;background:#ffffffd1;color:#4f5e6d;display:grid;place-items:center}.remote-status{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 8px);left:50%;transform:translate(-50%);max-width:90%;font-size:.78rem;color:#697887;text-align:center;overflow:hidden;text-overflow:ellipsis}.remote-menu{width:100%;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(env(safe-area-inset-top) + 8px) 6px calc(env(safe-area-inset-bottom) + 8px)}.remote-menu-close,.remote-menu-item{width:100%;border:1px solid #d5dde5;border-radius:8px;background:#fff;color:#10151b;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;text-align:center;overflow-wrap:anywhere}.remote-menu-close+.remote-menu-item,.remote-menu-item+.remote-menu-item{margin-top:8px}.remote-menu-item span,.remote-menu-close{font-size:clamp(.65rem,2.2vw,.92rem)}.name-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.name-slot{display:grid;gap:6px;border:2px solid #d9e1e8;border-radius:8px;padding:10px}.name-slot--selected{border-color:#01579b}.name-slot span{color:#687684;font-size:.85rem}.name-slot input{min-width:0;border:1px solid #ccd5df;border-radius:8px;min-height:42px;padding:8px}.recent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.recent-grid button{border:1px solid #d9e1e8;border-radius:8px;background:#fff;min-height:40px;overflow:hidden;text-overflow:ellipsis}@media (max-width: 560px){.role-grid{grid-template-columns:1fr}.role-panel{min-height:220px}.content-page,.legal-content{padding:16px}.settings-list--page label{align-items:flex-start;flex-direction:column}.range-row input{width:100%;flex-basis:auto}.court-name{font-size:clamp(1.4rem,7vw,3rem)}.match-time{bottom:calc(env(safe-area-inset-bottom) + 56px)}.remote-screen{grid-template-columns:minmax(0,1fr) minmax(72px,23vw) minmax(0,1fr)}.remote-add{font-size:clamp(6rem,34vw,12rem)}}@media (orientation: landscape) and (max-height: 520px){.remote-menu-item,.remote-menu-close{min-height:54px}.court-name{font-size:clamp(1.4rem,8vh,3.2rem)}.match-time{font-size:clamp(2rem,12vh,4rem)}}