/* 블록 퍼즐(blockfit) — 자체 다크 테마. 사이트 라이트/다크 모두 같게 보인다 */
#bf-game { position:relative; width:100%; margin:0 auto; border:1px solid #2c3442; border-radius:20px; overflow:hidden;
    background:linear-gradient(180deg,#171c26,#0f131b); color:#e9eef6; box-shadow:0 18px 45px rgba(8,16,30,.32);
    user-select:none; -webkit-user-select:none; }
#bf-game, #bf-game * { box-sizing:border-box; }
#bf-game [hidden] { display:none !important; }
#bf-game button { font-family:inherit; }
#bf-game button:focus-visible { outline:3px solid #8ce9ff; outline-offset:-3px; }

.bf-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px;
    background:linear-gradient(110deg,#222a38,#171c26); border-bottom:1px solid #ffffff12; }
.bf-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#8ce9ff; }
.bf-brand > i { font-size:21px; color:#5fc6e8; }
.bf-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#95a3b5; letter-spacing:.02em; }
.bf-toolbar .bf-bestcap { font-size:.68rem; font-weight:700; color:#95a3b5; }
.bf-toolbar .bf-bestcap b { color:#ffd479; font-variant-numeric:tabular-nums; }

.bf-hud { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:12px 12px 6px; }
.bf-hud > div { text-align:center; border-left:1px solid #ffffff12; }
.bf-hud > div:first-child { border-left:0; }
.bf-hud small { display:block; font-size:.62rem; font-weight:600; color:#94a2b3; letter-spacing:.03em; }
.bf-hud strong { display:block; line-height:1.35; font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; }
.bf-hud .bf-scorebox strong { color:#8ce9ff; font-size:1.5rem; }
#bf-combo.hot { color:#ffd479; }

#bf-stage { position:relative; margin:0 12px; padding:12px; border:1px solid #ffffff14; border-radius:14px;
    background:radial-gradient(120% 90% at 50% 0%,#232d3c 0%,#111722 100%); }

#bf-board { display:grid; grid-template-columns:repeat(9,1fr); gap:3px; width:100%;
    max-width:min(100%, 440px, calc(100dvh - 330px)); aspect-ratio:1/1; margin:0 auto; padding:5px;
    border-radius:12px; background:#0b1017; box-shadow:inset 0 0 0 2px #222c3a, 0 6px 20px #0006; touch-action:manipulation; }
@supports not (aspect-ratio:1/1) { #bf-board { max-width:min(100%,440px); } }
.bf-cell { position:relative; border-radius:5px; background:#1a212c; transition:background .14s ease, box-shadow .14s ease; }
.bf-cell.on { background:hsl(var(--h),62%,52%); box-shadow:inset 0 -3px 0 hsl(var(--h),62%,40%), inset 0 2px 0 hsl(var(--h),70%,66%); }
.bf-cell.pv { background:hsl(var(--h),62%,52%); opacity:.5; }
.bf-cell.bad { background:#8a2f3d; opacity:.65; }
.bf-cell.willclear { box-shadow:inset 0 0 0 2px #ffd479, 0 0 10px #ffd47966; }
.bf-cell.boom { animation:bfBoom .3s ease-out; }
@keyframes bfBoom { 0% { background:#fff; transform:scale(1.18); } 100% { background:#1a212c; transform:scale(1); } }

#bf-tray { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px auto 2px; max-width:min(100%,440px); }
.bf-slot { display:flex; align-items:center; justify-content:center; min-height:84px; padding:8px;
    border:1px dashed #ffffff1f; border-radius:12px; background:#0e141d; cursor:pointer; touch-action:none;
    -webkit-tap-highlight-color:transparent; transition:background .14s ease, border-color .14s ease, transform .1s ease; }
.bf-slot.sel { border-color:#8ce9ff; border-style:solid; background:#15283a; transform:translateY(-3px); }
.bf-slot.dead { opacity:.34; }
.bf-slot.empty { opacity:.25; cursor:default; }

.bf-shape { display:grid; grid-template-columns:repeat(var(--pw),1fr); gap:2px; }
.bf-shape i { display:block; width:clamp(9px,3.1vw,15px); height:clamp(9px,3.1vw,15px); border-radius:3px; background:transparent; }
.bf-shape i.f { background:hsl(var(--h),62%,52%); box-shadow:inset 0 -2px 0 hsl(var(--h),62%,40%); }

#bf-toast { position:absolute; left:50%; top:12px; transform:translateX(-50%) translateY(-6px); opacity:0; pointer-events:none;
    padding:7px 14px; border-radius:999px; background:#0b1017e6; border:1px solid #ffffff24; color:#ffd479;
    font-size:.78rem; font-weight:800; white-space:nowrap; transition:opacity .18s ease, transform .18s ease; z-index:4; }
#bf-toast.on { opacity:1; transform:translateX(-50%) translateY(0); }
#bf-toast.big { font-size:.95rem; padding:10px 18px; }

.bf-controls { display:flex; gap:8px; padding:12px; }
.bf-controls button { flex:1; min-width:0; min-height:50px; border-radius:10px; border:1px solid #ffffff2b;
    background:linear-gradient(160deg,#283343,#19202b); color:#e9eef6; font-size:.86rem; font-weight:800; cursor:pointer;
    touch-action:manipulation; box-shadow:0 3px 0 #0a0e14; transition:transform .08s, filter .08s; }
.bf-controls button:active { transform:translateY(2px); box-shadow:0 1px 0 #0a0e14; filter:brightness(1.15); }
.bf-controls button small { display:block; margin-top:3px; font-size:.62rem; font-weight:600; opacity:.7; }
#bf-finish { background:linear-gradient(160deg,#33252f,#20161d); border-color:#d59ec03d; }

.bf-overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:18px;
    background:rgba(9,13,20,.9); backdrop-filter:blur(3px); z-index:6; }
.bf-overlay.on { display:flex; }
.bf-panel { width:100%; max-width:380px; text-align:center; }
.bf-eyebrow { display:inline-block; margin-bottom:10px; padding:4px 11px; border-radius:999px; background:#8ce9ff1f;
    color:#8ce9ff; font-size:.66rem; font-weight:800; letter-spacing:.08em; }
.bf-panel h2 { margin:0 0 12px; font-size:1.28rem; font-weight:900; color:#fff; }
.bf-panel p { margin:0 0 16px; font-size:.84rem; line-height:1.75; color:#b9c6d4; }
.bf-panel p b { color:#fff; }
.bf-primary { width:100%; min-height:54px; border:0; border-radius:12px; cursor:pointer;
    background:linear-gradient(135deg,#2f8fb8,#55c7e6); color:#06222c; font-size:1rem; font-weight:900;
    box-shadow:0 4px 0 #1b5d79; touch-action:manipulation; }
.bf-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #1b5d79; }
.bf-panel > small { display:block; margin-top:10px; font-size:.68rem; color:#7f8ea0; }
#bf-introbest { margin:0 0 14px; font-size:.74rem; font-weight:800; color:#ffd479; min-height:16px; }
#bf-newrecord { margin-bottom:8px; font-size:.78rem; font-weight:900; letter-spacing:.1em; color:#ffd479; }
#bf-final { font-size:3rem; font-weight:900; color:#8ce9ff; line-height:1; font-variant-numeric:tabular-nums; }
.bf-final-unit { margin-left:4px; font-size:1rem; font-weight:800; color:#8ce9ff; }
#bf-grade { margin:10px 0 6px; font-size:1.1rem; font-weight:900; }
#bf-detail { margin:12px 0 18px; font-size:.76rem; color:#9fb0c1; }
#bf-detail b { color:#e9eef6; }

/* 규칙 안내 — 전역 .answer_shadow 는 가운데 정렬·큰 글씨라 여기서 눌러 준다 */
.bf-guide { text-align:left; line-height:1.7; margin-top:16px; }
.bf-guide h3 { margin:0 0 10px; font-size:1rem; font-weight:800; }
.bf-guide p { font-size:.88rem; margin:0 0 10px; }
.bf-guide small { display:block; font-size:.78rem; opacity:.8; }

@media (max-width:360px) {
    .bf-slot { min-height:72px; padding:5px; }
    .bf-hud .bf-scorebox strong { font-size:1.3rem; }
}