/* ─────────────────────────────────────────────
 * 한봇 성벽 (2026-10-28) — SPEC §7 디자인 토큰 (사용자 승인). 소재: 밤의 한양도성·단청·봉수대
 * 밤하늘 남청 #24304f(배경 — 검정 피함) · 성곽 돌 #8f8b80 · 길(흙) #6f5a3e · 단청 녹청 #3f8f86(탑·선택) · 단청 주홍 #b5452f(위험·성벽 체력) · 횃불 주황 #e8893a(엽전·강조)
 * 서체: 제목·웨이브 번호·점수만 도현(hb-games-display), 숫자 tabular-nums.
 * 시그니처(하나): 위 띠 봉수대 다섯 개 — 4웨이브마다 하나씩 켜지고 20웨이브를 다 막으면 함께 타오름(.sb-beacon.on · .sb-flicker · .sb-blaze).
 * 판 화면이라 어두운 바탕 고정(data-theme-lock="dark", 족보와 같은 방식) — 공용 변수만 이 범위에서 바꿔 끼운다.
 * ───────────────────────────────────────────── */
.sb-root, .hbs-overlay, .chat-fab, .chat-panel {
    --sb-night: #24304f;
    --sb-stone: #8f8b80;
    --sb-earth: #6f5a3e;
    --sb-dancheong: #3f8f86;
    --sb-vermilion: #b5452f;
    --sb-torch: #e8893a;
    /* 파생 — 토큰에서만 섞는다 */
    --sb-night-0: color-mix(in srgb, var(--sb-night) 78%, #000);
    --sb-night-2: color-mix(in srgb, var(--sb-night) 86%, var(--sb-stone));
    --sb-night-3: color-mix(in srgb, var(--sb-night) 72%, var(--sb-stone));
    --sb-paper: color-mix(in srgb, var(--sb-stone) 18%, #fff);
    --sb-line: color-mix(in srgb, var(--sb-stone) 26%, var(--sb-night));
    --sb-line-2: color-mix(in srgb, var(--sb-stone) 42%, var(--sb-night));
    /* 공용 변수 덮어쓰기 — 이 페이지 안에서만 */
    --brand: var(--sb-torch);
    --brand-rgb: 232, 137, 58;
    --brand-ink: #2a1606;
    --brand-tint: rgba(232, 137, 58, 0.1);
    --bg-base: var(--sb-night);
    --bg-card: var(--sb-night-2);
    --bg-elev: var(--sb-night-3);
    --bg-input: var(--sb-night-0);
    --bg-deep: var(--sb-night-0);
    --text-main: var(--sb-paper);
    --text-sub: color-mix(in srgb, var(--sb-paper) 82%, var(--sb-night));
    --text-dim: color-mix(in srgb, var(--sb-paper) 60%, var(--sb-night));
    --border: var(--sb-line);
    --border-strong: var(--sb-line-2);
    --border-dim: color-mix(in srgb, var(--sb-stone) 16%, var(--sb-night));
    --fg-rgb: 239, 237, 233;
    --bk: clamp(24px, 1.9vw, 52px);   /* 봉수대 한 칸 */
}
.sb-root {
    background: var(--sb-night);
    color: var(--text-sub);
    min-height: calc(100vh - var(--topbar-h, 0px));
}
body:has(> .sb-root) { background: var(--sb-night-0); }
.sb-root [hidden] { display: none !important; }
.sb-root :focus-visible, .hbs-overlay :focus-visible, .chat-panel :focus-visible { outline: 2px solid var(--sb-torch); outline-offset: 2px; }
.sb-num { font-variant-numeric: tabular-nums; }
.sb-root .wrap { max-width: 98%; margin: 0 auto; padding: 10px 16px 90px; }
.sb-root .top-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sb-root .page-title { font-family: "hb-games-display", var(--font-sans); font-weight: 400; color: var(--text-main); margin: 0; font-size: clamp(1.4rem, 1.1rem + 0.8vw, 2.2rem); }
.sb-root .page-sub { font-size: 0.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sb-closed { display: none; font-size: 0.78rem; color: var(--sb-torch); border: 1px solid color-mix(in srgb, var(--sb-torch) 45%, transparent); border-radius: var(--radius); padding: 4px 12px; }
.sb-closed.show { display: inline-block; }
.sb-admin-link { margin-left: auto; }
.sb-root .back-btn { display: inline-flex; align-items: center; font-size: 0.82rem; color: var(--text-dim); text-decoration: none; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.sb-root .back-btn:hover { color: var(--text-main); border-color: var(--border-strong); }
.sb-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; }

/* 단추 — 주 행동은 횃불 주황 테두리 */
.sb-root .big-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
    background: color-mix(in srgb, var(--sb-torch) 22%, var(--bg-card)); border: 1.5px solid var(--sb-torch); border-radius: var(--radius);
    color: var(--text-main); font-family: inherit; font-size: 0.92rem; font-weight: 800; padding: 10px 20px; cursor: pointer;
}
.sb-root .big-btn small { font-weight: 400; font-size: 0.76em; color: var(--text-sub); }
.sb-root .big-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--sb-torch) 36%, var(--bg-card)); }
.sb-root .big-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sb-root .mini-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-sub); font-family: inherit; font-size: 0.76rem; padding: 6px 11px; cursor: pointer; }
.sb-root .mini-btn small { color: var(--text-dim); }
.sb-root .mini-btn:hover { color: var(--text-main); border-color: var(--sb-torch); }
.sb-root .chip-btn { font-family: inherit; font-size: 0.76rem; color: var(--text-sub); background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.sb-root .chip-btn:hover { color: var(--text-main); }
.sb-root .chip-btn.on { color: var(--text-main); border-color: var(--sb-dancheong); background: color-mix(in srgb, var(--sb-dancheong) 30%, var(--bg-card)); font-weight: 700; }
.sb-root .filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sb-tag { display: inline-block; font-size: 0.68rem; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--text-dim); vertical-align: 1px; }
.sb-root .title-chip { white-space: nowrap; font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; background: rgba(var(--fg-rgb), 0.08); color: var(--text-sub); }
.sb-small { margin: 4px 0 0; font-size: 0.76rem; color: var(--text-dim); line-height: 1.55; }


