/* Gemeinsam spielen: Einrichten, Warteraum und was am Tisch zu sehen ist. */

.bund-page { max-width: 880px; margin: 0 auto; text-align: center; }
.bund-page .hero-rosette { width: 58px; height: 58px; }
.bund-page .panel { text-align: start; }
.bund-page h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); letter-spacing: .16em; text-indent: .16em; }
.bund-options { max-width: 640px; margin: 0 auto .9rem; }
.bund-options h3:not(:first-child) { margin-top: .8rem; }
.bund-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.bund-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.bund-hint { font-size: .94rem; line-height: 1.3; color: var(--paper-200); margin: .45rem 0; }
.bund-pick { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.bund-pick .small[aria-pressed="true"] { color: #2a1c08; background: var(--gold-300); border-color: var(--gold-700); font-weight: 700; }
.bund-join { display: flex; gap: .4rem; margin-top: .7rem; }
.bund-join input {
  flex: 1 1 0; min-width: 0; padding: .4rem .6rem; font-family: var(--label); font-weight: 700; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-50); background: rgba(8, 15, 27, .6); border: 1px solid var(--line-strong); border-radius: 5px;
}
.bund-join input::placeholder { color: var(--paper-300); }
.bund-code { font-family: var(--label); font-weight: 700; font-size: clamp(2rem, 9vw, 3rem); letter-spacing: .3em; text-indent: .3em; color: var(--gold-300); margin: .4rem 0 1rem; }
.bund-list { list-style: none; margin: 0 0 .4rem; padding: 0; font-size: .97rem; line-height: 1.25; }
.bund-list li { padding: .26rem 0; }
.bund-list span { display: block; font-size: .86rem; color: var(--paper-200); margin-inline-start: 1.15rem; }
.desk .bund-list span { color: var(--ink-600, inherit); }
.bund-dot { display: inline-block; width: .72rem; height: .72rem; margin-inline-end: .42rem; transform: rotate(45deg); border: 1px solid var(--paper-200); }
.bund-seats .panel h3::before { display: none; }
.panel h3 .bund-dot { margin-inline-end: 0; }
.bund-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .3rem 0; }
.bund-bar b { font-family: var(--label); font-size: 1.15rem; color: var(--gold-300); }
.bund-chat { font-size: .9rem; color: var(--paper-200); }

/* Profil: Name aus zwei Listen, Farbe, Land. Dieselben Felder auf der Profilseite, im Warteraum und an einem Gerät. */
.bund-dot.empty { background: transparent; border-style: dashed; }
.menu-item .bund-dot.ic { flex: none; width: 17px; height: 17px; margin: 0 3.5px; border-color: var(--gold-300); }
.profile-preview { font-family: var(--display); font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-weight: 700; color: var(--gold-100); margin: .2rem 0 1rem; }
.profile-preview .bund-dot { width: 1rem; height: 1rem; margin-inline-end: .7rem; vertical-align: .05em; }
.profile-name { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.profile-name select {
  flex: 1 1 9rem; min-width: 0; min-height: 42px; padding: .3rem .5rem; font-family: var(--label); font-weight: 600; font-size: 1rem;
  color: var(--paper-50); background: rgba(8, 15, 27, .6); border: 1px solid var(--line-strong); border-radius: 5px;
}
.profile-name select option { color: var(--ink); background: var(--paper-50); }
.profile-colors { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .5rem; }
.swatch {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: #fff;
  border: 2px solid rgba(255, 255, 255, .25); border-radius: 50%; transition: transform .1s, border-color .15s;
}
.swatch .ic { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.swatch[aria-pressed="true"] { border-color: var(--gold-100); box-shadow: 0 0 0 2px var(--gold-700); }
.swatch:hover:not(:disabled) { transform: scale(1.08); }
.swatch:disabled { opacity: .25; cursor: not-allowed; }
.bund-lobby b { font-weight: 700; }
.bund-lobby .small { margin: .3rem 0 0 1.15rem; min-height: 36px; }
.bund-free { color: var(--paper-300); }
.bund-chat b { color: var(--paper-100); }
@media (pointer: coarse) { .swatch { width: 46px; height: 46px; } }
.sheet .profile-preview { color: var(--lapis-800); margin: 0 0 .4rem; font-size: 1.5rem; }
.sheet .profile-preview .bund-dot { margin-inline-end: .6rem; }
.sheet .sheet-hint a { color: inherit; }
.sheet .sheet-hint a:hover { color: var(--rubric); }