/* ─────────────────────────────────────────────
 * 한봇 별빛 공장 (2026-10-28) — SPEC §7 디자인 토큰 (사용자 승인)
 * 소재: 별사탕·은하수·옛 천문도(천상열차분야지도). 검정 대신 남보라 밤하늘, 별사탕 파스텔, 천문도 선.
 * 남보라 밤하늘 #2b2552 · 패널 #3a3270 · 별빛 금 #f3d27a(1단·강조) · 별사탕 분홍 #f2a7c3(3단) · 은하 청록 #8fd6d2(4단)
 * 천문도 종이빛 #e9e4f7(글씨·별자리 선). 2단(별가루)은 별빛 금과 종이빛을 섞고, 5단(별자리 조각)은 종이빛.
 * 서체: 제목·큰 숫자만 도현(hb-games-display), 숫자 tabular-nums.
 * 시그니처(하나): 큰 수 단위가 한 칸 올라갈 때 단위 글자 둘레에 별자리 점·선이 이어지며 한 번 반짝(.bb-constel · .bb-sig).
 * 게임 화면이라 머리글은 data-theme-lock="dark" — 바깥 창(시즌·채팅)은 사이트 토큰.
 * ───────────────────────────────────────────── */
.bb-root, .bb-overlay, .bb-burst, .hbs-overlay, .chat-fab, .chat-panel {
    --bb-sky: #2b2552;
    --bb-sky-2: #3a3270;
    --bb-starlight: #f3d27a;
    --bb-candy: #f2a7c3;
    --bb-milky: #8fd6d2;
    --bb-chart: #e9e4f7;
    --bb-dust: color-mix(in srgb, var(--bb-starlight) 45%, var(--bb-chart));
    --bb-text: var(--bb-chart);
    --bb-dim: color-mix(in srgb, var(--bb-chart) 64%, var(--bb-sky));
    --bb-line: color-mix(in srgb, var(--bb-chart) 18%, transparent);
    --bb-panel: color-mix(in srgb, var(--bb-sky-2) 88%, transparent);
}
.s1 { --st: var(--bb-starlight); }
.s2 { --st: var(--bb-dust); }
.s3 { --st: var(--bb-candy); }
.s4 { --st: var(--bb-milky); }
.s5 { --st: var(--bb-chart); }

