/* Neutral labels stay readable independently of the chosen team color. */
.phase-lobby .ref-lobby-avatar{color:var(--team-ink,#111);box-shadow:0 0 0 1px #ffffff55}
.phase-lobby .team-color-picker{padding:14px}
.phase-lobby .team-color-picker>p{font-size:12px;line-height:1.55;color:#bfc5bf;margin:7px 0 16px}
.phase-lobby .team-color-picker>.team-color-presets{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start;padding:4px}
.phase-lobby .team-color-presets .ref-color-choice{width:36px;height:36px;flex:0 0 36px;font-size:21px;font-weight:800;color:var(--choice-ink);display:grid;place-items:center}
.phase-lobby .team-color-presets .ref-color-choice:disabled{opacity:.32}
.phase-lobby .team-color-picker>.team-color-current{display:flex;grid-template-columns:none;justify-content:flex-start;align-items:center;gap:8px;padding:15px 0 10px;color:#dce2dc;font-size:12px}
.team-color-current i{width:18px;height:18px;border-radius:50%;border:1px solid #b0bab0;flex-shrink:0}
.team-color-custom{border-top:1px solid #3c463e;margin-top:4px;padding-top:3px}
.team-color-custom summary{min-height:44px;display:list-item;align-content:center;font-size:13px;font-weight:700;cursor:pointer;color:#f0f4ed}
.team-color-custom-layout{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:18px;padding:12px 0}
.team-color-wheel{aspect-ratio:1;position:relative;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffffff00 70%),conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:0 0 0 1px #a7b5aa;touch-action:none;cursor:crosshair}
.team-color-wheel:before{content:'';position:absolute;inset:0;border-radius:50%;background:#000;opacity:var(--wheel-dark);pointer-events:none}
.team-color-cursor{position:absolute;width:15px;height:15px;border:2px solid #fff;box-shadow:0 0 0 1px #111;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.team-color-wheel-wrap small{display:block;margin-top:12px;color:#b7c0b9;font-size:11px;line-height:1.5}
.phase-lobby .team-color-inputs label{margin:0 0 5px;font-size:12px;color:#e4eae3;display:flex;justify-content:space-between;gap:6px}
.team-color-inputs output{color:#c7d0c6;font-weight:400}
.phase-lobby .team-color-inputs input[type=range]{width:100%;padding:0;min-height:28px;margin:0 0 7px;accent-color:#ed9638;cursor:pointer}
.phase-lobby .team-color-inputs input[type=text]{width:100%;min-width:0;min-height:40px;font:14px monospace;background:#1d241e;color:#fff;border:1px solid #737e72;border-radius:4px;padding:8px}
.team-color-preview{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px;color:#e2e8df;font:13px monospace}
.team-color-preview-chip{display:grid;place-items:center;border:1px solid #b8c2b8;border-radius:6px;width:42px;height:42px;font:700 16px sans-serif}
.team-color-preview .btn{margin-left:auto;min-height:44px;font-family:inherit}
.phase-lobby .team-color-status{font-size:12px;line-height:1.5;color:#c6d7c7;margin:12px 0 0;overflow-wrap:anywhere}
.phase-lobby .team-color-status.is-error{color:#ffb4a6}
.team-color-alternatives{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;font-size:11px;color:#ccd4ca}
.team-color-alternatives>span{width:100%}
.team-color-alternative{display:flex;gap:6px;align-items:center;min-height:36px;padding:6px 8px;border:1px solid #72806f;border-radius:4px;background:#252e24;color:#fff;cursor:pointer}
.team-color-alternative i{width:15px;height:15px;border-radius:50%;border:1px solid #c2cabe}
.team-color-custom summary:focus-visible,.team-color-picker input:focus-visible,.team-color-picker button:focus-visible{outline:2px solid #f5bc68;outline-offset:3px}
@media(max-width:420px){.team-color-custom-layout{grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:14px}.phase-lobby .team-color-presets .ref-color-choice{width:34px;height:34px;flex-basis:34px}.phase-lobby .team-color-picker>.team-color-presets{gap:10px}}