:root{
  --grid: 120px;
  --ink: #2b2b2b;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body{
  font-family: "Roboto Condensed", sans-serif;
  background: #f4f4f4;
  color: var(--ink);
  overflow: hidden;
  font-optical-sizing: auto;
  font-weight: 0;
  font-style: normal;
}

.desktop{
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* 타이틀: 화면 상단 5vh */
.title{
  position: absolute;
  top: 5vh;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: clamp(20px, 3vw, 40px);
  font-weight: 700;
  margin: 0;
  pointer-events: none;
}

/* 얼굴 프레임: 화면 정중앙 */
.face-frame{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 세로 기준으로 크기 잡아서 줌에 덜 민감하게 */
  height: 72vh;
  width: auto;
  aspect-ratio: 3 / 4;
  background: #e8e8e8;
  border: 1px solid #ddd;
  overflow: hidden;
}

.face-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 눈물방울 */
.tear{
  position: absolute;
  pointer-events: none;
  z-index: 5;
  will-change: transform, opacity;
  background: #a8c8e8;
  border-radius: 50%;
}

@keyframes tear-fall{
  0%{
    transform: translate(0, 0);
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  100%{
    transform: translate(var(--sway), var(--fall));
    opacity: 0;
  }
}

.tear.falling{
  animation: tear-fall var(--duration) ease-in forwards;
}

/* 재생 버튼: 얼굴 프레임 아래 중앙 */
.play-btn{
  position: absolute;
  top: calc(50% + 36vh + 3vh);
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.play-btn img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* 그리드 스냅 아이콘 */
.desktop-icon{
  position: absolute;
  width: var(--grid);
  height: var(--grid);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  border-radius: 6px;
  transition: background-color 0.12s ease;
  user-select: none;
  touch-action: none;
}

.desktop-icon img{
  width: 60%;
  height: 60%;
  object-fit: contain;
  pointer-events: none;
}

/* Placeholder 도형 */
.placeholder-box{
  width: 60%;
  height: 60%;
  pointer-events: none;
}

.trash-shape{
  background: #d88;
  border-radius: 4px;
}

.tissue-shape{
  background: #fbb6ce;
  border-radius: 4px;
}

.play-shape{
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  clip-path: polygon(20% 10%, 20% 90%, 90% 50%);
}

.play-shape.paused{
  clip-path: none;
  width: 30%;
  margin-left: 25%;
  box-shadow: 18px 0 0 var(--ink);
}

/* 호버 시 반투명 하이라이트 */
.desktop-icon:hover,
.desktop-icon.dragging{
  background-color: rgba(120, 170, 220, 0.18);
}

.desktop-icon.dragging{
  cursor: grabbing;
  z-index: 50;
}

/* hold 로딩 인디케이터 */
.hold-loader{
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(var(--ink) 0deg, transparent 0deg);
  opacity: 0;
  pointer-events: none;
}

.hold-loader.active{
  opacity: 1;
}

/* 뽑힌 휴지 */
.tissue-item{
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: grab;
  touch-action: none;
  z-index: 100;
}

.tissue-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.tissue-item .placeholder-box{
  width: 100%;
  height: 100%;
}

.tissue-item.dragging{
  cursor: grabbing;
  z-index: 200;
}

/* 쓰레기통 드롭 강조 */
#trashIcon.drop-target{
  background-color: rgba(220, 120, 120, 0.25);
}