/* ===================================== */
/* Global Reset & Base */
/* ===================================== */
/*=====================================*/
/* Theme Fonts                         */
/*=====================================*/

@font-face {
    font-family: "JSArirangHON";
    src: url("../fonts/JSArirangHON.ttf") format("truetype");
}

/* @font-face {
    font-family: "speed";
    src: url("../fonts/speed.ttf") format("truetype");
}

@font-face {
    font-family: "JSArirangHON";
    src: url("../fonts/JSArirangHON.ttf") format("truetype");
}  */

:root{
    --themeFont: "JSArirangHON";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;  /* Chrome, Edge, Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* 옛날 IE */
  user-select: none;          /* 표준 */
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--themeFont), Arial, Helvetica, sans-serif;
  /*background-image: url("../theme/jurassic/bg.png"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ===================================== */
/* 웰컴화면 게임화면 기본 세팅             */
/* ===================================== */
.screen{
    display:none;
}

.screen.active{
    display:flex;
}

/* ===================================== */
/* 공통 메뉴 패널 스타일                   */
/* ===================================== */
#menuPannelWelcome {
  position: relative;   /* 화면 아래 고정 */  
  flex-direction: row;  
  justify-content: center;
  align-items: center;
  z-index: 3000;
  pointer-events: auto;
}

#menuPannelPlay {
  position: relative;   /* 화면 아래 고정 */  
  flex-direction: row;  
  justify-content: center;
  align-items: center;
  z-index: 3000;
  pointer-events: auto;
}

.menuRow {
  display: flex;
  flex-direction: row;  
  justify-content: center;
  align-items: center;
  transform: scale(1);  
  gap: calc(min(1vw, 1vh));
}

.menu {
  -webkit-tap-highlight-color: transparent;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* PC만 hover */
@media (hover: hover) and (pointer: fine) {
  .menu:hover {
      transform: scale(1.1);
      filter:
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  }
}

/* 모바일은 selected만 */
.menu.selected{
    transform: scale(1.1);
    filter:
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
}

/* ===================================== */
/* 웰컴화면 구성과 레벨 선택 효과 */
/* ===================================== */

  #welcomeScreen {
    /*display: flex; */
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    text-align: center;      
  }

  #logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #welcomeScreen #levelList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }  

  #welcomeScreen .level {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    pointer-events: auto;
  }

  #welcomeScreen .level:hover {
    transform: scale(1.05);
    filter:
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
    transition: 0.2s ease;
  }

  #welcomeScreen .level.selected {
    transform: scale(1.05);
    filter:
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
    transition: 0.2s ease;
  }

/* ===================================== */
/* 게임화면 구성과 아이콘 */
/* ===================================== */

  #boardContainer {
    position: relative;
    display: flex;
  } 

/* 보드 이미지는 난이도 바보다 아래에 있도록 */
  #board {
    display: block; 
    position: relative;
    z-index: 100;     /* 레벨바보다 낮게 */    
  }

  #grid {
    position: absolute;    
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 0;
    z-index: 200; /* 셀을 보드 위로 올리기 */
  }

  #grid img.icon {
    -webkit-tap-highlight-color: transparent;  
    position:absolute;
    top:50%;
    left:50%;  
    width: 97%;   /* 셀 너비에 맞춤 */
    height: 97%;  /* 셀 높이에 맞춤 */
    transform:translate(-50%,-50%);
    object-fit:contain;
    pointer-events:none;
  }  

  #iconPannel { 
    flex-direction: column;
    align-items: center;
    align-self: center;  
    margin-top: 3vh;
    margin-bottom: 3vh;
  }

  .iconRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: clamp(1px, .5vw, 3px);
    margin-top: clamp(1px, .5vh, 3px);
  }

  .icon {
    -webkit-tap-highlight-color: transparent;
    aspect-ratio:1/1;
    object-fit: contain;
    cursor: pointer;
    transition: 0.2s ease;
    transform: scale(1);
  }

/* PC만 hover */
@media (hover: hover) and (pointer: fine) {
  .icon:hover {
      transform: scale(1.2);
      filter:
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  }
}

/* 모바일은 selected만 */
.icon.selected{
    transform: scale(1.2);
    filter:
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  }



/* ===================================== */
/* Cell */
/* ===================================== */
/* 셀은 항상 클릭 가능하게 */
.cell {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  cursor: pointer;
  aspect-ratio: 1/1;
  display: inline-block;
  overflow: hidden;
  z-index: 200; /* 보드보다 위 */
}

