
.onlineRoom{position:fixed;right:18px;top:18px;z-index:20;width:min(350px,calc(100vw - 36px));box-sizing:border-box;background:#1a1a1a;color:#e9e9e9;border:1px solid #ffffff16;border-radius:16px;font:13px/1.5 Arial,sans-serif;box-shadow:0 16px 50px #0005;overflow:hidden;color-scheme:dark}
.onlineRoom *{box-sizing:border-box}.onlineRoom[hidden],.onlineRoom [hidden]{display:none!important}
.onlineRoom>summary{display:flex;align-items:center;gap:9px;padding:15px 16px;cursor:pointer;list-style:none;user-select:none}.onlineRoom summary::-webkit-details-marker{display:none}.onlineHeading{display:flex;align-items:center;gap:9px;flex:1;font-size:13px;font-weight:700}.onlineIndicator{width:7px;height:7px;border-radius:50%;background:#c1c1c1;box-shadow:0 0 0 4px #c1c1c10b}.onlineCount{font-size:10px;color:#a6a6a6;padding:3px 7px;border-radius:20px;background:#ffffff04}.onlineChevron{color:#8e8e8e}.onlineRoom[open]>summary{border-bottom:1px solid #ffffff0a}.onlineRoom[open]>summary .onlineChevron{transform:rotate(180deg)}
.onlineBody{padding:12px;display:grid;gap:10px}.onlineTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:4px;border-radius:10px;background:#0e0e0e}
.onlineRoom button{min-height:36px;border:1px solid #ffffff12;border-radius:8px;background:#ffffff04;color:#c7c7c7;padding:8px 11px;font:600 11px Arial;cursor:pointer;transition:background .15s}.onlineRoom button:hover{background:#ffffff0b}.onlineRoom button:disabled{opacity:.4;cursor:default}.onlineRoom button:focus-visible,.onlineRoom input:focus-visible,.onlineRoom select:focus-visible,.onlineRoom summary:focus-visible{outline:2px solid #c4c4c4;outline-offset:2px}
.onlineRoom .onlineTabs button{min-height:34px;border:0;background:transparent;font-size:11px;font-weight:400;color:#919191;padding:8px 3px}.onlineRoom .onlineTabs button[aria-selected=true]{background:#303030;color:#f0f0f0;border-radius:7px;font-weight:600}
.onlineTabPages{max-height:min(480px,calc(100dvh - 175px));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#484848 transparent;padding:2px}.onlineTabPages>[data-page]{display:grid;gap:15px;padding:3px 1px 1px}
.onlineWelcome{text-align:center;padding:16px 8px 8px}.onlineWelcomeIcon{display:grid;place-items:center;margin:0 auto 12px;width:42px;height:42px;border-radius:12px;background:#b4b4b411;color:#c5c5c5;font-size:26px}.onlineRoom h3{margin:0;font-size:15px;letter-spacing:-.02em;font-weight:600}.onlineWelcome p,.onlinePageHeading p{color:#909090;font-size:12px;line-height:1.7;margin:7px 0 0}.onlinePageHeading{padding:5px 2px}.onlineRoomEntry{display:grid;gap:7px}.onlineRoom .onlinePrimary{background:#c2c2c2;color:#272727;border-color:transparent}.onlineRoom .onlinePrimary:hover{background:#d2d2d2}.onlineRoomEntry .onlinePrimary{min-height:40px}
.onlinePeople{padding-top:10px;border-top:1px solid #ffffff0a}.onlineSectionTitle{font-size:9px;font-weight:600;letter-spacing:.12em;color:#8a8a8a;margin-bottom:8px}.onlinePeopleList{display:flex;gap:6px;flex-wrap:wrap}.onlinePeopleList:empty::before{content:'Ninguem na sala ainda';font-size:11px;color:#828282;padding:2px 0 7px}.onlinePerson{border:1px solid #ffffff0d;border-radius:6px;background:#ffffff03;padding:4px 8px;max-width:100%;overflow-wrap:anywhere;font-size:11px;color:#c0c0c0}.onlinePerson.isSelf{color:#cacaca;background:#b2b2b20a}.onlineActions{display:flex;gap:7px}.onlineActions:not(:has(button:not([hidden]))){display:none}.onlineActions [data-copy]{flex:1}.onlineRoom .onlineLeave{color:#aeaeae;background:transparent}.onlineRoom .onlineStatus{padding:9px 2px 0;margin:0;border-top:1px solid #ffffff08;font-size:10px;line-height:1.55;color:#989898;max-height:60px;overflow:auto}.onlineStatus:empty{display:none}
.onlineSocial{display:grid;gap:9px}.onlineSocial>.onlineSectionTitle{display:none}.onlineRoom [data-chat]{display:flex;flex-direction:column;gap:9px;height:260px;max-height:40dvh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px;background:#131313;border:1px solid #ffffff08;border-radius:10px;overflow-wrap:anywhere}.onlineRoom [data-chat]:empty::before{content:'Um oi pode comecar uma boa conversa.';max-width:170px;text-align:center;margin:auto;color:#757575;font-size:12px;line-height:1.8}.onlineMessage{align-self:flex-start;max-width:88%;padding:8px 10px;border-radius:10px 10px 10px 3px;background:#313131;color:#e5e5e5}.onlineMessage.isOwn{align-self:flex-end;background:#3b3b3b;border-radius:10px 10px 3px 10px}.onlineMessageHeading{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px}.onlineMessageHeading strong{font-size:10px;color:#bfbfbf;overflow-wrap:anywhere}.onlineMessageHeading time{font-size:9px;flex-shrink:0;color:#939393}.onlineMessage p{margin:0;font-size:12px;line-height:1.6;white-space:pre-wrap}.onlineSystemMessage{align-self:center;text-align:center;font-size:10px;color:#8e8e8e;margin:3px 0}.onlineRoom [data-form]{display:flex;gap:6px}.onlineRoom [data-message]{flex:1;width:0}.onlineReactions{display:flex;gap:1px;flex-wrap:wrap}.onlineRoom .onlineReactions button{min-height:30px;border:0;background:transparent;color:#a2a2a2;font-size:10px;font-weight:400;padding:5px 7px}
.onlineRoom input,.onlineRoom select{background:#131313;color:#eaeaea;border:1px solid #ffffff12;border-radius:7px;padding:9px;min-width:0;max-width:100%;font:inherit}.onlineProfile{display:grid;gap:10px}.onlineIdentity{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;padding-bottom:14px;border-bottom:1px solid #ffffff0b}.onlineIdentity label{display:grid;gap:6px;font-size:11px;color:#a0a0a0}.onlineIdentity input{width:100%}.onlineIdentity small{grid-column:1/-1;font-size:10px;color:#b0b0b0}.onlineIdentity small:empty{display:none}
.onlineAvatarEditor{display:grid;gap:11px;padding:0}.onlineAvatarEditor>strong{font-size:12px;font-weight:600}.onlineAvatarEditor label{display:grid;gap:6px;color:#a0a0a0;font-size:11px}.onlineAvatarEditor select{width:100%}.onlineAvatarColors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.onlineAvatarColors label{text-align:center}.onlineAvatarColors input[type=color]{width:100%;height:35px;padding:3px;cursor:pointer}.onlineAvatarEditor label:has(input[type=checkbox]){display:flex;align-items:center;gap:7px;font-size:11px}.onlineAvatarEditor input[type=checkbox]{accent-color:#c2c2c2}.onlineAvatarEditor small{color:#b0b0b0;font-size:10px}.onlineAvatarEditor small:empty{display:none}.onlineAvatarPresets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.onlineRoom .onlineAvatarPresets button{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:400;font-size:10px;padding:6px}.onlineAvatarPresets button::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--preset-color);border:1px solid #ffffff24}
.onlineMedia{display:grid;gap:10px}.onlineMediaHint{padding:15px;background:#ffffff03;border:1px dashed #ffffff14;border-radius:9px;color:#989898;font-size:12px}.onlineUpload{display:grid;gap:12px;padding:18px 12px;text-align:center;border:1px dashed #c2c2c245;border-radius:10px;background:#c2c2c205;color:#d2d2d2;font-size:12px}.onlineUpload input{width:100%;font-size:10px}.onlineUpload small{color:#8d8d8d;font-size:10px;line-height:1.7}.onlineRoom video{width:100%;max-height:200px;border-radius:8px;background:#0d0d0d}.onlineRoom input[type=file]::file-selector-button{border:0;border-radius:5px;background:#323232;color:#dddddd;padding:7px;font-size:10px;margin-right:8px}
@media(max-width:600px){.onlineRoom{right:10px;top:62px;width:min(330px,calc(100vw - 20px));border-radius:13px}.onlineRoom>summary{padding:12px 14px}.onlineTabPages{max-height:min(420px,calc(100dvh - 217px))}.onlineBody{padding:10px;gap:9px}.onlineRoom input:not([type=color]):not([type=checkbox]),.onlineRoom select{font-size:16px}.onlineRoom button{min-height:40px}.onlineRoom .onlineTabs button{min-height:38px}.onlineRoom [data-chat]{height:230px;max-height:32dvh}}
@media(prefers-reduced-motion:reduce){.onlineRoom *{transition:none!important}}

/* Chat discreto durante o jogo; configuracoes ficam fora do cenario. */
.onlineRoom{top:auto;bottom:18px;right:18px;width:min(325px,calc(100vw - 36px))}.onlineRoom .onlineOptions{min-height:26px;width:27px;padding:0;background:transparent;border:0;font-size:22px;color:#aaaaaa;line-height:1}.onlineRoom[data-menu=false] .onlineTabs{display:none}.onlineRoom [data-chat]{height:190px;max-height:29dvh}.onlineRoom .onlineTabPages{max-height:min(420px,calc(100dvh - 170px))}.onlineRoom[data-menu=false] .onlineStatus{border:0;padding:0;font-size:10px}.onlineRoom[data-menu=false] .onlineBody{gap:7px}.onlineRoom [data-page=profile]{display:none!important}
.onlineProfileDialog{width:min(540px,calc(100vw - 28px));max-height:90dvh;overflow:auto;background:#1c1c1c;color:#e9e9e9;border:1px solid #ffffff20;border-radius:18px;padding:0;box-shadow:0 30px 100px #0008;font:13px/1.5 Arial,sans-serif;color-scheme:dark;scrollbar-width:thin}.onlineProfileDialog::backdrop{background:#0c0c0cb3;backdrop-filter:blur(5px)}.onlineProfileDialog header{display:flex;justify-content:space-between;align-items:start;padding:24px 24px 18px;border-bottom:1px solid #ffffff0b;gap:15px}.onlineProfileDialog header small{color:#bcbcbc;font-size:9px;letter-spacing:.13em}.onlineProfileDialog h2{font-size:22px;font-weight:600;letter-spacing:-.035em;margin:8px 0}.onlineProfileDialog header p{font-size:12px;color:#9e9e9e;margin:0;max-width:340px;line-height:1.7}.onlineProfileDialog header button{background:transparent;border:0;color:#b1b1b1;padding:5px;cursor:pointer}.onlineProfileContent{padding:20px 24px 24px}.onlineProfileDialog .onlineProfile{gap:18px}.onlineProfileDialog input,.onlineProfileDialog select{width:100%;min-width:0;box-sizing:border-box;background:#141414;border:1px solid #ffffff19;border-radius:8px;color:#ececec;padding:10px;font:inherit}.onlineProfileDialog button{min-height:38px;border:1px solid #ffffff15;background:#ffffff06;color:#dbdbdb;border-radius:8px;padding:9px 13px;font:600 12px Arial;cursor:pointer}.onlineProfileDialog .onlinePrimary{background:#c2c2c2;color:#272727;border:0;min-height:43px}.onlineProfileDialog .onlineIdentity{grid-template-columns:1fr auto;margin:0}.onlineProfileDialog .onlineAvatarEditor{gap:13px}.onlineProfileDialog .onlineAvatarColors input{height:40px;padding:3px}.onlineProfileDialog .onlineAvatarPresets button{display:flex;justify-content:center;gap:7px;align-items:center;font-weight:400}.onlineProfileDialog input[type=checkbox]{width:auto;accent-color:#c2c2c2}.onlineProfileDialog button:disabled{opacity:.5;cursor:wait}.onlineProfileDialog :is(input,select,button):focus-visible{outline:2px solid #c2c2c2;outline-offset:3px}
@media(max-width:600px){.onlineRoom{top:auto;bottom:max(10px,env(safe-area-inset-bottom));right:10px;width:min(310px,calc(100vw - 20px))}.onlineRoom [data-chat]{height:160px;max-height:25dvh}.onlineRoom .onlineTabPages{max-height:min(380px,calc(100dvh - 170px))}.onlineProfileDialog{max-height:88dvh}.onlineProfileDialog header{padding:18px}.onlineProfileContent{padding:16px 18px}.onlineProfileDialog input:not([type=color]):not([type=checkbox]),.onlineProfileDialog select{font-size:16px}}

.onlineProfileDialog{width:min(860px,calc(100vw - 28px))}.onlineProfileLayout{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start}.onlineAvatarPreview{position:sticky;top:0;align-self:start;padding:22px 16px;display:grid;gap:12px;border-right:1px solid #ffffff0b;background:#17171705}.onlineAvatarPreviewHeading{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.08em;color:#a6a6a6}.onlineAvatarLive{font-size:8px;color:#c4c4c4;border-radius:15px;padding:4px 7px;background:#c2c2c20d;letter-spacing:.05em}.onlineAvatarPreviewStage{height:355px;width:100%;background:radial-gradient(ellipse at 50% 80%,#c2c2c21b,transparent 65%);border:1px solid #ffffff08;border-radius:12px;overflow:hidden}.onlineAvatarPreviewAngles{display:grid;grid-template-columns:1fr 1fr;gap:7px}.onlineProfileDialog .onlineAvatarPreviewAngles button{min-height:32px;font-size:10px}.onlineAvatarPreview>small{font-size:10px;color:#939393;text-align:center}.avatarPreviewUnavailable{display:grid;place-items:center;padding:20px;font-size:12px;color:#afafaf}.onlineProfileContent{min-width:0}@media(max-width:650px){.onlineProfileLayout{grid-template-columns:1fr}.onlineAvatarPreview{position:static;border-right:0;border-bottom:1px solid #ffffff0b;padding:14px 18px;gap:8px}.onlineAvatarPreviewStage{height:230px}.onlineAvatarPreviewAngles{max-width:240px;width:100%;justify-self:center}.onlineAvatarPreview>small{display:none}}

.onlineWardrobe{display:grid;grid-template-columns:1fr 1fr;gap:12px}.onlineWardrobe label{min-width:0}.onlineWardrobe select{width:100%}@media(max-width:420px){.onlineWardrobe{grid-template-columns:1fr}}

.avatarActionMenu{position:fixed;left:12px;bottom:82px;z-index:45;color:#f0f0f0;background:#202020f2;border:1px solid #ffffff25;border-radius:12px;font:13px system-ui;max-width:230px}.avatarActionMenu summary{padding:12px;cursor:pointer}.avatarActionMenu>div{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px 10px}.avatarActionMenu button{background:#383838;color:inherit;border:1px solid #ffffff20;border-radius:8px;padding:9px;cursor:pointer}.avatarActionMenu button:hover{background:#4e4e4e}

.avatarContextMenu{bottom:auto;width:248px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;box-shadow:0 18px 55px #0008;z-index:90;backdrop-filter:blur(16px)}.avatarContextMenu[hidden]{display:none}.avatarContextMenu>strong{display:block;padding:10px 12px 7px;color:#c4c4c4;font-size:11px}.avatarContextMenu summary{font-weight:700;border-bottom:1px solid #ffffff15;list-style:none}.avatarContextMenu .avatarReactionSection{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}.avatarReactionSection strong{grid-column:1/-1;font-size:11px;color:#c4c4c4;padding-bottom:3px}
.roomPresenceNotices{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(440px,calc(100vw - 32px));pointer-events:none}.roomPresenceNotice{display:flex;align-items:center;gap:12px;box-sizing:border-box;max-width:100%;padding:13px 20px;border:1px solid #ffffff24;border-radius:12px;background:#181818f2;color:#d4d4d4;box-shadow:0 8px 28px #0005;font:13px/1.5 system-ui;animation:roomPresenceIn .25s ease-out}.roomPresenceNotice>span:first-child{font-size:22px;color:#fff}.roomPresenceNotice>span:last-child{overflow-wrap:anywhere}.roomPresenceNotice strong{color:#fff;font-weight:600}@keyframes roomPresenceIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.roomPresenceNotice{animation:none}}
