/* 우주 먼지 — 캔버스 한 장 위에 얇은 표시만 얹습니다. */
.bgx-cosmos { --cs-glow: #c08bff; }
.cs-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #05070e; }
#csCv {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}

/* ---------- 위쪽 표시줄 ---------- */
.cs-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 6px 10px calc(6px + env(safe-area-inset-top)) 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.cs-badge { display: flex; align-items: center; gap: 6px; }
.cs-badge b { font-size: clamp(16px, 5vmin, 26px); line-height: 1; }
.cs-badge span { font-size: clamp(11px, 3.2vmin, 15px); font-weight: 900; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.cs-sc { display: flex; align-items: baseline; gap: 5px; }
.cs-sc span { font-size: 10px; opacity: .65; }
.cs-sc b { font-size: clamp(15px, 4.4vmin, 22px); font-weight: 900; color: #fff;
  letter-spacing: -.5px; text-shadow: 0 2px 0 rgba(0,0,0,.6); }

/* ---------- 자람 막대 ---------- */
.cs-grow {
  position: absolute; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 3px;
}
.cs-grow i { display: block; height: 7px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.cs-grow i u { display: block; height: 100%; width: 0; border-radius: 999px; text-decoration: none;
  background: linear-gradient(90deg, #6fa8dc, #c08bff); box-shadow: 0 0 10px rgba(192,139,255,.7);
  transition: width .18s linear; }
.cs-grow span { font-size: 10px; font-weight: 800; opacity: .72; text-align: right; }

/* ---------- 순위 ---------- */
.cs-rank {
  position: absolute; right: 8px; top: calc(44px + env(safe-area-inset-top)); z-index: 4;
  display: flex; flex-direction: column; gap: 3px; pointer-events: none; max-width: 48%;
}
.cs-rank div {
  display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800;
  background: rgba(5,8,16,.62); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 2px 8px; color: #dfe8f5;
}
.cs-rank div.me { border-color: #fff; color: #fff; }
.cs-rank i { font-style: normal; opacity: .6; }
.cs-rank span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 64px; }
.cs-rank b { margin-left: auto; opacity: .78; font-weight: 800; white-space: nowrap; }

/* ---------- 단계가 오를 때 뜨는 글 ---------- */
.cs-msg {
  position: absolute; left: 0; right: 0; top: 34%; z-index: 5; text-align: center;
  font-size: clamp(20px, 7vmin, 38px); font-weight: 1000; color: #fff;
  text-shadow: 0 0 18px var(--cs-glow), 0 3px 0 rgba(0,0,0,.6);
  pointer-events: none; transition: opacity .25s;
}

/* ---------- 끝 ---------- */
.cs-end {
  position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,12,.76); backdrop-filter: blur(3px); padding: 16px;
}
.cs-end.hide { display: none; }
.cs-endcard {
  width: min(330px, 100%); background: #121726; border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 16px; text-align: center;
}
.cs-endcard h3 { margin: 0 0 8px; font-size: 19px; }
.cs-endtier { font-size: 26px; font-weight: 900; margin-bottom: 12px; }
.cs-endrow { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 2px; opacity: .88; }
.cs-endrow b { font-weight: 900; }
.cs-endcard .bgx-go { margin-top: 12px; }