* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0e1015;
  color: #f2f4f8;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
input, select { font: inherit; }

.screen { min-height: 100dvh; display: flex; flex-direction: column; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; min-height: 100dvh; }

h1 { font-size: 28px; letter-spacing: 0.5px; }
.sub { color: #9aa3b2; font-size: 14px; text-align: center; max-width: 420px; }

.card {
  background: #171a22; border: 1px solid #262b38; border-radius: 14px;
  padding: 18px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px;
}
.card label { font-size: 12px; color: #9aa3b2; text-transform: uppercase; letter-spacing: 1px; }
.card input[type=text], .card input[type=password], .card select {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #2c3242;
  background: #0e1118; color: #fff; font-size: 18px;
}
.code { text-transform: uppercase; letter-spacing: 6px; text-align: center; font-weight: 700; }

.btn {
  padding: 14px 18px; border-radius: 12px; background: #2b6ef2; color: #fff;
  font-size: 17px; font-weight: 600; text-align: center; text-decoration: none;
}
.btn.secondary { background: #262b38; }
.btn.danger { background: #d4373e; }
.btn.ghost { background: transparent; border: 1px solid #2c3242; }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }

/* status pills */
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; background: #262b38; color: #9aa3b2;
}
.pill.ok { background: #123a24; color: #4ade80; }
.pill.warn { background: #3a2f12; color: #fbbf24; }
.pill.bad { background: #3f1418; color: #f87171; }
.pill.rec { background: #3f1418; color: #f87171; }
.pill.rec::before { content: "●"; margin-right: 5px; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* banner */
.banner {
  padding: 10px 14px; font-weight: 700; font-size: 15px; text-align: center;
  background: #123a24; color: #4ade80;
}
.banner.warn { background: #3a2f12; color: #fbbf24; }
.banner.bad { background: #7f1d1d; color: #fff; animation: flash 0.8s infinite; }
@keyframes flash { 50% { background: #b91c1c; } }

/* camera page */
#stage { position: relative; flex: 1; background: #000; overflow: hidden; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.controls {
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; background: #12141b;
}

/* remote scoreboard */
.scorepad { flex: 1; display: flex; gap: 10px; padding: 10px; min-height: 0; }
.teamcol {
  flex: 1; border-radius: 16px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; position: relative; border: 2px solid transparent;
  background: #171a22; overflow: hidden; touch-action: manipulation;
}
.teamcol .tname { font-size: 20px; font-weight: 700; letter-spacing: 1px; z-index: 1; }
.teamcol .tscore { font-size: 20vh; line-height: 1; font-weight: 800; z-index: 1; font-variant-numeric: tabular-nums; }
.teamcol .tsets { display: flex; gap: 8px; z-index: 1; }
.teamcol .tsets .pip { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #4b5563; }
.teamcol .tsets .pip.won { border: 0; }
.teamcol .serve { position: absolute; top: 12px; right: 14px; font-size: 22px; opacity: 0.15; z-index: 1; }
.teamcol .serve.on { opacity: 1; }
.teamcol .minus {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 26px; font-size: 22px; z-index: 2;
}
.teamcol .tint { position: absolute; inset: 0; opacity: 0.16; }

.remotebar {
  display: flex; gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: #12141b;
}
.remotebar .btn { flex: 1; padding: 12px 8px; font-size: 14px; }

.setline { text-align: center; font-size: 14px; color: #9aa3b2; padding: 4px 0 0; }
.setline b { color: #fff; }

dialog {
  border: 1px solid #2c3242; border-radius: 16px; background: #171a22; color: #fff;
  padding: 20px; max-width: 420px; width: 92%;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog .btn { width: 100%; margin-top: 10px; }
dialog h2 { font-size: 20px; margin-bottom: 6px; }
dialog .sub { max-width: none; text-align: left; }

.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-grid .full { grid-column: 1 / -1; }
.swatch { width: 100%; height: 44px; border-radius: 10px; border: 1px solid #2c3242; padding: 0; background: none; }
.logolbl {
  display: flex; align-items: center; gap: 10px; background: #0e1118; border: 1px solid #2c3242;
  border-radius: 10px; padding: 8px 12px; font-size: 14px; color: #9aa3b2;
}
.logolbl img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #262b38; }
.hidden { display: none !important; }

/* game setup dialog */
.teams-dlg { max-width: 520px; }
.teams-dlg .btn { width: 100%; margin-top: 10px; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #9aa3b2; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.fld input { padding: 12px; border-radius: 10px; border: 1px solid #2c3242; background: #0e1118; color: #fff; font-size: 16px; }
.teamgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.teamcard {
  background: #0e1118; border: 1px solid #2c3242; border-top: 4px solid #888;
  border-radius: 12px; padding: 14px 10px; display: flex; flex-direction: column;
  gap: 10px; align-items: center;
}
.logopick {
  width: 64px; height: 64px; border-radius: 50%; background: #1c2130;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  cursor: pointer; position: relative; border: 1px dashed #3a4256;
}
.logopick img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.logopick img[src=""] { display: none; }
.logopick span { font-size: 11px; color: #9aa3b2; }
.tnamein {
  width: 100%; text-align: center; padding: 10px; border-radius: 10px;
  border: 1px solid #2c3242; background: #171a22; color: #fff; font-size: 17px; font-weight: 600;
}
.swatches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.swatches button.sel { border-color: #fff; }
.swatches input[type=color] { width: 26px; height: 26px; border-radius: 50%; border: 1px dashed #556; padding: 0; background: none; }
.matchrow { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 8px; margin: 12px 0; align-items: end; }
.matchrow label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #9aa3b2; text-transform: uppercase; }
.matchrow select { padding: 10px 6px; border-radius: 8px; background: #0e1118; border: 1px solid #2c3242; color: #fff; }
.matchrow .btn { margin-top: 0; padding: 10px 6px; font-size: 14px; }
.sharebox {
  display: flex; gap: 10px; align-items: center; background: #0e1118;
  border: 1px solid #2c3242; border-radius: 10px; padding: 10px;
}
.sharebox .sharelink { flex: 1; font-size: 13px; color: #9aa3b2; word-break: break-all; }
.sharebox .sharelink.on { color: #4ade80; }
.sharebox .btn { width: auto; margin-top: 0; padding: 10px 14px; font-size: 14px; white-space: nowrap; }