@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/noto-sc-regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/noto-sc-bold.woff2') format('woff2');font-weight:700 900;font-display:swap}*{box-sizing:border-box}body{margin:0;background:#061727;color:#e8f5ff;font-family:'Noto Sans SC','Segoe UI','Microsoft YaHei',Arial,sans-serif}.online-wrap{max-width:820px;margin:auto;padding:12px 16px 24px}.online-header{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:15px}.online-header a{color:#b8d8e9;text-decoration:none}.online-header button{padding:8px 12px}button,input,select{font:inherit}button{cursor:pointer;color:#e8f5ff;background:#163c54;border:1px solid #4a7388;border-radius:12px;padding:12px}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{background:#e9d34f;color:#092639}button:focus-visible,a:focus-visible{outline:3px solid #51d8fa;outline-offset:3px}input,select{display:block;width:100%;min-width:0;background:#082c43;color:#eef8ff;border:1px solid #42677b;border-radius:10px;padding:12px;margin:8px 0}label{display:block;color:#c2dbe7;font-size:14px}.online-card{background:#0d2a3e;border:1px solid #30586e;border-radius:24px;padding:24px;line-height:1.7}.online-logo{display:block;width:260px;max-width:85%;margin:0 auto 15px}h1{font-size:28px;line-height:1.3;margin:10px 0}p{color:#bdd4e0}.online-primary{background:#ffe04a;border-color:#ffe04a;color:#0b2739;font-weight:800;width:100%;margin:12px 0}.join-row{display:flex;align-items:center;gap:10px}.join-row input{text-transform:uppercase}.lineup-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}.room-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0}.room-heading b{font-size:21px;letter-spacing:.08em}#seat-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}#seat-list div{background:#092236;border-radius:12px;padding:12px}#seat-list b,#seat-list small{display:block}#seat-list small{color:#97bace;margin-top:5px}#duo-preview{display:block;width:100%;height:210px;margin-top:10px;border-radius:16px;background:#061e2e}#lineup-skill{font-size:13px}.online-note{font-size:12px}.online-footer{text-align:center;font-size:11px;margin:16px 0}#connection-note{white-space:pre-line;color:#ffe88a}
/* The match uses the exact offline court/control/skill styles linked above. */
html,body{height:auto;min-height:100%;overflow:auto;font-family:'Avenir Next','Nunito','Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,'Noto Sans SC',sans-serif;touch-action:pan-y}
#duo-preview{position:relative;inset:auto;touch-action:pan-y}
.join-row button{white-space:nowrap;flex:none}
#online-arena{position:relative;max-width:none;max-height:none;min-height:0;width:440px;height:940px;border:0;border-radius:0;margin:0;transform-origin:top left;box-shadow:0 0 60px #0005}
#frame{position:relative;width:100%;height:100%;overflow:hidden}
#online-court{position:absolute;inset:0;width:100%;height:100%}
body.match-open{height:100%;overflow:hidden;overscroll-behavior:none}
body.match-open .online-wrap{position:fixed;inset:0;max-width:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overflow:hidden}
body.match-open .online-header,body.match-open .online-footer{display:none}
body.match-open #online-arena{position:absolute}
#online-controls{padding:0;gap:0}
#online-controls button.shot{padding:0}
#online-controls .stick-knob{margin:0;transform:translate(-50%,-50%)}
#online-controls .stick-zone{touch-action:none}
#online-ping{font-size:10px;color:#b6d7e7;align-self:flex-start;margin-top:4px;text-shadow:0 1px 3px #071727}
#match-notice{position:absolute;top:65px;left:12px;right:12px;z-index:7;pointer-events:none;text-align:center;font-size:12px;line-height:1.5;color:#fff0a4;text-shadow:0 1px 4px #071727}
#match-notice:not(:empty){padding:7px 10px;border-radius:10px;background:#0b243ce8}
#match-notice:empty{display:none}
#match-result{position:absolute;inset:20% 7% auto;padding:20px;background:#061e32f5;text-align:center;border:1px solid #6c97ab;border-radius:18px;z-index:30}
#match-result h2{margin:6px 0;color:#ffe14d}#match-result p{font-size:25px}
#online-pause{z-index:35;background:#081b30ed;justify-content:center;text-align:center}
#online-pause p{font-size:14px;line-height:1.6}
#online-pause button{min-height:44px}
#power-bar button .new-portrait{background:none;margin:0;inset:auto;left:2px;top:1px}
#power-bar .skill-player-name213{display:none}
[hidden]{display:none!important}
@media(max-width:520px){.online-wrap{padding:10px 8px}.online-card{padding:20px 16px}.online-header b{font-size:10px}.online-footer{font-size:10px}}
@media(max-width:360px){.online-header{flex-wrap:wrap}h1{font-size:25px}.online-card{padding:16px 12px}.room-heading{gap:5px}.room-heading b{font-size:17px}.lineup-fields{gap:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* r3: give the lobby one bounded native scroll surface. */
html,body{height:100%;min-height:0;overflow:hidden}
.online-wrap{position:fixed;inset:0;width:100%;height:100dvh;max-width:820px;margin:0 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
body.match-open .online-wrap{overflow:hidden;touch-action:none}
body.match-open .online-privacy503{display:none}
.lineup-chooser503{margin:18px 0 8px}.roster-tabs503{display:flex;gap:10px;margin-bottom:12px}.roster-tabs503 button{flex:1;font-size:14px;padding:10px 8px}
.roster-tabs503 button[aria-pressed="true"]{background:#ffd782;border-color:#ffc479;color:#122a3a}
#roster-grid503{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.roster-card503{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:7px 2px;background:#0a2539;border-color:#406579;border-radius:12px;text-align:center}
.roster-card503 canvas{position:relative;display:block;width:52px;height:58px;max-width:95%;background:transparent}
.roster-card503 b{font-size:12px;line-height:1.3}.roster-card503 small{font-size:9px;line-height:1.35;color:#b9d4e2;white-space:normal}.roster-card503 i{display:none;position:absolute;right:3px;top:2px;color:#ffd782;font-style:normal;font-weight:800}
.roster-card503.selected{border:2px solid #ffb675;background:#433b33;padding:6px 1px}.roster-card503.selected i{display:block}
.roster-card503:disabled{opacity:.4}.roster-card503.selected:disabled{opacity:1}
#lineup-help503{font-size:11px;line-height:1.6;color:#b9d4e2;margin:10px 0}#online-lock503:empty{display:none}
.seat-lineup503{margin-top:10px;padding-top:8px;border-top:1px solid #b5d5e333;display:grid;gap:8px}
#seat-list .seat-pick503{display:flex;align-items:center;gap:6px;padding:0;background:none;border-radius:0;min-width:0}
.seat-pick503 canvas{display:block;position:relative;flex:none;width:34px;height:42px;background:transparent}
.roster-card503 canvas,.seat-pick503 canvas{pointer-events:none;touch-action:pan-y}
#seat-list .seat-pick503 span{min-width:0}.seat-pick503 span small{font-size:9px;margin:0!important;font-weight:400!important;color:#b7d1df!important}.seat-pick503 b{font-size:12px;line-height:1.3}.seat-pick503 em{display:block;font-size:9px;font-style:normal;color:#c1e0ef;line-height:1.4}
.online-privacy503{font-size:11px;margin:18px 0;color:#9cbccf}.online-privacy503 button{font-size:12px;margin-top:10px}.online-privacy503 p{font-size:11px;line-height:1.6}
@media(max-width:360px){#roster-grid503{gap:5px}.roster-card503 canvas{width:44px;height:50px}.roster-card503 small{font-size:8px}}

/* Distinct viewer identities; only an explicit Ready action turns a seat green. */
#seat-list .seat-card{position:relative;border:1px solid var(--seat-color);border-top-width:3px;background:var(--seat-bg);transition:background .15s,border-color .15s}
#seat-list .is-you{--seat-color:#70ceff;--seat-bg:#103249}
#seat-list .is-friend{--seat-color:#c5a1ff;--seat-bg:#282b4b}
#seat-list .seat-role{display:inline-block;color:var(--seat-color);font-size:10px;font-weight:700;letter-spacing:.06em;margin-bottom:5px}
#seat-list .seat-card b{overflow-wrap:anywhere}
#seat-list .seat-card[data-state="empty"]{border-style:dashed;opacity:.8}
#seat-list .seat-card[data-state="away"]{border-color:#c9a56d;background:#352f29}
#seat-list .seat-card[data-state="ready"]{border-color:#65dca7;background:#103c32}
#seat-list .seat-card[data-state="ready"] small{color:#95f2c6;font-weight:700}
#ready-room[aria-pressed="true"]{background:#91edbe;border-color:#91edbe;color:#093327}
@media(prefers-reduced-motion:reduce){#seat-list .seat-card{transition:none}}

/* Keep the opt-out discoverable without competing with room creation. */
.online-privacy503{margin:18px 0 10px;font-size:11px;color:#8daabf}
.online-privacy503 summary{width:fit-content;min-height:32px;cursor:pointer;line-height:32px}
.online-privacy503 #analytics-privacy381 button{min-height:40px;width:auto;margin:5px 0 0;padding:8px 12px;border:1px solid #496576;border-radius:9px;background:#102b3d;color:#c5dce8;box-shadow:none;font-size:12px;font-weight:500}
.online-privacy503 #analytics-privacy381 p{max-width:50em;font-size:11px;color:#8daabf;line-height:1.7}