/* ── 배치: 가운데 판(화면 높이에 맞춤) · 오른쪽 탑 고르기·고른 탑·순위 ── */
.sb-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 760px); gap: clamp(10px, 1vw, 24px); align-items: start; margin-top: 10px; }
.sb-field { position: sticky; top: calc(var(--topbar-h, 0px) + 8px); display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* 위 띠 */
.sb-hud { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 28px); flex-wrap: wrap; padding: 8px 12px; background: var(--sb-night-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sb-stats { display: flex; gap: clamp(10px, 1.4vw, 32px); margin: 0; flex-wrap: wrap; }
.sb-stat { display: flex; flex-direction: column; min-width: 0; }
.sb-stat dt { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--text-dim); }
.sb-stat dd { margin: 0; font-family: "hb-games-display", var(--font-sans); font-size: clamp(1.15rem, 0.9rem + 0.6vw, 2rem); color: var(--text-main); line-height: 1.1; }
.sb-stat-hp dd { color: color-mix(in srgb, var(--sb-vermilion) 55%, var(--sb-paper)); }
.sb-stat-hp.hit dd { color: var(--sb-vermilion); }
.sb-stat-coin dd { color: color-mix(in srgb, var(--sb-torch) 75%, var(--sb-paper)); }
.sb-ctrl { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.sb-cbtn { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--sb-night); color: var(--text-main); font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.sb-cbtn:hover:not(:disabled) { border-color: var(--sb-torch); }
.sb-cbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.sb-cbtn[aria-pressed="true"] { border-color: var(--sb-torch); background: color-mix(in srgb, var(--sb-torch) 24%, var(--sb-night)); }
.sb-call { border-color: color-mix(in srgb, var(--sb-torch) 70%, var(--border-strong)); }

/* 그림 아이콘 — 그림이 없으면 작은 색 점 (공개 전 그림으로 채워짐) */
.sb-ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: center / contain no-repeat; }
.sb-ico:not(.has) { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--sb-stone); }
.sb-ico[data-ui="coin"]:not(.has) { background: var(--sb-torch); }
.sb-ico[data-ui="wall_hp"]:not(.has) { background: var(--sb-vermilion); border-radius: 2px; }
.sb-ico[data-ui="wave"]:not(.has) { background: var(--sb-dancheong); }
.sb-cbtn .sb-ico:not(.has) { display: none; }

/* ── 시그니처: 봉수대 다섯 ── */
.sb-beacons { display: flex; align-items: flex-end; gap: calc(var(--bk) * 0.28); padding: 2px 4px; }
.sb-beacon { position: relative; width: var(--bk); height: calc(var(--bk) * 1.15); flex: none; background: center bottom / contain no-repeat; }
/* 그림 없을 때 — 돌로 쌓은 연조(굴뚝) + 불꽃 */
.sb-beacon::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 52%; background: var(--sb-stone); border-radius: 30% 30% 4px 4px; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--sb-stone) 60%, var(--sb-night)); }
.sb-beacon::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 46%; height: 42%; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%; background: color-mix(in srgb, var(--sb-stone) 40%, var(--sb-night)); transform-origin: 50% 100%; }
.sb-beacon.on::after { background: radial-gradient(ellipse at 50% 70%, #ffd9a0 0 22%, var(--sb-torch) 48%, var(--sb-vermilion) 100%); box-shadow: 0 0 calc(var(--bk) * 0.5) color-mix(in srgb, var(--sb-torch) 70%, transparent); }
.sb-beacons.art .sb-beacon { background-image: var(--beacon-off); }
.sb-beacons.art .sb-beacon.on { background-image: var(--beacon-on); filter: drop-shadow(0 0 calc(var(--bk) * 0.22) color-mix(in srgb, var(--sb-torch) 75%, transparent)); }
.sb-beacons.art .sb-beacon::before, .sb-beacons.art .sb-beacon::after { display: none; }
.sb-flicker::after { animation: sb-flick 1.3s ease-in-out infinite alternate; }
.sb-beacons.art .sb-flicker { animation: sb-flick-img 1.3s ease-in-out infinite alternate; }
@keyframes sb-flick { 0% { transform: scale(1, 1); } 45% { transform: scale(0.92, 1.1) skewX(-3deg); } 100% { transform: scale(1.04, 0.95) skewX(2deg); } }
@keyframes sb-flick-img { 0% { filter: drop-shadow(0 0 calc(var(--bk) * 0.18) var(--sb-torch)) brightness(1); } 100% { filter: drop-shadow(0 0 calc(var(--bk) * 0.32) var(--sb-torch)) brightness(1.12); } }
.sb-kindle { animation: sb-kindle 0.9s ease-out 1; }
@keyframes sb-kindle { 0% { transform: translateY(2px) scale(0.9); } 40% { transform: translateY(-3px) scale(1.12); } 100% { transform: none; } }
.sb-blaze .sb-beacon { animation: sb-blaze 1.1s ease-in-out infinite alternate; }
.sb-blaze .sb-beacon::after { box-shadow: 0 0 calc(var(--bk) * 0.9) var(--sb-torch); }
@keyframes sb-blaze { from { transform: none; } to { transform: translateY(-2px) scale(1.08); } }
.sb-beacons.all .sb-beacon.on::after { box-shadow: 0 0 calc(var(--bk) * 0.8) var(--sb-torch); }

/* 판 */
.sb-board {
    position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--sb-off, 190px)); max-height: calc(100dvh - var(--sb-off, 190px)); min-height: 240px;
    background: var(--sb-night-0); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.sb-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: manipulation; cursor: pointer; user-select: none; -webkit-user-select: none; }
