/* 웨이브 팝: 원탭 연쇄 — 분리된 스타일시트 (코드 품질 개선) */
  /* ===== 시스템 폰트 스택 (한글 포함, 외부 폰트 없음) ===== */
  body{
    margin:0; padding:0; overflow:hidden;
    font-family:'Segoe UI','Malgun Gothic',system-ui,-apple-system,sans-serif;
    background:#0B0E1A; color:#F0F4FF;
    touch-action:none; -webkit-user-select:none; user-select:none;
  }
  /* 더블탭 확대 방지: html/body는 매니풀레이션(더블탭 확대만 차단, 가로 스크롤 허용) */
  html,body{ touch-action:manipulation; }
  /* ===== design.md 팔레트 · 타이포그래피 토큰 (CSS 변수로 정리) ===== */
  html{ font-size:clamp(14px,2vw,18px); }
  :root{
    /* 색상 팔레트 */
    --c-bg:#0B0E1A; --c-fg:#F0F4FF; --c-cyan:#00E5FF;
    --c-magenta:#FF3E9D; --c-gold:#FFD447; --c-sub:#9AA5C4;
    --c-panel:#1C2340; --c-card:#2A3560; --c-danger:#FF5252;
    /* 타이포그래피: 제목 48px·900 / HUD 점수 28px·gold·tabular-nums / 콤보 56px·마젠타 */
    --fw-title:900; --fw-hud:900; --fw-combo:900;
    --fs-title:48px; --fs-hud-score:28px; --fs-combo:56px;
  }
  /* DOM 숫자 폭 고정 (tabular-nums) — canvas fillText는 미지원, DOM 텍스트 요소에 적용 */
  .tnum{ font-variant-numeric:tabular-nums; }
  #c{ display:block; width:100vw; height:100vh; touch-action:none; }

  /* ===== 게임 종료 버튼 (모든 화면에서 최상단) ===== */
  #btnExit{
    position:fixed; top:8px; right:8px;
    z-index:9999; width:44px; height:44px; border-radius:50%;
    border:none; background:rgba(28,35,64,.85); color:#F0F4FF;
    font-size:22px; line-height:1; cursor:pointer;
    box-shadow:0 0 10px rgba(0,229,255,.35);
  }
  #btnExit:active{ transform:scale(.92); }

  /* 도움말 오버레이 닫기(✕) 버튼 */
  #helpClose{
    position:sticky; top:0; right:10px;
    align-self:flex-end;
    width:44px; height:44px; border-radius:50%;
    border:none; background:rgba(0,229,255,.12); color:#00E5FF;
    font-size:20px; line-height:1; cursor:pointer;
  }
  #helpClose:active{ transform:scale(.92); }

  /* 게임오버/업그레이드/준비중/상점 오버레이 닫기(✕) 버튼 — 스크롤 시 상단 고정 */
  #gameoverClose, #upgradeClose, #soonClose, #shopClose{
    position:sticky; top:0; right:10px;
    width:44px; height:44px; border-radius:50%;
    border:none; font-size:20px; line-height:1; cursor:pointer;
  }
  #gameoverClose{ background:rgba(255,62,157,.15); color:#FF3E9D; }
  #upgradeClose{ background:rgba(0,229,255,.12); color:#00E5FF; }
  #soonClose{ background:rgba(0,229,255,.12); color:#00E5FF; }
  #shopClose{ background:rgba(255,212,71,.15); color:#FFD447; }
  #gameoverClose:active, #upgradeClose:active, #soonClose:active, #shopClose:active{ transform:scale(.92); }

  /* 일시정지 오버레이 닫기(✕) 버튼 — ov-panel 우상단 절대배치 */
  #pauseClose{
    position:absolute; top:12px; right:12px;
    width:44px; height:44px; border-radius:50%;
    border:none; background:rgba(0,229,255,.12); color:#00E5FF;
    font-size:20px; line-height:1; cursor:pointer;
    z-index:1;
  }
  #pauseClose:active{ transform:scale(.92); }

  /* ===== 공용 오버레이 ===== */
