/* Settings (the gear in the top bar): which lobby room, and sound on/off.
   A small frosted-glass panel that drops down under the gear. Wired up in host.js. */

#topbar { position: relative; z-index: 30; }
#settings-btn { display: inline-grid; place-items: center; padding: 10px 12px; }
#settings-btn svg { width: max(18px, 1.3vw); height: max(18px, 1.3vw); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
#settings-btn[aria-expanded="true"] svg { transform: rotate(60deg); }

.settings {
  position: absolute; right: 28px; top: calc(100% - 4px); width: max(280px, 21vw); padding: max(18px, 1.4vw);
  display: flex; flex-direction: column; gap: max(14px, 1.1vw);
  font-family: "Quicksand", var(--body); color: #fff; border-radius: max(16px, 1.2vw);
  background: rgba(16,11,20,.86); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.85); transform-origin: 90% 0; animation: set-in .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes set-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.set-title { font-size: max(16px, 1.15vw); font-weight: 600; }
.set-group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.set-group legend { padding: 0; margin-bottom: 8px; font-size: max(11px, .78vw); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #ffd98a; }
.set-group label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: max(14px, 1vw); font-weight: 500; color: rgba(255,255,255,.82); transition: background .2s, color .2s; }
.set-group label:hover { background: rgba(255,255,255,.06); }
.set-group input { appearance: none; margin: 0; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); display: grid; place-items: center; cursor: pointer; }
.set-group input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 8px #ffb347; transform: scale(0); transition: transform .2s; }
.set-group input:checked { border-color: #ffd98a; }
.set-group input:checked::after { transform: scale(1); }
.set-group label:has(input:checked) { background: rgba(255,217,138,.08); color: #fff; }
.set-group input:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; }

.set-row { display: flex; align-items: center; justify-content: space-between; padding-top: max(14px, 1.1vw); border-top: 1px solid rgba(255,255,255,.1); font-size: max(14px, 1vw); font-weight: 500; }
.set-row + .set-row { border-top: 0; padding-top: 0; }
.set-switch { position: relative; width: 46px; height: 28px; border: 0; padding: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.18); transition: background .25s; }
.set-switch span { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.set-switch[aria-checked="true"] { background: linear-gradient(180deg, #ffe7ad, #f5b545); }
.set-switch[aria-checked="true"] span { transform: translateX(18px); }
.set-switch:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; }

/* the age check */
.set-age { display: flex; flex-direction: column; gap: 8px; padding-top: max(14px, 1.1vw); border-top: 1px solid rgba(255,255,255,.1); }
.set-age-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-age-k { font-size: max(11px, .78vw); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #ffd98a; }
.set-age-badge { font-size: max(11px, .75vw); font-weight: 700; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; color: #120c08; background: #ffd98a; }
.set-age-badge:empty { display: none; }
.set-age-badge.minor { color: #fff; background: rgba(255,255,255,.16); }
.set-age-p { margin: 0; font-size: max(13px, .9vw); line-height: 1.45; color: rgba(255,255,255,.72); }
.set-age-p b { color: #fff; font-weight: 600; }
.set-age-form { display: flex; gap: 8px; }
.set-age-form input { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  color: #fff; color-scheme: dark; font: 500 max(14px, .95vw) "Quicksand", var(--body); }
.set-age-form input:focus-visible { outline: 2px solid #ffd98a; outline-offset: 2px; }
.set-age-go { padding: 9px 16px; border: 0; border-radius: 10px; cursor: pointer; font: 700 max(14px, .95vw) "Quicksand", var(--body); color: #120c08;
  background: linear-gradient(180deg, #ffe7ad, #f5b545); transition: filter .2s; }
.set-age-go:hover { filter: brightness(1.08); }
.set-age-go:disabled { opacity: .5; cursor: default; }
.set-age-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.set-age-fine { margin: 0; font-size: max(11px, .75vw); color: rgba(255,255,255,.45); }
.set-age-err { margin: 0; font-size: max(12px, .85vw); color: #ff8cc4; }
.set-age-err:empty { display: none; }
.set-age.done .set-age-form, .set-age.done .set-age-fine { display: none; }