.sb-canvas:focus-visible { outline: 3px solid var(--sb-torch); outline-offset: -3px; }
.sb-hint, .sb-paused { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sb-hint { bottom: 10px; background: rgba(20, 26, 44, 0.86); color: var(--sb-paper); border: 1px solid var(--sb-torch); }
.sb-paused { top: 10px; background: color-mix(in srgb, var(--sb-torch) 88%, #000); color: #2a1606; font-weight: 800; }

/* 시작 화면 · 끝난 판 — 판 위에 겹침 */
.sb-intro, .sb-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 2vw, 40px); background: color-mix(in srgb, var(--sb-night-0) 66%, transparent); overflow-y: auto; }
.sb-intro-box, .sb-result-box { width: min(560px, 100%); background: color-mix(in srgb, var(--sb-night-2) 94%, transparent); border: 1px solid var(--border-strong); border-top: 3px solid var(--sb-torch); border-radius: var(--radius-lg); padding: clamp(14px, 1.6vw, 30px); text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); }
.sb-intro-title, .sb-result-title { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 0.8vw, 2.3rem); color: var(--text-main); margin: 0 0 4px; }
.sb-intro-map { margin: 0 0 10px; font-size: 0.86rem; color: var(--text-sub); }
.sb-intro-map b { color: color-mix(in srgb, var(--sb-dancheong) 45%, var(--sb-paper)); }
.sb-rule-list { margin: 0 auto 14px; padding-left: 1.4em; text-align: left; font-size: 0.84rem; line-height: 1.7; color: var(--text-sub); max-width: 46em; }
.sb-rule-list b { color: var(--text-main); }
.sb-start { font-size: 1.05rem; padding: 12px 28px; }
.sb-intro-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sb-intro-note b { color: var(--text-main); }
.login-box { margin-top: 6px; }
.login-box p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.7; margin: 0 0 10px; }
.sb-result-box.won { border-top-color: var(--sb-dancheong); }
.sb-result-score { margin: 6px 0 4px; font-size: 1rem; color: var(--text-sub); }
.sb-result-score .sb-num { font-family: "hb-games-display", var(--font-sans); font-size: clamp(2rem, 1.5rem + 1.5vw, 3.6rem); color: var(--text-main); margin-right: 4px; }
.sb-result-sub { margin: 4px 0 0; font-size: 0.84rem; color: var(--text-sub); }
.sb-result-sub b { color: var(--text-main); font-variant-numeric: tabular-nums; }
.sb-result-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }

/* 옆 칸 */
.sb-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sb-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; }
.sb-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 0.92rem; color: var(--text-main); }
.sb-h small { font-size: 0.72rem; font-weight: 400; color: var(--text-dim); }
.sb-h3 { font-size: 0.86rem; color: var(--text-main); margin: 12px 0 6px; }
.sb-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }   /* 탑 7종 — 4+3 */
.sb-tcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--sb-night); color: var(--text-main); font-family: inherit; cursor: pointer; min-width: 0; }
.sb-tcard:hover { border-color: var(--sb-dancheong); }
.sb-tcard[aria-pressed="true"] { border-color: var(--sb-dancheong); background: color-mix(in srgb, var(--sb-dancheong) 30%, var(--sb-night)); box-shadow: inset 0 0 0 1px var(--sb-dancheong); }
.sb-tcard.cant { opacity: 0.5; }
.sb-tkey { position: absolute; top: 3px; left: 5px; font-size: 0.64rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sb-timg { display: block; width: clamp(34px, 2.8vw, 72px); aspect-ratio: 1; background: center / contain no-repeat; }
.sb-timg:not(.has) { display: flex; align-items: center; justify-content: center; border-radius: 22%; background: color-mix(in srgb, var(--sb-dancheong) 70%, var(--sb-night)); box-shadow: inset 0 0 0 2px var(--sb-vermilion); }
.sb-timg:not(.has)::before { content: attr(data-glyph); font-family: "hb-games-display", var(--font-sans); font-size: 1.15em; color: var(--sb-paper); }
.sb-tname { font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sb-tcost { font-size: 0.74rem; color: color-mix(in srgb, var(--sb-torch) 75%, var(--sb-paper)); }
.sb-tcost::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 3px; border-radius: 50%; background: var(--sb-torch); vertical-align: 0.05em; }

.sb-info-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.sb-info-head .sb-h { margin: 0; }
.sb-info-head .sb-timg { width: clamp(42px, 3.2vw, 84px); }
.sb-stat-line { margin: 8px 0; font-size: 0.78rem; color: var(--text-sub); line-height: 1.6; }
.sb-modes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sb-info-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.sb-info-act .big-btn { flex: 1 1 auto; }
.sb-up.cant, .sb-branch.cant { opacity: 0.55; }
.sb-branches { display: grid; gap: 6px; flex: 1 1 100%; }
.sb-branch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; text-align: left; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--sb-dancheong); background: color-mix(in srgb, var(--sb-dancheong) 16%, var(--bg-card)); color: var(--text-main); font-family: inherit; font-size: 0.86rem; cursor: pointer; }
.sb-branch:hover { background: color-mix(in srgb, var(--sb-dancheong) 30%, var(--bg-card)); }
.sb-branch small { color: color-mix(in srgb, var(--sb-torch) 75%, var(--sb-paper)); }
.sb-branch span { flex: 1 1 100%; font-size: 0.72rem; color: var(--text-dim); }
.sb-sell:hover { border-color: var(--sb-vermilion); }