/* 셀 안에 표시되는 알 */
.cell .clickedImage {
    -webkit-tap-highlight-color: transparent;
    position:absolute;
    top:50%;
    left:50%;  
    width: 97%;   /* 셀 너비에 맞춤 */
    height: 97%;  /* 셀 높이에 맞춤 */
    transform:translate(-50%,-50%);
    object-fit:contain;
    pointer-events:none; /* 알 자체는 클릭 막기 */
  z-index: 300;
}

.hatchIcon {
  animation: hatchEgg 0.7s ease-out forwards;
  transform-origin: center center;
}

@keyframes hatchEgg {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  50%   { transform: translate(-50%, -50%) scale(1.2);   opacity: 1; }
  100%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}


/* ===================================== */
/* 상태바, 점수판
/* ===================================== */
#statusBar {
  display: flex;
  justify-content: space-between;   
  align-items: center;
  gap: calc(min(1vw, 1vh));                    /* 점수판과 레벨바 사이 간격 */
  margin-bottom: 0.1vh;
}

#scoreBoard {
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
  margin: 2px auto;  
  z-index: 500;   
}

#scoreBar {
  display: block;
  cursor: pointer;
}

#scoreBar:hover {
  transform: scale(1.05);
  filter:
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

#scoreValue {
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translate(-50%, -40%);
  font-family: var(--themeFont);
  color: #ffd84d;
  -webkit-text-stroke:1.5px #5a2c00;
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(0,0,0,.45);
}

/* ===================================== */
/* 플레이 화면 Level Bar & overlay*/
/* ===================================== */

/* 레벨바 전체 컨테이너 */
#levelBar {
  position: relative;
  display: flex;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  margin: 2px auto;       /* 화면 중앙 배치 */
  z-index: 500;            /* 보드보다 위 */
}

/* 현재 레벨 이미지 */
#currentLevel {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

#currentLevel:hover {
  transform: scale(1.05);
  filter:           
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

/* 오버레이 (난이도 선택 메뉴) */
#levelOverlay {
  position: fixed;
  top: 50%;              /* 레벨바 바로 위에 */
  left: 50%;
  transform: translate(-50%, -50%);
             
  display: none;           /* 기본은 숨김 */
  background: #8d6c00;
  border: 3px solid #fd6d0d;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index: 4000;
  animation: fadeIn 0.3s ease;
}

/* 오버레이 안의 컨텐츠 */
#levelOverlay .overlayContent {
  text-align: center;
}

/* 오버레이 내 간판 */
#levelOverlay .levelChoice {
  display: block;
  width: calc(min( 40vw, 40vh)); 
  margin: 8px auto 8px auto;
  transform: scale(1.05);
  pointer-events: none;
  cursor: default;
}

/* 오버레이 내 레벨 버튼 */
#levelOverlay .level {
  -webkit-tap-highlight-color: transparent;  
  display: block;
  width: calc(min( 35vw, 35vh)); 
  margin: 8px auto 8px auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#levelOverlay .level:hover {
  transform: scale(1.05);
  filter:           
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

/* 페이드인 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===================================== */
/* New Game overlay*/
/* ===================================== */

#newGameOverlay {
  position: fixed;
  top: 50%;              /* 메뉴 바로 위에 */
  left: 50%;
  transform: translate(-50%, -50%);
             
  display: none;           /* 기본은 숨김 */
  background: #8d6c00;
  border: 3px solid #fd6d0d;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index: 5000;
  animation: fadeIn 0.3s ease;  
}

/* 오버레이 안의 컨텐츠 */
#newGameOverlay #newGamePanel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  margin: 2px auto;       /* 화면 중앙 배치 */
  z-index: 500;            /* 보드보다 위 */
}

/* 오버레이 내 간판 */
#newGameOverlay .newGameTitle {
  display: block;
  width: calc(min( 40vw, 40vh)); 
  margin: 9px 9px;
  transform: scale(1);
  pointer-events: none;
  cursor: default;
}

/* 오버레이 내 레벨 버튼 */
#newGameOverlay .dialogButton {
  display: block;
  width: calc(min( 30vw, 30vh)); 
  margin: 9px 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#newGameOverlay .dialogButton:hover {
  transform: scale(1.05);
  filter:           
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

/* ===================================== */
/* Exit overlay*/
/* ===================================== */

#exitOverlay {
  position: fixed;
  top: 50%;              /* 메뉴 바로 위에 */
  left: 50%;
  transform: translate(-50%, -50%);
             
  display: none;           /* 기본은 숨김 */
  background: #8d6c00;
  border: 3px solid #fd6d0d;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index: 5000;
  animation: fadeIn 0.3s ease;  
}