.bb-root {
    position: relative;
    color: var(--bb-text);
    min-height: calc(100vh - var(--topbar-h, 0px));
    background:
        linear-gradient(to bottom, color-mix(in srgb, var(--bb-sky) 80%, transparent), color-mix(in srgb, var(--bb-sky) 94%, transparent)),
        var(--bb-bg-img, none) center / cover no-repeat,
        var(--bb-sky);
}
.bb-root [hidden] { display: none !important; }
.bb-root :focus-visible, .bb-overlay :focus-visible, .hbs-overlay :focus-visible, .chat-panel :focus-visible { outline: 2px solid var(--bb-starlight); outline-offset: 2px; }
.bb-root .wrap { max-width: min(96%, 2400px); margin: 0 auto; padding: 12px 16px 24px; }
.bb-root .top-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-root .page-title { font-family: "hb-games-display", var(--font-sans); font-weight: 400; color: var(--bb-text); margin: 0; font-size: clamp(1.4rem, 1.1rem + 0.8vw, 2.2rem); }
.bb-root .page-sub { font-size: 0.8rem; color: var(--bb-dim); }
.bb-closed { display: none; font-size: 0.78rem; color: var(--warn); border: 1px solid rgba(var(--warn-rgb), 0.45); border-radius: var(--radius); padding: 4px 12px; }
.bb-closed.show { display: inline-block; }
.bb-notation { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.bb-notation-label, .bb-buyamt-label { font-size: 0.74rem; color: var(--bb-dim); margin-right: 2px; }
.bb-sound { display: inline-flex; align-items: center; gap: 6px; }
.bb-snd-vol { width: clamp(64px, 6vw, 120px); accent-color: var(--bb-starlight); }
.bb-snd-vol:disabled { opacity: 0.4; }
.bb-admin-link .back-btn { display: inline-flex; align-items: center; font-size: 0.82rem; color: var(--bb-dim); text-decoration: none; padding: 7px 14px; border: 1px solid var(--bb-line); border-radius: var(--radius); }
.bb-admin-link .back-btn:hover { color: var(--bb-text); border-color: var(--bb-starlight); }
.bb-root .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 공용 작은 버튼 — 이 화면 색으로 */
.bb-root .chip-btn { font-family: inherit; font-size: 0.76rem; color: var(--bb-dim); background: transparent; border: 1px solid var(--bb-line); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.bb-root .chip-btn:hover { color: var(--bb-text); }
.bb-root .chip-btn.on { color: var(--bb-sky); border-color: var(--bb-starlight); background: var(--bb-starlight); font-weight: 700; }
.bb-root .mini-btn { display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--bb-line); border-radius: var(--radius-sm); color: var(--bb-text); font-family: inherit; font-size: 0.76rem; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.bb-root .mini-btn:hover { border-color: var(--bb-starlight); }
.bb-root .filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bb-tag { display: inline-block; font-size: 0.68rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--bb-line); color: var(--bb-dim); vertical-align: 1px; white-space: nowrap; }
.bb-root .title-chip { font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--bb-chart) 10%, transparent); color: var(--bb-dim); }
.bb-big {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
    background: var(--bb-starlight); border: 0; border-radius: 999px; color: var(--bb-sky);
    font-family: inherit; font-size: 0.92rem; font-weight: 800; padding: 10px 22px; cursor: pointer;
}
.bb-big:hover:not(:disabled) { background: color-mix(in srgb, var(--bb-starlight) 85%, #fff); }
.bb-big:disabled { background: color-mix(in srgb, var(--bb-chart) 14%, transparent); color: var(--bb-dim); cursor: not-allowed; }
.bb-big.bb-gal { background: var(--bb-milky); }

/* 그림 자리 — 그림이 없으면 단계 색 원 + 이름 첫 글자 (그림은 공개 전 모두 채움) */
.bb-pic { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--st, var(--bb-starlight)); }
.bb-pic::before { content: attr(data-ch); font-family: "hb-games-display", var(--font-sans); font-size: 1.05em; color: var(--bb-sky); line-height: 1; }
.bb-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bb-pic:has(img) { background: none; }
.bb-pic:has(img)::before { content: none; }


/* ── 자원 5칸 ── */
.bb-res { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 0.6vw, 14px); margin-top: 12px; }
.bb-rc { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; background: var(--bb-panel); border: 1px solid var(--bb-line); border-bottom: 3px solid var(--st); border-radius: var(--radius-lg); min-width: 0; overflow: hidden; }
.bb-rc .bb-pic { grid-row: 1 / 4; width: clamp(2rem, 1.6rem + 1vw, 3rem); height: clamp(2rem, 1.6rem + 1vw, 3rem); }
.bb-rc-name { font-size: 0.74rem; color: var(--bb-dim); }
.bb-num { display: block; font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.25rem, 0.9rem + 1vw, 2.2rem); line-height: 1.15; color: var(--bb-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-unit { color: var(--st); margin-left: 1px; }
.bb-uwrap { position: relative; display: inline-block; }
.bb-rate { font-size: 0.72rem; color: var(--bb-dim); font-variant-numeric: tabular-nums; min-height: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 시그니처 — 단위 글자 둘레에 별자리가 이어지고 한 번 반짝 */
.bb-constel { position: absolute; left: 50%; top: 50%; width: 3.2em; height: 2.4em; transform: translate(-50%, -52%); overflow: visible; pointer-events: none; animation: bb-constel-out 1.7s ease-out both; }
.bb-constel polyline { fill: none; stroke: var(--bb-chart); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: bb-draw 0.7s 0.1s ease-out forwards; }
.bb-constel circle { fill: var(--bb-starlight); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: bb-dot 0.35s calc(var(--d) * 0.12s) cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.bb-unit.bb-sig { animation: bb-twinkle 1.2s 0.6s ease-out both; }
@keyframes bb-draw { to { stroke-dashoffset: 0; } }
@keyframes bb-dot { to { transform: scale(1); } }
@keyframes bb-constel-out { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bb-twinkle { 0% { text-shadow: none; } 30% { text-shadow: 0 0 0.45em var(--bb-starlight), 0 0 0.9em var(--bb-starlight); color: #fff; } 100% { text-shadow: none; } }

/* ── 배치: 가운데 공장 · 오른쪽 업그레이드·별자리·기록 ── */
.bb-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 760px); gap: clamp(12px, 1vw, 24px); align-items: start; margin-top: 12px; }
.bb-factory { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.login-box { background: var(--bb-panel); border: 1px solid var(--bb-line); border-radius: var(--radius-lg); padding: 18px; text-align: center; }
.login-box h3 { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: 1.25rem; color: var(--bb-text); margin: 0 0 8px; }
.login-box p { font-size: 0.82rem; color: var(--bb-dim); line-height: 1.75; margin: 0 0 14px; }

.bb-sky { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 10px 14px; background: var(--bb-panel); border: 1px solid var(--bb-line); border-radius: var(--radius-lg); }
.bb-tap { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 1.5px solid var(--bb-starlight); background: color-mix(in srgb, var(--bb-starlight) 14%, var(--bb-sky)); color: var(--bb-text); font-family: inherit; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.bb-tap:hover { background: color-mix(in srgb, var(--bb-starlight) 24%, var(--bb-sky)); }
.bb-tap:active { transform: scale(0.97); }
.bb-tap .bb-pic { width: 2.8rem; height: 2.8rem; }
.bb-tap-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.bb-tap-text b { font-size: 0.95rem; }
.bb-tap-text small { font-size: 0.74rem; color: var(--bb-starlight); font-variant-numeric: tabular-nums; }
.bb-tap-hint { flex: 1 1 220px; margin: 0; font-size: 0.78rem; color: var(--bb-dim); line-height: 1.6; }
.bb-buyamt { display: inline-flex; align-items: center; gap: 4px; }
.bb-goal { flex-basis: 100%; margin: 0; padding: 6px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--bb-starlight) 9%, transparent); border: 1px dashed color-mix(in srgb, var(--bb-starlight) 40%, transparent); font-size: 0.78rem; color: var(--bb-text); line-height: 1.5; font-variant-numeric: tabular-nums; }
/* 처음 온 사람 — 밤하늘 누르기가 먼저 눈에 들어오게 */
.bb-sky.bb-first { border-color: var(--bb-starlight); }
.bb-sky.bb-first .bb-tap { padding: 12px 26px 12px 12px; background: var(--bb-starlight); color: var(--bb-sky); }
.bb-sky.bb-first .bb-tap-text b { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: 1.25rem; }
.bb-sky.bb-first .bb-tap-text small { color: var(--bb-sky); }

.bb-lines { display: flex; flex-direction: column; gap: 10px; }
.bb-line { padding: 10px 12px 12px; background: var(--bb-panel); border: 1px solid var(--bb-line); border-left: 4px solid var(--st); border-radius: var(--radius-lg); scroll-margin: calc(var(--topbar-h, 0px) + 12px) 0 90px; }
.bb-line.on { border-color: color-mix(in srgb, var(--st) 55%, transparent); border-left-color: var(--st); }
.bb-line-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bb-line-head .bb-pic { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; }
.bb-lh { margin: 0; font-size: 1rem; font-weight: 800; color: var(--bb-text); }
.bb-lh-no { font-family: "hb-games-display", var(--font-sans); font-weight: 400; color: var(--st); margin-right: 2px; }
.bb-line-rate { margin-left: auto; font-size: 0.76rem; color: var(--bb-dim); font-variant-numeric: tabular-nums; }
.bb-lean { margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius); background: rgba(var(--warn-rgb), 0.12); border: 1px solid rgba(var(--warn-rgb), 0.4); color: var(--bb-text); font-size: 0.78rem; line-height: 1.55; }
.bb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.bb-card { position: relative; overflow: hidden; display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: var(--radius); background: color-mix(in srgb, var(--bb-sky) 55%, transparent); border: 1px solid var(--bb-line); min-width: 0; transition: border-color 0.4s ease; }
.bb-card.can { border-color: color-mix(in srgb, var(--st) 45%, transparent); }
/* 돌아가는 기계 — 카드 아래 실 한 가닥에 단계 색 빛이 흐른다. 모든 카드가 한 박자(.bb-lines의 --bb-flow)로 흘러 컨베이어처럼 보임 */
@property --bb-flow { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.bb-lines { animation: bb-flow 3.6s linear infinite; }
@keyframes bb-flow { from { --bb-flow: -30%; } to { --bb-flow: 130%; } }
.bb-card.run::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--st), transparent) no-repeat; background-size: 30% 100%; background-position: var(--bb-flow) 0; opacity: 0.7; pointer-events: none; }
.bb-line.lean .bb-card.run::after { opacity: 0.3; }
.bb-card .bb-pic { width: clamp(2.6rem, 2.2rem + 1vw, 4rem); height: clamp(2.6rem, 2.2rem + 1vw, 4rem); font-size: 1.1rem; }
.bb-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bb-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.bb-card-name { font-size: 0.86rem; color: var(--bb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-own { font-family: "hb-games-display", var(--font-sans); font-size: 1rem; color: var(--st); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-card-sub { font-size: 0.7rem; color: var(--bb-dim); }
.bb-card-make { font-size: 0.72rem; color: var(--st); font-variant-numeric: tabular-nums; min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-buy { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%; margin-top: 2px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--st); background: color-mix(in srgb, var(--st) 22%, var(--bb-sky)); color: var(--bb-text); font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; }
.bb-buy small { font-weight: 400; font-size: 0.74rem; color: var(--bb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-buy:hover:not(.off) { background: color-mix(in srgb, var(--st) 36%, var(--bb-sky)); }
.bb-buy.off { border-color: var(--bb-line); background: transparent; color: var(--bb-dim); cursor: default; }
.bb-buy.off small { color: var(--bb-dim); }
.bb-keys { margin: 2px 0 0; font-size: 0.72rem; color: var(--bb-dim); }
.bb-keys kbd, .bb-help-list kbd { font-family: inherit; font-size: 0.7rem; padding: 0 5px; border: 1px solid var(--bb-line); border-radius: 4px; color: var(--bb-text); }
.bb-keys-btn { margin-left: 6px; gap: 4px; }

/* 오른쪽 */
.bb-side { min-width: 0; background: var(--bb-panel); border: 1px solid var(--bb-line); border-radius: var(--radius-lg); padding: 10px 12px 14px; position: sticky; top: calc(var(--topbar-h, 0px) + 10px); max-height: calc(100vh - var(--topbar-h, 0px) - 110px); overflow-y: auto; }
.bb-tabs { margin: 0 0 10px; }
.bb-root .tab-btn { color: var(--bb-dim); border-color: var(--bb-line); background: transparent; }
.bb-root .tab-btn.active { background: var(--bb-starlight); color: var(--bb-sky); border-color: var(--bb-starlight); }
.bb-root .tab-btn:hover:not(.active) { color: var(--bb-text); }
.bb-tab-factory { display: none; }
.bb-root .tab-pane { display: none; }
.bb-root .tab-pane.on { display: block; }
.bb-note { font-size: 0.78rem; color: var(--bb-dim); margin: 6px 0 0; line-height: 1.6; }
.bb-h { font-size: 0.9rem; color: var(--bb-text); margin: 14px 0 6px; }
.bb-h small { font-weight: 400; color: var(--bb-dim); margin-left: 4px; }
.bb-root .empty-state { color: var(--bb-dim); padding: 20px 10px; }

.bb-up-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bb-up { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--bb-line); background: color-mix(in srgb, var(--bb-sky) 50%, transparent); }
.bb-up.can { border-color: color-mix(in srgb, var(--bb-starlight) 60%, transparent); }
.bb-up-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bb-up-text b { font-size: 0.84rem; color: var(--bb-text); }
.bb-up-text small { font-size: 0.72rem; color: var(--bb-dim); line-height: 1.5; }
.bb-up-buy { flex: none; font-family: inherit; font-size: 0.76rem; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--bb-starlight); background: color-mix(in srgb, var(--bb-starlight) 20%, var(--bb-sky)); color: var(--bb-text); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bb-up-buy[aria-disabled="true"] { border-color: var(--bb-line); background: transparent; color: var(--bb-dim); cursor: default; }
.bb-more { margin-top: 10px; }
.bb-more summary { cursor: pointer; font-size: 0.8rem; color: var(--bb-dim); padding: 4px 0; }
.bb-more .bb-up-list { margin-top: 6px; }

/* 별자리 나무 — 천문도처럼 점과 선 */
.bb-sp { margin: 0 0 8px; font-size: 0.8rem; color: var(--bb-dim); }
.bb-sp b { color: var(--bb-text); }
.bb-chart { position: relative; width: min(100%, 520px); aspect-ratio: 100 / 106; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bb-chart) 7%, transparent), transparent 70%); border: 1px dashed var(--bb-line); }
.bb-chart-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-chart-lines line { stroke: color-mix(in srgb, var(--bb-chart) 32%, transparent); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.bb-chart-lines line.lit { stroke: var(--bb-starlight); stroke-width: 2px; }
.bb-chart-stars { position: absolute; inset: 0; }
.bb-star { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border: 0; background: none; color: var(--bb-dim); font-family: inherit; cursor: pointer; }
.bb-star-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bb-sky); border: 1.5px solid color-mix(in srgb, var(--bb-chart) 50%, transparent); }
.bb-star-name { font-size: 0.68rem; white-space: nowrap; }
.bb-star.lit { color: var(--bb-text); }
.bb-star.lit .bb-star-dot { width: 14px; height: 14px; background: var(--bb-starlight); border-color: var(--bb-starlight); box-shadow: 0 0 10px var(--bb-starlight); }
.bb-star.can .bb-star-dot { border-color: var(--bb-candy); background: color-mix(in srgb, var(--bb-candy) 40%, var(--bb-sky)); }
.bb-star.can { color: var(--bb-text); }
.bb-star.locked { opacity: 0.55; }
.bb-star.picked .bb-star-dot { outline: 2px solid var(--bb-chart); outline-offset: 3px; }
.bb-star-info { margin-top: 10px; }
.bb-si { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.bb-si .bb-pic { width: 4.5rem; height: 4.5rem; border-radius: var(--radius); }
.bb-si .bb-pic.lit img { filter: drop-shadow(0 0 6px var(--bb-starlight)); }
.bb-si-text b { font-size: 0.95rem; }
.bb-si-text p { margin: 4px 0; font-size: 0.82rem; color: var(--bb-text); line-height: 1.55; }
.bb-si-text small { font-size: 0.74rem; color: var(--bb-dim); }
.bb-galaxy { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--bb-line); }
.bb-gal-need { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--bb-dim); }
.bb-gal-need li::before { content: "○ "; }
.bb-gal-need li.ok { color: var(--bb-text); }
.bb-gal-need li.ok::before { content: "● "; color: var(--bb-milky); }
.bb-gal-need b { font-variant-numeric: tabular-nums; color: var(--bb-text); margin-left: 4px; }
.bb-auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 0.78rem; color: var(--bb-dim); }
.bb-auto b.on { color: var(--ok); }

