html,body{margin:0;padding:0;width:100%;height:100%;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;background:#161a33;overflow:hidden}
#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.screen{display:none;width:100%;max-width:520px;height:100%;max-height:900px;margin:0 auto;position:relative;box-sizing:border-box;overflow:hidden}
.screen.active{display:flex;flex-direction:column}

/* 홈 화면 */
#home{background-image:url('./assets/hero.webp');background-size:cover;background-position:top center;align-items:center;justify-content:flex-end}
@media (max-width:899px) and (orientation:portrait){
  #home{
    background-image:url('./assets/hero-m.webp');
    background-size:100% 100%;
    background-position:center top;
    width:min(100vw,calc(100svh * 941 / 1672));
    height:auto;
    aspect-ratio:941/1672;
    max-width:none;
    max-height:none
  }
  #home:after{display:none}
  #home .start-btn{
    position:absolute;left:14%;right:14%;bottom:5%;height:12%;
    margin:0;padding:0;background:transparent;border:0;box-shadow:none;
    color:transparent;font-size:0
  }
}
#home:after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(rgba(22,26,51,0),#161a33 70%);pointer-events:none}
.start-btn{position:relative;z-index:1;margin-bottom:8%;background:linear-gradient(#ffd867,#ffb62e);border:4px solid #fff;color:#5a3300;font-size:22px;font-weight:900;padding:14px 46px;border-radius:40px;box-shadow:0 6px 0 #d98f00;cursor:pointer}
.start-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #d98f00}

/* 게임 화면 */
#game{background:radial-gradient(circle at 50% 30%,#26305c,#11142a 75%);padding:12px;box-sizing:border-box}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:4px 6px}
.topbar .home-btn{background:#fff;border:none;border-radius:50%;width:38px;height:38px;font-size:18px;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.progress-pill{background:#fff;border-radius:20px;padding:6px 16px;font-weight:800;color:#2a3a8f;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.shape-name{text-align:center;color:#ffe9a8;font-weight:800;font-size:22px;margin:4px 0 2px;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.hint{text-align:center;color:#b9c2f0;font-weight:600;font-size:15px;margin:0 0 6px}

.web-wrap{flex:1;position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
.web-canvas{position:relative;width:96%;aspect-ratio:1/1;max-height:100%}
.web-canvas svg{position:absolute;inset:0;width:100%;height:100%}
.web-bg-line{stroke:#8fa2e6;stroke-width:.7;opacity:.85}
.path-line{stroke:#ffd867;stroke-width:1.6;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 4px #ffd867)}
.dot{position:absolute;width:38px;height:38px;margin-left:-19px;margin-top:-19px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9fb0ff 70%);border:3px solid #fff;box-shadow:0 0 8px rgba(255,255,255,.6);cursor:pointer;transition:transform .15s,background .2s}
.dot.correct{background:radial-gradient(circle at 35% 30%,#fff,#6ee27a 70%);transform:scale(1.15)}
.dot.wrong{animation:shake .35s}
.dot.used{pointer-events:none}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* 결과 모달 */
.modal-backdrop{position:absolute;inset:0;background:rgba(10,12,30,.6);display:flex;align-items:center;justify-content:center;z-index:5}
.modal-card{background:#fff;border-radius:24px;padding:26px 22px;width:80%;max-width:320px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.modal-card .big-emoji{font-size:52px}
.modal-card h2{margin:8px 0 4px;font-size:20px;color:#1b2060}
.modal-card p{margin:0 0 16px;color:#4a4f90;font-size:14px;line-height:1.5}
.modal-card button{background:#2a3a8f;color:#fff;border:none;border-radius:30px;padding:10px 28px;font-size:16px;font-weight:800;cursor:pointer}

/* 클리어 화면 */
#clear{background:radial-gradient(circle at 50% 30%,#26305c,#11142a 75%);align-items:center;justify-content:center;text-align:center;gap:10px}
#clear .stars{font-size:40px}
#clear h1{color:#ffe9a8;margin:0}
#clear p{color:#b9c2f0}
#clear button{margin-top:10px}

@media (max-width:380px){.dot{width:26px;height:26px;margin-left:-13px;margin-top:-13px}}

/* 2차 개편: 거미줄 판 + 작은 이슬방울 점 */
#game{background:radial-gradient(circle at 50% 45%,#2c3a6e 0%,#161c3d 60%,#0d1024 100%)}
.web-canvas{width:96%;aspect-ratio:1/1;max-height:100%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),rgba(255,255,255,0) 70%)}
.web-bg .web-spoke{stroke:#b8c6ff;stroke-width:.55;opacity:.75}
.web-bg .web-ring{fill:none;stroke:#b8c6ff;stroke-width:.5}
.path-line{stroke:#ffd867;stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.path-glow{stroke:#ffd867;stroke-opacity:.28;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.node{position:absolute;width:30px;height:30px;margin-left:-15px;margin-top:-15px;cursor:pointer;border-radius:50%}
.node::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bfe6ff 60%,#7fb6e6);box-shadow:0 0 5px rgba(190,230,255,.9);transition:transform .15s}
.node.picked::after{background:radial-gradient(circle at 35% 30%,#fff,#ffe9a8 60%,#f5b84a);box-shadow:0 0 8px #ffd867;transform:scale(1.5)}
.node:active::after{transform:scale(1.3)}
.game-btns{display:flex;gap:10px;justify-content:center;padding:4px 0 10px}
.ghost-btn{background:rgba(255,255,255,.1);color:#e8ecff;border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:8px 14px;font-size:14px;font-weight:700;cursor:pointer}
.hint.warn{color:#ffd9a0}
#clear .clear-emoji{font-size:56px}

/* 도감: 거미줄 화면과 같은 배경·선·노란 빛 */
#dex{background:radial-gradient(circle at 50% 45%,#2c3a6e 0%,#161c3d 60%,#0d1024 100%);padding:12px;box-sizing:border-box;justify-content:flex-start;overflow-y:auto}
.dex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:420px;margin:8px auto 24px}
.dex-card{overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(184,198,255,.28);border-radius:18px;padding:10px 8px 12px;text-align:center;box-shadow:inset 0 0 18px rgba(143,162,230,.12)}
.dex-card.locked{border-style:dashed;opacity:.75}
.dex-art{display:flex;justify-content:center;align-items:center;gap:2px;margin-bottom:2px}
.dex-svg{width:54px;height:54px;overflow:visible}
.dex-art .dex-svg:only-child{width:84px;height:84px}
.dex-web line,.dex-web path{fill:none;stroke:#b8c6ff;stroke-width:.5;opacity:.5}
.dex-shape{fill:rgba(255,216,103,.14);stroke:#ffd867;stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(255,216,103,.8))}
.dex-dot{fill:#bfe6ff;filter:drop-shadow(0 0 2px #bfe6ff)}
.dex-q{fill:#b8c6ff;font-size:40px;font-weight:800}
.dex-name{color:#ffe9a8;font-weight:800;font-size:15px;margin-top:4px;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.dex-card.locked .dex-name{color:#8f9bd0}
.dex-fact{color:#b9c2f0;font-size:12px;line-height:1.45;margin:4px 0 0;word-break:keep-all;text-wrap:balance}
.modal-art{gap:10px;min-height:0;margin-bottom:6px}
.modal-art .dex-svg{width:84px;height:84px}
.modal-art .dex-web line,.modal-art .dex-web path{stroke:#2a3a8f;opacity:.22}
.modal-art .dex-shape{fill:rgba(42,58,143,.12);stroke:#2a3a8f;filter:none}
.modal-art .dex-dot{fill:#2a3a8f;filter:none}

/* 모바일: 탭할 때 파란 하이라이트·확대 더블탭·길게 누르기 선택이 깜박이지 않도록 */
#game,#game *{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#game{touch-action:manipulation}
.web-canvas,.node{touch-action:manipulation}

/* 아주 좁은 화면(320px대): 버튼 글자가 줄바꿈되지 않게 줄이기 */
.ghost-btn{white-space:nowrap}
@media (max-width:360px){
  .game-btns{gap:6px}
  .ghost-btn{padding:8px 9px;font-size:13px;flex:1 1 0;min-width:0}
  .shape-name{font-size:19px}
  .hint{font-size:13px}
}

/* 레벨: 거미줄이 한 겹씩 자라고, 레벨 밖의 점은 숨어 있어요 */
.node.off{display:none}
.web-bg.web-grow{animation:webGrow .9s ease-out both;transform-origin:50px 50px}
@keyframes webGrow{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.web-bg path{fill:none}
.web-bg line,.web-bg path{stroke:#b8c6ff;stroke-width:.55;opacity:.75}
.web-bg path{stroke-width:.5}

/* 배경: 첫 화면 일러스트를 흐리고 어둡게 깔아 화면 전체(PC 옆 여백 포함)가 한 세계로 보이게 */
#app{position:relative;isolation:isolate;overflow:hidden}
#app::before{content:'';position:absolute;inset:-24px;z-index:-1;background:url('./assets/bg-game-screen.webp') center/cover no-repeat;pointer-events:none}
@media (max-width:899px) and (orientation:portrait){
}
#game,#dex,#clear{background:radial-gradient(circle at 50% 42%,rgba(14,18,46,.5),rgba(30,26,70,.15) 60%,transparent 85%)}
/* 거미줄 세계: 배경 뒤에 큰 거미줄 한 장을 깔고 이슬 빛 점을 얹는다 (실제 그림이 준비되기 전 임시) */
#game>*:not(.modal-backdrop),#dex>*,#clear>*{position:relative;z-index:1}

/* 레벨 예시: 현재 레벨 도형을 작게 보여 주고, 못 찾은 것은 ? */
.level-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0 4px}
.lv-chip{width:38px;height:38px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed rgba(184,198,255,.45);border-radius:12px;color:#b8c6ff;font-weight:800;font-size:18px;background:rgba(255,255,255,.04)}
.lv-chip .dex-svg{width:34px;height:34px}
.lv-chip.locked{font-size:16px}
.modal-strip{gap:8px;margin-bottom:14px}
.modal-strip .lv-chip{width:64px;height:auto;padding:6px 2px;border-color:rgba(42,58,143,.35);color:#1b2060}
.modal-strip .lv-chip .dex-svg{width:44px;height:44px}
.modal-strip .lv-chip .dex-web line,.modal-strip .lv-chip .dex-web path{stroke:#2a3a8f;opacity:.22}
.modal-strip .lv-chip .dex-shape{fill:rgba(42,58,143,.12);stroke:#2a3a8f;filter:none}
.modal-strip .lv-chip em{font-style:normal;font-size:10px;font-weight:700;margin-top:2px}

/* 상단 뒤로가기: 게임 공통 주황 아이콘 */
.back-btn{background:none;box-shadow:none;padding:0;width:44px;height:44px;border:none}
.back-btn img{width:100%;height:100%;display:block}
/* 미션 안내: 지금 찾을 도형과 그리는 법 */
.mission-hint{text-align:center;color:#ffe9a8;font-weight:700;font-size:14px;margin:0 0 6px;line-height:1.45;padding:0 14px}

/* 안내 문구: 코드에 넣은 줄바꿈을 그대로 보여 준다 */
.hint,.mission-hint{white-space:pre-line}

/* 팝업: 첫 화면·게임 화면과 같은 밤하늘 카드 + 노란 빛 버튼 */
.modal-backdrop{background:rgba(8,10,28,.72)}
.modal-card{background:linear-gradient(#2a3466,#151b3a);border:1.5px solid rgba(184,198,255,.35);border-radius:26px;box-shadow:0 0 0 6px rgba(255,216,103,.07),0 16px 40px rgba(0,0,0,.55);color:#e8ecff}
.modal-card h2{color:#ffe9a8;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.modal-card p{color:#b9c2f0}
.modal-card .modal-note{color:#ffd9a0}
.modal-card button{background:linear-gradient(#ffd867,#ffb62e);color:#5a3300;border:3px solid #fff;box-shadow:0 5px 0 #d98f00;font-weight:900;border-radius:40px;padding:11px 34px;font-size:17px}
.modal-card button:active{transform:translateY(3px);box-shadow:0 2px 0 #d98f00}
.modal-art .dex-web line,.modal-art .dex-web path{stroke:#b8c6ff;opacity:.5}
.modal-art .dex-shape{fill:rgba(255,216,103,.14);stroke:#ffd867;filter:drop-shadow(0 0 3px rgba(255,216,103,.8))}
.modal-art .dex-dot{fill:#bfe6ff;filter:drop-shadow(0 0 2px #bfe6ff)}
.modal-strip .lv-chip{border-color:rgba(184,198,255,.45);color:#b8c6ff;background:rgba(255,255,255,.05)}
.modal-strip .lv-chip .dex-web line,.modal-strip .lv-chip .dex-web path{stroke:#b8c6ff;opacity:.5}
.modal-strip .lv-chip .dex-shape{fill:rgba(255,216,103,.14);stroke:#ffd867;filter:drop-shadow(0 0 2px rgba(255,216,103,.8))}
.modal-strip .lv-chip em{color:#e8ecff}

/* 상단: 진행 알약 옆에 도감 버튼 */
.top-right{display:flex;align-items:center;gap:8px}
.dex-btn{background:#fff;border:none;border-radius:50%;width:38px;height:38px;font-size:18px;box-shadow:0 2px 4px rgba(0,0,0,.25);cursor:pointer}
/* 하단 버튼 3개: 되돌리기(파랑) / 힌트 보기(노랑) / 다시 하기(보라) */
.game-btns .ghost-btn{border:none;border-radius:30px;padding:12px 14px;font-size:15px;box-shadow:0 4px 0 rgba(0,0,0,.25);color:#fff}
#undoBtn{background:linear-gradient(#6fa0ff,#2f5fd6)}
#hintBtn{background:linear-gradient(#ffe27a,#f2b93b);color:#5a3300}
#clearPathBtn{background:linear-gradient(#b49bff,#7b5be0)}
/* 힌트 팝업 */
.hint-art{width:120px;margin:8px auto 12px}
.hint-art svg{width:100%;height:auto}
.hint-text{white-space:pre-line}

/* 휴대폰 가로 모드: 세로 배경을 가운데로 넓혀 그대로 게임을 한다 (안내 화면은 쓰지 않음) */
.rotate-hint{display:none}
/* 가로로 긴 화면: 왼쪽에 글과 버튼, 오른쪽에 거미줄을 크게 둔다 */
@media (orientation: landscape) and (max-height: 500px){
  .screen{max-width:none;max-height:none}
  #game.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:14px;align-content:stretch}
  #game .topbar{grid-column:1 / -1;grid-row:1}
  #game .shape-name,#game .mission-hint,#game .level-strip,#game .hint,#game .game-btns{grid-column:1}
  #game .web-wrap{grid-column:2;grid-row:2 / span 6;min-height:0;height:100%}
  #game .web-canvas{max-height:100%}
  #game .modal-backdrop{grid-column:1 / -1;grid-row:1 / -1}
}

/* 왼쪽 위 홈 버튼: 공통 집 아이콘 (뒤로가기 버튼과 같은 방식) */
.topbar .home-btn{background:none;box-shadow:none;padding:0;width:44px;height:44px;border:none}
.home-btn img{width:100%;height:100%;display:block}

/* 처음 화면: 레벨 고르기와 전체 초기화 */
/* 처음 화면 아래 줄: 시작 버튼 밑에 작게 붙인다 */
.home-tools{position:absolute;left:0;right:0;bottom:6px;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.home-tools-title{display:none}
.home-levels{display:flex;gap:6px}
.home-tools .ghost-btn{padding:6px 10px;font-size:12px;border-radius:14px;background:rgba(22,26,51,.7)}
.reset-btn{font-size:12px}

/* 거미줄 선을 조금 얇고 부드럽게 (세부 실은 더 흐리게) */
.web-bg line,.web-bg path{stroke-width:.42}
.web-bg .web-thread{stroke-width:.3;opacity:.5}

/* 거미줄 실 위의 이슬 방울 (시안처럼 빛나는 점) */
.web-bg .dew-bead{fill:#eaf6ff;stroke:none;opacity:.9}

/* 발견 팝업 주변의 반짝이는 별 장식 (시안처럼) */
.modal-card{position:relative;overflow:hidden}
.modal-card>*{position:relative}
.modal-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle,#fff3b0 0 1.6px,transparent 2.6px) 8% 10%/10px 10px no-repeat,
  radial-gradient(circle,#fff3b0 0 1.4px,transparent 2.4px) 91% 16%/9px 9px no-repeat,
  radial-gradient(circle,#fff3b0 0 1.8px,transparent 2.8px) 14% 52%/12px 12px no-repeat,
  radial-gradient(circle,#fff3b0 0 1.4px,transparent 2.4px) 86% 58%/9px 9px no-repeat,
  radial-gradient(circle,#fff3b0 0 1.6px,transparent 2.6px) 22% 88%/10px 10px no-repeat,
  radial-gradient(circle,#fff3b0 0 1.4px,transparent 2.4px) 78% 92%/9px 9px no-repeat,
  radial-gradient(circle,#fff3b0 0 1.8px,transparent 2.8px) 50% 4%/12px 12px no-repeat}

/* 아직 못 찾은 도형: 시안처럼 노란 점선 윤곽으로 보여 준다 */
.lv-chip.shape-hint{border-color:rgba(255,216,103,.6)}
.lv-chip.shape-hint .dex-shape{fill:rgba(255,216,103,.08);stroke:#ffd867;stroke-width:5;stroke-dasharray:5 4;opacity:.85;filter:none}
.lv-chip.shape-hint .dex-web line,.lv-chip.shape-hint .dex-web path{opacity:.3}