/* =========================================================
   마음 공룡 키우기
   디자이너 수정용 CSS
   주로 수정할 곳: 맨 위 :root
========================================================= */

@import url('https://cdn.jsdelivr.net/gh/MonadABXY/mona-font/web/mona.css');

@font-face {
  font-family: 'DosSammul';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSSaemmul.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

:root {
  /* ===== 색 ===== */
  --색-배경: #e7ffe6;
  --색-배경: #eef9ea;
--색-배경-스트라이프: #dff1d7;
  --색-글자: #000000;
  --색-선: #000000;
  --색-카드: #ffffff;
  --색-회색: #eeeeee;
  --색-연노랑: #fff7c7;
  --색-분석박스: #fffdf2;
  --색-놀이터하늘: #e7f8ff;
  --색-놀이터땅: #12d653;
  --색-모아보기땅: #69d96f;
  --색-팝업배경: rgba(255, 255, 255, 0.78);
  --색-선택됨배경: #000000;
  --색-선택됨글자: #ffffff;

  /* ===== 상태바 색 ===== */
  --색-포만감: #ff9f43;
  --색-청결도: #4dabf7;
  --색-건강함: #69db7c;
  --색-성장도: #ff6b9a;
  --색-걱정체력: #ff5c5c;
  --전투감정색: var(--색-걱정체력);

    /* ===== 공룡 색 ===== */
  --색-감정-걱정: #E9DBFF;
--색-감정-분노: #FF6D6D;
--색-감정-부담: #FFAE00;
--색-감정-슬픔: #96EEFF;
--색-감정-피로: #8086FF;
--색-감정-긍정: #FFC4E8;

  /* ===== 폰트 ===== */
  --폰트-기본: "monospace", "DungGeunMo", "DosSammul";

  /* ===== 선 ===== */
  --선-굵게: 3.5px;
  --선-보통: 2px;
  --선-얇게: 2px;
  --선-입력: 3px;

  /* ===== 그림자 ===== */
  --그림자-큰: 3px 3px 0 var(--색-선);
  --그림자-중간: 3px 3px 0 var(--색-선);
  --그림자-작게: 2px 2px 0 var(--색-선);
  --그림자-작은: 1px 1px 0 var(--색-선);
  --그림자-눌림: 1px 1px 0 var(--색-선);
  --그림자-펫: 3px 4px 0 rgba(0, 0, 0, 0.22);

  /* ===== 레이아웃 ===== */
  --기본-너비: 560px;
  --넓은-너비: 760px;
  --카드-패딩: 24px;
  --카드-패딩-모바일: 18px;
  --게임-패딩: 20px;
  --게임-패딩-모바일: 12px;

  /* ===== 놀이터 ===== */
  --놀이터-높이: 420px;
  --놀이터-높이-모바일: 380px;
  --격자-크기: 20px;
  --놀이터-땅높이: 78px;

  /* ===== 공룡 ===== */
  --공룡무대-너비: 180px;
  --공룡무대-높이: 220px;
  --공룡무대-너비-모바일: 150px;
  --공룡무대-높이-모바일: 195px;
  --공룡크기: 125px;
  --공룡크기-모바일: 100px;
  --공룡글자크기: 120px;
  --공룡글자크기-모바일: 100px;
  --공룡-바닥여백: 60px;
  --공룡-왼쪽위치: 22%;
  --공룡-오른쪽위치: 78%;
  --공룡-이동속도: 3s;

  /* ===== 행동 도구 ===== */
  --행동도구-왼쪽: 14px;
  --행동도구-위: 84px;
  --행동도구-간격: 12px;
  --행동도구-크기: 68px;
  --행동도구-이미지크기: 40px;

  /* ===== 전투 ===== */
  --전투장-높이: 300px;
  --전투공룡-크기: 130px;
  --전투공룡-글자크기: 96px;
  --걱정몬스터-너비: 170px;
  --걱정몬스터-높이: 135px;

  /* ===== 효과 ===== */
  --효과크기: 38px;
  --별효과크기: 34px;

  /* ===== 팝업 ===== */
  --팝업-너비: 420px;
  --팝업-패딩: 22px;
  --팝업공룡-크기: 120px;
  --팝업공룡-글자크기: 86px;

  /* ===== 감정 지수 ===== */
  --감정지수-박스여백: 20px auto;
  --감정지수-박스패딩: 14px;
  --감정지수-바높이: 12px;
  --감정지수-이름칸: 70px;
  --감정지수-숫자칸: 42px;

  /* ===== 화면펫 ===== */
  --화면펫-크기: 86px;
  --화면펫-크기-모바일: 66px;
  --화면펫-z: 9998;
  --화면펫-이동속도: 3s;
  --화면펫-말풍선너비: 130px;
  --화면펫-말풍선최대너비: 180px;
  --화면펫-말풍선너비-모바일: 110px;
  --화면펫-말풍선최대너비-모바일: 150px;
}

/* =========================================================
   기본값
========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
background:
  repeating-linear-gradient(
    -90deg,
    var(--색-배경) 0px,
    var(--색-배경) 40px,
    var(--색-배경-스트라이프) 40px,
    var(--색-배경-스트라이프) 80px
  );
  color: var(--색-글자);
  font-family: var(--폰트-기본);
  image-rendering: pixelated;
}

button,
textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
}

textarea {
  width: 100%;
  min-height: 120px;
  border: var(--선-보통) solid var(--색-선);
  padding: 12px;
  font-size: 14px;
  resize: none;
}

img {
  image-rendering: pixelated;
}

.숨김 {
  display: none !important;
}

/* =========================================================
   전체 화면 / 카드
========================================================= */

.게임전체 {
  min-height: 100vh;
  padding: var(--게임-패딩);
  display: flex;
  align-items: center;
  justify-content: center;
}

.화면 {
  display: none;
  width: 100%;
  max-width: var(--기본-너비);
}

.화면.active {
  display: block;
}

.넓은화면 {
  max-width: var(--넓은-너비);
}

.픽셀카드,
.상태카드 {
  background: var(--색-카드);
  border: var(--선-굵게) solid var(--색-선);
  padding: var(--카드-패딩);
  box-shadow: var(--그림자-큰);
}

.시작카드,
.결과카드,
.전투카드 {
  text-align: center;
}

/* =========================================================
   텍스트
========================================================= */

.작은제목 {
  margin: 0 0 15px;
  font-size: 15px;
  font-weight: 900;
}

h1 {
  margin: 0;
  font-size: 35px;
  line-height: 1.15;
}

h2 {
  margin: 10px 0 18px;
  font-size: 24px;
  line-height: 1.35;
}

h3 {
  margin: 0;
  font-size: 18px;
}

.설명 {
  font-size: 15px;
  line-height: 1.7;
}

.결과카드 {
  padding: 26px 28px 28px;
}

#결과이름 {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 24px;
}