/* 오버레이 안의 컨텐츠 */
#exitOverlay #exitPanel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  margin: 2px auto;       /* 화면 중앙 배치 */
  z-index: 500;            /* 보드보다 위 */
}

/* 오버레이 내 간판 */
#exitOverlay .exitTitle {
  display: block;
  width: calc(min( 40vw, 40vh)); 
  margin: 9px 9px;
  transform: scale(1);
  pointer-events: none;
  cursor: default;
}

/* 오버레이 내 레벨 버튼 */
#exitOverlay .dialogButton {
  display: block;
  width: calc(min( 30vw, 30vh)); 
  margin: 9px 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#exitOverlay .dialogButton:hover {
  transform: scale(1.05);
  filter:           
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

/* ===================================== */
/* save overlay*/
/* ===================================== */

#saveOverlay {
  position: fixed;
  top: 50%;              /* 메뉴 바로 위에 */
  left: 50%;
  transform: translate(-50%, -50%);
             
  display: none;           /* 기본은 숨김 */
  background: #8d6c00;
  border: 3px solid #fd6d0d;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index: 5000;
  animation: fadeIn 0.3s ease;  
}

/* 오버레이 안의 컨텐츠 */
#saveOverlay #savePanel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  margin: 2px auto;       /* 화면 중앙 배치 */
  z-index: 500;            /* 보드보다 위 */
}

/* 오버레이 내 간판 */
#saveOverlay .saveTitle {
  display: block;
  width: calc(min( 40vw, 40vh)); 
  margin: 9px 9px;
  transform: scale(1);
  pointer-events: none;
  cursor: default;
}

/* 오버레이 내 레벨 버튼 */
#saveOverlay .saveSlot {
  display: block;
  width: calc(min( 30vw, 30vh)); 
  margin: 9px 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#saveOverlay .saveSlot:hover {
  transform: scale(1.05);
  filter:           
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

/* ===================================== */
/* Load overlay*/
/* ===================================== */

#loadOverlay {
  position: fixed;
  top: 50%;              /* 메뉴 바로 위에 */
  left: 50%;
  transform: translate(-50%, -50%);
             
  display: none;           /* 기본은 숨김 */
  background: #8d6c00;
  border: 3px solid #fd6d0d;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index: 5000;
  animation: fadeIn 0.3s ease;  
}

/* 오버레이 안의 컨텐츠 */
#loadOverlay #loadPanel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  margin: 2px auto;       /* 화면 중앙 배치 */
  z-index: 500;            /* 보드보다 위 */
}

/* 오버레이 내 간판 */
#loadOverlay .loadTitle {
  display: block;
  width: calc(min( 40vw, 40vh)); 
  margin: 9px 9px;
  transform: scale(1);
  pointer-events: none;
  cursor: default;
}

/* 오버레이 내 레벨 버튼 */
#loadOverlay .saveSlot {
  display: block;
  width: calc(min( 30vw, 30vh)); 
  margin: 9px 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#loadOverlay .saveSlot:hover {
  transform: scale(1.05);
  filter:           
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

/* ===================================== */
/* Theme overlay*/
/* ===================================== */

#themeOverlay {
  position: fixed;
  top: 50%;              /* 메뉴 바로 위에 */
  left: 50%;
  transform: translate(-50%, -50%);
             
  display: none;           /* 기본은 숨김 */
  background: #8d6c00;
  border: 3px solid #fd6d0d;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index: 5000;
  animation: fadeIn 0.3s ease;  
}

/* 오버레이 안의 컨텐츠 */
#themeOverlay #themePanel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  margin: 2px auto;       /* 화면 중앙 배치 */
  z-index: 500;            /* 보드보다 위 */
}

/* 오버레이 내 간판 */
#themeOverlay .themeTitle {
  display: block;
  width: calc(min( 40vw, 40vh)); 
  margin: 9px 9px;
  transform: scale(1);
  pointer-events: none;
  cursor: default;
}

/* 오버레이 내 레벨 버튼 */
#themeOverlay .themeSlot {
  display: block;
  width: calc(min( 30vw, 30vh)); 
  margin: 9px 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#themeOverlay .themeSlot:hover {
  transform: scale(1.05);
  filter:           
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

/* ===================================== */
/* Score overlay*/
/* ===================================== */

#scoreOverlay {
  position: fixed;
  top: 50%;              /* 메뉴 바로 위에 */
  left: 50%;
  transform: translate(-50%, -50%);
             
  display: none;           /* 기본은 숨김 */
  background: #8d6c00;
  border: 3px solid #fd6d0d;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
  z-index: 5000;
  animation: fadeIn 0.3s ease;  
}