/* 순위·기록 */
.bb-rank td, .bb-rank th { font-size: 0.82rem; color: var(--bb-text); border-color: var(--bb-line); }
.bb-rank th { color: var(--bb-dim); }
.bb-rank .num { text-align: right; }
.me-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.me-cell { background: color-mix(in srgb, var(--bb-sky) 50%, transparent); border: 1px solid var(--bb-line); border-radius: var(--radius); padding: 8px 10px; }
.mc-label { font-size: 0.7rem; color: var(--bb-dim); }
.mc-value { font-size: 1.05rem; font-weight: 800; color: var(--bb-text); font-variant-numeric: tabular-nums; }
.bb-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.dt-item { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--bb-line); border-radius: var(--radius); padding: 8px 10px; font-size: 0.8rem; color: var(--bb-text); }
.dt-item small { color: var(--bb-dim); }
.dt-item.locked { opacity: 0.55; }
.dt-item .mini-btn, .dt-item .bb-tag { align-self: flex-start; }
.bb-ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.bb-ach li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px dashed var(--bb-line); border-radius: var(--radius); font-size: 0.8rem; color: var(--bb-dim); }
.bb-ach li.done { border-style: solid; border-color: var(--bb-starlight); color: var(--bb-text); }
.bb-me-more { margin-top: 8px; }
.bb-ach-bar, .bb-off-meter { display: block; height: 5px; margin: 0 0 8px; border-radius: 3px; background: color-mix(in srgb, var(--bb-chart) 12%, transparent); overflow: hidden; }
.bb-ach-bar i, .bb-off-meter i { display: block; height: 100%; background: var(--bb-starlight); border-radius: 3px; }
.bb-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bb-hist li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 10px; border-left: 2px solid var(--bb-line); font-size: 0.8rem; color: var(--bb-text); }
.bb-hist li b { color: var(--bb-starlight); font-variant-numeric: tabular-nums; }
.bb-hist li small { color: var(--bb-dim); font-size: 0.7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── 아래 띠 — 별자리 올리기 ── */
.bb-ascend { position: sticky; bottom: 0; z-index: var(--z-sticky, 5); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px max(16px, calc((100% - min(96%, 2400px)) / 2 + 16px)); padding-right: max(130px, calc((100% - min(96%, 2400px)) / 2 + 16px)); background: color-mix(in srgb, var(--bb-sky) 92%, transparent); border-top: 1px solid var(--bb-line); backdrop-filter: blur(6px); }
.bb-asc-info { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; min-width: 0; }
.bb-asc-label { font-size: 0.8rem; color: var(--bb-dim); font-variant-numeric: tabular-nums; }
.bb-ascend.ready .bb-asc-label { color: var(--bb-text); }
.bb-asc-bar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--bb-chart) 12%, transparent); overflow: hidden; }
.bb-asc-bar i { display: block; height: 100%; width: 0; background: var(--bb-chart); border-radius: 3px; }
.bb-ascend.ready .bb-asc-bar i { background: var(--bb-starlight); }