/* 내 기록 띠 */
.me-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.me-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 9px; min-width: 0; }
.mc-label { font-size: 0.68rem; color: var(--text-dim); }
.mc-value { font-size: 0.98rem; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 탭 */
.sb-tabs { margin: 2px 0 0; }
.sb-root .tab-pane { display: none; }
.sb-root .tab-pane.on { display: block; }
.sb-rank td, .sb-rank th { font-size: 0.82rem; }
.sb-rank td.num, .sb-rank td:last-child { white-space: nowrap; }
.sb-rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sb-rec-grid > div { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 9px; }
.sb-rec-grid small { font-size: 0.68rem; color: var(--text-dim); }
.sb-rec-grid b { color: var(--text-main); }
.sb-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sb-runs li { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 8px; align-items: baseline; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-dim); }
.sb-runs b { color: var(--text-main); }
.sb-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.sb-titem { display: flex; flex-direction: column; gap: 3px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 0.8rem; color: var(--text-main); }
.sb-titem small { color: var(--text-dim); }
.sb-titem.locked { opacity: 0.55; }
.sb-titem .mini-btn, .sb-titem .sb-tag { align-self: flex-start; }
.sb-ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.sb-ach li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-dim); }
.sb-ach li.done { border-style: solid; border-color: var(--sb-dancheong); color: var(--text-main); }

/* ── 창 (명예의 전당) ── */

/* ── 채팅 (동네와 같은 모양) ── */

/* ─────────────────────────────────────────────
 * 고도화 (2026-10-28 SC) — 연출·소리·가독성. 새 색 없음: 모두 위 6색 토큰에서 섞는다.
 * 시그니처는 여전히 봉수대 하나 — 아래 효과는 짧고 조용하게, 봉화가 오르는 순간(.sb-beacon-cap)만 조금 길게.
 * ───────────────────────────────────────────── */
