:root {
  --bg: #06111d;
  --card: #0d2233;
  --card2: #102b3f;
  --text: #f6fbff;
  --muted: #9bb9c9;
  --accent: #38d9a9;
  --gold: #ffd166;
  --danger: #ef476f;
  --line: rgba(255,255,255,.1);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(56,217,169,.20), transparent 35%),
    radial-gradient(circle at top right, rgba(255,209,102,.14), transparent 34%),
    linear-gradient(180deg, #092035 0%, var(--bg) 58%);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}
.shell { max-width: 1180px; margin: 0 auto; padding: 22px; }
.card {
  background: linear-gradient(180deg, rgba(16,43,63,.95), rgba(8,25,39,.95));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); }
h2 { margin: 0 0 16px; font-size: 20px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three { grid-template-columns: 1fr auto auto; }
.compact { margin-bottom: 10px; }
.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
label { display: block; color: var(--muted); margin: 13px 0 7px; font-size: 13px; }
input, select {
  width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 13px;
  background: rgba(0,0,0,.22); color: var(--text); outline: none;
}
button {
  border: 0; border-radius: 13px; padding: 12px 14px; cursor: pointer;
  background: var(--accent); color: #05231a; font-weight: 800;
}
button.secondary { background: var(--gold); color: #2b2100; }
button.danger { background: var(--danger); color: white; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.info-line { margin-top: 10px; color: var(--muted); }
a { color: #7ae582; }
.status-box { white-space: nowrap; background: rgba(0,0,0,.24); border-radius: 999px; padding: 10px 14px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: #999; margin-right: 8px; }
.dot.on { background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.animal-list { display: grid; gap: 10px; }
.animal-card, .row, .lineup-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: rgba(0,0,0,.18);
}
.animal-card.racing { border-color: rgba(56,217,169,.55); background: rgba(56,217,169,.10); }
.animal-main { display: flex; gap: 12px; align-items: center; min-width: 0; }
.emoji { font-size: 34px; width: 42px; text-align: center; }
.code { color: var(--accent); font-size: 12px; font-weight: 700; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; background: rgba(255,209,102,.14); color: var(--gold); font-size: 12px; font-weight: 800; }
.lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.lineup-card { justify-content: flex-start; cursor: pointer; user-select: none; }
.lineup-card input { width: auto; }
.lineup-card.active { border-color: rgba(56,217,169,.8); background: rgba(56,217,169,.12); }
.lineup-order { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: #1b1600; font-weight: 900; }
.feed, .leaderboard { display: grid; gap: 8px; }
.mt { margin-top: 24px; }
pre { background: rgba(0,0,0,.28); border-radius: 14px; padding: 14px; overflow-x: auto; color: #d8f3ff; }
@media (max-width: 760px) {
  .two, .three, .lineup-grid { grid-template-columns: 1fr; }
  .hero, .section-head { flex-direction: column; align-items: flex-start; }
}
.compact-inputs { gap: 12px; }
.checkline { display:flex; align-items:center; gap:10px; margin-top:28px; color:#eafcff; font-weight:700; }
.checkline input { width:auto; transform:scale(1.15); }
.result-box { background:rgba(2,6,23,.46); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:12px; }
.winner-line { font-size:18px; color:#fff3b0; margin-bottom:8px; }
.mini-ranking { margin-top:10px; display:grid; gap:6px; }
.settings-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sound-box { border:1px solid var(--line); border-radius:18px; padding:16px; background:rgba(0,0,0,.16); }
h3 { margin:0 0 10px; }
input[type="range"] { padding:0; accent-color: var(--accent); }
@media (max-width: 940px) { .settings-grid { grid-template-columns: 1fr; } }
.preview-box { align-self: end; }
.animal-preview {
  display:flex; align-items:center; gap:12px; min-height:72px; padding:12px;
  border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.18);
}
.animal-preview small { display:block; color:var(--muted); margin-top:4px; font-size:11px; font-weight:800; }
.preview-avatar {
  width:58px; height:48px; border-radius:44% 56% 48% 52%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--c), rgba(0,0,0,.25)); border:3px solid var(--a);
  box-shadow:0 0 22px color-mix(in srgb, var(--a) 55%, transparent);
}
.preview-avatar span { font-size:31px; filter:drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.preview-avatar.round { border-radius:999px; width:54px; height:54px; }
.preview-avatar.strong { width:68px; height:48px; border-radius:30% 30% 42% 42%; }
.preview-avatar.swift { width:70px; height:38px; border-radius:60% 42% 44% 58%; }
.preview-avatar.wing { width:70px; height:42px; border-radius:70% 30% 70% 30%; }
.preview-avatar.reptile { width:72px; height:36px; border-radius:64% 30% 48% 38%; }
.preview-avatar.neon { box-shadow:0 0 28px var(--a), inset 0 0 16px rgba(255,255,255,.18); }
.preview-avatar.gold { border-color:#ffd166; box-shadow:0 0 26px rgba(255,209,102,.55); }
.preview-avatar.shadow { filter:drop-shadow(0 8px 12px rgba(0,0,0,.65)); }
.preview-avatar.fire { border-color:#ff6b35; box-shadow:0 0 24px rgba(255,107,53,.65); }
.preview-avatar.royal { border-color:#c77dff; box-shadow:0 0 24px rgba(199,125,255,.65); }

.emoji img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.preview-avatar img { max-width: 76px; max-height: 70px; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(0,0,0,.55)); }
.preview-avatar:has(img) { width: 78px; height: 66px; background: radial-gradient(circle, rgba(255,255,255,.16), rgba(0,0,0,.25)); }

/* Stage 13 live control and visual polish */
.live-pad {
  position: sticky;
  top: 10px;
  z-index: 10;
  margin-bottom: 18px;
  border-color: rgba(56,217,169,.36);
  box-shadow: 0 20px 55px rgba(0,0,0,.35), 0 0 30px rgba(56,217,169,.08);
}
.compact-head { margin-bottom: 10px; }
.live-badge { background: rgba(56,217,169,.16); color: var(--accent); border: 1px solid rgba(56,217,169,.35); }
.live-control-grid { grid-template-columns: 1.2fr 1.2fr .8fr; align-items: end; margin-bottom: 12px; }
.quick-buttons { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.quick-buttons button { min-height: 46px; }
button.ghost { background: rgba(255,255,255,.10); color: var(--text); border: 1px solid var(--line); }
.fullbtn { width: 100%; }
.quick-sound-row {
  display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:14px;
  border-top: 1px solid rgba(255,255,255,.09); padding-top: 12px;
}
.checkline.inline { margin: 0; }
.quick-volume { display:flex; align-items:center; gap:10px; min-width: 240px; color: var(--muted); font-size: 13px; font-weight: 700; }
.quick-volume input { width: 160px; }
@media (max-width: 940px) {
  .live-pad { position: static; }
  .live-control-grid, .quick-buttons { grid-template-columns: 1fr; }
  .quick-volume { width: 100%; }
  .quick-volume input { flex: 1; }
}

.mini-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mini-pair input {
  min-width: 0;
}

/* Stage 15 TikTok connector */
.tiktok-card .grid.four {
  grid-template-columns: 1.4fr 1fr repeat(4, minmax(120px, .75fr));
  align-items: end;
}
.tiktok-status-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.mini-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px;
}
.mini-stat span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mini-stat b {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}
.muted-badge {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
}
.warn-badge {
  background: rgba(255, 196, 87, 0.16);
  color: #ffd37b;
  border-color: rgba(255, 196, 87, 0.35);
}
.error-line {
  border: 1px solid rgba(255, 91, 91, 0.38);
  background: rgba(255, 91, 91, 0.10);
  color: #ffb8b8;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0;
}
.hidden { display: none !important; }
.compact-feed { max-height: 240px; overflow: auto; }
@media (max-width: 840px) {
  .tiktok-card .grid.four,
  .tiktok-status-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tiktok-card .grid.four,
  .tiktok-status-grid { grid-template-columns: 1fr; }
}


/* Stage 16 - Admin responsive/fixed polish */
html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background-attachment: fixed;
}
button, input, select {
  min-height: 44px;
  font-size: 14px;
}
button {
  touch-action: manipulation;
}
select option {
  color: #071522;
  background: #f6fbff;
}
.shell {
  width: min(100%, 1440px);
  max-width: 1440px;
  padding: clamp(12px, 2.2vw, 28px);
}
.card {
  width: 100%;
  min-width: 0;
}
.hero.card {
  width: 100%;
}
.admin-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 10px 2px 14px;
  margin: -4px 0 14px;
  background:
    linear-gradient(180deg, rgba(6,17,29,.98), rgba(6,17,29,.78));
  backdrop-filter: blur(16px);
}
.admin-nav a {
  flex: 0 0 auto;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 10px 13px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
}
.admin-nav a:active,
.admin-nav a:hover {
  border-color: rgba(56,217,169,.65);
  background: rgba(56,217,169,.16);
  color: #dffdf3;
}
#live-control,
#race-control,
#overlay-settings,
#character-editor,
#lineup-race,
#catalog-dashboard,
#tiktok-connector {
  scroll-margin-top: 78px;
}
.live-pad {
  top: 58px;
}
.grid,
.two,
.three,
.settings-grid,
.live-control-grid,
.tiktok-card .grid.four {
  min-width: 0;
}
input, select, textarea, pre {
  max-width: 100%;
}
.feed, .leaderboard, .animal-list, .lineup-grid {
  min-width: 0;
}
.row, .animal-card, .lineup-card {
  min-width: 0;
}
.animal-main > div {
  min-width: 0;
}
.animal-main b,
.animal-main .muted,
.info-line,
.mini-stat b {
  overflow-wrap: anywhere;
}
.quick-buttons {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.buttons button {
  flex: 1 1 140px;
}
.compact-feed {
  overscroll-behavior: contain;
}

/* Desktop control layout */
@media (min-width: 1180px) {
  .two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .live-control-grid {
    grid-template-columns: 1.1fr 1.1fr .8fr;
  }
  .hero.card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Tablet */
@media (max-width: 1179px) {
  .two, .three, .settings-grid, .live-control-grid, .tiktok-card .grid.four {
    grid-template-columns: 1fr 1fr;
  }
  .quick-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at top left, rgba(56,217,169,.18), transparent 38%),
      linear-gradient(180deg, #092035 0%, #06111d 68%);
    background-attachment: fixed;
  }
  .shell {
    padding: 10px;
  }
  .card {
    border-radius: 18px;
    padding: 16px;
  }
  .hero.card {
    min-height: auto;
    margin-bottom: 10px;
  }
  .hero h1 {
    font-size: 30px;
    line-height: 1.08;
  }
  .hero .muted {
    font-size: 13px;
    line-height: 1.35;
  }
  .status-box {
    width: 100%;
    white-space: normal;
  }
  .admin-nav {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .two, .three, .settings-grid, .live-control-grid, .tiktok-card .grid.four, .lineup-grid {
    grid-template-columns: 1fr !important;
  }
  .grid {
    gap: 12px;
    margin-bottom: 12px;
  }
  .section-head {
    gap: 10px;
    margin-bottom: 12px;
  }
  .section-head button {
    width: 100%;
  }
  .live-pad {
    position: static;
    margin-bottom: 12px;
  }
  .quick-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-buttons button {
    min-height: 48px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .quick-sound-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .quick-volume {
    min-width: 0;
    width: 100%;
  }
  .quick-volume input {
    width: 100%;
    flex: 1;
  }
  .buttons {
    display: grid;
    grid-template-columns: 1fr;
  }
  .buttons button {
    width: 100%;
  }
  .animal-card,
  .row,
  .lineup-card {
    align-items: flex-start;
  }
  .animal-card {
    flex-direction: column;
  }
  .animal-card .buttons,
  .animal-card button {
    width: 100%;
  }
  .tiktok-status-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .mini-stat {
    padding: 9px;
  }
  .mini-stat b {
    font-size: 16px;
  }
  pre {
    font-size: 12px;
  }
}

/* Small phones */
@media (max-width: 430px) {
  .shell {
    padding: 8px;
  }
  .card {
    padding: 14px;
    border-radius: 16px;
  }
  .quick-buttons {
    grid-template-columns: 1fr;
  }
  .tiktok-status-grid {
    grid-template-columns: 1fr;
  }
  .admin-nav a {
    padding: 9px 11px;
    font-size: 11px;
  }
  h2 {
    font-size: 18px;
  }
  label {
    font-size: 12px;
  }
}

/* Stage 17 TikTok debug */
.debug-hint {
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 12px;
}
.diagnostic-box {
  margin: 14px 0;
  border: 1px solid rgba(56,217,169,.24);
  background: rgba(56,217,169,.07);
  border-radius: 18px;
  padding: 14px;
}
.diagnostic-box pre {
  max-height: 360px;
  white-space: pre-wrap;
  word-break: break-word;
}
.diag-ok { color: #7ae582; }
.diag-bad { color: #ffb8b8; }
.diag-warn { color: #ffd37b; }
@media (min-width: 841px) {
  .tiktok-card .grid.four { grid-template-columns: 1.3fr .75fr .75fr .75fr .75fr; }
}
.notice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(148, 163, 184, .22);
}
.ok-notice {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, .38);
  background: rgba(20, 83, 45, .22);
}