:root {
  --bg: #04070f;
  --bg2: #0a1328;
  --panel: rgba(13, 22, 44, 0.82);
  --panel2: rgba(22, 36, 70, 0.9);
  --line: rgba(120, 190, 255, 0.16);
  --line2: rgba(120, 190, 255, 0.34);
  --text: #e9f2ff;
  --muted: #8ea2c6;
  --dim: #5d6f92;
  --accent: #41d1ff;
  --accent2: #2b7fff;
  --gold: #ffc84a;
  --danger: #ff5b4e;
  --ok: #43d68a;
  --font: 'Rajdhani', system-ui, -apple-system, sans-serif;
  --num: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --tabh: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.35; font-weight: 500; }
body { min-height: 100dvh; overscroll-behavior-y: none; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 50% at 15% -5%, rgba(43, 127, 255, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 35%, rgba(155, 92, 255, 0.13), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(65, 209, 255, 0.12), transparent 60%),
    var(--bg);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 23px 41px, #fff, transparent),
    radial-gradient(1px 1px at 141px 97px, #cfe6ff, transparent),
    radial-gradient(1.5px 1.5px at 77px 163px, #fff, transparent),
    radial-gradient(1px 1px at 189px 13px, #9fd8ff, transparent),
    radial-gradient(1px 1px at 211px 191px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 7px 223px, #bfe0ff, transparent);
  background-size: 240px 240px;
}
body.scoring { overflow: hidden; }

a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: 0.02em; }
h3 { font-size: 1.25rem; margin-bottom: 10px; }
h4 { font-size: 1.05rem; color: var(--text); margin-bottom: 8px; }
p { margin: 6px 0; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.center { text-align: center; }
.center-block { display: block; margin: 0 auto; }
.grow { flex: 1; min-width: 0; }
.good { color: var(--ok); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.wrap { width: 100%; max-width: 620px; margin: 0 auto; padding: 16px; }

/* ---------- controls ---------- */
.btn {
  appearance: none; border: 1px solid var(--line2); background: rgba(30, 50, 95, 0.55); color: var(--text);
  font: 700 1rem/1 var(--font); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 13px 18px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.08s, background 0.15s, filter 0.15s; min-height: 46px; text-align: center;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn.primary { background: linear-gradient(180deg, #5fe0ff, #2b8bff); color: #031024; border-color: transparent; box-shadow: 0 0 24px rgba(65, 209, 255, 0.25); }
.btn.ghost { background: rgba(255, 255, 255, 0.03); }
.btn.danger { color: var(--danger); border-color: rgba(255, 91, 78, 0.45); }
.btn.danger:not(.ghost) { background: var(--danger); color: #fff; }
.btn.on { border-color: var(--accent); background: rgba(65, 209, 255, 0.16); }
.btn.block { width: 100%; }
.btn.lg { min-height: 58px; font-size: 1.12rem; }
.btn.sm { min-height: 36px; padding: 8px 12px; font-size: 0.9rem; }
.link-btn { background: none; border: 0; color: var(--accent); font: 600 0.95rem var(--font); padding: 8px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.input, .code-input {
  width: 100%; min-width: 0; background: rgba(4, 10, 24, 0.75); color: var(--text); border: 1px solid var(--line2); border-radius: 4px;
  font: 600 1.1rem var(--font); padding: 12px 14px; outline: none; min-height: 48px;
}
.input:focus, .code-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(65, 209, 255, 0.18); }
.code-input { font-family: var(--num); letter-spacing: 0.3em; text-transform: uppercase; font-size: 1.3rem; text-align: center; }
.code-row { display: flex; gap: 10px; }
.code-row .btn { flex: none; }
.label { display: block; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; margin-bottom: 8px; }

.card {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.25); backdrop-filter: blur(6px);
}
.card::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5; }

.pill { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 99px; background: rgba(65, 209, 255, 0.14); color: var(--accent); vertical-align: middle; }
.pill.warn { background: rgba(255, 91, 78, 0.15); color: var(--danger); }
.pill.lg { font-size: 0.95rem; text-transform: none; letter-spacing: 0; padding: 6px 12px; color: var(--text); background: rgba(255, 255, 255, 0.06); }
.code-chip { font-family: var(--num); font-weight: 800; letter-spacing: 0.14em; font-size: 0.85rem; color: var(--accent); background: rgba(65, 209, 255, 0.1); border: 1px solid var(--line2); border-radius: 4px; padding: 5px 8px; }
.code-chip.big { font-size: 1rem; padding: 8px 10px; cursor: pointer; }

.seg { display: flex; background: rgba(4, 10, 24, 0.7); border: 1px solid var(--line); border-radius: 6px; padding: 3px; gap: 3px; }
.seg button { flex: 1; appearance: none; background: none; border: 0; color: var(--muted); font: 700 0.95rem var(--font); padding: 9px 4px; border-radius: 4px; cursor: pointer; min-height: 40px; }
.seg button.on { background: linear-gradient(180deg, rgba(95, 224, 255, 0.28), rgba(43, 139, 255, 0.22)); color: var(--text); box-shadow: inset 0 0 0 1px rgba(95, 224, 255, 0.5); }
.seg-4 { display: grid; grid-template-columns: 1fr 1fr; }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper b { font-family: var(--num); min-width: 3.2ch; text-align: center; font-size: 1.1rem; }

.toggle { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: rgba(4, 10, 24, 0.5); border: 1px solid var(--line); border-radius: 6px; padding: 12px; color: var(--text); font: inherit; cursor: pointer; }
.tg-text { flex: 1; display: flex; flex-direction: column; }
.tg-text small { color: var(--muted); }
.tg-sw { width: 46px; height: 26px; border-radius: 99px; background: #23314f; position: relative; flex: none; transition: background 0.2s; }
.tg-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #c9d6ee; transition: transform 0.2s; }
.toggle.on .tg-sw { background: var(--accent2); }
.toggle.on .tg-sw::after { transform: translateX(20px); background: #fff; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip { flex: none; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--muted); font: 700 0.95rem var(--font); padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.chip.on { color: var(--text); border-color: var(--accent); background: rgba(65, 209, 255, 0.14); }

/* ---------- home ---------- */
.home { display: flex; flex-direction: column; gap: 14px; padding-top: calc(28px + var(--safe-t)); }
.brand { text-align: center; margin-bottom: 8px; }
.brand h1 { font-family: var(--num); font-weight: 900; font-size: 2.2rem; letter-spacing: 0.18em; background: linear-gradient(180deg, #fff, #8fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: 6px; }
.brand .tag { color: var(--muted); margin: 2px 0 0; letter-spacing: 0.06em; }
.logo { filter: drop-shadow(0 0 18px rgba(65, 209, 255, 0.45)); }
.hero-btn {
  display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 10px; color: var(--text); border: 1px solid var(--line2);
  background: linear-gradient(120deg, rgba(43, 127, 255, 0.28), rgba(13, 22, 44, 0.85) 60%); position: relative; overflow: hidden;
}
.hero-btn.organize { background: linear-gradient(120deg, rgba(255, 200, 74, 0.2), rgba(13, 22, 44, 0.85) 60%); border-color: rgba(255, 200, 74, 0.35); }
.hero-btn:active { transform: scale(0.99); }
.hero-num { font-family: var(--num); font-weight: 900; font-size: 2.6rem; color: #fff; text-shadow: 0 0 20px rgba(65, 209, 255, 0.8); width: 84px; text-align: center; }
.hero-icon { width: 84px; display: flex; justify-content: center; color: var(--gold); filter: drop-shadow(0 0 10px rgba(255, 200, 74, 0.5)); }
.hero-txt { display: flex; flex-direction: column; }
.hero-txt b { font-size: 1.35rem; letter-spacing: 0.03em; }
.hero-txt small { color: var(--muted); font-size: 0.95rem; }
.section-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 12px 0 8px; }
.row-link { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.foot { text-align: center; margin-top: 18px; }

/* ---------- create / format ---------- */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-top: var(--safe-t); }
.back { font-size: 1.5rem; color: var(--text); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); flex: none; }
.fmt { display: flex; flex-direction: column; gap: 14px; }
.fmt-group { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(4, 10, 24, 0.35); }
.fmt-group h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 700; display: flex; flex-direction: column; }
.field-label small { color: var(--muted); font-weight: 500; }
.per-round { display: flex; flex-direction: column; gap: 6px; }
.pr-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }
.pr-row .seg button { font-size: 0.85rem; padding: 7px 2px; min-height: 34px; }
.summary { font-size: 0.98rem; }
.fmt-sum { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fmt-sum > div { flex: 1; }

/* ---------- tournament shell ---------- */
.tshell { min-height: 100dvh; padding-bottom: calc(var(--tabh) + var(--safe-b) + 12px); }
.thead { position: sticky; top: 0; z-index: 10; background: rgba(4, 7, 15, 0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding-top: var(--safe-t); }
.thead-row { max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.tname { font-weight: 700; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsub { color: var(--muted); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: none; box-shadow: 0 0 8px var(--danger); }
.net-dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr);
  height: calc(var(--tabh) + var(--safe-b)); padding-bottom: var(--safe-b); background: rgba(5, 9, 20, 0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
}
.tab { position: relative; appearance: none; background: none; border: 0; color: var(--dim); font: 700 0.74rem var(--font); letter-spacing: 0.05em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--accent); }
.tab.on::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tab .badge { position: absolute; top: 9px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.empty { text-align: center; padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.name-grid .btn { text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.name-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* player match card */
.hello { padding: 28px 18px; overflow: hidden; }
.big-name { font-family: var(--num); font-weight: 800; font-size: 1.9rem; margin: 6px 0; word-break: break-word; }
.big-name.sm { font-size: 1.4rem; }
.rank-line { margin-top: 10px; color: var(--muted); }
.rank-line b { color: var(--gold); }
.pulse-ring { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin: 18px auto 4px; box-shadow: 0 0 0 0 rgba(65, 209, 255, 0.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 22px rgba(65, 209, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(65, 209, 255, 0); } }

.pairing { text-align: center; padding: 22px 18px; border-color: color-mix(in srgb, var(--tc) 55%, transparent); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%), var(--panel); }
.pairing-round { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-size: 0.85rem; }
.vs-label { margin-top: 14px; color: var(--muted); }
.opp-name { font-family: var(--num); font-weight: 900; font-size: clamp(1.8rem, 9vw, 2.8rem); line-height: 1.1; margin: 4px 0 16px; word-break: break-word; text-shadow: 0 0 24px rgba(65, 209, 255, 0.35); }
.table-badge { display: inline-flex; align-items: center; gap: 12px; font-family: var(--num); font-weight: 800; font-size: 1.6rem; padding: 12px 22px; border-radius: 8px; border: 2px solid var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); margin-bottom: 20px; }
.tb-swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 14px var(--tc); }
.waiting { color: var(--muted); padding: 16px 0 6px; font-size: 1.05rem; }
.dots { display: inline-flex; gap: 4px; margin-left: 6px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 50% { opacity: 0.2; } }
.checkins { display: flex; justify-content: center; gap: 18px; margin-top: 14px; color: var(--dim); font-weight: 600; }
.checkins .ok { color: var(--ok); }

/* organizer */
.share-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.share-top > div { flex: 1; }
.share-code { font-family: var(--num); font-weight: 900; font-size: 2.4rem; letter-spacing: 0.2em; color: #fff; text-shadow: 0 0 20px rgba(65, 209, 255, 0.6); }
.share-code.xl { font-size: 3.2rem; }
.qr { background: #fff; border-radius: 6px; padding: 4px; flex: none; }
.qr.lg { margin: 0 auto; }
.section-head { display: flex; align-items: center; justify-content: space-between; }
.plist { display: flex; flex-direction: column; margin-top: 10px; }
.prow { display: flex; align-items: center; gap: 10px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: 600 1.05rem var(--font); padding: 12px 4px; text-align: left; cursor: pointer; }
.prow.dropped .grow { color: var(--dim); text-decoration: line-through; }
.phone { color: var(--dim); display: inline-flex; }
.phone svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.phone.on { color: var(--ok); }

.stage-card { display: flex; flex-direction: column; gap: 10px; }
.stage-title { font-weight: 700; font-size: 1.15rem; }
.list-title { margin: 6px 0 2px; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.09em; }
.mlist { display: flex; flex-direction: column; gap: 8px; }
.mrow {
  width: 100%; display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
div.mrow { cursor: default; }
.mrow.mine { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 200, 74, 0.3), 0 0 18px rgba(255, 200, 74, 0.12); }
.mrow.live { border-color: rgba(67, 214, 138, 0.45); }
.mrow.pending, .mrow.skipped { opacity: 0.6; }
.tchip { flex: none; width: 36px; height: 36px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--num); font-weight: 800; font-size: 0.95rem; background: color-mix(in srgb, var(--tc) 22%, transparent); border: 1.5px solid var(--tc); }
.mnames { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; font-size: 1.04rem; }
.mnames span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.mrow.ready .mnames span, .mrow.live .mnames span { color: var(--text); }
.mnames .win { color: var(--text); font-weight: 700; }
.mnames .win::after { content: ' ✓'; color: var(--ok); }
.mmeta { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.mstat { font-family: var(--num); font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.mstat small { font-family: var(--font); color: var(--muted); }
.mmeta > small { color: var(--dim); font-size: 0.78rem; }
.ck { font-family: var(--font); color: var(--gold); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); display: inline-block; animation: blink 1.4s infinite; }
.vs-big { display: flex; flex-direction: column; align-items: center; font-size: 1.35rem; font-weight: 700; gap: 2px; }
.vs-big small { color: var(--dim); font-size: 0.85rem; text-transform: uppercase; }
.vs-big .win::after { content: ' ✓'; color: var(--ok); }

/* standings */
.stand { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.st-row { display: grid; grid-template-columns: 34px 1fr 52px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); gap: 6px; }
.stand.swiss .st-row { grid-template-columns: 30px 1fr 44px 34px 46px 46px; }
.st-row > span:not(.st-name) { text-align: right; font-variant-numeric: tabular-nums; }
.st-row > span:first-child { text-align: left; }
.st-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; background: rgba(255, 255, 255, 0.03); }
.st-rank { font-family: var(--num); font-weight: 800; color: var(--muted); }
.st-row:nth-child(2) .st-rank { color: var(--gold); }
.st-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row.mine { background: rgba(255, 200, 74, 0.08); }
.st-row.dropped .st-name { color: var(--dim); }
.st-row.cut { box-shadow: inset 3px 0 0 var(--accent); }
.cut-line { display: flex; align-items: center; gap: 8px; padding: 2px 12px; color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.cut-line::before, .cut-line::after { content: ''; flex: 1; border-top: 1px dashed var(--accent); opacity: 0.6; }

/* bracket */
.bscroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; margin: 0 -16px; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; }
.bracket { display: flex; gap: 16px; width: max-content; }
.bcol { display: flex; flex-direction: column; width: 172px; }
.bcol-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; margin-bottom: 8px; white-space: nowrap; }
.bcol-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.bm { display: block; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; color: var(--text); font: inherit; text-align: left; padding: 0; cursor: default; }
button.bm { cursor: pointer; }
.bm.mine { border-color: var(--gold); }
.bm.live { border-color: rgba(67, 214, 138, 0.5); }
.bm-p { display: flex; justify-content: space-between; gap: 6px; padding: 7px 10px; font-weight: 600; color: var(--muted); }
.bm-p + .bm-p { border-top: 1px solid var(--line); }
.bm-p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-p b { font-family: var(--num); font-size: 0.9rem; }
.bm-p.win { color: var(--text); background: rgba(65, 209, 255, 0.08); }
.bm-p.bye { color: var(--dim); font-style: italic; }
.bm.ready .bm-p, .bm.live .bm-p { color: var(--text); }
.bm-meta { font-size: 0.75rem; color: var(--muted); padding: 4px 10px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }

/* ---------- sheet + toast ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0); display: flex; align-items: flex-end; justify-content: center; transition: background 0.2s; }
.sheet-wrap.open { background: rgba(0, 0, 0, 0.6); }
.sheet { width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; background: linear-gradient(180deg, #111d3a, #0a1226); border: 1px solid var(--line2); border-bottom: 0; border-radius: 16px 16px 0 0; padding: 8px 16px calc(18px + var(--safe-b)); transform: translateY(100%); transition: transform 0.22s ease-out; }
.sheet-wrap.open .sheet { transform: none; }
.sheet-grip { width: 44px; height: 4px; border-radius: 4px; background: var(--line2); margin: 4px auto 12px; }
.sheet-title { text-align: center; margin-bottom: 14px; }
.sheet-msg { font-size: 1.1rem; text-align: center; margin: 4px 0 16px; }
.sheet .grid2 .btn { text-transform: none; letter-spacing: 0; font-size: 1rem; }

#toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + var(--safe-b) + 16px); transform: translate(-50%, 20px); z-index: 200; background: #13234a; border: 1px solid var(--line2); color: var(--text); padding: 12px 18px; border-radius: 8px; font-weight: 600; opacity: 0; pointer-events: none; transition: 0.2s; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { border-color: var(--danger); }
#toast.good { border-color: var(--ok); }
body.scoring #toast { bottom: 50%; }

.player-edit { display: flex; flex-direction: column; gap: 8px; }
.swatches { display: flex; gap: 10px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; background: var(--sw); border: 3px solid transparent; cursor: pointer; }
.swatch.on { border-color: #fff; box-shadow: 0 0 12px var(--sw); }
.field-row { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }

/* ---------- scoreboard ---------- */
.board { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: 1fr auto 1fr; background: #03060d; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.panel {
  --pc: #2f8fe6; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 90% 75% at 50% 55%, color-mix(in srgb, var(--pc) 40%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--pc) 16%, #04070f), #04070f 90%);
}
.panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 4px); }
.panel.bottom { padding-bottom: var(--safe-b); }
.panel.top { padding-top: var(--safe-t); }
.board.table .panel.top { transform: rotate(180deg); padding-top: 0; padding-bottom: var(--safe-t); }
.pname { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--pc) 35%, #fff); z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 70px; }
.board.personal .panel.top .pname, .board:not(.table) .panel.top .pname { top: calc(14px + var(--safe-t)); }
.pname .nm { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: flex; gap: 6px; }
.pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pc) 60%, #fff); }
.pips i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
.auth { font-family: var(--num); font-weight: 900; font-size: min(25vh, 44vw); line-height: 1; letter-spacing: -0.02em; text-shadow: 0 0 34px color-mix(in srgb, var(--pc) 75%, transparent), 0 0 4px rgba(255, 255, 255, 0.4); pointer-events: none; z-index: 1; font-variant-numeric: tabular-nums; transition: color 0.2s; }
.auth.wide { font-size: min(19vh, 32vw); }
.auth-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3em; color: color-mix(in srgb, var(--pc) 40%, #fff); opacity: 0.6; pointer-events: none; z-index: 1; margin-top: 4px; }
.panel.low .auth { color: #ffb4ad; animation: lowpulse 1.4s ease-in-out infinite; }
.panel.dead .auth { color: var(--danger); text-shadow: 0 0 30px var(--danger); }
@keyframes lowpulse { 50% { opacity: 0.72; } }
.hit { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; color: rgba(255, 255, 255, 0.28); font: 300 3.2rem var(--font); cursor: pointer; z-index: 0; display: flex; align-items: center; touch-action: manipulation; }
.hit.minus { left: 0; justify-content: flex-start; padding-left: 6%; }
.hit.plus { right: 0; justify-content: flex-end; padding-right: 6%; }
.hit.pressing, .hit:active { background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent); }
.hit.plus.pressing, .hit.plus:active { background: linear-gradient(270deg, rgba(255, 255, 255, 0.07), transparent); }
.panel .quick { position: absolute; bottom: 14px; display: flex; gap: 14px; z-index: 3; }
.panel.bottom .quick { bottom: calc(14px + var(--safe-b)); }
.panel .quick button { background: rgba(0, 0, 0, 0.35); border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent); color: var(--text); font: 700 1.05rem var(--num); border-radius: 99px; padding: 8px 16px; min-width: 64px; cursor: pointer; }
.panel .quick button:active { background: color-mix(in srgb, var(--pc) 40%, transparent); }
.delta { position: absolute; top: 22%; right: 12%; font-family: var(--num); font-weight: 800; font-size: 2rem; opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 2; }
.delta.show { opacity: 1; transform: none; }
.delta.down { color: #ff8a80; }
.delta.up { color: #7dffb5; }
.mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; min-height: 56px; background: #060b18; border-block: 1px solid var(--line2); z-index: 4; }
.mid-btn { width: 48px; height: 44px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 6px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.mid-text { flex: 1; min-width: 0; text-align: center; }
.mid-stack { display: flex; flex-direction: column; line-height: 1.15; }
.mid-stack small { color: var(--muted); }
.mid-title { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mid-score { display: inline-flex; align-items: center; gap: 14px; font-family: var(--num); font-size: 1.4rem; }
.mid-score small { font-family: var(--font); font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.board-overlay { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 6; display: none; justify-content: center; padding: 0 16px; }
.board-overlay.on { display: flex; }
.ov-card { width: 100%; max-width: 420px; background: linear-gradient(180deg, #13244a, #0a1328); border: 1px solid var(--accent); border-radius: 12px; padding: 18px; text-align: center; box-shadow: 0 0 40px rgba(65, 209, 255, 0.3), 0 20px 50px rgba(0, 0, 0, 0.6); animation: pop 0.2s ease-out; cursor: pointer; }
.ov-card.win { border-color: var(--gold); box-shadow: 0 0 50px rgba(255, 200, 74, 0.3), 0 20px 50px rgba(0, 0, 0, 0.6); cursor: default; }
.ov-title { font-family: var(--num); font-weight: 800; font-size: 1.45rem; margin: 6px 0 12px; }
.ov-sub { color: var(--muted); }
.ov-hint { color: var(--dim); font-size: 0.85rem; margin-top: 10px; }
.ov-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.ov-actions .btn:only-child { grid-column: span 2; }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } }
.coin { width: 64px; height: 64px; margin: 6px auto 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 50%, #b07a10); box-shadow: 0 0 20px rgba(255, 200, 74, 0.6); }
.coin.spin { animation: coin 0.3s linear infinite; }
@keyframes coin { 50% { transform: scaleX(0.1); } }

@media (orientation: landscape) and (max-height: 560px) {
  .board { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; }
  .board.table .panel.top { transform: none; padding: 0; }
  .mid { flex-direction: column; border-block: 0; border-inline: 1px solid var(--line2); padding: 8px 6px; }
  .mid-text { display: none; }
  .auth { font-size: min(40vh, 22vw); }
  .board-overlay { top: 50%; }
}
@media (min-width: 700px) {
  .auth { font-size: min(25vh, 30vw); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- avatars ---------- */
.av { --s: 32px; --ac: #2f8fe6; width: var(--s); height: var(--s); flex: none; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  font: 700 calc(var(--s) * 0.4) / 1 var(--font); letter-spacing: 0.02em; color: #fff; background: color-mix(in srgb, var(--ac) 55%, #0a1328); border: 1.5px solid color-mix(in srgb, var(--ac) 70%, #fff 10%); }
img.av { background: #0a1328; border-color: var(--line2); }
.av.empty { background: rgba(255, 255, 255, 0.04); border: 1.5px dashed var(--line2); }
.av.big { display: flex; margin: 6px auto 10px; border-width: 3px; box-shadow: 0 0 30px rgba(65, 209, 255, 0.25); }
.mn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mn > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnames .mn { color: var(--muted); }
.mrow.ready .mnames .mn, .mrow.live .mnames .mn { color: var(--text); }
.mnames .mn + .mn { margin-top: 4px; }
.mnames .win { color: var(--text); }
.mnames .win::after { content: none; }
.mnames .win > span:last-child::after { content: ' ✓'; color: var(--ok); }
.vs-big .mn { font-size: 1.25rem; }
.vs-big .win::after { content: none; }
.vs-big .win > span:last-child::after { content: ' ✓'; color: var(--ok); }
.st-name { display: flex; align-items: center; gap: 8px; }
.st-name > span { overflow: hidden; text-overflow: ellipsis; }
.pill.lg { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; }
.prow .av { margin-right: 2px; }
.bm-p .mn { gap: 6px; }
.photo-edit { display: flex; align-items: center; gap: 16px; }
.photo-edit .av.big { margin: 0; }
.photo-edit .stack { flex: 1; }
.screen-card { display: flex; flex-direction: column; gap: 12px; }
.screen-card h4 { margin: 0; }
.stage-links { display: flex; justify-content: space-between; align-items: center; }

/* scoreboard avatar + game count */
.pnrow { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.pnrow .av { --s: 46px; border-width: 2px; box-shadow: 0 0 16px color-mix(in srgb, var(--pc) 60%, transparent); }
.pav:empty { display: none; }
.pips { align-items: center; }
.pips-label { font-size: 0.72rem; letter-spacing: 0.18em; color: color-mix(in srgb, var(--pc) 35%, #fff); opacity: 0.8; margin-right: 2px; }
.pips-n { font-family: var(--num); font-size: 1rem; color: var(--gold); margin-left: 4px; }

/* ---------- live screen (iPad / TV) ---------- */
body.screen-mode { overflow: hidden; }
.scr { height: 100dvh; display: flex; flex-direction: column; padding: max(14px, 1.6vh) max(16px, 2vw); gap: max(10px, 1.4vh); position: relative; }
.scr-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.scr-name { font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.8rem); display: flex; flex-direction: column; line-height: 1.15; }
.scr-name small, .scr-joinbox small { color: var(--muted); font-weight: 600; font-size: 0.62em; }
.scr-title { font-family: var(--num); font-weight: 800; font-size: clamp(1.3rem, 2.8vw, 3.2rem); text-align: center; letter-spacing: 0.04em; text-shadow: 0 0 24px rgba(65, 209, 255, 0.45); }
.scr-joinbox { justify-self: end; text-align: right; font-size: clamp(1rem, 1.4vw, 1.6rem); display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; }
.scr-joinbox b { font-family: var(--num); letter-spacing: 0.15em; color: var(--accent); }
.scr-joinbox small { grid-column: 1; }
.scr-joinbox .net-dot { grid-row: 1 / span 2; grid-column: 2; }
.scr-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: max(10px, 1.4vh); }
.scr-progress { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: clamp(0.9rem, 1.2vw, 1.4rem); }
.scr-progress b { color: var(--gold); }
.scr-bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.scr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); box-shadow: 0 0 12px var(--accent); transition: width 0.6s; }
.scr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 30vw, 560px), 1fr)); gap: max(10px, 1.2vw); align-content: start; }
.sc-card { background: var(--panel); border: 1px solid color-mix(in srgb, var(--tc) 40%, var(--line)); border-left: 6px solid var(--tc); border-radius: 10px; padding: clamp(10px, 1vw, 18px); display: flex; flex-direction: column; gap: clamp(6px, 0.6vw, 12px); }
.sc-card.live { box-shadow: 0 0 0 1px rgba(67, 214, 138, 0.35), 0 0 24px rgba(67, 214, 138, 0.12); }
.sc-card.done { opacity: 0.92; }
.sc-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(0.8rem, 1vw, 1.15rem); }
.sc-table { display: inline-flex; align-items: center; gap: 8px; font-family: var(--num); }
.sc-table i { width: 14px; height: 14px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 10px var(--tc); }
.sc-status { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.sc-status b { color: var(--gold); }
.sc-card.live .sc-status { color: var(--ok); }
.sc-row { display: flex; align-items: center; gap: clamp(8px, 0.9vw, 14px); }
.sc-row .av { --s: clamp(40px, 3.6vw, 64px) !important; width: clamp(40px, 3.6vw, 64px); height: clamp(40px, 3.6vw, 64px); }
.sc-name { flex: 1; min-width: 0; font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 10px; }
.sc-auth { font-family: var(--num); font-weight: 900; font-size: clamp(1.8rem, 3vw, 3.6rem); min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.sc-auth.low { color: #ff8a80; }
.sc-pips { display: flex; gap: 5px; }
.sc-pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); }
.sc-pips i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
.sc-row.win .sc-name { color: var(--gold); }
.sc-row.win .sc-auth { color: var(--gold); }
.sc-row.lose { opacity: 0.45; }
.sc-badge { font-family: var(--font); font-size: 0.55em; text-transform: uppercase; letter-spacing: 0.1em; background: var(--gold); color: #1a1200; padding: 3px 8px; border-radius: 4px; flex: none; }
.sc-bo { color: var(--dim); font-size: clamp(0.8rem, 0.9vw, 1.05rem); text-transform: uppercase; letter-spacing: 0.08em; }
.scr-empty { margin: auto; color: var(--muted); font-size: 2rem; }
.scr-join { margin: auto; display: flex; align-items: center; gap: 5vw; max-width: 1400px; }
.scr-join-qr img { width: clamp(220px, 28vw, 460px); height: auto; background: #fff; padding: 12px; border-radius: 14px; display: block; }
.scr-join-text { display: flex; flex-direction: column; gap: 8px; font-size: clamp(1.1rem, 1.6vw, 2rem); }
.scr-code { font-family: var(--num); font-weight: 900; font-size: clamp(3rem, 8vw, 9rem); letter-spacing: 0.18em; line-height: 1; text-shadow: 0 0 40px rgba(65, 209, 255, 0.6); }
.scr-url { color: var(--accent); }
.scr-players { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; max-height: 40vh; overflow: hidden; }
.scr-player { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 99px; padding: 4px 14px 4px 4px; font-weight: 600; }
.scr-final { margin: auto; display: flex; align-items: center; gap: 5vw; flex-wrap: wrap; justify-content: center; }
.scr-champ { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; font-size: clamp(1rem, 1.4vw, 1.6rem); }
.scr-champ .av { border: 4px solid var(--gold); box-shadow: 0 0 50px rgba(255, 200, 74, 0.5); font-size: 4rem; }
.scr-champ-name { font-family: var(--num); font-weight: 900; font-size: clamp(2rem, 4vw, 4.5rem); color: var(--gold); }
.scr-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: min(520px, 90vw); font-size: clamp(1.1rem, 1.5vw, 1.8rem); font-weight: 600; }
.scr-top li { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.scr-rank { font-family: var(--num); font-weight: 800; width: 2ch; color: var(--muted); }
.scr-fs { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: var(--muted); font-size: 1.3rem; cursor: pointer; opacity: 0.35; }
.scr-fs:hover { opacity: 1; }
@media (max-width: 700px) {
  .scr-head { grid-template-columns: 1fr auto; }
  .scr-title { grid-column: 1 / -1; grid-row: 2; }
  .scr-join { flex-direction: column; text-align: center; }
}
.mnames .av, .bm-p .av, .st-name .av { color: #fff; overflow: visible; }
@media (min-width: 701px) {
  .scr-grid[data-cols] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .scr-grid[data-cols="1"] { --cols: 1; max-width: 900px; width: 100%; margin: 0 auto; }
  .scr-grid[data-cols="2"] { --cols: 2; }
  .scr-grid[data-cols="3"] { --cols: 3; }
  .scr-grid[data-cols="4"] { --cols: 4; }
}

/* ---------- player colors: the whole panel is the player's color (or dual-ally blend) ---------- */
.panel {
  --pg: linear-gradient(var(--pc), var(--pc));
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 50%, rgba(2, 4, 10, 0.5) 100%),
    linear-gradient(rgba(3, 6, 14, 0.2), rgba(3, 6, 14, 0.2)),
    var(--pg);
}
.pname { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); }
.pnrow { background: rgba(0, 0, 0, 0.28); padding: 5px 16px 5px 5px; border-radius: 99px; }
.pnrow .av { border-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.pav:empty + .nm { padding-left: 11px; }
.auth { color: #fff; text-shadow: 0 6px 28px rgba(0, 0, 0, 0.45), 0 0 2px rgba(0, 0, 0, 0.35); }
.auth-label, .pips-label { color: #fff; opacity: 0.75; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.pips i { border-color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.25); }
.pips i.on { background: var(--gold); border-color: #fff; }
.pips-n { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.hit { color: rgba(255, 255, 255, 0.5); }
.panel .quick button { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.45); }
.panel .quick button:active { background: rgba(255, 255, 255, 0.22); }
.delta { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.panel.low .auth { color: #fff; text-shadow: 0 0 26px rgba(255, 30, 30, 0.95), 0 0 6px rgba(120, 0, 0, 0.8); }
.panel.dead { filter: saturate(0.25) brightness(0.6); }
.panel.dead .auth { color: #ff6a5c; text-shadow: 0 0 24px rgba(0, 0, 0, 0.6); }

/* color picker */
.color-pick { display: flex; flex-direction: column; gap: 8px; }
.color-pick .swatches { flex-wrap: wrap; }
.swatch { background: var(--pg, var(--sw)); }
.swatch.on { box-shadow: 0 0 0 2px var(--bg, #050912), 0 0 14px var(--pc); }
.swatch-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-top: 2px; }
.color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--pg); vertical-align: -2px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.color-row { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.color-row > b { font-size: 0.85rem; letter-spacing: 0.04em; }
.sc-row { position: relative; padding-left: 14px; }
.sc-row .sc-col { position: absolute; left: 0; top: 10%; bottom: 10%; width: 5px; border-radius: 3px; background: var(--pg); }

/* ---------- live camera ---------- */
.cam { position: fixed; inset: 0; z-index: 300; background: #000; display: flex; flex-direction: column; color: #fff; }
.cam-top { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; padding: calc(8px + var(--safe-t)) 8px 8px; }
.cam-title { text-align: center; font-weight: 700; letter-spacing: 0.04em; }
.cam-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.2rem; cursor: pointer; }
.cam-stage { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cam video, .cam-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam.mirror video { transform: scaleX(-1); }
.cam .cam-shot { display: none; inset: auto; width: min(82vw, 62vh); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #000; }
.cam.review .cam-shot { display: block; }
.cam.review video { visibility: hidden; }
/* Square crop guide with a round face outline: only the square is saved. */
.cam-guide { position: absolute; width: min(82vw, 62vh); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.55); border: 3px solid rgba(255, 255, 255, 0.85); pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.cam.ready .cam-guide { opacity: 1; }
.cam.review .cam-guide { opacity: 1; }
.cam-msg { position: relative; max-width: 300px; text-align: center; color: var(--muted); padding: 0 16px; }
.cam.ready .cam-msg, .cam.review .cam-msg { display: none; }
.cam-bar { padding: 18px 16px calc(22px + var(--safe-b)); }
.cam-live { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.cam-review { display: none; grid-template-columns: 1fr 1fr; gap: 12px; }
.cam.review .cam-live { display: none; }
.cam.review .cam-review { display: grid; }
.cam-side { background: rgba(255, 255, 255, 0.12); border: 0; color: #fff; font: 600 0.95rem var(--font); padding: 10px 16px; border-radius: 99px; cursor: pointer; }
.cam-shutter { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: none; padding: 5px; cursor: pointer; }
.cam-shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform 0.1s; }
.cam-shutter:active i { transform: scale(0.88); }
.cam:not(.ready) .cam-shutter, .cam:not(.ready) [data-c="flip"] { opacity: 0.3; pointer-events: none; }

/* avatar in the player's color: ring around a photo, filled initials otherwise */
.av.ringed { --ring: max(3px, calc(var(--s) * 0.09)); border: 0; background: var(--pg) border-box; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
span.av.ringed:not(.photo) { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.av.ringed.photo { padding: var(--ring); overflow: hidden; }
.av.ringed.photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #0a1328; box-shadow: 0 0 0 1.5px rgba(4, 7, 15, 0.9); }
.av.big.ringed { box-shadow: 0 0 30px color-mix(in srgb, var(--pc, #41d1ff) 25%, transparent); }
.pnrow .av.ringed { box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(0, 0, 0, 0.4); }
.color-row > b { display: flex; align-items: center; gap: 10px; }
/* dual swatches: paint the gradient under the border too, so they stay round */
.swatch { background-origin: border-box; }

/* registration limits */
.max-row { display: flex; flex-direction: column; gap: 8px; }
.max-row .stepper { align-self: flex-start; }
.join-stop { margin: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(255, 200, 74, 0.45); background: rgba(255, 200, 74, 0.08); color: var(--muted); }
.join-stop b { display: block; color: var(--gold); font-size: 1.05rem; margin-bottom: 2px; }
.plist + .toggle, .section-head + .toggle { margin-bottom: 10px; }