.ov{
    position:fixed; inset:0; z-index:8000;
    background:rgba(11,14,26,.85);
    display:none;
    overflow:auto;
}
.ov.show{ display:flex; justify-content:center; align-items:center; min-height:100%; padding:20px 0; overflow-y:auto; }
.ov .ov-panel{ margin:0 auto; flex-shrink:0; }
  .ov-panel{
    position:relative;
    display:flex; flex-direction:column; min-height:0;
    background:#1C2340; border:2px solid rgba(0,229,255,.4);
    border-radius:18px; padding:24px; width:min(92vw,460px);
    /* 잘림 방지 핵심: 뷰포트 높이 제한 + 내부 스크롤 (ov-body가 스크롤) */
    max-height:min(90dvh,720px);
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    text-align:left; line-height:1.6; font-size:15px;
    overflow-wrap:anywhere;
  }
  /* 모든 오버레이 패널을 flex column으로 통일하여 sticky 헤더/푸터가 스크롤 중에도 고정되도록 보장 */
.ov.show .ov-panel{
    display:flex; flex-direction:column;
    max-height:min(90vh,720px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
  /* 도움말 오버레이: 90vh 높이 제한 + 내부 스크롤로 닫기/시작 버튼 잘림 방지 */
#helpOv .ov-panel{ max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .ov-panel h2{ margin:0 0 12px; font-size:22px; letter-spacing:1px;
    background:linear-gradient(90deg,#00E5FF,#FF3E9D);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ov-panel p{ margin:8px 0; }
  .ov-panel ul{ margin:8px 0; padding-left:20px; }
  .ov-panel li{ margin:5px 0; }

/* 닫기/시작 버튼 sticky: 항상 뷰포트 내 유지 (스크롤해도 접근) */
  .ov-sticky{
    position:sticky; bottom:0;
    background:#1C2340; padding-top:14px; margin-top:16px;
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
    flex-shrink:0;
  }

  /* ===== 버튼 (패딩 기반 — 스페인어 길이 대응) ===== */
  .btn{
    font-family:inherit; font-size:16px; font-weight:700;
    padding:14px 24px; min-height:48px; border-radius:20px; cursor:pointer;
    border:none; background:#00E5FF; color:#0B0E1A; white-space:normal;
  }
  .btn:active{ transform:scale(.95); }
  .btn.ghost{
    background:rgba(0,229,255,.12); color:#00E5FF;
    border:2px solid #00E5FF;
  }
  .btn.spaced{ min-width:120px; min-height:80px; font-size:18px; }

  /* ===== 업그레이드 카드 (런 완료 시 3장) ===== */
  .upg-card{
    flex:1 1 120px; box-sizing:border-box; min-width:120px; min-height:96px;
    background:#2A3560; border:2px solid #00E5FF; border-radius:14px;
    padding:12px 8px; text-align:center; cursor:pointer;
    font-family:inherit; color:#F0F4FF; font-weight:700; line-height:1.3;
    overflow-wrap:anywhere; white-space:normal;
  }
  .upg-card:active{ transform:scale(.94); background:#00E5FF; color:#0B0E1A; }

  /* ===== 상점 아이템 카드 (이슈 12/13) ===== */
  .shop-card{
    flex:1 1 45%; box-sizing:border-box; min-width:150px; min-height:120px;
    background:#2A3560; border:2px solid #FFD447; border-radius:14px;
    padding:12px 10px; text-align:center; display:flex; flex-direction:column;
    gap:6px; margin:0; overflow-wrap:anywhere; white-space:normal;
  }
  .shop-card .btn{ width:100%; padding:7px 2px; font-size:14px; min-height:40px; }
  .shop-card .btn:disabled{ background:#3A4870; color:#7A86A6; border:none; cursor:default; }

  /* ===== 시작 화면 오버레이 (DOM): 언어 선택 버튼 3개 ===== */
  #startOverlay{
    position:fixed; inset:0; z-index:7000; /* btnExit(9999)보다 아래 — 종료 버튼 확보 */
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; pointer-events:none; /* Canvas 시작 화면의 탭/버튼 유지 */
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  #langSelect{
    align-self:flex-start; margin-top:auto; justify-content:flex-start !important;
  }
  #langSelect .lang-btn{
    background:rgba(0,229,255,.12); color:#00E5FF; border:1px solid #00E5FF;
    border-radius:20px; cursor:pointer; font-family:inherit; font-weight:700;
    padding:8px 16px; min-height:44px; white-space:normal;
  }
  #langSelect .lang-btn.active{
    background:#00E5FF; color:#0B0E1A;
  }
  /* 언어 선택 버튼(ko/en/es)은 DOM이 아닌 canvas(renderStart)로 렌더링되므로 */
  /* ===== 반응형 레이아웃 (이슈 9/13: 미디어쿼리 + clamp/뷰포트 단위 + min/max-width) ===== */
  /* 대형 화면 (1200px 이상): 넓은 패널, 고정 최대 폭으로 가독성 극대화 */
  @media (min-width:1200px){
    #c{ width:100vw; height:100vh; }
    .ov-panel{ width:min(68vw,760px); max-width:760px; padding:32px; font-size:16px; }
    .ov-panel h2{ font-size:clamp(22px,2.6vw,28px); }
    .btn{ font-size:clamp(16px,1.4vw,18px); padding:16px 28px; min-width:140px; }
    .btn.spaced{ min-width:clamp(140px,10vw,180px); min-height:min(90px,12dvh); }
    .upg-card{ flex:1 1 160px; min-width:160px; min-height:110px; }
    .shop-card{ flex:1 1 50%; min-width:200px; min-height:150px; }
    #helpClose,#pauseClose{ width:52px; height:52px; font-size:24px; }
  }
  /* 울트라와이드 (1400px 이상): 최대 가독성을 위한 확장 레이아웃 */
  @media (min-width:1400px){
    .ov-panel{ width:min(60vw,900px); max-width:900px; padding:40px; font-size:clamp(16px,1.3vw,20px); }
    .ov-panel h2{ font-size:clamp(24px,2vw,32px); }
    .btn{ font-size:clamp(17px,1.2vw,20px); padding:18px 32px; min-width:160px; }
    .btn.spaced{ min-width:clamp(160px,8vw,200px); min-height:min(100px,10dvh); }
    .upg-card{ flex:1 1 200px; min-width:200px; min-height:130px; }
    .shop-card{ flex:1 1 45%; min-width:240px; min-height:170px; }
  }
  /* 중간 화면 & 소형 데스크톱 (721–1199px): 균형 잡힌 고정 폭 */
  @media (min-width:721px) and (max-width:1199px){
    .ov-panel{ width:min(84vw,560px); max-width:560px; padding:28px; font-size:15px; }
    .ov-panel h2{ font-size:clamp(20px,2vw,24px); }
    .btn{ padding:14px 24px; min-width:120px; }
    .btn.spaced{ min-width:min(130px,22vw); }
    .upg-card{ flex:1 1 140px; min-width:140px; min-height:120px; }
    .shop-card{ flex:1 1 48%; min-width:180px; min-height:140px; }
  }
  /* 태블릿/대형 폰 (481–720px): 세로 릷아웃 유지 + 폰트 미세 축소 */
  @media (min-width:481px) and (max-width:720px){
    .ov-panel{ width:min(92vw,480px); max-width:480px; padding:20px; font-size:14px; }
    .ov-panel h2{ font-size:clamp(18px,3vw,22px); }
    .ov-panel .ov-sticky .btn{ min-width:min(116px,30vw); }
    .btn{ font-size:15px; padding:12px 20px; min-height:46px; }
    .upg-card{ flex:1 1 clamp(120px,30vw,150px); min-width:120px; min-height:96px; }
    .shop-card{ flex:1 1 46%; min-width:160px; min-height:130px; }
  }
  /* 모바일 (≤480px): 터치 타깃 ≥44px, 좁은 폭에 맞춘 카드 배치 */
  @media (max-width:480px){
    .ov-panel{ width:min(94vw,420px); max-width:420px; padding:16px; font-size:13px; }
    .ov-panel h2{ font-size:clamp(16px,4vw,20px); }
    .ov-panel .ov-sticky .btn{ min-width:min(120px,46vw); min-height:48px; }
    .btn{ font-size:14px; padding:12px 16px; min-height:44px; }
    .btn.spaced{ min-width:min(120px,44vw); min-height:min(76px,14dvh); }
    .upg-card{ flex:1 1 100%; min-width:0; min-height:88px; }
    .shop-card{ flex:1 1 44%; min-width:150px; min-height:120px; }
    #helpClose,#pauseClose{ width:46px; height:46px; font-size:20px; }
    #langSelect .lang-btn{ min-height:44px; }
  }
  /* 낮은 높이(≤560px) 보조: 패널이 90dvh를 넘기 전에 내부 스크롤 보장 */
  @media (max-height:560px){
    .ov-panel{ max-height:min(80dvh,560px); }
  }
  /* 가로 모드(landscape, 짧은 세로): 패널·버튼을 뷰포트 높이에 맞게 축소 */
  @media (orientation:landscape) and (max-width:820px){
    .ov-panel{ max-height:min(78dvh,460px); padding:12px; font-size:13px; }
    .ov-panel h2{ font-size:18px; }
    .btn{ min-height:42px; font-size:13px; padding:10px 14px; }
  }
     /* #startOverlay .lang-btn CSS는 미사용 dead code였음 — 제거 */

  /* ===== 시작 오버레이 반응형 (인라인 스타일 보완) ===== */
  @media (max-width:480px){
    #startOverlay #quickStart{ font-size:clamp(16px,4vw,18px); min-height:48px; padding:0 16px; }
    #langSelect .lang-btn{ font-size:clamp(12px,3vw,14px); padding:6px 12px; }
  }
  @media (min-width:481px) and (max-width:720px){
    #startOverlay #quickStart{ font-size:clamp(17px,2.5vw,20px); min-height:52px; }
    #langSelect .lang-btn{ font-size:clamp(13px,2vw,15px); padding:7px 14px; }
  }
  @media (min-width:721px){
    #startOverlay #quickStart{ font-size:clamp(18px,1.8vw,22px); min-height:56px; }
    #langSelect .lang-btn{ font-size:clamp(14px,1.5vw,16px); padding:8px 16px; }
  }
  /* HUD 점수 반응형 */
  #hudScore{ font-size:clamp(18px,2.5vw,28px); top:clamp(8px,1.5vh,16px); right:clamp(40px,5vw,64px); }

  /* 시작/언어 버튼 반응형 (인라인 스타일 보완) */
  #startOverlay #quickStart{ font-size:clamp(16px,3vw,22px); padding:clamp(12px,2vh,16px) clamp(20px,3vw,32px); min-height:clamp(48px,6vh,64px); border-radius:clamp(20px,2.5vw,28px); }
  #langSelect .lang-btn{ font-size:clamp(12px,2vw,16px); padding:clamp(6px,1vh,10px) clamp(12px,2vw,20px); min-height:clamp(44px,5vh,48px); border-radius:clamp(18px,2vw,24px); }

  /* 언어 선택 버튼 화면 밖 잘림 방지 (≤320px): wrap으로 줄 바꿈 + 항목 폭 제한 */
  #langSelect{ flex-wrap:wrap; justify-content:center; width:100%; max-width:100%; }
  #langSelect .lang-btn{ flex:0 1 auto; max-width:100%; }

  /* 오버레이 헤더/스티키/닫기 버튼 반응형 */
  .ov-header{ padding-bottom:clamp(8px,1vh,12px) !important; }
  .ov-header h2{ font-size:clamp(18px,2.5vw,24px) !important; }
  .ov-header button{ width:clamp(36px,4.5vw,44px) !important; height:clamp(36px,4.5vw,44px) !important; font-size:clamp(16px,2vw,20px) !important; }
  .ov-body{ padding:clamp(12px,2vh,16px) 0 !important; }
  .ov-sticky{ padding-top:clamp(10px,1.5vh,14px) !important; margin-top:clamp(12px,2vh,16px) !important; gap:clamp(8px,1.5vw,12px) !important; }
  #gameoverClose, #upgradeClose, #soonClose, #shopClose, #pauseClose{ width:clamp(36px,4.5vw,44px) !important; height:clamp(36px,4.5vw,44px) !important; font-size:clamp(16px,2vw,20px) !important; }

  /* 버튼 기본 반응형 강화 */
  .btn{ font-size:clamp(14px,1.8vw,18px); padding:clamp(12px,1.5vh,16px) clamp(20px,2.5vw,28px); min-height:clamp(44px,5.5vh,52px); border-radius:clamp(18px,2vw,24px); }
  .btn.spaced{ min-width:clamp(110px,15vw,140px); min-height:clamp(70px,10vh,90px); font-size:clamp(16px,2vw,20px); }

  /* ===== 반응형 보강 (≤768px): 게임 패널 컨테이너 폭 제한 + 폰트 clamp() ===== */
  @media (max-width:768px){
    .ov-panel{ margin:0 auto; width:100%; max-width:480px; font-size:clamp(13px,2.2vw,15px); }
    .ov-panel h2{ font-size:clamp(16px,4.5vw,20px); }
    .btn{ font-size:clamp(13px,1.8vw,16px); }
    .btn.spaced{ min-width:clamp(104px,14vw,128px); min-height:clamp(64px,10vh,80px); }
    #hudScore{ font-size:clamp(16px,2.5vw,22px); top:clamp(6px,1.2vh,12px); right:clamp(40px,5vw,64px); }
    /* 게임 주요 타이포그래피 토큰을 clamp()로 반응형화 (제목/HUD/콤보) */
    :root{
      --fs-title:clamp(30px,9vw,48px);
      --fs-hud-score:clamp(18px,4.5vw,28px);
      --fs-combo:clamp(34px,10vw,56px);
    }
  }