#결과설명 {
  width: min(420px, 100%);
  margin: 12px auto 0;
  padding: 0;
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.75;
}
.공룡대사 {
  padding: 0;
  background: var(--색-카드);
  font-weight: 900;
  line-height: 1.5;
}

/* =========================================================
   버튼
========================================================= */

.큰버튼,
.작은버튼,
.선택지버튼,
.행동도구 {
  background: var(--색-카드);
  color: var(--색-글자);
  border: var(--선-보통) solid var(--색-선);
  font-weight: 900;
  box-shadow: var(--그림자-작게);
}

.큰버튼 {
  width: 100%;
  padding: 15px 18px;
  margin-top: 18px;
  font-size: 17px;
}

.작은버튼 {
  padding: 9px 12px;
  font-size: 13px;
}

.보조버튼 {
  width: 100%;
  margin-top: 12px;
}

.큰버튼:hover,
.작은버튼:hover,
.선택지버튼:hover,
.행동도구:hover {
  background: var(--색-회색);
}

.큰버튼:active,
.작은버튼:active,
.선택지버튼:active,
.행동도구:active {
  transform: translate(3px, 3px);
  box-shadow: var(--그림자-눌림);
}

/* =========================================================
   질문 화면
========================================================= */

.상단줄 {
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  margin-bottom: 10px;
}

.진행바 {
  height: 14px;
  border: var(--선-보통) solid var(--색-선);
  margin-bottom: 22px;
}

#진행바채움 {
  height: 100%;
  width: 0%;
  background: var(--색-선);
  transition: width 0.2s;
}

.선택지목록 {
  display: grid;
  gap: 10px;
}

.선택지버튼 {
  text-align: left;
  padding: 14px;
}