/* ── 돌아온 사람 창 ── */
.bb-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-modal, 2000); background: rgba(0, 0, 0, 0.55); align-items: center; justify-content: center; padding: 20px; }
.bb-overlay.open { display: flex; }
.bb-box { width: min(440px, 100%); max-height: 86vh; overflow-y: auto; text-align: center; background: var(--bb-sky-2); border: 1px solid color-mix(in srgb, var(--bb-starlight) 50%, transparent); border-radius: var(--radius-lg); padding: 22px 20px 18px; color: var(--bb-text); }
.bb-box > .bb-pic { width: 5rem; height: 5rem; font-size: 1.6rem; }
.bb-box h3 { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: 1.5rem; margin: 8px 0 6px; }
.bb-off-lead { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.6; }
.bb-off-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.bb-off-kicker { margin: 0 0 10px; font-size: 0.74rem; color: var(--bb-dim); }
.bb-off-list li { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--bb-dim); padding: 4px 0; border-bottom: 1px solid var(--bb-line); }
.bb-off-list li b { margin-left: auto; color: var(--bb-text); font-variant-numeric: tabular-nums; }
.bb-off-list li small { min-width: 5.5em; text-align: right; font-size: 0.72rem; color: var(--bb-dim); font-variant-numeric: tabular-nums; }
.bb-off-list li.bb-off-time { flex-direction: column; align-items: stretch; gap: 4px; border-bottom: 0; padding-bottom: 8px; }
.bb-off-list li.bb-off-time b { margin-left: 4px; }
.bb-off-list li.bb-off-time small { text-align: left; min-width: 0; }
.bb-off-list .bb-off-meter { margin: 0; height: 6px; }
.bb-off-list li.bb-off-auto { border-bottom: 0; color: var(--bb-text); }
.bb-off-list li.bb-off-auto b { margin-left: 4px; }
.bb-off-list .bb-pic { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; }
.bb-off-cap { margin: 0 0 12px; padding: 6px 10px; border-radius: var(--radius); background: rgba(var(--warn-rgb), 0.12); border: 1px solid rgba(var(--warn-rgb), 0.4); font-size: 0.8rem; }

