.nickname-form { width: min(100%, 380px); margin: 12px auto; text-align: left; color: var(--toy-text-primary); }
.nickname-form label { display: block; margin-bottom: 6px; font-size: 14px; }
.nickname-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.nickname-controls input { flex: 1; min-width: 240px; width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--toy-line-default); border-radius: 6px; background: var(--toy-bg-base); color: var(--toy-text-primary); font: inherit; }
.nickname-controls button { min-height: 40px; padding: 0 16px; border: 1px solid var(--toy-line-default); border-radius: 6px; background: var(--toy-bg-base); color: var(--toy-text-primary); font: inherit; font-weight: 400; cursor: pointer; }
.nickname-controls button:hover { background: var(--toy-bg-subtle); }
.nickname-controls button:active { background: var(--toy-bg-muted); }
.nickname-controls :focus-visible { outline: 2px solid var(--toy-text-link); outline-offset: 2px; }
.nickname-controls :disabled { color: var(--toy-text-disabled); cursor: wait; }
.nickname-controls input[aria-invalid="true"] { border-color: var(--toy-brand-pink); }
.nickname-form p { margin: 6px 0; font-size: 12px; line-height: 18px; color: var(--toy-text-secondary); overflow-wrap: anywhere; }
#nicknameStatus { min-height: 36px; }
#nicknameDisplay { color: var(--toy-text-primary); }
.player-nickname { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.home-panel { overflow-y: auto; }