/* Private-room presentation only. Network and lobby rules remain in their modules. */
#online-room-panel{position:relative;overflow:hidden;isolation:isolate;padding:22px 25px;border:1px solid #159bce;border-radius:15px;background:linear-gradient(120deg,#062641f5,#041c30fa 70%);box-shadow:0 12px 30px #0005,inset 0 1px #58d4ff15;color:#eaf6ff;animation:room-enter .2s ease-out;font-family:'Segoe UI',sans-serif}
#online-room-panel[hidden],#online-room-panel [hidden]{display:none!important}
#online-room-panel:before{content:'';position:absolute;right:10%;top:-60px;width:310px;height:310px;border:30px solid #1283bb09;border-radius:50%;z-index:-1;pointer-events:none}
#online-room-panel .room-header{display:flex;align-items:flex-start;gap:16px;margin:0;border:0;padding:0 0 17px;background:none;border-bottom:1px solid #22608090}
#online-room-panel .step-number{width:44px;height:44px;flex:none;font:900 23px/1 'Segoe UI',sans-serif;display:grid;place-items:center;border:2px solid #30e5fa;border-radius:50%;background:linear-gradient(140deg,#09c9e7,#0075b8);box-shadow:0 0 17px #00cfee35;margin:0}
#online-room-panel .room-heading-copy{flex:1;min-width:0;padding-top:1px}
#online-room-panel .room-heading-line{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
#online-room-panel h2{margin:0;font:900 23px/1.2 'Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:.3px;color:#f4f8ff}
#online-room-panel .room-privacy{display:inline-block;padding:7px 11px;font:700 10px/1 'Segoe UI',sans-serif;text-transform:uppercase;border:1px solid #337ca7;border-radius:7px;color:#add9f4;background:#09345450;white-space:nowrap}
#online-room-panel [data-status]{margin:7px 0 0;font:12px/1.4 'Segoe UI',sans-serif;color:#b8ddf3;min-height:17px}
#online-room-panel button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 15px;border:1px solid #397c9e;border-radius:8px;background:linear-gradient(135deg,#103956b0,#09243b);color:#eaf6ff;font:800 10px/1.2 'Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:.2px;box-shadow:inset 0 1px #a9eaff10,0 2px 4px #0004;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .12s;white-space:nowrap}
#online-room-panel button>span[aria-hidden]{font-size:20px;line-height:1;font-weight:500}
#online-room-panel button:hover:not(:disabled){border-color:#47d8fc;box-shadow:0 0 12px #26bdec26;transform:translateY(-1px)}
#online-room-panel button:active:not(:disabled){transform:translateY(1px)}
#online-room-panel button:focus-visible,#online-room-panel input:focus-visible{outline:2px solid #56dbff;outline-offset:3px}
#online-room-panel button:disabled{cursor:not-allowed;opacity:.42;filter:saturate(.6)}
#online-room-panel [data-close]{margin-left:auto;min-height:39px;padding:9px 14px;flex:none}
#online-room-panel [data-close]>span{font-size:25px}
#online-room-panel .room-entry{display:flex;align-items:center;gap:10px;padding-top:18px}
#online-room-panel .room-entry label{flex:1;min-width:0}
#online-room-panel .room-entry input{box-sizing:border-box;min-width:0;width:100%;padding:12px 14px;border:1px solid #285c7b;background:#03182b;border-radius:8px;font:12px 'Segoe UI',sans-serif;color:#e1f4ff}
#online-room-panel .room-main{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:22px;padding:20px 0}
#online-room-panel .room-invite{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
#online-room-panel .room-link-icon{display:grid;place-items:center;width:45px;height:48px;flex:none;border:1px solid #176087;border-radius:8px;font-size:31px;color:#0ce1f5;background:#06305060}
#online-room-panel .room-code-label{padding-left:14px;border-left:1px solid #1e607f;min-width:0}
#online-room-panel .room-code-label small{display:block;font:700 10px 'Segoe UI',sans-serif;color:#acd7f0;text-transform:uppercase;margin-bottom:5px}
#online-room-panel [data-room-code]{display:block;font:900 clamp(19px,2vw,27px)/1.1 'Segoe UI',sans-serif;letter-spacing:3px;color:#f4faff;user-select:all}
#online-room-panel .room-copy-actions{display:flex;gap:8px;flex-wrap:wrap}
#online-room-panel .room-copy-actions button{min-height:40px;padding:10px 12px;font-size:9px}
#online-room-panel .room-copy-actions .is-copied{color:#8ff4c2;border-color:#4edba0;background:#12624750}
#online-room-panel [data-players]{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:0;padding-left:22px;border-left:1px solid #27638280;font:12px 'Segoe UI',sans-serif;min-width:0}
#online-room-panel .room-player{display:block;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none}
#online-room-panel .room-player b{display:block;font:700 10px 'Segoe UI',sans-serif;color:#b4d8ee;margin:0 0 8px;text-transform:uppercase}
#online-room-panel .room-player.is-local b{color:#34e0f5}
#online-room-panel .room-player-body{display:flex;align-items:center;gap:11px;padding:12px 13px;min-height:50px;box-sizing:border-box;border:1px solid #285779;border-radius:9px;background:linear-gradient(120deg,#0e3450a0,#0a263c80);transition:border-color .2s,background .2s}
#online-room-panel .is-local .room-player-body{border-color:#00d8ee;box-shadow:inset 0 0 13px #00c8ff15,0 0 8px #00d2ff12}
#online-room-panel .room-player em{font:12px 'Segoe UI',sans-serif;text-align:left;color:#dceeff;overflow-wrap:anywhere}
#online-room-panel .room-ball{position:relative;display:block;flex:none;width:25px;height:25px;box-sizing:border-box;border:2px solid #152b3c;border-radius:50%;background:linear-gradient(#f78887 0 44%,#152b3c 44% 58%,#f0faff 58%);box-shadow:0 0 0 1px #9bcde345}
#online-room-panel .room-ball:after{content:'';position:absolute;left:6px;top:6px;width:9px;height:9px;box-sizing:border-box;border:2px solid #17394a;border-radius:50%;background:#d2f0ff}
#online-room-panel .room-player[data-state=waiting] .room-ball{filter:grayscale(1);opacity:.55;animation:room-wait 2s ease-in-out infinite}
#online-room-panel .room-player[data-state=disconnected] .room-ball{filter:grayscale(1);opacity:.35}
#online-room-panel .room-player[data-state=disconnected] em{color:#a3b7c5}
#online-room-panel .room-player[data-state=ready] .room-player-body{border-color:#4edaa5;background:#0c4a3d55}
#online-room-panel .room-player[data-state=ready] em{color:#7ff1b9}
#online-room-panel .room-player[data-state=ready] em:before{content:'✓ ';font-weight:900}
#online-room-panel .room-player[data-state=ready] .room-player-body,#online-room-panel .room-player[data-state=preparing] .room-player-body{animation:room-status .18s ease-out}
#online-room-panel .room-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:15px 0 0;border:0;border-top:1px solid #22608090;background:none;color:inherit}
#online-room-panel .room-instructions{display:flex;flex-wrap:wrap;gap:7px 20px;max-width:650px}
#online-room-panel .room-instructions p{display:flex;align-items:center;gap:9px;margin:0;font:11px/1.4 'Segoe UI',sans-serif;color:#c5deee}
#online-room-panel .room-instructions p>span{font-size:21px;color:#29cceb}
#online-room-panel .room-footer-actions{display:flex;align-items:center;gap:12px;flex:none}
#online-room-panel [data-ready],#online-room-panel [data-create]{background:linear-gradient(125deg,#ffe66b,#ffb817);border-color:#ffe783;color:#20200c;box-shadow:inset 0 1px #fff8b7,0 0 12px #ffc02118}
#online-room-panel [data-ready]{min-width:145px;min-height:45px;font-size:13px}
#online-room-panel.room-both-ready{animation:room-ready .6s ease-out}
@keyframes room-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes room-wait{50%{box-shadow:0 0 10px #19d6e65c;opacity:.85}}
@keyframes room-status{from{opacity:.55}to{opacity:1}}
@keyframes room-ready{35%{box-shadow:0 0 25px #4fe2ae65;border-color:#76edbb}}
@media(min-width:1450px){#online-room-panel .room-main{grid-template-columns:1.2fr 1fr}#online-room-panel .room-copy-actions{flex-wrap:nowrap}}
@media(max-width:1000px){#online-room-panel .room-main{grid-template-columns:1fr;gap:18px}#online-room-panel [data-players]{padding-left:0;border-left:0}#online-room-panel .room-footer{align-items:flex-end}#online-room-panel .room-instructions{display:grid}#online-room-panel .room-copy-actions{margin-left:auto}}
@media(max-width:650px){#online-room-panel{padding:16px 13px;border-radius:11px}#online-room-panel .room-header{gap:10px;padding-bottom:14px}#online-room-panel .step-number{width:33px;height:33px;font-size:18px}#online-room-panel h2{font-size:18px}#online-room-panel .room-heading-line{gap:7px}#online-room-panel .room-privacy{font-size:8px;padding:5px 7px}#online-room-panel [data-close]{padding:7px;min-height:33px;font-size:8px;gap:4px}#online-room-panel [data-close]>span{font-size:20px}#online-room-panel [data-status]{font-size:11px}#online-room-panel .room-main{padding:16px 0}#online-room-panel .room-invite{gap:12px}#online-room-panel .room-link-icon{width:38px;height:43px}#online-room-panel .room-copy-actions{margin-left:0;width:100%}#online-room-panel .room-copy-actions button{flex:1}#online-room-panel [data-room-code]{font-size:23px}#online-room-panel [data-players]{gap:10px}#online-room-panel .room-player-body{padding:11px 8px;gap:7px}#online-room-panel .room-player em{font-size:11px}#online-room-panel .room-player b{font-size:9px}#online-room-panel .room-footer{display:block;padding-top:14px}#online-room-panel .room-instructions{gap:7px}#online-room-panel .room-instructions p{font-size:10px}#online-room-panel .room-footer-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}#online-room-panel .room-footer-actions button{min-width:0;padding:11px 8px;font-size:10px}#online-room-panel .room-entry{display:grid;grid-template-columns:1fr 1fr}#online-room-panel .room-entry label{grid-column:1/-1;grid-row:1}#online-room-panel .room-entry button{font-size:9px;padding:11px 8px}}
@media(prefers-reduced-motion:reduce){#online-room-panel,#online-room-panel *{animation:none!important;transition:none!important}}
/* Override the site's generic page-footer rules inside this component. */
#online-room-panel .room-footer{letter-spacing:normal}
#online-room-panel .room-footer span{display:inline;color:inherit;font:inherit}
#online-room-panel .room-footer button>span[aria-hidden]{font-size:19px}
#online-room-panel .room-footer .room-instructions p>span{font-size:21px;color:#29cceb}
#online-room-panel .room-instructions p{letter-spacing:normal}
@media(max-width:650px){#online-room-panel{scroll-margin-top:70px}}