/* ── 반짝 시간 · 오늘의 별똥별 ── */
.bb-boost { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bb-meteor { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bb-milky); background: color-mix(in srgb, var(--bb-milky) 18%, var(--bb-sky)); color: var(--bb-text); font-family: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.bb-meteor small { font-weight: 400; font-size: 0.74rem; color: var(--bb-milky); }
.bb-meteor:hover { background: color-mix(in srgb, var(--bb-milky) 30%, var(--bb-sky)); }
.bb-chip-time { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--bb-line); font-size: 0.76rem; color: var(--bb-dim); }
.bb-chip-time b { color: var(--bb-text); font-variant-numeric: tabular-nums; }
.bb-chip-time.m { border-color: var(--bb-milky); }
.bb-chip-time.s { border-color: var(--bb-candy); }
.bb-buy em { font-style: normal; font-weight: 400; font-size: 0.72rem; color: var(--bb-dim); margin-right: auto; }

/* ── 갈림길 · 도전 · 자동 구매 단계 ── */
.bb-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.bb-path { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--bb-line); border-radius: var(--radius); font-size: 0.82rem; }
.bb-path small { color: var(--bb-dim); line-height: 1.5; font-size: 0.74rem; }
.bb-path.on { border-color: var(--bb-starlight); }
.bb-path .mini-btn, .bb-path .bb-tag { align-self: flex-start; }
.bb-root .mini-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bb-chs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bb-ch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px dashed var(--bb-line); border-radius: var(--radius); }
.bb-ch.done { border-style: solid; border-color: var(--bb-milky); }
.bb-ch.run { border-style: solid; border-color: var(--bb-candy); }
.bb-ch.locked { opacity: 0.6; }
.bb-ch .bb-pic { width: 2.4rem; height: 2.4rem; font-size: 0.9rem; }
.bb-path .bb-pic-path { width: 3.6rem; height: 3.6rem; font-size: 1.2rem; }
.bb-meteor .bb-pic { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; align-self: center; }
.bb-h-pic { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bb-h-pic .bb-pic { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
.bb-ch-reward { color: var(--bb-milky) !important; }
.bb-auto-stages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 6px; font-size: 0.74rem; color: var(--bb-dim); }
.bb-auto-stages span { margin-right: 2px; }
.bb-ch-band { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; color: var(--bb-candy); font-variant-numeric: tabular-nums; }
.bb-off-advice { margin: 0 0 12px; padding: 8px 12px; text-align: left; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--bb-starlight) 40%, transparent); font-size: 0.8rem; }
.bb-off-advice ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; color: var(--bb-text); }

