/* 선 잇기 퍼즐 — 밤하늘 네온 테마(자체 테마. 사이트 라이트/다크 모드와 무관하게 같은 모습 — colorflood 와 같은 방식) */
#cl-game { position:relative; width:100%; margin:0 auto; border:1px solid #29304a; border-radius:20px; overflow:hidden;
    background:radial-gradient(120% 80% at 50% 0%,#1c2440 0%,#11162a 60%,#0d1122 100%); color:#e8ecf8; box-shadow:0 14px 36px rgba(10,14,30,.35);
    user-select:none; -webkit-user-select:none; }
#cl-game, #cl-game * { box-sizing:border-box; }
#cl-game [hidden] { display:none !important; }
#cl-game button { font-family:inherit; }
#cl-game button:focus-visible { outline:3px solid #22d3ee; outline-offset:2px; }

.cl-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#1a2140,#151b33); border-bottom:1px solid #29304a; }
.cl-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#cfd6f3; }
.cl-brand svg { width:26px; height:26px; flex:none; }
.cl-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#8f99c2; letter-spacing:.02em; }
.cl-tools { display:flex; gap:6px; }
.cl-tools button { border:1px solid #39426a; background:#1d2441; color:#cfd6f3; border-radius:8px; padding:7px 9px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }

.cl-hud { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:12px 12px 8px; align-items:center; }
.cl-hud > div { text-align:center; border-left:1px solid #29304a; min-width:0; }
.cl-hud > div:first-child { border-left:0; }
.cl-hud small { display:block; font-size:.62rem; font-weight:600; color:#8f99c2; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-hud strong { display:block; line-height:1.4; font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; color:#f2f5ff; }
.cl-hud .cl-scorebox strong { color:#ffd166; font-size:1.4rem; }
.cl-hud .cl-lives strong { font-size:.9rem; letter-spacing:-2px; }
#cl-time.warn { color:#ff6b6b; animation:clWarn .55s ease-in-out infinite alternate; }
@keyframes clWarn { from { opacity:1; transform:scale(1); } to { opacity:.55; transform:scale(1.08); } }
.cl-track { margin:0 16px 14px; height:6px; border-radius:3px; background:#232a45; overflow:hidden; }
#cl-progress { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#f0433a,#ff8a1f,#f5cf1d,#2fbf55,#22d3ee,#2f7bf5,#8b5cf6); transition:width .2s ease; }

#cl-stage { position:relative; margin:0 12px; padding:12px 10px 10px; border:1px solid #29304a; border-radius:14px; background:#0f1426; }
.cl-goal { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; margin:0 0 10px; font-size:.82rem; font-weight:700; color:#a9b3da; }
.cl-goal b { font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }

/* 판 — 정사각형, 폭은 화면·높이·520px 중 작은 값. 끌기를 위해 판에만 touch-action:none */
#cl-board { width:min(100%, 70vh, 520px); aspect-ratio:1; margin:0 auto; border-radius:12px; overflow:hidden;
    box-shadow:0 0 0 2px #2b3352, 0 10px 26px rgba(0,0,0,.35); touch-action:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
#cl-svg { display:block; width:100%; height:100%; touch-action:none; cursor:pointer; }
#cl-svg .cl-bg { fill:#141a2b; }
#cl-svg .cl-grid { stroke:#ffffff1f; stroke-width:.035; fill:none; }
#cl-tint rect { opacity:.2; }
#cl-svg .cl-line { fill:none; stroke-width:.32; stroke-linecap:round; stroke-linejoin:round; opacity:.92; }
#cl-svg .cl-line.done { opacity:1; stroke-width:.36; }
#cl-svg .cl-line.flash { animation:clFlash .9s ease-out 2; }
@keyframes clFlash { 50% { stroke-width:.5; opacity:.6; } }
#cl-svg .cl-dot text { font-size:.42px; font-weight:900; text-anchor:middle; dominant-baseline:central; pointer-events:none; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; }
#cl-svg .cl-ring { fill:none; stroke-width:.06; opacity:.75; }
#cl-svg .cl-dot.pop > circle, #cl-svg .cl-dot.pop > text { transform-box:fill-box; transform-origin:center; animation:clPop .32s ease-out; }
@keyframes clPop { 0% { transform:scale(1); } 45% { transform:scale(1.35); } 100% { transform:scale(1); } }
#cl-svg .cl-fingerdot { opacity:.28; pointer-events:none; }
/* 단계 완성 — 판이 한 번 통통 튀며 빛난다 */
#cl-board.clear { animation:clClear .7s ease-out; }
@keyframes clClear { 0% { transform:scale(1); box-shadow:0 0 0 2px #2b3352; } 35% { transform:scale(1.03); box-shadow:0 0 0 3px #ffd166, 0 0 34px 8px #ffd16677; } 100% { transform:scale(1); box-shadow:0 0 0 2px #2b3352, 0 10px 26px rgba(0,0,0,.35); } }
@media (prefers-reduced-motion:reduce) { #cl-board.clear, #cl-time.warn, #cl-svg .cl-dot.pop > *, #cl-svg .cl-line.flash, .cl-demo polyline { animation:none !important; } }

#cl-hint { margin:12px 6px 0; text-align:center; font-size:.8rem; font-weight:600; color:#a9b3da; min-height:18px; }

.cl-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px; }
.cl-controls button { min-width:0; min-height:50px; border-radius:10px; border:1px solid #39426a; background:#1d2441; color:#e8ecf8; font-size:.86rem; font-weight:800; cursor:pointer; touch-action:manipulation; box-shadow:0 3px 0 #0b0f1e; transition:transform .08s; }
.cl-controls button:active { transform:translateY(2px); box-shadow:0 1px 0 #0b0f1e; }
.cl-controls button:disabled { opacity:.4; cursor:default; box-shadow:none; }
.cl-controls button small { display:block; margin-top:3px; font-size:.62rem; font-weight:600; opacity:.7; }
#cl-hintbtn { background:#1c2c4a; border-color:#2f4f86; }
#cl-newboard { background:#2b2140; border-color:#55407a; }
#cl-giveup { background:#3a1f2a; border-color:#6d3348; }

#cl-toast { position:absolute; left:50%; bottom:40px; transform:translate(-50%,10px); z-index:11; max-width:86%; padding:9px 15px; border-radius:999px; background:#000000d9; color:#fff; font-size:.76rem; font-weight:700; text-align:center; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; }
#cl-toast.on { opacity:1; transform:translate(-50%,0); }

.cl-overlay { position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:22px; background:linear-gradient(180deg,#0d1122b3,#0d1122ee 45%); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.cl-overlay.on { display:flex; }
.cl-panel { width:100%; max-width:400px; text-align:center; padding:26px 20px; border:1px solid #39426a; border-radius:16px; background:#181f38; box-shadow:0 16px 40px rgba(0,0,0,.45); }
.cl-eyebrow { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.12em; color:#ffd166; margin-bottom:10px; }
.cl-panel h2 { margin:0 0 12px; font-size:1.32rem; font-weight:900; color:#fff; }
.cl-panel p { margin:0 0 16px; font-size:.86rem; line-height:1.65; color:#c4cbe8; }
.cl-panel p b { color:#ffd166; }
.cl-panel p small { color:#8f99c2; }
.cl-panel > small { color:#8f99c2; font-size:.74rem; }
.cl-best { min-height:1em; margin-bottom:6px; font-size:.78rem; font-weight:700; color:#ffd166; }
.cl-primary { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg,#2f7bf5,#22d3ee); color:#fff; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #17428a; }
.cl-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #17428a; }

/* 인트로 미니 도해 — 세 선이 차례로 그어진다 */
.cl-demo { display:block; width:112px; height:112px; margin:2px auto 16px; border-radius:10px; box-shadow:0 0 0 2px #2b3352; }
.cl-demo polyline { stroke-dasharray:6; stroke-dashoffset:6; animation:clDraw 4.5s ease-in-out infinite; }
.cl-demo .cl-demo-b { animation-delay:.5s; }
.cl-demo .cl-demo-c { animation-delay:1s; }
@keyframes clDraw { 0% { stroke-dashoffset:6; } 30%, 85% { stroke-dashoffset:0; } 100% { stroke-dashoffset:6; } }

#cl-result .cl-eyebrow { display:block; }
#cl-newrecord { display:inline-block; margin-bottom:8px; padding:4px 12px; border-radius:999px; background:#ffd166; color:#3a2a00; font-size:.68rem; font-weight:900; letter-spacing:.08em; }
#cl-final { display:inline-block; font-size:3rem; font-weight:900; line-height:1.1; color:#ffd166; }
.cl-final-unit { font-size:1rem; font-weight:800; color:#ffd166; margin-left:3px; }
#cl-grade { margin:6px 0 4px; font-size:1.05rem; font-weight:900; color:#fff; }
#cl-detail { margin:10px 0 4px; font-size:.8rem; line-height:1.7; color:#a9b3da; }
#cl-detail b { color:#ffd166; }
.cl-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:8px; }
.cl-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 7px 2px 3px; border-radius:999px; background:#232b4a; font-size:.68rem; font-weight:700; color:#dfe5ff; font-variant-numeric:tabular-nums; }
.cl-chip i { display:inline-block; min-width:16px; height:16px; line-height:16px; border-radius:50%; background:#2f7bf5; color:#fff; font-style:normal; font-size:.6rem; text-align:center; }
.cl-chip.hinted i { background:#a8713f; }
.cl-chip.retry i { background:#6b7280; }

/* 규칙 안내 — 전역 .answer_shadow 는 가운데 정렬·17.6px 이라 눌러 준다 */
.cl-guide { text-align:left; line-height:1.7; margin-top:16px; }
.cl-guide h3 { font-size:1rem; margin:0 0 8px; }
.cl-guide p { font-size:.88rem; margin:0 0 8px; }
.cl-guide small { display:block; font-size:.8rem; opacity:.85; }

@media (max-width:420px) {
    .cl-toolbar { padding:10px 12px; }
    .cl-brand { gap:7px; font-size:.64rem; letter-spacing:.08em; }
    .cl-tools button { padding:6px 7px; font-size:.68rem; }
    .cl-hud { gap:3px; padding:10px 6px 6px; }
    .cl-hud small { font-size:.56rem; letter-spacing:0; }
    .cl-hud strong { font-size:.9rem; }
    .cl-hud .cl-scorebox strong { font-size:1.15rem; }
    .cl-hud .cl-lives strong { font-size:.72rem; }
    #cl-stage { margin:0 6px; padding:8px 4px 8px; }
    .cl-controls { padding:10px 6px; gap:5px; }
    .cl-controls button { min-height:46px; font-size:.78rem; padding:0 2px; }
}
@media (max-width:340px) {
    .cl-controls { grid-template-columns:repeat(2,1fr); }
}

/* ── 전체화면(툴바 ⛶) — 네이티브 Fullscreen API 위에 항상 .cl-fs 가상 전체화면(body 직속 + position:fixed)을 깐다.
   iOS 사파리는 요소 전체화면이 없어 가상만 쓰고, 판 폭은 js fitFs() 가 남은 공간(무대 − 목표 줄 − 힌트 줄)에 맞춰 px 로 박는다 ── */
html.cl-fs-open, html.cl-fs-open body { overflow:hidden !important; }
#cl-game::backdrop { background:#0d1122; }
#cl-game.cl-fs { position:fixed; inset:0; z-index:2147483000; width:100%; height:100vh; height:100dvh; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display:flex; flex-direction:column; }
#cl-game.cl-fs .cl-toolbar { flex:none; padding:8px 14px; }
#cl-game.cl-fs .cl-hud { flex:none; padding:8px 10px 4px; }
#cl-game.cl-fs .cl-track { flex:none; margin:0 14px 8px; }
#cl-game.cl-fs #cl-stage { flex:1 1 auto; min-height:0; margin:0 10px; padding:10px 8px 8px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
#cl-game.cl-fs .cl-goal { flex:none; margin:0 0 8px; }
#cl-game.cl-fs #cl-board { flex:none; max-width:100%; }
#cl-game.cl-fs #cl-hint { flex:none; margin:8px 6px 0; }
#cl-game.cl-fs .cl-controls { flex:none; padding:10px 10px 12px; }
/* 가로가 더 긴 화면(PC·폰 가로) — 판 왼쪽, HUD·진행바·조작 오른쪽 열 */
#cl-game.cl-fs.cl-fs-wide { display:grid; grid-template-columns:minmax(0,1fr) min(300px,34vw); grid-template-rows:auto auto auto minmax(0,1fr);
    grid-template-areas:"tb tb" "st hud" "st tr" "st ct"; }
#cl-game.cl-fs.cl-fs-wide .cl-toolbar { grid-area:tb; }
#cl-game.cl-fs.cl-fs-wide #cl-stage { grid-area:st; margin:10px 0 10px 10px; padding:12px 10px 10px; }
#cl-game.cl-fs.cl-fs-wide .cl-hud { grid-area:hud; grid-template-columns:1fr 1fr; gap:6px; padding:10px 12px 4px 10px; align-content:start; }
#cl-game.cl-fs.cl-fs-wide .cl-hud > div { border-left:0; padding:7px 6px 6px; border-radius:10px; background:#1a2140; border:1px solid #29304a; }
#cl-game.cl-fs.cl-fs-wide .cl-hud .cl-scorebox { grid-column:1 / -1; order:-1; }
#cl-game.cl-fs.cl-fs-wide .cl-track { grid-area:tr; margin:6px 12px 6px 10px; }
#cl-game.cl-fs.cl-fs-wide .cl-controls { grid-area:ct; grid-template-columns:1fr 1fr; align-self:start; gap:6px; padding:6px 12px 10px 10px; }
/* 폰 가로처럼 낮은 화면 — 오른쪽 열이 화면을 넘지 않게 눌러 준다 */
@media (max-height:520px) {
    #cl-game.cl-fs.cl-fs-wide .cl-toolbar { padding:6px 12px; }
    #cl-game.cl-fs.cl-fs-wide .cl-hud { gap:4px; padding:6px 10px 2px 8px; }
    #cl-game.cl-fs.cl-fs-wide .cl-hud > div { padding:3px 4px; }
    #cl-game.cl-fs.cl-fs-wide .cl-hud small { font-size:.56rem; }
    #cl-game.cl-fs.cl-fs-wide .cl-hud strong { font-size:.9rem; line-height:1.3; }
    #cl-game.cl-fs.cl-fs-wide .cl-hud .cl-scorebox strong { font-size:1.15rem; }
    #cl-game.cl-fs.cl-fs-wide .cl-hud .cl-lives strong { font-size:.72rem; }
    #cl-game.cl-fs.cl-fs-wide .cl-track { margin:4px 10px 4px 8px; height:5px; }
    #cl-game.cl-fs.cl-fs-wide .cl-controls { gap:4px; padding:4px 10px 8px 8px; }
    #cl-game.cl-fs.cl-fs-wide .cl-controls button { min-height:38px; font-size:.74rem; }
    #cl-game.cl-fs.cl-fs-wide .cl-controls button small { display:none; }
    #cl-game.cl-fs.cl-fs-wide #cl-stage { margin:6px 0 6px 6px; padding:8px 6px 6px; }
    #cl-game.cl-fs.cl-fs-wide .cl-goal { font-size:.72rem; margin-bottom:4px; }
    #cl-game.cl-fs.cl-fs-wide #cl-hint { font-size:.7rem; margin-top:4px; }
}

/* ── PC(≥860px) 2단 배치 — 판은 왼쪽, HUD·진행바·조작은 오른쪽 세로 열(colorflood 와 같은 구조) ── */
@media (min-width:860px) {
    #cl-game { display:grid; grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:auto auto auto minmax(0,1fr);
        grid-template-areas:"tb tb" "st hud" "st tr" "st ct"; }
    .cl-toolbar { grid-area:tb; }
    #cl-stage { grid-area:st; margin:12px 0 12px 12px; padding:16px 12px 12px; display:flex; flex-direction:column; justify-content:center; }
    .cl-hud { grid-area:hud; grid-template-columns:1fr 1fr; gap:8px; padding:14px 14px 6px 12px; align-content:start; }
    .cl-hud > div { border-left:0; padding:9px 6px 8px; border-radius:10px; background:#1a2140; border:1px solid #29304a; }
    .cl-hud .cl-scorebox { grid-column:1 / -1; order:-1; padding:10px 6px; }
    .cl-hud strong { font-size:1.12rem; }
    .cl-hud .cl-scorebox strong { font-size:1.7rem; }
    .cl-hud .cl-lives strong { font-size:1rem; }
    .cl-track { grid-area:tr; margin:8px 14px 8px 12px; }
    .cl-controls { grid-area:ct; grid-template-columns:1fr 1fr; align-self:start; gap:8px; padding:8px 14px 14px 12px; }
}