/* Game menu pages (public/minigames/_menu.js): Settings | Friends | Streaming in the drawer heading, grouped settings, readable text.
   Sizes use the --fs-* tokens from outfit.css. */
#gameMenu .menu-heading h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#gameMenu.cosmetics-mode .menu-tabs,#gameMenu.cosmetics-mode>#menuControls{display:none}
#gameMenu .menu-tabs{display:flex;gap:4px;margin-right:auto}
#gameMenu .menu-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:6px 18px;font-size:var(--fs-lead);font-weight:600;color:#e6d6ee;background:transparent;border:0;border-radius:12px;box-shadow:none;text-shadow:none}
#gameMenu .menu-tabs button:hover{background:#ffffff12}
#gameMenu .menu-tabs button[aria-pressed=true]{color:#fff0d5;background:#ffffff14;box-shadow:inset 0 -3px 0 var(--o-gold)}
#menuFriendBadge{font-style:normal;min-width:22px;padding:0 7px;border-radius:999px;background:#ff5f8f;color:#fff;font-size:var(--fs-meta);line-height:22px;text-align:center}
#menuFriendBadge:empty{display:none}
#gameMenu:not(.cosmetics-mode){padding-inline:max(16px,calc((100% - 860px)/2))}
#menuControls .menu-page.hidden,#menuControls .menu-group.hidden{display:none}