.sb-beacon-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.sb-beacon-cap { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: 0.7rem; font-weight: 700; color: color-mix(in srgb, var(--sb-torch) 70%, var(--sb-paper)); opacity: 0; pointer-events: none; z-index: 2; }
.sb-beacon-cap.show { animation: sb-cap 2.6s ease-out 1 both; }
@keyframes sb-cap { 0% { opacity: 0; transform: translate(-50%, -3px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* 엽전 +n */
.sb-stat-coin { position: relative; }
.sb-coin-pop { position: absolute; left: 100%; top: 52%; margin-left: 4px; font-size: 0.82rem; font-weight: 800; color: color-mix(in srgb, var(--sb-torch) 70%, #fff); opacity: 0; pointer-events: none; white-space: nowrap; }
.sb-coin-pop.show { animation: sb-pop 1.1s ease-out 1 both; }
@keyframes sb-pop { 0% { opacity: 0; transform: translateY(4px); } 18% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

/* 성벽 위험 — 숫자 주홍 + 판 안쪽 테두리 (깜빡임 없이 고정, 피해 순간에만 한 번 번쩍) */
.sb-stat-hp.danger dd { color: var(--sb-vermilion); }
.sb-stat-hp.danger dt { color: color-mix(in srgb, var(--sb-vermilion) 70%, var(--sb-paper)); }
.sb-board::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 0 transparent; transition: box-shadow 0.4s; }
.sb-board.danger::after { box-shadow: inset 0 0 calc(var(--bk) * 1.2) color-mix(in srgb, var(--sb-vermilion) 55%, transparent); }
.sb-board.hurt::after { animation: sb-hurt 0.45s ease-out 1; }
@keyframes sb-hurt { 0% { box-shadow: inset 0 0 calc(var(--bk) * 1.6) color-mix(in srgb, var(--sb-vermilion) 80%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

/* 속도 — 1×·2×·3× 세 칸이 한 덩어리 */
.sb-speed { display: inline-flex; }
.sb-speed .sb-cbtn { border-radius: 0; margin-left: -1px; min-width: 2.6em; justify-content: center; }
.sb-speed .sb-cbtn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.sb-speed .sb-cbtn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.sb-speed .sb-cbtn[aria-pressed="true"] { position: relative; z-index: 1; }
/* 소리 켜기/끄기 · 크기 */
.sb-sound { display: inline-flex; align-items: center; gap: 6px; }
.sb-sound .sb-cbtn[aria-pressed="false"] { color: var(--text-dim); }
.sb-vol { width: clamp(56px, 5vw, 120px); accent-color: var(--sb-torch); }
.sb-vol:disabled { opacity: 0.4; }
/* 봉화 신호 — 다시 쓸 수 있을 때까지 밑줄이 차오름(--cd 0~1) */
.sb-signal { position: relative; overflow: hidden; }
.sb-signal::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--cd, 0) * 100%); background: var(--sb-torch); transition: width 0.25s linear; }
.sb-signal.ready { border-color: var(--sb-torch); }
.sb-signal-cd { font-size: 0.72rem; font-weight: 400; color: var(--text-dim); }
.sb-signal-cd:empty { display: none; }

/* 다음 웨이브 미리보기 */
.sb-hud-row2 { flex: 1 1 100%; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--border-dim); min-height: 30px; }
.sb-next { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 0.74rem; color: var(--text-dim); min-width: 0; }
.sb-hud-row2 .sb-sound { margin-left: auto; }
.sb-mini { min-height: 28px; padding: 3px 10px; font-size: 0.74rem; }
.sb-next-h { flex: none; white-space: nowrap; font-weight: 700; color: var(--text-sub); margin-right: 2px; }
.sb-echip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 2px; border-radius: 999px; background: var(--sb-night); border: 1px solid var(--border); color: var(--text-main); font-weight: 700; }
.sb-echip i { display: inline-block; width: 1.7em; height: 1.7em; border-radius: 50%; background: center / contain no-repeat; }
.sb-echip i[style*="background-color"] { width: 0.9em; height: 0.9em; margin: 0 0.3em; }
.sb-next-more { white-space: nowrap; }
.sb-echip.boss { border-color: var(--sb-vermilion); background: color-mix(in srgb, var(--sb-vermilion) 22%, var(--sb-night)); }

/* 웨이브 알림 띠 — 판 위쪽 가운데, 짧게 */
.sb-banner { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 26px 10px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--sb-night-0) 84%, transparent); border: 1px solid var(--border-strong); border-bottom: 2px solid var(--sb-dancheong); pointer-events: none; text-align: center; max-width: calc(100% - 24px); z-index: 3; }
.sb-banner small { font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.08em; }
.sb-banner b { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.5rem, 1rem + 1.6vw, 3.2rem); line-height: 1.05; color: var(--text-main); }
.sb-banner b i { font-style: normal; font-size: 0.5em; color: var(--text-dim); margin-left: 2px; }
.sb-banner span { font-size: 0.8rem; color: var(--text-sub); }
.sb-banner.boss { border-bottom-color: var(--sb-vermilion); background: color-mix(in srgb, var(--sb-vermilion) 26%, var(--sb-night-0)); }
.sb-banner.boss b { font-size: clamp(1.3rem, 0.9rem + 1.3vw, 2.6rem); color: color-mix(in srgb, var(--sb-torch) 40%, #fff); }
.sb-banner.show { animation: sb-banner 1.8s ease-out 1 both; }
.sb-banner.boss.show { animation-duration: 2.6s; }
@keyframes sb-banner { 0% { opacity: 0; transform: translate(-50%, -10px); } 12%, 78% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* 우두머리 체력 띠 */
.sb-bossbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 3px; padding: 5px 10px 7px; border-radius: var(--radius); background: color-mix(in srgb, var(--sb-night-0) 86%, transparent); border: 1px solid color-mix(in srgb, var(--sb-vermilion) 60%, var(--border)); pointer-events: none; z-index: 2; }
.sb-bossbar-name { font-size: 0.74rem; font-weight: 800; color: var(--text-main); }
.sb-bossbar-track { display: block; height: 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.sb-bossbar-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sb-vermilion), var(--sb-torch)); transition: width 0.2s linear; }
.sb-board:has(.sb-bossbar:not([hidden])) .sb-hint { bottom: 62px; }

/* 시작 화면 — 오늘의 지도·요일 규칙·남은 도전 */
.sb-intro-day { margin: 0 0 2px; font-size: 0.76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sb-intro-map b { font-size: 1.05rem; }
.sb-intro-map small { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--text-dim); }
.sb-rule-card { display: grid; gap: 2px; margin: 0 auto 10px; max-width: 30em; padding: 8px 14px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--sb-dancheong) 60%, var(--border)); background: color-mix(in srgb, var(--sb-dancheong) 16%, var(--sb-night)); }
.sb-rule-card small { font-size: 0.7rem; color: var(--text-dim); }
.sb-rule-card b { font-size: 0.98rem; color: var(--text-main); }
.sb-rule-card span { font-size: 0.8rem; color: var(--text-sub); }
.sb-intro-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; }
.sb-intro-facts div { display: flex; gap: 6px; align-items: baseline; font-size: 0.8rem; }
.sb-intro-facts dt { color: var(--text-dim); }
.sb-intro-facts dd { margin: 0; color: var(--text-main); font-weight: 700; }
.sb-howto { margin: 0 auto 12px; max-width: 46em; text-align: left; }
.sb-howto summary { cursor: pointer; font-size: 0.8rem; color: var(--text-sub); text-align: center; padding: 4px; list-style-position: inside; }
.sb-howto[open] summary { margin-bottom: 4px; }
.sb-howto .sb-rule-list { margin-bottom: 0; }
.sb-pips { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: -1px; }
.sb-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sb-torch); }
.sb-pips i.on { background: var(--sb-torch); }