/* ── 단축키 안내 ── */
.bb-help-box { text-align: left; }
.bb-help-box h3 { text-align: center; }
.bb-help-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 6px 0 16px; font-size: 0.84rem; }
.bb-help-list dt { white-space: nowrap; }
.bb-help-list dd { margin: 0; color: var(--bb-dim); line-height: 1.5; }
.bb-help-box .bb-big { display: flex; margin: 0 auto; }

/* ── 별자리 올리기 · 은하 넘어가기 순간 — 시그니처(단위 별자리 이음)를 화면 가운데에서 한 번 크게 ── */
.bb-burst { display: none; position: fixed; inset: 0; z-index: var(--z-popup, 1900); flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px; text-align: center; color: var(--bb-chart); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bb-sky) 94%, transparent) 0%, color-mix(in srgb, var(--bb-sky) 78%, transparent) 50%, color-mix(in srgb, var(--bb-sky) 55%, transparent) 100%); cursor: pointer; }
.bb-burst.show { display: flex; animation: bb-burst-out 2.6s ease-in-out both; }
.bb-burst svg { width: min(78vw, 640px); height: auto; overflow: visible; }
.bb-burst polyline { fill: none; stroke: var(--bb-chart); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: bb-draw 0.9s 0.35s ease-out forwards; }
.bb-burst circle { fill: var(--bb-starlight); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: bb-dot 0.4s calc(var(--d) * 0.1s) cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.bb-burst.galaxy circle { fill: var(--bb-milky); }
.bb-burst-big { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(2rem, 1.4rem + 3vw, 4.4rem); color: var(--bb-starlight); line-height: 1.1; opacity: 0; animation: bb-rise 0.6s 1s ease-out forwards; font-variant-numeric: tabular-nums; }
.bb-burst.galaxy .bb-burst-big { color: var(--bb-milky); }
.bb-burst-small { font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.3rem); color: var(--bb-chart); opacity: 0; animation: bb-rise 0.6s 1.15s ease-out forwards; }
@keyframes bb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bb-burst-out { 0% { opacity: 0; } 8%, 82% { opacity: 1; } 100% { opacity: 0; } }