.선택지버튼.선택됨 {
  background: var(--색-선택됨배경);
  color: var(--색-선택됨글자);
  transform: translate(3px, 3px);
  box-shadow: var(--그림자-눌림);
}

.질문버튼줄 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.질문버튼줄 .작은버튼 {
  min-width: 110px;
}

.이전버튼 {
  margin-right: auto;
}

.다음버튼 {
  margin-left: auto;
}

/* =========================================================
   결과 화면
========================================================= */

.결과공룡 {
  width: 170px;
  height: 170px;
  margin: 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  overflow: hidden;
}

.결과공룡 img,
.메인공룡비주얼 img,
.전투공룡 img,
.모아보기공룡이미지 img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.감정태그 {
  display: inline-block;
  margin: 8px 0 18px;
  padding: 6px 12px;
  border: var(--선-보통) solid var(--색-선);
  background: var(--색-연노랑);
  font-size: 12px;
  font-weight: 900;
  box-shadow: var(--그림자-작게);
}

/* 감정 지수 */
.감정지수박스 {
  width: min(390px, 100%);
  margin: 28px auto 22px;
  padding: 16px 18px;
  border: var(--선-보통) solid var(--색-선);
  background: var(--색-분석박스);
  box-shadow: var(--그림자-작게);
  box-sizing: border-box;
}

.감정지수박스 h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.감정지수목록 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.감정지수행 {
  display: grid;
  grid-template-columns: var(--감정지수-이름칸) 1fr var(--감정지수-숫자칸);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}

.감정지수이름 {
  white-space: nowrap;
}

.감정지수바 {
  height: var(--감정지수-바높이);
  border: var(--선-보통) solid var(--색-선);
  background: var(--색-카드);
  overflow: hidden;
}

.감정지수바 span {
  display: block;
  height: 100%;
  background: var(--색-선);
  transition: width 0.35s ease;
}

.감정지수행[data-감정="걱정"] {
  --현재감정색: var(--색-감정-걱정);
}

.감정지수행[data-감정="분노"] {
  --현재감정색: var(--색-감정-분노);
}

.감정지수행[data-감정="부담"] {
  --현재감정색: var(--색-감정-부담);
}

.감정지수행[data-감정="슬픔"] {
  --현재감정색: var(--색-감정-슬픔);
}

.감정지수행[data-감정="피로"] {
  --현재감정색: var(--색-감정-피로);
}

.감정지수행[data-감정="긍정"] {
  --현재감정색: var(--색-감정-긍정);
}

.감정지수바 span {
  background: var(--현재감정색, var(--색-선));
}

/* =========================================================
   육성 상단
========================================================= */

.게임상단 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.게임상단 h2 {
  margin: 0;
  font-size: 20px;
}

#상단공룡이름 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.육성상단지수 {
  display: inline-block;
  margin-left: 0;
  padding: 4px 8px;
  border: var(--선-보통) solid var(--색-선);
  background: var(--현재감정색, var(--색-연노랑));
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
  box-shadow: var(--그림자-작게);
}

.육성상단지수[data-감정="걱정"] {
  --현재감정색: var(--색-감정-걱정);
}

.육성상단지수[data-감정="분노"] {
  --현재감정색: var(--색-감정-분노);
}

.육성상단지수[data-감정="부담"] {
  --현재감정색: var(--색-감정-부담);
}

.육성상단지수[data-감정="슬픔"] {
  --현재감정색: var(--색-감정-슬픔);
}

.육성상단지수[data-감정="피로"] {
  --현재감정색: var(--색-감정-피로);
}

.육성상단지수[data-감정="긍정"] {
  --현재감정색: var(--색-감정-긍정);
}

.상단버튼묶음 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* =========================================================
   상태바
========================================================= */

.상태카드 {
  margin-bottom: 16px;
}

.상태줄 {
  display: grid;
  grid-template-columns: 72px 1fr 36px;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
  font-size: 13px;
  font-weight: 900;
}

.상태바 {
  height: 14px;
  border: var(--선-보통) solid var(--색-선);
  background: var(--색-카드);
}

.상태바 div {
  height: 100%;
  width: 0%;
  transition: width 0.25s;
}

#포만감바 {
  background: var(--색-포만감);
}

#청결도바 {
  background: var(--색-청결도);
}