/* 끝난 판 — 봉화·별·점수 내역·통계·탑 활약·도움말 */
.sb-result-box { max-height: 100%; overflow-y: auto; }
.sb-rbeacons { display: flex; justify-content: center; gap: calc(var(--bk) * 0.22); margin-bottom: 6px; --bk: clamp(18px, 1.5vw, 40px); }
.beacon-art .sb-rbeacons .sb-beacon { background-image: var(--beacon-off); }
.beacon-art .sb-rbeacons .sb-beacon.on { background-image: var(--beacon-on); filter: drop-shadow(0 0 calc(var(--bk) * 0.22) color-mix(in srgb, var(--sb-torch) 75%, transparent)); }
.beacon-art .sb-rbeacons .sb-beacon::before, .beacon-art .sb-rbeacons .sb-beacon::after { display: none; }
.sb-stars { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.6rem); letter-spacing: 0.1em; color: var(--sb-line-2); line-height: 1.1; }
.sb-stars .on { color: var(--sb-torch); }
.sb-rkstars { margin-left: 4px; color: var(--sb-line-2); letter-spacing: 0.05em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-rkstars .on { color: var(--sb-torch); }
.sb-breakdown { display: grid; gap: 2px; margin: 6px auto 8px; max-width: 22em; font-size: 0.8rem; }
.sb-breakdown div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--border); padding: 2px 0; }
.sb-breakdown dt { color: var(--text-dim); }
.sb-breakdown dd { margin: 0; color: var(--text-main); }
.sb-rstats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; padding: 0; }
.sb-rstats li { display: flex; flex-direction: column; padding: 6px 4px; border-radius: var(--radius); background: var(--sb-night); border: 1px solid var(--border); }
.sb-rstats small { font-size: 0.66rem; color: var(--text-dim); }
.sb-rstats b { font-size: 1rem; color: var(--text-main); }
.sb-mvp { text-align: left; margin: 6px 0; }
.sb-mvp .sb-h3 { margin: 6px 0 4px; font-size: 0.8rem; }
.sb-mvp ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sb-mvp li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 0.8rem; color: var(--text-main); }
.sb-mvp .sb-timg { width: 28px; }
.sb-mvp small { color: var(--text-dim); }
.sb-tip { margin: 8px 0 0; padding: 7px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--sb-dancheong) 14%, var(--sb-night)); font-size: 0.8rem; line-height: 1.6; color: var(--text-sub); text-align: left; }
.sb-tip b { color: var(--text-main); margin-right: 6px; }

/* 탑 정보 — 이 판 활약 */
.sb-tower-rec b { color: var(--text-main); }
.sb-charmed { color: #e88cc8; }

/* 도깨비 도감 */
.sb-guide { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.sb-gcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 9px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); font-size: 0.8rem; }
.sb-gcard.boss { border-color: color-mix(in srgb, var(--sb-vermilion) 55%, var(--border)); }
.sb-gcard b { color: var(--text-main); }
.sb-gcard small { display: block; color: var(--text-dim); line-height: 1.5; }
.sb-eimg { width: 40px; }
.sb-eimg:not(.has) { border-radius: 50%; box-shadow: none; background: color-mix(in srgb, var(--sb-stone) 45%, var(--sb-night)); }
.sb-traits { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.sb-trait { font-size: 0.66rem; padding: 0 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sb-dancheong) 60%, var(--border)); color: var(--text-sub); }
.sb-trait-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 10px; margin: 0; font-size: 0.76rem; }
.sb-trait-dl div { display: flex; gap: 6px; }
.sb-trait-dl dt { flex: none; font-weight: 700; color: var(--text-main); }
.sb-trait-dl dd { margin: 0; color: var(--text-dim); }

/* 봉화 신호 — 누른 순간 봉수대에서 불길이 솟음(1초, 모션 줄이기면 화면이 아예 부르지 않음) */
.sb-beacons.flare .sb-beacon { animation: sb-flare-b 0.9s ease-out 1; }
.sb-beacons.flare::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 30%; height: 220%; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, #ffd9a0 85%, transparent) 0, color-mix(in srgb, var(--sb-torch) 60%, transparent) 35%, transparent 70%); transform-origin: 50% 100%; pointer-events: none; animation: sb-flare 0.9s ease-out 1 both; }
.sb-beacons { position: relative; }
@keyframes sb-flare-b { 0% { filter: brightness(1); transform: none; } 25% { filter: brightness(1.7) drop-shadow(0 0 calc(var(--bk) * 0.5) var(--sb-torch)); transform: translateY(-3px); } 100% { filter: brightness(1); transform: none; } }
@keyframes sb-flare { 0% { opacity: 0; transform: scaleY(0.3); } 25% { opacity: 1; transform: scaleY(1.15); } 100% { opacity: 0; transform: scaleY(1.4) translateY(-10%); } }