/* 오버레이 안의 컨텐츠 */
#scoreOverlay #scorePanel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  margin: 2px auto;       /* 화면 중앙 배치 */
  z-index: 500;            /* 보드보다 위 */
}

/* 오버레이 내 간판 */
#scoreOverlay .scoreTitle {
  display: block;
  width: calc(min( 50vw, 50vh)); 
  margin: 9px 10px;
  transform: scale(1);
  pointer-events: none;
  cursor: default;
}

/* 오버레이 내 레벨 버튼 */
#scoreOverlay .dialogButton {
  display: block;
  width: calc(min( 25vw, 25vh)); 
  margin: 5px 20px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#scoreOverlay .dialogButton:hover {
  transform: scale(1.05);
  filter:           
          drop-shadow(0 0 3px rgb(253, 253, 253))      
          drop-shadow(0 0 1px red)
          drop-shadow(0 0 1px blue);
  transition: 0.2s ease;
}

/* 점수 내용 전체 글자 크기 등 조절 */
#scoreContents{
    width:90%;
    margin:15px 0;
}

/* 한 줄(Current Score, total Score...) */
.scoreRow{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin:10px 0;
    padding:10px 12px;

    border-bottom:1px solid rgba(255,255,255,0.2);
}

/* 글자 */
.scoreRow span{
    font-size:calc(min(3vw,3vh));
    font-weight:normal;
    color:white;
    filter: drop-shadow(0 0 1px rgb(255, 0, 0))
            drop-shadow(0 0 3px rgb(54, 1, 201));
}

/* ===================================== */
/* No Saved Game overlay*/
/* ===================================== */
#toastMessage{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    display:none;

    z-index:99999;

    pointer-events:none;

}

#toastMessage .img{

    width:min(55vw,55vh);

    opacity:0;

    transition:opacity .25s;

}

/* ===================================== */
/* 웰컴 화면 - 가로형 (거의 정사각형)      */
/* ===================================== */
@media (min-aspect-ratio: 1001/1000) and 
       (max-aspect-ratio: 1300/1000) {
  #welcomeScreen {
    flex-direction: row;
  }

  /* 왼쪽: 로고 */
  #logo {
    flex: 1 1 35vw; 
    width: 30vh; 
    transform: scale(1); 
    margin-left: 5vh;
  }

  /* 오른쪽: 레벨리스트 + 메뉴 */
  #welcomeRightArea {
    flex: 1 1 65vw;  /* 오른쪽 영역은 고정 */
    margin-right: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #welcomeScreen #levelList {
    width: 55vh;   
    margin-bottom: 3vh;  
    gap: 1vh;     
  }

  #welcomeScreen .levelChoice {
    width: 55vh; 
  }

  #welcomeScreen .level {
    width: 45vh; 
  }  

  #menuPannelWelcome {
    margin-top: 1vh;
    width: 65vh; 
    margin-right:1vh;
    transform: scale(0.9);  
  }

  #welcomeScreen .menuRow {
    display: flex;
  } 
  
  #welcomeScreen .menu {
  width: 9vh; 
  }
}

/* ===================================== */
/* 웰컴화면 - 가로형 (패드 가로 좁은 것) */
/* ===================================== */
@media (min-aspect-ratio: 1310/1000) and 
       (max-aspect-ratio: 1500/1000) {
  #welcomeScreen {
    flex-direction: row;
  }

  /* 왼쪽: 로고 */
  #logo {
    flex: 1 1 35vw; 
    width: 40vh; 
    transform: scale(1); 
    margin-left: 5vh;
  }

  /* 오른쪽: 레벨리스트 + 메뉴 */
  #welcomeRightArea {
    flex: 1 1 65vw;  /* 오른쪽 영역은 고정 */
    margin-right: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #welcomeScreen #levelList {
    width: 55vh;   
    margin-bottom: 3vh;  
    gap: 1vh;     
  }

  #welcomeScreen .levelChoice {
    width: 55vh; 
  }

  #welcomeScreen .level {
    width: 45vh; 
  }  

  #menuPannelWelcome {
    margin-top: 1vh;
    margin-right:1vh;
    width: 65vh; 
    transform: scale(1);  
  }

  #welcomeScreen .menuRow {
    display: flex;
  } 

  #welcomeScreen .menu {
   width: 9vh; 
  }
}