#건강함바 {
  background: var(--색-건강함);
}

#성장도바 {
  background: var(--색-성장도);
}

/* =========================================================
   놀이터
========================================================= */

.놀이터 {
  position: relative;
  min-height: var(--놀이터-높이);
  margin-bottom: 16px;
  border: var(--선-굵게) solid var(--색-선);
  box-shadow: var(--그림자-중간);
  overflow: hidden;
  background:
    linear-gradient(var(--색-놀이터하늘) 0 0) padding-box,
    linear-gradient(90deg, var(--색-회색) 1px, transparent 1px),
    linear-gradient(var(--색-회색) 1px, transparent 1px);
  background-size:
    auto,
    var(--격자-크기) var(--격자-크기),
    var(--격자-크기) var(--격자-크기);
}

.놀이터::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--놀이터-땅높이);
  border-top: var(--선-굵게) solid var(--색-선);
  background: var(--색-놀이터땅);
  z-index: 1;
}

.행동도구영역 {
  position: absolute;
  left: var(--행동도구-왼쪽);
  top: var(--행동도구-위);
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: var(--행동도구-간격);
}

.행동도구 {
  width: var(--행동도구-크기);
  height: var(--행동도구-크기);
  border: var(--선-보통) solid var(--색-선);
  background: var(--색-카드);
  box-shadow: var(--그림자-작은);
  touch-action: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.행동도구::after {
  content: attr(data-label);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.행동도구 img {
  width: var(--행동도구-이미지크기);
  height: var(--행동도구-이미지크기);
  object-fit: contain;
  pointer-events: none;
}

.드래그복사본 {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.드래그복사본 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   공룡
========================================================= */

.공룡무대 {
  position: absolute;
  left: 50%;
  bottom: var(--공룡-바닥여백);
  transform: translateX(-50%);
  width: var(--공룡무대-너비);
  height: var(--공룡무대-높이);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: left var(--공룡-이동속도) linear;
}

.공룡무대.왼쪽 {
  left: var(--공룡-왼쪽위치);
}

.공룡무대.오른쪽 {
  left: var(--공룡-오른쪽위치);
}

.공룡이름표 {
  margin-bottom: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 900;
  max-width: 150px;
  text-align: center;
}

.메인공룡 {
  width: var(--공룡크기);
  height: var(--공룡크기);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  user-select: none;
}

.메인공룡.오른쪽 {
  transform: scaleX(-1);
}

.메인공룡.왼쪽 {
  transform: scaleX(1);
}

.메인공룡비주얼 {
  width: 100%;
  height: 100%;
  font-size: var(--공룡글자크기);
  display: flex;
  align-items: center;
  justify-content: center;
}

.메인공룡비주얼.터치됨 {
  animation: 톡 0.25s steps(2);
}

.메인공룡비주얼.먹기 {
  animation: 먹기 0.5s steps(3);
}

.메인공룡비주얼.씻기 {
  animation: 씻기 0.5s steps(3);
}

.메인공룡비주얼.햇빛보기 {
  animation: 햇빛보기 0.7s steps(3);
}

.메인공룡비주얼.성장완료 {
  animation: 반짝공룡 1s infinite steps(2);
}

.말풍선 {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  border: var(--선-보통) solid var(--색-선);
  background: var(--색-카드);
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  z-index: 7;
}

/* =========================================================
   공룡 애니메이션
========================================================= */

@keyframes 톡 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes 먹기 {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

@keyframes 씻기 {
  0%,
  100% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(5deg);
  }
}

@keyframes 햇빛보기 {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }

  50% {
    transform: translateY(-14px);
    filter: brightness(1.25);
  }
}

@keyframes 반짝공룡 {
  0% {
    filter: brightness(1);
  }

  100% {
    filter: brightness(1.35);
  }
}

/* =========================================================
   효과
========================================================= */

#효과영역 {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.효과 {
  position: absolute;
  width: var(--효과크기);
  height: var(--효과크기);
  font-size: var(--효과크기);
  font-family: monospace;
  animation: 효과팡 0.75s steps(4) forwards;
  color: yellow;
}

.효과 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.공통별효과 {
  position: absolute;
  width: var(--별효과크기);
  height: var(--별효과크기);
  z-index: 30;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: 공통별팡 0.8s steps(4) forwards;
}

.공통별효과 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

@keyframes 효과팡 {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.4);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) scale(0.8);
  }
}