/* ── 창 (명예의 전당) — 사이트 토큰 ── */

/* ── 채팅 (족보·동네와 같은 모양) — 아래 별자리 올리기 띠 위로 띄움 ── */

/* ── 4K — 큰 화면은 글자도 함께 키움 ── */
@media (min-width: 2400px) {
    .bb-root { font-size: 1.2rem; }
    .bb-root .chip-btn, .bb-root .tab-btn, .bb-root .mini-btn { font-size: 0.95rem; }
    .bb-rc-name, .bb-rate, .bb-line-rate, .bb-card-sub, .bb-card-make, .bb-keys, .bb-tap-hint, .bb-goal, .bb-asc-label { font-size: 0.9rem; }
    .bb-help-list, .bb-off-list li { font-size: 1rem; }
    .bb-box { width: min(560px, 100%); }
    .bb-card-name, .bb-buy, .bb-up-text b { font-size: 1.02rem; }
    .bb-buy small, .bb-up-text small, .bb-up-buy, .bb-star-name { font-size: 0.88rem; }
    .bb-lh { font-size: 1.2rem; }
    .bb-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .bb-chart { width: min(100%, 720px); }
}

/* ── 태블릿 — 오른쪽 칸을 아래로 ── */
@media (max-width: 1024px) {
    .bb-root .wrap { max-width: 100%; }
    .bb-stage { grid-template-columns: minmax(0, 1fr); }
    .bb-side { position: static; max-height: none; }
}

