[hidden],.online-page #menu{display:none!important}.online-shell{position:fixed;inset:0;z-index:30000;overflow:auto;padding:24px 16px max(32px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 80% 0%,#4e1425,#140e16 48%,#08070b);color:#fff3df;touch-action:pan-y}.online-panel{width:min(780px,100%);margin:auto}.online-home{display:block;width:190px;margin:0 auto 20px}.online-home img{width:100%;height:auto}.online-kicker{color:#ddba75;letter-spacing:3px;font:700 11px Arial;text-align:center}.online-panel h1{font:900 clamp(42px,9vw,76px)/1 Impact,"Arial Black",sans-serif;text-align:center;margin:12px 0}.online-panel h1 em{font-style:normal;color:#ff3654}.online-description{text-align:center;color:#bdb3c6;font:14px/1.6 Arial;margin:0 auto 24px;max-width:480px}.online-page label{display:block;color:#e2d2b4;font:700 12px/1.5 Arial;letter-spacing:.5px;margin:16px 0}.online-page select,.online-page input{box-sizing:border-box;width:100%;margin-top:8px;padding:14px;color:#fff4df;background:#211923;border:1px solid #5a4355;border-radius:10px;font:16px Arial;min-height:48px}.online-page button,.online-back{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:12px 18px;border:1px solid #7c485b;border-radius:10px;color:#fff3df;background:#2a1c28;font:800 13px/1.3 Arial;cursor:pointer;text-decoration:none}.online-page button:disabled{opacity:.5;cursor:default}.online-page button:focus-visible,.online-page input:focus-visible,.online-page select:focus-visible,.online-back:focus-visible{outline:3px solid #ffdf8d;outline-offset:3px}.online-page .online-primary{background:linear-gradient(110deg,#a20a2d,#f32a4b);border-color:#ff6682;box-shadow:0 6px 24px #ff194422;color:#fff}.online-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.online-box{padding:20px;border:1px solid #7f586044;border-radius:16px;background:#ffffff05}.online-box h2{font:900 25px Impact,Arial Black;margin:0 0 8px}.online-box p{font:13px/1.5 Arial;color:#bdb3c6;min-height:40px}.online-box button{width:100%}.online-box input{text-align:center;text-transform:uppercase;letter-spacing:5px;font:700 23px monospace}.online-box form{margin:0}#onlineMessage{font:13px/1.5 Arial;color:#ffcf81;text-align:center;min-height:24px;margin:18px 0}.room-code-line{text-align:center;padding:20px;border:1px solid #9c714c66;border-radius:14px;background:#fff5e508}.room-code-line small{display:block;font:700 10px Arial;letter-spacing:3px;color:#bfa37b}.room-code-line strong{display:block;font:800 clamp(30px,8vw,50px)/1.4 monospace;letter-spacing:8px;color:#ffe7a4}.room-share{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.room-players{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.room-player{position:relative;min-width:0;border:1px solid #6a4352;border-radius:13px;overflow:hidden;background:#1a131d}.room-art{aspect-ratio:1;background-position:center top;background-size:cover}.room-player strong{position:absolute;bottom:30px;left:0;right:0;padding:24px 12px 12px;background:linear-gradient(transparent,#080509dd);font:900 clamp(16px,3vw,26px) Impact,"Arial Black";text-transform:uppercase}.room-player small{display:block;min-height:30px;padding:8px 10px;box-sizing:border-box;font:700 10px Arial;letter-spacing:1px;color:#d3bc8d}.room-actions{display:flex;flex-wrap:wrap;gap:10px}.room-actions button{flex:1}.room-status{font:700 15px/1.5 Arial;text-align:center;color:#e3ce98;margin:20px 0}.online-back{display:flex;width:max-content;margin:18px auto;background:transparent;border-color:#55434e;font-size:12px}.online-dock{position:fixed;z-index:20000;top:max(73px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;width:min(92%,620px);padding:5px 10px;border:1px solid #ffffff22;background:#130c17d9;border-radius:8px;box-sizing:border-box}.online-dock span{flex:1;font:700 10px/1.3 Arial;color:#d6cbac}.online-page .online-dock button{min-height:30px;padding:6px 9px;font-size:10px}.online-pause{position:fixed;inset:0;z-index:29999;display:grid;place-items:center;background:#08060ddd;padding:20px}.online-pause>div{width:min(420px,100%);padding:28px;border:1px solid #6a4352;border-radius:16px;background:#1b121f;text-align:center;box-sizing:border-box}.online-pause h2{font:900 32px Impact,Arial Black}.online-pause p{font:14px/1.6 Arial;color:#d3c6d7}.online-entry{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;margin:16px 3.1%;padding:14px;border:1px solid #f45b79;border-radius:12px;background:linear-gradient(120deg,#361227,#7b1838);color:#fff3df;text-decoration:none;font:900 23px Impact,Arial Black;letter-spacing:1px;box-sizing:border-box}.online-entry small{font:700 10px/1.6 Arial;letter-spacing:1.5px;color:#e4b9c8}.online-entry:focus-visible{outline:3px solid #ffe29c;outline-offset:3px}@media(max-width:550px){.online-options{grid-template-columns:1fr}.online-box{padding:17px}.online-box p{min-height:0}.online-home{width:155px}.online-shell{padding-top:max(20px,env(safe-area-inset-top))}.room-players{gap:8px}.online-dock{top:max(63px,env(safe-area-inset-top))}}@media(max-height:500px)and (orientation:landscape){.online-dock{top:5px;width:45%;left:50%}.online-panel{padding-top:0}.online-home{width:130px;margin-bottom:8px}.online-panel h1{font-size:40px}}.connection-check{border:1px solid #d9af6180;border-radius:12px;padding:16px;margin:18px 0;background:linear-gradient(145deg,#ffffff09,#0a0a10cc)}.connection-check h2{font:22px Impact,sans-serif;margin:0 0 8px;color:#ffe2a6}.connection-explainer,#connectionResult,#connectionTips{font:12px/1.5 Arial,sans-serif;color:#cdc5bb;letter-spacing:0}.connection-player{display:grid;grid-template-columns:1fr auto;gap:7px;padding:12px 0;border-top:1px solid #d9af6133}.connection-player strong{font:700 12px Arial,sans-serif;color:#fff1d8}.connection-player b{font:700 11px Arial,sans-serif;color:#b9bfd0}.connection-player small{grid-column:1/-1;font:11px/1.5 Arial,sans-serif;color:#bfc3ca}.connection-good b{color:#72e4a8}.connection-fair b{color:#ffdb82}.connection-weak b,.connection-offline b{color:#ff8582}#connectionTips{padding:10px;border-left:2px solid #ff8582;background:#f8000810}.online-page #recheckConnection{min-height:44px;border-color:#d9af61;color:#ffe2a6;background:#19151c;font-size:11px}