@keyframes 공통별팡 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--별-x)),
        calc(-50% + var(--별-y))
      )
      scale(1.15);
  }
}

/* =========================================================
   걱정 버튼
========================================================= */

.걱정버튼.비활성화 {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}

.걱정버튼.활성화 {
  opacity: 1;
  animation: 버튼반짝 0.8s infinite steps(2);
}

@keyframes 버튼반짝 {
  0% {
    background: var(--색-카드);
  }

  100% {
    background: var(--색-회색);
  }
}

/* =========================================================
   전투 화면
========================================================= */

.걱정상태패널 {
  border: var(--선-보통) solid var(--색-선);
  padding: 8px;
  margin-bottom: 12px;
  background: var(--색-카드);
  text-align: left;
  font-size: 12px;
  font-weight: 900;
}

.걱정상태제목 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.걱정체력바 {
  width: 100%;
  height: 18px;
  border: var(--선-얇게) solid var(--색-선);
  background: var(--색-카드);
}

.걱정체력채움 {
  width: 100%;
  height: 100%;
  background: var(--전투감정색, var(--색-걱정체력));
  transition: width 0.12s linear;
}

.걱정클릭안내 {
  margin: 6px 0 0;
  font-size: 11px;
}

.전투장 {
  position: relative;
  height: var(--전투장-높이);
  border: var(--선-굵게) solid var(--색-선);
  margin-bottom: 16px;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--색-회색) 1px, transparent 1px),
    linear-gradient(var(--색-회색) 1px, transparent 1px);
  background-size: var(--격자-크기) var(--격자-크기);
}

.전투공룡 {
  position: absolute;
  left: 42px;
  bottom: 42px;
  width: var(--전투공룡-크기);
  height: var(--전투공룡-크기);
  font-size: var(--전투공룡-글자크기);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scaleX(-1);
}

.전투공룡.공격 {
  animation: 공격 0.25s steps(3);
}

@keyframes 공격 {
  0%,
  100% {
    transform: scaleX(-1) translateX(0);
  }

  50% {
    transform: scaleX(-1) translateX(-90px);
  }
}

/* 걱정 몬스터 */
.걱정몬스터 {
  position: absolute;
  right: 34px;
  bottom: 70px;
  width: var(--걱정몬스터-너비);
  min-height: var(--걱정몬스터-높이);
  background: transparent;
  border: 0;
  color: var(--색-카드);
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  line-height: 1.4;
  box-sizing: border-box;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.18s linear,
    opacity 0.18s linear,
    filter 0.18s linear;
}

.걱정몬스터::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--색-선);
  z-index: 0;
  clip-path: polygon(
    8% 0%,
    18% 8%,
    30% 0%,
    42% 10%,
    56% 0%,
    68% 8%,
    82% 0%,
    92% 12%,
    100% 24%,
    92% 36%,
    100% 50%,
    90% 64%,
    100% 78%,
    88% 90%,
    76% 100%,
    62% 92%,
    50% 100%,
    36% 92%,
    22% 100%,
    10% 88%,
    0% 74%,
    8% 58%,
    0% 42%,
    10% 28%,
    0% 14%
  );
}

#걱정텍스트 {
  position: relative;
  z-index: 2;
  color: var(--색-카드);
}

.걱정몬스터.먹힘중 {
  filter: brightness(1.15);
}