/* ===================================== */
/* 웰컴화면 - 가로형 (핸드폰, 패드 가로)   */
/* ===================================== */
@media (min-aspect-ratio: 1510/1000) {
  #welcomeScreen {
    flex-direction: row;
  }

  /* 왼쪽: 로고 */
  #logo {
    flex: 1 1 35vw; 
    width: 50vh;
    transform: scale(1); 
    margin-left: 5vh;
  }

  /* 오른쪽: 레벨리스트 + 메뉴 */
  #welcomeRightArea {
    flex: 1 1 65vw;  /* 오른쪽 영역은 고정 */
    margin-right: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #welcomeScreen #levelList {
    width: 55vh;  
    margin-bottom: 3vh;  
    gap: 1vh;     
  }

  #welcomeScreen .levelChoice {
    width: 55vh; 
  }

  #welcomeScreen .level {
    width: 45vh; 
  }  

  #menuPannelWelcome {
    margin-top: 1vh;
    margin-right:1vh;    
    width: 65vh; 
    transform: scale(1.1);  
  }

  #welcomeScreen .menuRow {
    display: flex;
  }

  #welcomeScreen .menu {
    width: 9vh; 
  }
}

/* ===================================== */
/* 웰컴화면 - 세로형 (핸드폰, 패드 세로) */
/* ===================================== */
@media (max-aspect-ratio: 660/1000) {
  #welcomeScreen {
    flex-direction: column;
  }

  #logo {
    width: 45vw; 
  }

  #welcomeScreen #levelList { 
    width: 100vw; 
    margin-bottom: 3vh;
    margin-top: 3vh;
    gap: 1vh;     
  }

  #welcomeScreen .levelChoice {
    width: 60vw; 
  }

  #welcomeScreen .level {
    width: 50vw; 
  }
  
  #menuPannelWelcome {
    width: 100vw; 
    transform: scale(1.1);  
   }

  #welcomeScreen .menuRow {
    display: flex;
  }

  #welcomeScreen .menu {
    width: 9.5vw; 
  }
}

/* ===================================== */
/* 웰컴화면 - 세로형  패드 세로 좁은 것) */
/* ===================================== */
  @media (min-aspect-ratio: 661/1000) and 
         (max-aspect-ratio: 760/1000) {
  #welcomeScreen {
    flex-direction: column;
  }

  #logo {
    width: 40vw; 
  }

  #welcomeScreen #levelList { 
    width: 100vw; 
    margin-bottom: 3vh;
    margin-top: 3vh;
    gap: 1vh;     
  }

  #welcomeScreen .levelChoice {
    width: 60vw; 
  }

  #welcomeScreen .level {
    width: 50vw; 
  }
  
  #menuPannelWelcome {
    display: flex;  
    width: 100vw; 
    transform: scale(1.1);  
   }

  #welcomeScreen .menuRow {
    display: flex;
  }

  #welcomeScreen .menu {
    width: 9.5vw; 
  }
}          

/* ===================================== */
/* 웰컴화면 - 세로형  거의 직사각형) */
/* ===================================== */
  @media (min-aspect-ratio: 761/1000) and 
         (max-aspect-ratio: 1000/1000) {
  #welcomeScreen {
    flex-direction: column;
  }

  #logo {
    width: 35vw; 
  }

  #welcomeScreen #levelList { 
    width: 100vw; 
    margin-bottom: 3vh;
    margin-top: 3vh;
    gap: 1vh;     
  }

  #welcomeScreen .levelChoice {
    width: 60vw; 
  }

  #welcomeScreen .level {
    width: 50vw; 
  }
  
  #menuPannelWelcome {
    display: flex;  
    width: 100vw; 
    transform: scale(1.1);  
   }

  #welcomeScreen .menuRow {
    display: flex;
  }

  #welcomeScreen .menu {
    width: 9.5vw; 
  }
}           


/* ===================================== */
/* 게임화면 - 가로형 (거의 직사각형) */
/* ===================================== */
@media (min-aspect-ratio: 1001/1000) and 
       (max-aspect-ratio: 1309/1000) {
  #playScreen {
    width: 100vw;
    height: 65vh;
    transform: translatey(20%);
    flex-direction: row;
  }

  #boardContainer {
    flex: 1 1 50%;  /* 보드는 50% */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
  }

  #board {
    width: auto;
    height:65vh; 
  }

  #grid {
    width: 60vh;
    height: 60vh;
    margin-top: -0.2vh;
    margin-left: 2.4vh;
  }

  #boardContainer.classic-mode #grid {
    width: 64.5vh;
    height: 64.5vh;
    margin-top: 0;
    margin-left: 0;
  }


  #playRightArea {
    flex: 1 1 50%;  /* 오른쪽 영역은 50% */ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    gap: 1vh;
  }

  #statusBar {
    flex-direction: column;
  }

  #scoreBoard {
    width: 100%;
  }

  #scoreBar {
    width: 33vh;
  }

  #scoreValue {
  font-size: 3.3vh;
  }
  
  #playScreen #levelBar {
    margin-bottom: 0vh;
    width: 100%; 
  } 

  #playScreen  #currentLevel {
    width: 33vh;
  }

  #playScreen #iconPannel { 
    display: grid; 
    grid-template-columns: repeat(3, auto); /* 한 줄에 5개 */
    grid-template-rows: repeat(3, auto);    /* 두 줄 */
    gap: 0.5vh;
  }

  .iconRow {
    display: contents;
  }

  #playScreen .icon {
    width: 10vh;
    height: 10vh;
  }  

  #menuPannelPlay { 
    display: grid; 
    grid-template-columns: repeat(4, auto); /* 한 줄에 4개 */
    grid-template-rows: repeat(2, auto);    /* 두 줄 */
    flex-direction: column;
    align-items: center;   
    justify-content: center;
    transform: scale(0.9);   
    gap: 1vh;
  }

  #playScreen .menuRow {
    display: contents;
  }  

  #playScreen .menu {
    width: 9.5vh; 
  }  

}

