.settings-overlay{position:fixed;z-index:20;inset:0;visibility:hidden;background:rgb(0 0 0 / .58);opacity:0;transition:opacity .2s,visibility .2s}
.settings-overlay.is-open{visibility:visible;opacity:1}
.settings-panel{position:fixed;z-index:21;top:0;bottom:0;left:0;width:min(84vw,25rem);padding:1.25rem;overflow-y:auto;background:#171717;box-shadow:5px 0 0 #9c5f32;color:#eee;transform:translateX(-105%);transition:transform .22s ease}
.settings-panel.is-open{transform:translateX(0)}
.settings-panel__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.8rem;border-bottom:1px solid #aaa}
.settings-panel__header h2{margin:0;font:700 1.3rem Arial,Helvetica,sans-serif}
.settings-panel__header button{width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:transparent;color:#eee;font-size:1.8rem;line-height:1;cursor:pointer}
.settings-panel__header button:hover{background:rgb(255 255 255 / .1)}
.settings-profile{display:grid;justify-items:center;gap:.35rem;padding:1.7rem 0 1.2rem;text-align:center}
.settings-profile img{width:5.25rem;height:5.25rem;border:3px solid #eee;border-radius:50%;background:#cfe1e7;object-fit:cover}
.settings-profile strong{text-transform:uppercase;font:700 1rem "Trebuchet MS",Arial,sans-serif}
.settings-profile span{color:#c49370;font-size:.76rem;text-transform:uppercase}
.settings-details{display:grid;gap:.65rem;margin:0 0 1.1rem}
.settings-details div{padding-bottom:.65rem;border-bottom:1px solid #454545}
.settings-details dt{color:#b98a68;font-size:.72rem;font-weight:700;text-transform:uppercase}
.settings-details dd{display:flex;align-items:center;justify-content:space-between;gap:.55rem;margin:.2rem 0 0;font:inherit}
.copy-room-code{flex:none;border:1px solid #8b8584;border-radius:99px;padding:.18rem .52rem;background:transparent;color:#ddd;font-size:.72rem;cursor:pointer}
.copy-room-code:hover{background:#383838}
.settings-links{display:grid;gap:.35rem}
.settings-links a,.settings-links button{width:100%;padding:.8rem;border:0;border-radius:.4rem;background:transparent;color:#eee;font:inherit;text-align:left;text-decoration:none}
.settings-links a:hover,.settings-links a:focus-visible{background:rgb(255 255 255 / .1);outline:0}
.settings-links button:disabled{color:#777;cursor:not-allowed}
.settings-links button small{float:right;color:#9c5f32}
.settings-links__section{margin-top:.9rem;padding:.55rem .8rem;color:#d7a06f;font-size:.82rem;font-weight:700;text-transform:uppercase}
.settings-leave{margin-top:1.35rem}.settings-leave button{width:100%;border:1px solid #c27443;border-radius:99px;padding:.75rem;background:transparent;color:#e4ae86;font-weight:700;cursor:pointer}
.settings-presence{margin:1.1rem 0;padding-top:1rem;border-top:1px solid #454545}.settings-presence h3{margin:0;font-size:.95rem}.settings-presence>p{margin:.25rem 0 .6rem;color:#b98a68;font-size:.78rem}.settings-presence ul{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}.settings-presence .presence-user{padding:.4rem .5rem;border-radius:.45rem;background:#262626}.settings-presence .presence-user span{display:grid;gap:.08rem;min-width:0}.settings-presence .presence-user strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}.settings-presence .presence-user small{color:#b98a68;font-size:.7rem}