.걱정몬스터.다먹음 {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.걱정몬스터.균열1::after {
  background-image: linear-gradient(35deg, transparent 47%, var(--색-카드) 48%, var(--색-카드) 52%, transparent 53%);
  opacity: 0.7;
}

.걱정몬스터.균열2::after {
  background-image:
    linear-gradient(35deg, transparent 47%, var(--색-카드) 48%, var(--색-카드) 52%, transparent 53%),
    linear-gradient(130deg, transparent 47%, var(--색-카드) 48%, var(--색-카드) 52%, transparent 53%);
  opacity: 0.85;
}

.걱정몬스터.균열3::after {
  background-image:
    linear-gradient(35deg, transparent 47%, var(--색-카드) 48%, var(--색-카드) 52%, transparent 53%),
    linear-gradient(130deg, transparent 47%, var(--색-카드) 48%, var(--색-카드) 52%, transparent 53%),
    linear-gradient(90deg, transparent 47%, var(--색-카드) 48%, var(--색-카드) 52%, transparent 53%);
  opacity: 1;
}

.걱정몬스터.펑 {
  animation: 걱정펑 0.75s ease forwards;
}

.펑효과 {
  position: absolute;
  right: 58px;
  bottom: 110px;
  z-index: 10;
  font-size: 56px;
  animation: 펑글자 0.8s ease forwards;
  pointer-events: none;
}

@keyframes 걱정펑 {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  35% {
    opacity: 1;
    transform: scale(1.25) rotate(-8deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.1) rotate(20deg);
  }
}

@keyframes 펑글자 {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  35% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* =========================================================
   팝업
========================================================= */

.픽셀팝업배경 {
  position: fixed;
  inset: 0;
  background: var(--색-팝업배경);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--게임-패딩);
}

.픽셀팝업 {
  width: min(var(--팝업-너비), 100%);
  background: var(--색-카드);
  border: var(--선-굵게) solid var(--색-선);
  box-shadow: var(--그림자-큰);
  padding: var(--팝업-패딩);
  text-align: center;
}

.픽셀팝업아이콘 {
  font-size: 54px;
  margin-bottom: 8px;
}

.픽셀팝업 h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

.픽셀팝업 p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 900;
}

.픽셀팝업 button {
  width: 100%;
  padding: 12px;
  background: var(--색-카드);
  border: var(--선-보통) solid var(--색-선);
  box-shadow: var(--그림자-작게);
  font-weight: 900;
  font-family: inherit;
}

.팝업공룡 {
  width: var(--팝업공룡-크기);
  height: var(--팝업공룡-크기);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--팝업공룡-글자크기);
}

.팝업공룡 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.공룡별명입력 {
  width: 100%;
  max-width: 220px;
  margin: 12px auto 14px;
  display: block;
  padding: 10px 12px;
  border: var(--선-입력) solid var(--색-선);
  background: var(--색-카드);
  color: var(--색-글자);
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
}

.공룡별명입력:focus {
  background: var(--색-연노랑);
}

/* =========================================================
   내가 키운 공룡들
========================================================= */

.공룡모아보기들판 {
  position: relative;
  width: 100%;
  height: 430px;
  margin-top: 16px;
  border: var(--선-굵게) solid var(--색-선);
  overflow: hidden;
  background: var(--색-모아보기땅);
  box-shadow: var(--그림자-중간);
}

.모아보기공룡 {
  position: absolute;
  width: 86px;
  height: 108px;
  z-index: 3;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: 모아보기걷기 var(--걷기속도, 4s) linear infinite alternate;
}

.모아보기공룡:hover {
  z-index: 8;
}

.모아보기공룡이름 {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: max-content;
  max-width: 140px;
  padding: 2px 6px;
  border: var(--선-얇게) solid var(--색-선);
  background: var(--색-카드);
  font-size: 10px;
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.모아보기공룡이미지 {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 78px;
  height: 78px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.공룡상세카드 {
  margin-top: 14px;
  padding: 14px;
  border: var(--선-보통) solid var(--색-선);
  background: var(--색-카드);
  box-shadow: var(--그림자-작게);
  text-align: left;
}

.공룡상세상단 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.공룡상세상단 strong {
  font-size: 18px;
}


.공룡상세닫기버튼 {
  background: var(--색-카드);
  border: var(--선-얇게) solid var(--색-선);
  font-family: inherit;
  font-weight: 900;
  padding: 5px 8px;
  background: var(--색-연노랑);
}


.공룡상세닫기버튼:hover {
  background: var(--색-회색);
}

.공룡상세버튼묶음 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.공룡상세버튼묶음 .공룡상세닫기버튼 {
  margin: 0;
}

#공룡상세고민 {
  padding: 8px;
  border: var(--선-얇게) solid var(--색-선);
  background: #f8fff8;
}

.빈보관함 {
  position: relative;
  z-index: 5;
  border: var(--선-보통) dashed var(--색-선);
  padding: 16px;
  text-align: center;
  font-weight: 900;
  background: var(--색-카드);
}

@keyframes 모아보기걷기 {
  0% {
    transform: translateX(0) translateY(0);
  }

  50% {
    transform: translateX(calc(var(--이동거리, 42px) * 0.5)) translateY(-6px);
  }

  100% {
    transform: translateX(var(--이동거리, 42px)) translateY(0);
  }
}

/* =========================================================
   화면펫
========================================================= */

.화면펫 {
  position: fixed;
  left: 40px;
  top: 120px;
  width: var(--화면펫-크기);
  z-index: var(--화면펫-z);
  cursor: pointer;
  transition:
    left var(--화면펫-이동속도) linear,
    top var(--화면펫-이동속도) linear,
    transform 0.2s ease;
  user-select: none;
  pointer-events: auto;
}

.화면펫:hover {
  transform: translateY(-4px);
}

.화면펫 img {
  width: 100%;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(var(--그림자-펫));
  transform: scaleX(-1);
}

.화면펫.왼쪽보기 img {
  transform: scaleX(1);
}

.화면펫이름표 {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  min-width: 54px;
  padding: 3px 7px;
  background: var(--색-카드);
  border: var(--선-보통) solid var(--색-선);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--그림자-작게);
}