/* ===================================== */
/* 게임화면 - 가로형 (패드 가로 좁은 것) */
/* ===================================== */
@media (min-aspect-ratio: 1310/1000) and 
       (max-aspect-ratio: 1509/1000) {
  #playScreen {
    width: 100vw;
    height: 85vh;
    transform: translatey(10%);
    flex-direction: row;
  }

  #boardContainer {
    flex: 1 1 50%;  /* 보드는 50% */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
  }

  #board {
    width: auto;
    height:85vh; 
  }

  #grid {
    width: 78vh;
    height: 78vh;
    margin-top: -0.1vh;
    margin-left: 3.4vh;
  }

  #boardContainer.classic-mode #grid {
    width: 84.5vh;
    height: 84.5vh;
    margin-top: 0;
    margin-left: 0;
  }
 

  #playRightArea {
    flex: 1 1 50%;  /* 오른쪽 영역은 50% */ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    gap: 1vh;
  }

  #statusBar {
    flex-direction: column;
  }

  #scoreBoard {
    width: 100%;
  }

  #scoreBar {
    width: 39vh;
  }

  #scoreValue {
  font-size: 3.9vh;
  }

  #playScreen #levelBar {
    margin-bottom: 0vh;
    width: 100%; 
  } 

  #playScreen  #currentLevel {
    width: 39vh;
  }

  #playScreen #iconPannel { 
    display: grid; 
    grid-template-columns: repeat(3, auto); /* 한 줄에 3개 */
    grid-template-rows: repeat(3, auto);    /* 두 줄 */
    gap: 0.5vh;
  }

  .iconRow {
    display: contents;
  }

  #playScreen .icon {
    width: 12vh;
    height: 12vh;
  }

  #menuPannelPlay {
    display: grid; 
    grid-template-columns: repeat(4, auto); /* 한 줄에 4개 */
    grid-template-rows: repeat(2, auto);    /* 두 줄 */
    flex-direction: column;
    align-items: center;   
    justify-content: center;
    transform: scale(1.1);
    gap: 1vh;
  }

  #playScreen .menuRow {
    display: contents;
  }  

  #playScreen .menu {
    width: 9.5vh; 
  }  
}

/* ===================================== */
/* 게임화면 - 가로형 (핸드폰, 패드 가로) */
/* ===================================== */
@media (min-aspect-ratio: 1510/1000) {
  #playScreen {
    flex-direction: row;
    width: 100vw;
    height: 100vh;

  }
  
  #boardContainer {
    flex: 1 1 60%;  /* 보드는 50% */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
  }

  #board {
    width: auto;
    height: 100vh; 
  }

  #grid {
    width: 91.8vh;
    height: 91.8vh;
    top: 4.0vh;
    left: 3.9vh;
  }

  #boardContainer.classic-mode #grid {
    width: 99.5vh;
    height: 99.5vh;
    margin-top: -4.0vh;
    margin-left: -3.9vh;
  }


  #playRightArea {
    flex: 1 1 40%;  /* 오른쪽 영역은 50% */ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    gap: 1vh;
  }

  #statusBar {
    flex-direction: column;
  }

  #scoreBoard {
    width: 100%;
  }

  #scoreBar {
    width:  45vh;
  }

  #scoreValue {
  font-size: 4.5vh;
  }

  #playScreen #levelBar {
    margin-bottom: 0vh;
    width: 100%; 
  } 

  #playScreen  #currentLevel {
    width:  45vh;
  }

  #playScreen #iconPannel { 
    display: grid; 
    grid-template-columns: repeat(3, auto); /* 한 줄에 5개 */
    grid-template-rows: repeat(3, auto);    /* 두 줄 */
    gap: 0.5vh;
  }

  .iconRow {
    display: contents;
  }

  #playScreen .icon {
    width: 14vh; 
    height: 14vh; 
  }

  #menuPannelPlay {
    display: grid; 
    grid-template-columns: repeat(4, auto); /* 한 줄에 4개 */
    grid-template-rows: repeat(2, auto);    /* 두 줄 */
    flex-direction: column;
    align-items: center;   
    justify-content: center;
    transform: scale(1.1);
    gap: 1vh;
  }

  #playScreen .menuRow {
    display: contents;
  }  

  #playScreen .menu {
    width: 9.5vh; 
  }

}