/* Settings: one card per group, a small heading, the panels inside without their own card chrome. */
#menuControls .menu-group{margin:0 0 16px;padding:14px 16px 16px;border:2px solid #4f3e70;border-radius:18px;background:linear-gradient(180deg,#33264a,#2a1f3d);box-shadow:inset 0 1px 0 #ffffff14,0 3px 0 #140d20}
#menuControls .menu-group>h3{margin:0 0 10px;font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;color:#ffc98b}
#menuControls .menu-group>:is(section,details,div):not(.hidden){margin:0 0 12px;padding:0;border:0;background:none;box-shadow:none}
#menuControls .menu-group>:last-child{margin-bottom:0}
#menuControls .menu-group :is(h3,h4):not(.menu-group>h3){font-size:var(--fs-lead)}
#menuControls .menu-group :is(p,label,small,summary,.fine){font-size:var(--fs-small);line-height:1.45}
#menuControls .menu-group :is(button,select,input){font-size:var(--fs-small)}
#menuControls #menuGroup_room>button,#menuControls #menuGroup_sound>button{display:inline-flex;margin:0 8px 8px 0;min-height:44px}
#menuControls #menuGroup_room #leaveRoom{background:#4a2a3c;border-color:#b0607e}
#menuControls #menuGroup_sound #connection{display:block;margin-bottom:8px}
#menuControls #menuGroup_you #clubMenu h3{display:none}
@media (pointer:fine){#touchSettings{display:none!important}}

/* Friends: invites first, then your code or link, then the list. */
#menuPage_friends #socialPanel{margin:0;border:0;background:none;box-shadow:none;padding:0}
#menuPage_friends #socialPanel :is(p,label,small,.fine){font-size:var(--fs-small);line-height:1.45}
#menuPage_friends #socialPanel h3{font-size:var(--fs-h3);margin:14px 0 6px}
#menuPage_friends #socialPanel h4{font-size:var(--fs-lead);margin:16px 0 8px}
#menuPage_friends .friend-row strong{font-size:var(--fs-body)}
#menuPage_friends .friend-row small{font-size:var(--fs-small)}
#menuPage_friends :is(button,input,select){font-size:var(--fs-small)}
#menuPage_friends .social-tabs button{font-size:var(--fs-body);min-height:44px}
#menuPage_friends #friendInvites:not(:empty){margin:10px 0 4px;padding:12px 14px;border:2px solid #e9b85a;border-radius:16px;background:#3d2f16}
#menuPage_friends #socialError:not(:empty){margin:10px 0;padding:8px 12px;border-radius:10px;background:#ffffff10;font-size:var(--fs-small)}

/* Badges on the clubhouse Friends button, and the invite pop-up wherever you are. */
#clubFriends{position:relative}
#clubFriends[data-badge]::after{content:attr(data-badge);position:absolute;top:-7px;right:-7px;min-width:20px;padding:0 6px;border-radius:999px;background:#ff5f8f;color:#fff;font:700 12px/20px Fredoka,'Trebuchet MS',sans-serif;text-align:center;box-shadow:0 2px 0 #140d20}
.friend-invite{position:absolute;z-index:70;top:66px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100% - 24px));padding:12px 14px;border:2px solid var(--o-gold,#ffd25f);border-radius:18px;background:#2b1f40f5;box-shadow:0 12px 30px #07030fcc;font:500 var(--fs-body,16px)/1.35 Fredoka,'Trebuchet MS',sans-serif;color:#fff0db}
.friend-invite.hidden{display:none}
.friend-invite p{flex:1;margin:0}
.friend-invite small{display:block;color:#d9c6e8;font-size:var(--fs-small,15px)}
.friend-invite button{min-height:42px;padding:6px 16px;font-size:var(--fs-small,15px);white-space:nowrap}

/* Streaming page: Twitch purple, numbered steps, a live status line. */
#menuPage_stream .stream-page{margin:0;padding:18px;border:2px solid #9146ff;border-radius:18px;background:linear-gradient(180deg,#34245a,#2a1f3d);box-shadow:inset 0 1px 0 #ffffff14,0 3px 0 #140d20}
#menuPage_stream .stream-page header h3{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--fs-h3)}
#menuPage_stream .stream-page svg{width:26px;height:26px;color:#bf94ff;flex:none}
#menuPage_stream .stream-page header p{margin:6px 0 0;font-size:var(--fs-body);color:#e6d6ee}
#menuPage_stream .stream-live{margin:14px 0 4px;padding:10px 12px;border-radius:12px;background:#ffffff0d;font-size:var(--fs-small);color:#d9c6e8}
#menuPage_stream .stream-live.on{background:#1f3b30;color:#9fe8b0}
#menuPage_stream .stream-steps{counter-reset:step;list-style:none;margin:14px 0;padding:0;display:grid;gap:12px}
#menuPage_stream .stream-steps li{counter-increment:step;position:relative;padding:12px 14px 12px 52px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff14}
#menuPage_stream .stream-steps li::before{content:counter(step);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;background:#9146ff;color:#fff;font:700 15px/26px Fredoka,sans-serif;text-align:center}
#menuPage_stream .stream-steps :is(label,.step-title){display:block;font-size:var(--fs-body);font-weight:600;margin:0 0 6px}
#menuPage_stream .stream-steps .stream-check{display:flex;align-items:center;gap:10px}
#menuPage_stream .stream-steps .stream-check input{flex:none;width:20px;height:20px;margin:0}
#menuPage_stream .stream-steps :is(p,.fine){font-size:var(--fs-small);line-height:1.5;color:#d9c6e8;margin:6px 0}
#menuPage_stream .stream-steps input:not([type=checkbox]){font-size:var(--fs-body);min-height:46px}
#menuPage_stream :is(#copyOverlay,#resetOverlay){font-size:var(--fs-small)}
#menuPage_stream #saveStream{width:100%;min-height:50px;font-size:var(--fs-lead)}
#menuPage_stream #streamStatus{font-size:var(--fs-small);color:#9fe8b0;min-height:1.4em}

/* Host's room settings: Twitch chat votes switch; the lobby chip everyone sees; the You card's streaming link. */
.twitch-room{display:grid;gap:4px;margin:10px 0 0;padding:10px 12px;border:1.5px solid #9146ff;border-radius:12px;background:#2d2350}
.twitch-room.hidden{display:none}
.twitch-room .stream-check{display:flex;align-items:center;gap:8px;font-weight:600}
.twitch-room svg{width:18px;height:18px;color:#bf94ff}
.twitch-room small{color:#d9c6e8;font-size:14px}
.twitch-room .linkish{justify-self:start;font-size:14px;margin:0}
#loungeTop .chip.twitch{background:#6441a5;border-color:#bf94ff;color:#fff}
.club-stream-link{display:block;width:100%;margin:10px 0 0;padding:8px 12px;border:1.5px solid #9146ff;border-radius:12px;background:#2d2350;color:#e9dcff;font:600 14px/1.3 Fredoka,'Trebuchet MS',sans-serif;text-align:left;cursor:pointer}
.club-stream-link:hover{background:#3a2c66}
#menuControls #connection{font-size:var(--fs-small)}
.friend-invite p{min-width:0}
.friend-invite button{flex:none;width:auto;margin:0}
#menuPage_stream .stream-page header{display:block;position:static;padding:0;background:none;border:0;box-shadow:none}
#menuGroup_you #clubAccount{display:none}
@media (max-width:560px){#gameMenu .menu-tabs{gap:0}#gameMenu .menu-tabs button{padding:6px 10px;font-size:var(--fs-body)}#gameMenu:not(.cosmetics-mode) #closeGameMenu{font-size:0;gap:0;min-width:46px;padding:10px}#gameMenu:not(.cosmetics-mode) #closeGameMenu::before{width:22px;height:22px}.friend-invite{flex-wrap:wrap;top:60px}.friend-invite p{flex-basis:100%}}
#menuControls .check-control{display:flex;align-items:center;gap:10px;min-height:40px}#menuControls .check-control input{flex:none;width:20px;height:20px;margin:0}