.화면펫말풍선 {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  min-width: var(--화면펫-말풍선너비);
  max-width: var(--화면펫-말풍선최대너비);
  padding: 8px 10px;
  background: var(--색-카드);
  border: var(--선-보통) solid var(--색-선);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  box-shadow: var(--그림자-작게);
  display: none;
}

.화면펫말풍선::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: var(--색-카드);
  border-right: var(--선-보통) solid var(--색-선);
  border-bottom: var(--선-보통) solid var(--색-선);
  transform: translateX(-50%) rotate(45deg);
}

.화면펫:hover .화면펫말풍선,
.화면펫.말하기 .화면펫말풍선 {
  display: block;
}

/* =========================================================
   모바일
========================================================= */

@media (max-width: 640px) {
  :root {
    --공룡무대-너비: var(--공룡무대-너비-모바일);
    --공룡무대-높이: var(--공룡무대-높이-모바일);
    --공룡크기: var(--공룡크기-모바일);
    --공룡글자크기: var(--공룡글자크기-모바일);
    --놀이터-높이: var(--놀이터-높이-모바일);
    --화면펫-크기: var(--화면펫-크기-모바일);
    --화면펫-말풍선너비: var(--화면펫-말풍선너비-모바일);
    --화면펫-말풍선최대너비: var(--화면펫-말풍선최대너비-모바일);
  }

  .게임전체 {
    padding: var(--게임-패딩-모바일);
    align-items: center;
    min-height: 100dvh;
  }

  h1 {
    font-size: 32px;
  }

  .픽셀카드,
  .상태카드 {
    padding: var(--카드-패딩-모바일);
  }

  .게임상단 {
    flex-direction: column;
  }

  .상단버튼묶음 {
    justify-content: flex-start;
  }

  .상태줄 {
    grid-template-columns: 62px 1fr 32px;
    font-size: 12px;
  }

  .공룡모아보기들판 {
    height: 360px;
  }

  .모아보기공룡 {
    width: 74px;
    height: 94px;
  }

  .모아보기공룡이미지 {
    width: 66px;
    height: 66px;
  }

  .화면펫말풍선 {
    font-size: 11px;
  }

  .화면펫이름표 {
    font-size: 10px;
  }

  /* 모바일에서는 기본 커서 사용 */
  body,
  button,
  a,
  input,
  textarea,
  select,
  [role="button"] {
    cursor: auto !important;
  }

  /* 모바일에서는 커스텀 커서 숨기기 */
  .게임커서,
  .game-cursor,
  #게임커서,
  #game-cursor,
  .커스텀커서,
  .custom-cursor {
    display: none !important;
    opacity: 0 !important;
  }
}
/* =========================================================
   커스텀 커서용
   기본 마우스를 보이게 하고 싶으면 아래 블록 삭제
========================================================= */

button,
a,
input,
textarea,
select,
[role="button"] {
  cursor: none !important;
}


/* =========================================================
   네모 커서
========================================================= */

html,
body,
body * {
  cursor: none !important;
}

.네모커서 {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border: 3px solid #000000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
  z-index: 2147483647;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  image-rendering: pixelated;
}

.네모커서.보임 {
  display: block;
}

.네모커서.클릭중 {
  transform: translate(-50%, -50%) scale(0.82);
}

body.아이템드래그중 .네모커서 {
  display: none !important;
}