/* 불 끄기 퍼즐 — 밤의 전구판(자체 테마. 사이트 라이트/다크 모드와 무관하게 같은 모습 — carout 과 같은 방식) */
#lo-game { position:relative; width:100%; margin:0 auto; border:1px solid #2e3747; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,#181d27,#0f131a); color:#eef2f8; box-shadow:0 18px 45px rgba(10,20,40,.3); user-select:none; -webkit-user-select:none; }
#lo-game, #lo-game * { box-sizing:border-box; }
#lo-game [hidden] { display:none !important; }
#lo-game button { font-family:inherit; }
#lo-game button:focus-visible { outline:3px solid #7fd8ff; outline-offset:-3px; }

.lo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#222937,#151a23); border-bottom:1px solid #ffffff12; }
.lo-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#ffd56b; }
.lo-brand > i { font-size:22px; color:#ffc93c; text-shadow:0 0 12px #ffc93c88; }
.lo-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#a6b0c0; letter-spacing:.02em; }
#lo-sound { border:1px solid #ffffff30; background:#ffffff08; color:#dbe5e9; border-radius:8px; padding:8px 10px; font-size:.72rem; cursor:pointer; }

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

#lo-stage { position:relative; margin:0 12px; padding:14px 12px 10px; border:1px solid #ffffff14; border-radius:14px; background:radial-gradient(120% 90% at 50% 0%,#252c3a 0%,#11151c 100%); }

/* 판 — 정사각형, 폭은 화면·높이·520px 중 작은 값 */
#lo-board { display:grid; grid-template-columns:repeat(3,1fr); width:min(100%, 70vh, 520px); aspect-ratio:1; margin:0 auto; padding:clamp(6px,2.2%,12px); gap:clamp(5px,1.8%,10px); border-radius:16px; background:linear-gradient(160deg,#0c1017,#161c26); box-shadow:inset 0 0 0 1px #ffffff10, inset 0 6px 18px #0009; touch-action:manipulation; -webkit-touch-callout:none; }
.lo-cell { position:relative; min-width:0; min-height:0; padding:0; border:0; border-radius:24%; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    background:radial-gradient(circle at 50% 44%, #2f3746 0 30%, #232a36 62%, #1a2029 100%);
    box-shadow:inset 0 -3px 0 #00000070, inset 0 1px 0 #ffffff12, 0 2px 4px #0006; transition:background .12s, box-shadow .12s; }
/* 꺼진 전구의 유리 테두리 */
.lo-cell::before { content:''; position:absolute; left:50%; top:46%; width:42%; height:42%; transform:translate(-50%,-50%); border-radius:50%; border:2px solid #ffffff14; background:radial-gradient(circle at 38% 32%, #ffffff12, transparent 60%); transition:border-color .12s, background .12s, box-shadow .12s; }
.lo-cell.on { background:radial-gradient(circle at 50% 44%, #fff6c7 0 18%, #ffd85a 42%, #ffad1f 74%, #e07f0c 100%);
    box-shadow:0 0 16px 2px #ffc94a80, 0 0 34px 4px #ffb02e33, inset 0 -3px 0 #b8640080, inset 0 1px 0 #fff9; }
.lo-cell.on::before { border-color:#fff8d9; background:radial-gradient(circle at 50% 50%, #ffffff 0 30%, #fff3b0 60%, #ffe27a 100%); box-shadow:0 0 12px 4px #fff2a8; }
.lo-cell.flip { animation:loFlip .12s ease-out; }
@keyframes loFlip { 0% { transform:scale(.84); } 100% { transform:scale(1); } }
@media (hover:hover) { .lo-cell:hover { filter:brightness(1.12); } }
.lo-cell:active { transform:scale(.95); }
/* 힌트 — 점선 고리가 숨 쉰다 */
.lo-cell.hint::after { content:''; position:absolute; inset:-4px; border:3px dashed #7fd8ff; border-radius:28%; pointer-events:none; animation:loHint .8s ease-in-out infinite alternate; }
@keyframes loHint { from { opacity:1; transform:scale(1); } to { opacity:.45; transform:scale(1.05); } }
/* 단계 완성 — 판 전체가 한 번 은은하게 빛난다 */
#lo-board.clear { animation:loClear .9s ease-out; }
@keyframes loClear { 0% { box-shadow:inset 0 0 0 1px #ffffff10, 0 0 0 0 #7fd8ff00; } 35% { box-shadow:inset 0 0 0 1px #7fd8ff66, 0 0 28px 6px #7fd8ff55; } 100% { box-shadow:inset 0 0 0 1px #ffffff10, 0 0 0 0 #7fd8ff00; } }
@media (prefers-reduced-motion:reduce) { .lo-cell.flip, #lo-board.clear, .lo-cell.hint::after, #lo-time.warn, .lo-demo i { animation:none !important; } }

#lo-hint { margin:12px 6px 0; text-align:center; font-size:.76rem; font-weight:600; color:#a9b4c4; min-height:18px; }
.lo-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px; }
.lo-controls button { min-width:0; min-height:52px; border-radius:10px; border:1px solid #ffffff2b; background:linear-gradient(160deg,#2a3341,#1c222c); color:#eaf0f8; font-size:.86rem; font-weight:800; cursor:pointer; touch-action:manipulation; box-shadow:0 3px 0 #0a0d12; transition:transform .08s,filter .08s; }
.lo-controls button:active { transform:translateY(2px); box-shadow:0 1px 0 #0a0d12; filter:brightness(1.15); }
.lo-controls button:disabled { opacity:.38; cursor:default; box-shadow:none; }
.lo-controls button small { display:block; margin-top:3px; font-size:.62rem; font-weight:600; opacity:.7; }
#lo-hintbtn { background:linear-gradient(160deg,#21384a,#172633); border-color:#7fd8ff40; }
#lo-giveup { background:linear-gradient(160deg,#3a2430,#251820); border-color:#d59ec03d; }

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

.lo-overlay { position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:22px; background:linear-gradient(180deg,#0a0d12aa,#0a0d12e8 45%); }
.lo-overlay.on { display:flex; }
.lo-panel { width:100%; max-width:400px; text-align:center; padding:26px 20px; border:1px solid #ffffff2b; border-radius:16px; background:linear-gradient(155deg,#232b37f2,#141920f7); box-shadow:0 16px 45px #04091266; }
.lo-eyebrow { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.12em; color:#ffd56b; margin-bottom:10px; }
.lo-panel h2 { margin:0 0 12px; font-size:1.32rem; font-weight:900; color:#fff; }
.lo-panel p { margin:0 0 16px; font-size:.86rem; line-height:1.65; color:#c8d2e0; }
.lo-panel p b { color:#ffd56b; }
.lo-panel p small { color:#95a1b2; }
.lo-panel > small { color:#95a1b2; }
.lo-best { min-height:1em; margin-bottom:6px; font-size:.78rem; font-weight:700; color:#ffd56b; }
.lo-primary { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg,#ffb02e,#ffe066); color:#3a2500; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #a2650a; }
.lo-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #a2650a; }

/* 인트로 미니 도해 — 가운데를 누르면 십자가 켜졌다 꺼진다 */
.lo-demo { display:grid; grid-template-columns:repeat(3,22px); gap:5px; width:max-content; margin:2px auto 16px; padding:7px; border-radius:10px; background:#0c1017; }
.lo-demo i { width:22px; height:22px; border-radius:6px; background:#262d39; }
.lo-demo i:nth-child(2), .lo-demo i:nth-child(4), .lo-demo i:nth-child(5), .lo-demo i:nth-child(6), .lo-demo i:nth-child(8) { animation:loDemo 2.4s steps(1) infinite; }
.lo-demo i:nth-child(5) { outline:2px solid #7fd8ff99; outline-offset:1px; }
@keyframes loDemo { 0%, 49% { background:radial-gradient(circle at 50% 44%, #fff6c7 0 18%, #ffd85a 45%, #ffad1f 80%); box-shadow:0 0 10px #ffc94a88; } 50%, 100% { background:#262d39; box-shadow:none; } }

#lo-newrecord { display:inline-block; margin-bottom:8px; padding:4px 12px; border-radius:999px; background:#ffd56b; color:#3a2a00; font-size:.68rem; font-weight:900; letter-spacing:.08em; }
#lo-final { display:inline-block; font-size:3rem; font-weight:900; line-height:1.1; color:#ffd56b; }
.lo-final-unit { font-size:1rem; font-weight:800; color:#ffd56b; margin-left:3px; }
#lo-grade { margin:6px 0 4px; font-size:1.05rem; font-weight:900; color:#fff; }
#lo-detail { margin:10px 0 4px; font-size:.8rem; line-height:1.7; color:#b9c4d3; }
#lo-detail b { color:#ffd56b; }

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

@media (max-width:420px) {
    .lo-hud { gap:3px; padding:10px 6px 6px; }
    .lo-hud small { font-size:.56rem; letter-spacing:0; }
    .lo-hud strong { font-size:.9rem; }
    .lo-hud .lo-scorebox strong { font-size:1.15rem; }
    .lo-hud .lo-lives strong { font-size:.72rem; }
    #lo-stage { margin:0 8px; padding:10px 6px 8px; }
    .lo-controls { grid-template-columns:repeat(2,1fr); padding:10px 8px; gap:6px; }
    .lo-controls button { min-height:46px; font-size:.82rem; }
}

/* ── PC(≥860px) 2단 배치 — 판은 왼쪽, HUD·진행바·버튼은 오른쪽 세로 열(carout 과 같은 구조) ── */
@media (min-width:860px) {
    #lo-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"; }
    .lo-toolbar { grid-area:tb; }
    #lo-stage { grid-area:st; margin:12px 0 12px 12px; padding:16px 12px 12px; display:flex; flex-direction:column; justify-content:center; }
    .lo-hud { grid-area:hud; grid-template-columns:1fr 1fr; gap:8px; padding:14px 14px 6px 12px; align-content:start; }
    .lo-hud > div { border-left:0; padding:9px 6px 8px; border-radius:10px; background:#ffffff08; border:1px solid #ffffff10; }
    .lo-hud .lo-scorebox { grid-column:1 / -1; padding:10px 6px; }
    .lo-hud strong { font-size:1.12rem; }
    .lo-hud .lo-scorebox strong { font-size:1.7rem; }
    .lo-hud .lo-lives strong { font-size:1rem; }
    .lo-track { grid-area:tr; margin:8px 14px 8px 12px; }
    .lo-controls { grid-area:ct; grid-template-columns:1fr 1fr; align-self:end; gap:8px; padding:8px 14px 14px 12px; }
}