.online-panel{padding:0 3px 16px;color:#252250}.online-panel h2{font-size:25px}.online-panel button,.online-match button{border:2px solid #252250;border-radius:11px;background:#fff1c6;color:#252250;padding:9px 12px;min-height:42px;font:inherit;cursor:pointer}.online-panel input{font:inherit;min-height:43px;padding:8px 10px;border:2px solid #b8a5ce;border-radius:11px;max-width:100%;color:#252250;background:#fff}.online-panel label{display:block;font-weight:700;margin:15px 0}.online-panel label input{display:block;width:100%;margin-top:7px}.online-note{font-size:12px;color:#7f6d8e;line-height:1.7}.online-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.pink-action{background:#ff91c3!important;font-weight:800!important}.profile-preview{display:flex;align-items:center;gap:14px}.profile-preview .player-avatar{width:75px;height:75px}.profile-preview p{font-size:12px;color:#83718e}.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.avatar-grid button{border:1.5px solid #c5b6d1;padding:4px;background:#fff9ed;min-height:48px}.avatar-grid .player-avatar{width:36px;height:36px}.upload-avatar{font-size:13px}.online-tabs{display:flex;flex-wrap:wrap;gap:7px}.online-tabs button{font-size:12px;min-height:36px}.online-tabs .selected,.match-tools .selected{background:#ffb5d8!important}.ranking-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #e4daec}.ranking-row>span:not(.player-avatar){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}.ranking-row small{display:block;color:#8e7d99;font-size:10px;margin-top:5px}.ranking-row strong{font-size:13px;white-space:nowrap}.ranking-row>b{min-width:19px;color:#b570a3}.empty-state{text-align:center;color:#8e7b9d;padding:30px 0;line-height:1.8}.follow-row{display:flex;gap:7px;margin-top:18px}.follow-row input{min-width:0;flex:1}.follow-row button{font-size:12px;white-space:nowrap}.online-match{padding:12px 16px 40px;max-width:850px;margin:auto;color:#f8efdf}.match-heading{display:flex;align-items:center;justify-content:space-between;gap:9px}.match-heading b{font-size:16px}.match-heading [data-clock]{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:#ffd58a}.match-heading button{min-height:38px;padding:6px 10px;background:#312b43;color:#eddcf6;border-color:#a18bb5;font-size:11px}.online-match [data-network-note]{font-size:12px;min-height:16px;color:#ffd28f}.match-wait{text-align:center;max-width:560px;margin:18px auto}.match-wait .magic-scene{margin:20px auto;--box-size:140px}.match-wait h2{font-size:24px}.match-wait p{font-size:13px;line-height:1.8;color:#ccb8db}.match-wait .pink-action{display:block;width:100%;max-width:350px;margin:20px auto;color:#252250;min-height:55px;font-size:20px}.versus-profile{display:flex;align-items:center;justify-content:center;gap:30px}.versus-profile .player-avatar{width:58px;height:58px}.match-countdown{font-size:45px;color:#f7c0df;display:block;margin:20px}.match-versus{display:flex;align-items:center;justify-content:space-between;gap:10px}.match-versus>span{display:flex;align-items:center;gap:7px;max-width:44%;font-size:12px;overflow:hidden;text-overflow:ellipsis}.match-versus .player-avatar{width:30px;height:30px}.match-versus>b{font-size:15px;color:#eb99c5}.match-progress{display:flex;justify-content:space-between;margin:10px 0;color:#cbb2de;font-size:12px}.match-coach{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:#d4c4e0}.match-coach .cat-stage{width:78px;height:75px}.online-board-viewport{max-width:620px;margin:10px auto;overflow:auto;max-height:60dvh;border-radius:12px;border:2px solid #c1a4d3;background:#fff8ed;padding:2px}.online-board{width:100%;aspect-ratio:1;gap:0;background:#36304a;border:0;border-radius:9px;padding:0}.online-board>.cell{min-width:0;min-height:0;padding:0;border:0;border-right:1px solid #6c5b8750;border-bottom:1px solid #6c5b8750;border-radius:0;background:var(--cell-color);aspect-ratio:1;position:relative;color:#252250;box-shadow:none}.online-board>.cell.border-right{border-right:3px solid #292345}.online-board>.cell.border-bottom{border-bottom:3px solid #292345}.online-board>.cell.excluded:after{content:'×';font-size:clamp(13px,4vw,27px);position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#887297}.online-board>.cell.rule-conflict{box-shadow:inset 0 0 0 3px #fa647f}.online-board>.cell:focus-visible{z-index:2;outline:3px solid #5370ff;outline-offset:-3px}.online-board>.cell .cat-stage{pointer-events:none}.online-board-viewport.board-zoom>.online-board{min-width:calc(var(--size) * 44px)}.match-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px auto}.match-tools button{padding:8px 11px;font-size:12px;min-height:40px}.match-feedback{min-height:18px;text-align:center;font-size:12px;color:#ff9ebb}.match-result{max-width:560px;margin:auto;text-align:center;padding:20px}.match-result>.cat-stage{width:190px;height:190px;margin:auto}.match-result h2{font-size:28px}.match-result p{font-size:14px;line-height:1.8;color:#d8c5e7}.match-result .online-actions{justify-content:center}.online-match .online-panel{color:#eee0f4}
.topbar{padding-top:calc(8px + env(safe-area-inset-top))}.match-heading{position:sticky;top:0;z-index:6;background:#282333f5;padding:8px 0}.match-tools{position:sticky;bottom:8px;z-index:5;border:1px solid #9b83ae;padding:8px;background:#302940f2;border-radius:14px;backdrop-filter:blur(8px)}