/* ===================================== */
/* 게임화면 - 세로형 (핸드폰  세로) */
/* ===================================== */
@media (max-aspect-ratio: 660/1000) {
  #playScreen {
    width: 100vw;
    height: 100vh;
    flex-direction: column;
  }

  #boardContainer {
    flex-direction:column;
    justify-content: center;
    margin-top: 0;
  } 

  #board {
    width: 100%;
    height: auto; 
  }


  #grid {
    width: 91.5%;
    height: 91.5%;
    margin-top: -0.5%;
    margin-left: 4.1%
  }

  #boardContainer.classic-mode #grid {
    width: 99.5%;
    height: 99.5%;
    margin-top: 0;
    margin-left: 0;
  }  

  #statusBar {
    flex-direction: row;
  }  

  #scoreBoard {
    width: 47vw;
 }

  #scoreBar {
    width: 47vw;
  }

  #scoreValue {
  font-size: calc(min(4vw, 4vh));
  }

  #levelBar {
  width: 47vw;
  }  

  #currentLevel {
    width: 47vw;
  }  

  #iconPannel {
    display: flex;    
    width: 100%;
  }

  .iconRow {
    display: flex;
  }

  .icon {
    width: clamp(20px, 17vw, 120px);
    height: clamp(20px, 17vw, 120px);
  }  

  #menuPannelPlay {
    width: 100vw; 
    display: flex;    
    flex-direction: column;
    align-items: center;   
    justify-content: center;
    transform: scale(1.1);
    gap: 1vh;
   }

  #playScreen .menuRow {
    display: flex;
  } 

  #playScreen .menu {
    width: 9.5vw; 
  }
}

/* ===================================== */
/* 게임화면 - 세로형  세로 좁은 것) */
/* ===================================== */
  @media (min-aspect-ratio: 661/1000) and 
         (max-aspect-ratio: 760/1000) {
  #playScreen{ 
    width: 80vw;
    height: 100vh;
    transform: translateX(10vw);
    flex-direction: column;
  }

  #boardContainer {
    flex-direction:column;
    justify-content: center;    
  }

  #board {
    width: 100%;
    height: auto;
  }

  #grid {
    width: 91.5%;
    height: 91.5%;
    margin-top: -0.5%;
    margin-left: 4.1%
  }

  #boardContainer.classic-mode #grid {
    width: 99.5%;
    height: 99.5%;
    margin-top: 0;
    margin-left: 0;
  }

  #statusBar {
    flex-direction: row;
  }

  #scoreBoard {
    width: 38vw;
  }

  #scoreBar {
    width: 38vw;
  }

  #scoreValue {
    font-size: calc(min(3.5vw, 3.5vh));
  }

  #levelBar {
  width: 38vw;
  }

  #currentLevel {
    width: 38vw;
  } 

  #iconPannel {
    display: flex;    
    width: 100%;
  }

  .iconRow {
    display: flex;
  }

  .icon {
    width: clamp(20px, 13vw, 120px);
    height: clamp(20px, 13vw, 120px);
  }

  #menuPannelPlay {
    width: 80vw; 
    display: flex;  
    flex-direction: column;
    align-items: center;   
    justify-content: center;
    transform: scale(1.1); 
    gap: 1vh;   
   }

  #playScreen .menuRow {
    display: flex;
  }

  #playScreen .menu {
    width: 9.5vw; 
  }

  }