/* ── 2026-11-01 v3 — 오늘의 변수·과제(인장)·끝없는 밤·지도 도장첩 (기존 토큰만 씀, 시그니처는 봉수대 그대로) ── */
.sb-vars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 6px; margin: 0 auto 10px; max-width: 40em; }
.sb-vars .sb-rule-card { margin: 0; max-width: none; }
.sb-var { border-color: color-mix(in srgb, var(--sb-torch) 55%, var(--border)); background: color-mix(in srgb, var(--sb-torch) 12%, var(--sb-night)); }
.sb-goals-box, .sb-goals-res { margin: 0 auto 10px; max-width: 40em; text-align: left; }
.sb-goals-box .sb-h3, .sb-goals-res .sb-h3 { margin: 4px 0 6px; text-align: center; }
.sb-goal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sb-goal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--sb-night); font-size: 0.8rem; color: var(--text-sub); }
.sb-goal b { color: var(--text-main); }
.sb-goal small { display: block; color: var(--text-dim); line-height: 1.45; }
.sb-goal .sb-band { display: inline; color: color-mix(in srgb, var(--sb-torch) 75%, var(--sb-paper)); }
.sb-goal.ok { border-color: var(--sb-dancheong); background: color-mix(in srgb, var(--sb-dancheong) 16%, var(--sb-night)); }
/* 인장 — 붉은 도장. 안 찍힌 것은 테두리만 */
.sb-seal { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 4px; border: 1.5px dashed var(--border-strong); color: var(--sb-line-2); font-family: "hb-games-display", var(--font-sans); font-size: 0.9rem; transform: rotate(-6deg); }
.sb-seal.on { border: 2px solid var(--sb-vermilion); background: color-mix(in srgb, var(--sb-vermilion) 22%, transparent); color: color-mix(in srgb, var(--sb-vermilion) 55%, var(--sb-paper)); }
.sb-goals-panel .sb-small { margin: 0 0 6px; }
.sb-endless-card { margin: 12px auto 0; max-width: 40em; padding: 8px 12px 10px; border-radius: var(--radius); border: 1px solid var(--border-strong); border-left: 3px solid var(--sb-night-3); background: var(--sb-night-0); text-align: left; }
.sb-endless-card .sb-h3 { margin: 0 0 4px; }
.sb-endless-card .sb-small { margin: 0 0 6px; line-height: 1.55; }
.sb-endless-card b { color: var(--text-main); }
.sb-mapbook { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.sb-mapcell { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); font-size: 0.76rem; color: var(--text-main); min-width: 0; }
.sb-mapcell small { color: var(--text-dim); line-height: 1.4; }
.sb-mapcell.none { opacity: 0.55; }
.sb-mapcell.full { border-color: color-mix(in srgb, var(--sb-torch) 60%, var(--border)); }
.sb-mapcell .sb-rkstars { margin: 0; }
.sb-minimap { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 3px; image-rendering: pixelated; }
.sb-guide-more { margin-top: 10px; }
.sb-guide-more summary { text-align: left; }
@media (min-width: 2400px) {
    .sb-goal, .sb-mapcell, .sb-endless-card .sb-small { font-size: 1rem; }
    .sb-mapbook { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 640px) {
    .sb-mapbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── 4K — 큰 화면은 글자도 함께 키움 ── */
@media (min-width: 2400px) {
    .sb-root { font-size: 1.2rem; }
    .sb-root .chip-btn, .sb-root .tab-btn, .sb-root .mini-btn, .sb-cbtn { font-size: 0.95rem; }
    .sb-cbtn { min-height: 48px; padding: 8px 16px; }
    .sb-stat dt, .mc-label { font-size: 0.86rem; }
    .sb-tname, .sb-tcost, .sb-stat-line, .sb-rule-list, .sb-intro-note, .sb-small { font-size: 1rem; }
    .sb-rank td, .sb-rank th { font-size: 1rem; }
    .sb-hint, .sb-paused { font-size: 1.05rem; }
    .sb-next, .sb-bossbar-name, .sb-banner span, .sb-breakdown, .sb-mvp li, .sb-tip, .sb-gcard, .sb-rule-card span { font-size: 1rem; }
    .sb-bossbar { width: min(640px, calc(100% - 24px)); }
    .sb-bossbar-track { height: 11px; }
}

/* ── 태블릿 — 판 위, 옆 칸 아래(탑 6칸 한 줄) ── */
@media (max-width: 1024px) {
    .sb-root .wrap { max-width: 100%; }
    .sb-stage { grid-template-columns: minmax(0, 1fr); }
    .sb-field { position: relative; top: auto; }
    .sb-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ── 휴대폰 ── */
@media (max-width: 640px) {
    .sb-root .wrap { padding: 8px 8px 90px; }
    .sb-root .top-row { gap: 6px; }
    .sb-root .page-sub { font-size: 0.72rem; }
    .sb-hud { gap: 6px 10px; padding: 6px 8px; }
    .sb-stats { gap: 12px; }
    .sb-stat dd { font-size: 1.1rem; }
    .sb-ctrl { margin-left: 0; flex: 1 1 100%; }
    .sb-ctrl .sb-call { flex: 1 1 auto; justify-content: center; }
    .sb-cbtn { min-height: 40px; padding: 6px 10px; }
    .sb-picker { gap: 4px; }
    .sb-tcard { padding: 4px 2px 5px; }
    .sb-tname { font-size: 0.68rem; }
    .sb-tcost { font-size: 0.66rem; }
    .sb-tkey { display: none; }
    /* 탑을 고르면 고르기 칸 대신 탑 정보 */
    .sb-side[data-sel="tower"] .sb-picker-wrap { display: none; }
    .me-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sb-intro, .sb-result { align-items: flex-start; }
    .sb-rule-list { font-size: 0.8rem; }
    .sb-ctrl { gap: 5px; }
    .sb-speed .sb-cbtn { min-width: 2.4em; padding: 6px 6px; }
    .sb-speed .sb-ico { display: none; }
    .sb-vol { width: 64px; }
    .sb-ctrl .sb-signal { flex: 1 1 auto; justify-content: center; }
    .sb-next { font-size: 0.7rem; }
    .sb-banner { padding: 6px 14px 8px; }
    .sb-rstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 봉화 한 줄은 봉수대 오른쪽에 (숫자 칸을 가리지 않게) */
    .sb-beacons { flex: 0 0 auto; }
    .sb-beacon-wrap { order: -1; flex: 1 1 100%; flex-direction: row; justify-content: flex-start; gap: 8px; }
    .sb-beacon-cap { position: static; transform: none; margin: 0; font-size: 0.68rem; white-space: normal; line-height: 1.3; }
    .sb-beacon-cap.show { animation-name: sb-fade; }
    .sb-banner { top: 5%; }
    .sb-banner span { display: none; }
    .sb-next { flex-wrap: nowrap; overflow: hidden; }
    .sb-echip { flex: none; }
    .sb-hud-row2 { flex-wrap: nowrap; padding-top: 4px; min-height: 0; min-width: 0; max-width: 100%; }
    .sb-hud-row2 .sb-next { flex: 1 1 0; }
    .sb-hud-row2 .sb-sound { flex: none; }
    .sb-vol { display: none; }   /* 휴대폰은 기기 음량으로 — 켜기/끄기만 */
    .sb-hud-row2 .sb-mini { min-height: 32px; }
    .sb-banner b, .sb-banner.boss b { font-size: 1.25rem; }
    .sb-root .mini-btn, .sb-root .chip-btn, .chat-close, .chat-send, .sx-close { min-height: 38px; }
}
/* 휴대폰 세로 — 판을 90° 돌려 9×16 (그리기는 seongbyeok-page.js computeLayout) */
@media (max-width: 640px) and (orientation: portrait) {
    /* 끝난 판 — 판 안이 아니라 화면 전체 덮개로: 봉화·제목·별·점수·다시 도전이 첫 화면, 내역·통계는 아래로 */
    .sb-result { position: fixed; inset: 0; z-index: 1200; align-items: flex-start; padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--sb-night-0) 92%, transparent); overflow-y: auto; overscroll-behavior: contain; }
    .sb-result-box { display: flex; flex-direction: column; max-height: none; overflow: visible; margin: auto 0; }
    .sb-result-box > * { order: 3; }
    .sb-result-box > .sb-rbeacons, .sb-result-box > .sb-result-title, .sb-result-box > .sb-stars, .sb-result-box > .sb-stars + .sb-small, .sb-result-box > .sb-result-score { order: 0; }
    .sb-result-box > .sb-cmp { order: 1; }
    .sb-result-box > .sb-result-act { order: 2; margin: 10px 0 12px; }
    .sb-result-box > .sb-result-act .big-btn { flex: 1 1 100%; min-height: 48px; }
    .sb-board { aspect-ratio: 9 / 16; max-height: calc(100vh - var(--sb-off, 190px) - 92px); max-height: calc(100dvh - var(--sb-off, 190px) - 92px); }
}

/* ── 모션 줄이기 — 봉화는 켜짐만 ── */
@media (prefers-reduced-motion: reduce) {
    .sb-flicker::after, .sb-beacons.art .sb-flicker, .sb-kindle, .sb-blaze .sb-beacon { animation: none !important; }
    /* 알림은 움직임 없이 나타났다 사라지기만 */
    /* 길이는 !important — 공용 style.css 의 0.01ms 축소에 눌리면 바로 '사라진 상태'로 끝나 안 보였다(2026-10-29) */
    .sb-beacon-cap.show { animation: sb-fade 2.6s linear 1 both; animation-duration: 2.6s !important; }
    .sb-coin-pop.show { animation: sb-fade 1.1s linear 1 both; animation-duration: 1.1s !important; }
    .sb-banner.show, .sb-banner.boss.show { animation: none; }
    .sb-board.hurt::after { animation: none; }
    .sb-beacons.flare .sb-beacon, .sb-beacons.flare::after { animation: none; }
    .sb-bossbar-fill, .sb-signal::after, .sb-board::after { transition: none; }
}
@keyframes sb-fade { 0%, 100% { opacity: 0; } 10%, 80% { opacity: 1; } }
body[data-hb-chat] :is(.chat-fab, .chat-panel) { --chat-accent: var(--sb-torch); --chat-accent-ink: var(--brand-ink); } /* 채팅 단추·창 공용 규칙(style.css)에 넘기는 이 게임 색 */