/* ── 휴대폰 — 공장·업그레이드·별자리·기록을 탭으로 ── */
@media (max-width: 720px) {
    .bb-root .wrap { padding: 10px 10px 16px; }
    .bb-notation { margin-left: 0; }
    .bb-snd-vol { width: 80px; }
    .bb-res { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
    .bb-rc { padding: 7px 8px; column-gap: 6px; }
    .bb-rc .bb-pic { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; }
    .bb-num { font-size: 1.15rem; }
    .bb-stage { display: flex; flex-direction: column; align-items: stretch; }
    .bb-side { order: -1; padding: 0; background: none; border: 0; }
    .bb-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 8px; }
    .bb-tabs .tab-btn { flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: 0.76rem; white-space: nowrap; justify-content: center; text-align: center; }
    .bb-tab-factory { display: inline-flex; justify-content: center; }
    .bb-root[data-mtab="factory"] .bb-side .tab-pane { display: none; }
    .bb-root:not([data-mtab="factory"]) .bb-factory { display: none; }
    .bb-root:not([data-mtab="factory"]) .bb-side .tab-pane.on { background: var(--bb-panel); border: 1px solid var(--bb-line); border-radius: var(--radius-lg); padding: 10px; }
    .bb-sky { padding: 10px; }
    .bb-tap-hint { flex-basis: 100%; order: 3; }
    .bb-buyamt { margin-left: auto; }
    .bb-line-rate { margin-left: 0; flex-basis: 100%; }
    .bb-keys { display: none; }
    .bb-ascend { padding: 8px 10px; padding-right: 104px; gap: 8px; }
    .bb-ascend .bb-big { padding: 9px 14px; font-size: 0.84rem; }
    .hbs-overlay, .bb-overlay { padding: 10px; align-items: flex-end; }
    .bb-root .mini-btn, .bb-root .chip-btn, .chat-close, .chat-send, .sx-close { min-height: 38px; }
}

/* ── 모션 줄이기 — 별자리 이음 없이 단위만 바뀜 ── */
@media (prefers-reduced-motion: reduce) {
    .bb-constel { display: none; }
    .bb-unit.bb-sig { animation: none; }
    .bb-tap:active { transform: none; }
    .bb-lines { animation: none; }
    .bb-card.run::after { background: var(--st); opacity: 0.35; }
    .bb-burst { display: none !important; }
    .bb-card, .bb-buy { transition: none; }
}
body[data-hb-chat] :is(.chat-fab, .chat-panel) { --chat-accent: var(--bb-starlight); --chat-accent-ink: var(--brand-ink); } /* 채팅 단추·창 공용 규칙(style.css)에 넘기는 이 게임 색 */