/* ===================================== */
/* 게임화면 - 세로형  거의 직사각형) */
/* ===================================== */
  @media (min-aspect-ratio: 761/1000) and 
         (max-aspect-ratio: 1000/1000) {
  #playScreen{ 
    width: 65vw;
    height: 100vh;
    transform: translateX(17.5vw);
    flex-direction: column;
  }

  #boardContainer {
    flex-direction:column;
    justify-content: center;    
  } 

  #board {
    width: 100%;
    height: auto;
  }

  #grid {
    width: 91.5%;
    height: 91.5%;
    margin-top: -0.5%;
    margin-left: 4.1%    
  }

  #boardContainer.classic-mode #grid {
    width: 99.5%;
    height: 99.5%;
    margin-top: 0;
    margin-left: 0;
  }

  #statusBar {
    flex-direction: row;
  }

  #scoreBoard {
    width: 30vw;
  }

  #scoreValue {
  font-size: calc(min(2.9vw, 2.9vh));
  }  

  #scoreBar {
    width: 30vw;
  }


  #levelBar {
  width: 30vw;
  } 

  #currentLevel {
    width: 30vw;
  }  

  #iconPannel {
    display: flex;  
    width: 100%;
  }

  .iconRow {
    display: flex;
  }

  .icon {
    width: clamp(20px, 10vw, 120px);
    height: clamp(20px, 10vw, 120px);
  }

  #menuPannelPlay {
    width: 65vw; /*clamp(150px, 100vw, 930px); */
    display: flex;  
    flex-direction: column;
    align-items: center;   
    justify-content: center;
    transform: scale(1.1);    
    gap: 0.5vh;
   }

  #playScreen .menuRow {
    display: flex;
  }

  #playScreen .menu {
    width: 9.5vw; 
  }
}


/* ===================================== */
/* Sudoku Loading Message */
/* ===================================== */
.sudoku-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    /* 기존 보드가 비치도록 투명하게 */
    background: rgba(255, 255, 255, 0.45);
    pointer-events: all;
}

.sudoku-loading.active {
    display: flex;
}

#sudokuLoading .sudoku-loading-box {
    padding: 18px 28px;

    background: rgba(255, 255, 255, 0.96);

    border-radius: 16px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);

    text-align: center;
    white-space: nowrap;
}
#sudokuLoading 
.sudoku-loading-title {
    font-family: var(--themeFont), cursive; /* 게임에 잘 어울리는 폰트 */
    font-size: calc(min(5vw, 5vh));  /* 글자 크기 */
    color: #f1f1f1;           /* 글자 색깔  */
    font-weight: 400;        /* 굵기 */
    white-space: nowrap;   /* 줄바꿈 금지 */
    filter: drop-shadow(0 0 1px rgb(0, 0, 0))
            drop-shadow(0 0 2px rgb(255, 0, 0))
            drop-shadow(0 0 3px rgb(54, 1, 201));
}


/* ===================================== */
/* Fixed & Error Cells */
/* ===================================== */
.fixedCell {
  pointer-events: none;
}

.errorCell {
  animation: blinkError 0.6s ease;
  animation-iteration-count: 1; /* 반드시 1회만 실행 */
}

@keyframes blinkError {
  0%   { box-shadow: inset 0 0 10px rgb(252, 173, 173); }
  50%  { box-shadow: inset 0 0 30px red; }
  100% { box-shadow: none; }
}

/* 새 게임 애니메이션 */
#newGameOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4000;
}

.newGameText {
  animation: pulseText 1s ease;  
  display: inline-block;
  flex-direction: column;            /* 세로로 쌓기 */
  align-self: center;                /* 가운데 정렬 */
  font-family: var(--themeFont), cursive; /* 게임에 잘 어울리는 폰트 */
  font-size: calc(min(8vw, 8vh));     /* 글자 크기 */
  color: #f1f1f1;                 /* 글자 색깔 */
  font-weight: 400;                 /* 굵게 */
  line-height: 1.3;                   /* 줄 간격 */
  filter: drop-shadow(0 0 1px rgb(0, 0, 0))
          drop-shadow(0 0 2px rgb(255, 0, 0))
          drop-shadow(0 0 3px rgb(54, 1, 201));
}

@keyframes pulseText {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

#celebrationOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4000;
}

.celebrationText {
  animation: popUp 0.5s ease;
  display: flex;
  flex-direction: column;   /* 세로로 쌓기 */
  align-self: center;      /* 가운데 정렬 */
  font-family: var(--themeFont), cursive; /* 게임에 잘 어울리는 폰트 */
  font-size: calc(min(8vw, 8vh));  /* 글자 크기 */
  color: #f1f1f1;           /* 글자 색깔  */
  font-weight: 400;        /* 굵기 */
  white-space: nowrap;   /* 줄바꿈 금지 */
  filter: drop-shadow(0 0 1px rgb(0, 0, 0))
          drop-shadow(0 0 2px rgb(255, 0, 0))
          drop-shadow(0 0 3px rgb(54, 1, 201));
}

.celebrationText.line {
  color: #ffffff;
}

.celebrationText.complete {
  color: #000000;
}

@keyframes popUp {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}