/* Invite-only online expedition, alongside the original local modes. */
.online-start{width:100%;margin-top:12px;display:flex;align-items:center;gap:13px;padding:14px 16px;text-align:left;border:1px solid #6ebad09c;border-radius:7px;background:linear-gradient(100deg,#113741ed,#15293aeb);color:#ddf5f5}.online-start strong{display:block;font-size:14px;font-weight:700}.online-start small{display:block;color:#a7c9d3;font-size:11px;margin-top:5px;line-height:1.5}.online-start>span:last-child{margin-left:auto;color:#94e2e6;font-size:24px}.online-launch-icon{font-size:26px;letter-spacing:-8px;min-width:33px;color:#a3e7df}.online-status{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:11;font-size:11px;padding:8px 13px;border:1px solid #609894;border-radius:20px;background:#123038;color:#c9ede1;max-width:38vw;text-align:center;line-height:1.5;pointer-events:none}body:has(.online-status:not(.hidden)) .route{visibility:hidden!important}
.modal .online-note{font-size:12px;line-height:1.8;color:#a9c6d4}.online-steps{display:grid;gap:10px;margin:18px 0}.online-steps>div{padding:13px 15px;border:1px solid #37545f;border-radius:6px;background:#102734;font-size:13px;line-height:1.6}.online-invite{padding:16px;background:#102b33;border:1px solid #507f81;border-radius:8px;margin:18px 0}.online-invite label{display:block;font-size:12px;color:#c6e4d3;margin-bottom:10px}.online-invite input,.online-link{display:block;width:100%;padding:11px;background:#071d29;color:#d6eff3;border:1px solid #547483;border-radius:5px;font-size:12px;overflow-wrap:anywhere}.online-invite button{margin-top:10px;width:100%}.online-seats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0}.online-seat{padding:16px;border:1px solid #4d726b;border-radius:8px;background:#a6e4900a;text-align:center;font-size:13px;line-height:1.7}.online-seat:last-child{border-color:#9e855c;background:#f8d49008}.online-seat b,.online-seat strong{display:block;color:#c6f88c;margin-bottom:5px}.online-seat:last-child b,.online-seat:last-child strong{color:#facf83}.online-seat small{display:block;color:#aac2c8;font-size:11px}.online-hint{padding:12px 14px;border-left:3px solid #8ccfc6;background:#102a35;font-size:13px!important;line-height:1.75!important}.online-controls{margin:15px 0;padding:13px;background:#142936;border-radius:7px;font-size:13px;line-height:1.8}.online-controls kbd{padding:3px 6px;border:1px solid #63817e;border-radius:4px;color:#ccf2b4;font:12px ui-monospace,monospace;margin:0 2px}.online-wait{color:#f4d798;padding:13px;border:1px solid #9b815c6b;border-radius:7px;background:#352e210f;font-size:13px;line-height:1.7}.online-error{color:#ffd0bc;border-left:3px solid #efae8d;padding:12px 15px;background:#3b262238;font-size:13px;line-height:1.8}.online-puzzle-note{padding:11px 14px;border:1px solid #7fa995;border-radius:7px;background:#17392e;font-size:13px;margin-bottom:12px;color:#d4edbf}.online-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.online-actions>*{flex:1}.online-actions .primary{min-width:160px}.online-remote button:disabled{opacity:.65}.online-remote .pilot-label:after{content:'친구';font-size:10px;color:#90a5b4;margin-left:auto}
@media(min-width:701px){.menu{overflow-y:auto;align-items:flex-start;padding-top:106px;padding-bottom:85px;min-height:0}.hero{margin-top:0;padding:0;width:min(535px,48vw)}.hero h1{font-size:clamp(36px,4vw,62px);margin:17px 0 13px}.hero-copy{margin-bottom:20px}.menu-footer{position:fixed;height:62px;background:linear-gradient(0deg,#080e19f8,#080e19bb);z-index:3}.hero .launch-row .primary{padding-top:15px;padding-bottom:15px}.hero .flight-practice{margin-top:10px}.hero .menu-keys{margin-bottom:14px}.hero .difficulty{margin:12px 0}.hero .player-option{padding:14px}.hero .menu-learning-links{margin-top:10px}}
@media(max-height:790px) and (min-width:701px){.menu{padding-top:94px;padding-bottom:67px}.hero h1{font-size:40px;margin:12px 0 10px}.hero-copy{font-size:12px;line-height:1.65;margin-bottom:15px}.hero .eyebrow{font-size:10px}.hero .player-option{padding:12px}.online-start{padding:11px 14px;margin-top:9px}.hero .launch-row .primary{padding-top:13px;padding-bottom:13px}.hero .flight-practice{padding-top:11px;padding-bottom:11px}.menu-footer{height:55px}}
@media(max-width:700px){.online-start{padding:13px;gap:10px}.online-start strong{font-size:13px}.online-start small{font-size:10px}.online-status{top:63px;left:50%;max-width:90vw;width:max-content;font-size:9px;padding:5px 10px}.online-seats{gap:8px}.online-seat{padding:12px 8px}.online-actions{flex-direction:column}.online-invite{padding:12px}.online-steps>div{font-size:12px}}

.online-invite>div{display:flex;gap:8px;align-items:stretch}.online-invite>div>input{min-width:0;flex:1}.online-invite>div>button{width:auto;margin:0;padding:10px 13px;white-space:nowrap;font-size:12px}.online-invite>small{display:block;font-size:10px;line-height:1.6;margin-top:10px;color:#8fadb9}.online-controls>b{font-size:14px;color:#c9edb1}.online-controls p{font-size:12px!important;margin:9px 0!important;line-height:1.8!important}.online-controls small{display:block;font-size:11px;color:#a6bdc8;line-height:1.7}.online-readiness{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:15px 0}.online-readiness>span{padding:11px 10px;border:1px solid #5b7c6c;border-radius:6px;color:#c5ecac;background:#c5ecac08;font-size:12px;text-align:center}.online-readiness>span+span{border-color:#9c855c;color:#f3d597;background:#f3d59708}.online-share-details{margin:16px 0;font-size:11px;color:#a7c6ce}.online-share-details summary{cursor:pointer;padding:7px 0}.online-puzzle-turn{padding:12px 15px;border:1px solid #83a691;border-radius:7px;background:#193628;color:#d3edbf;font-size:13px;margin:0 0 14px}.online-watching button:disabled,.online-watching input:disabled{opacity:.85;cursor:default}.online-status[data-state="waiting"]{border-color:#b49761;color:#ffdda1;background:#302b20}.online-status[data-state="connected"]{border-color:#6ca58a}
@media(max-width:700px){.online-invite>div{flex-direction:column}.online-invite>div>button{width:100%}.online-readiness>span{font-size:10px;padding:10px 5px}}

.modal .online-invite>div>button{flex:0 0 auto;width:auto;min-width:0;margin:0;padding:10px 12px}.modal .online-invite input{flex:1 1 auto;width:100%;min-width:0}.modal .online-invite>div{display:flex;width:100%}.online-invite #online-link{font-family:ui-monospace,monospace;font-size:11px}@media(max-width:700px){.modal .online-invite>div>button{width:100%;margin-top:3px}}