/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* =============================================
   모바일 더블탭 확대 방지 (팬·핀치 줌은 유지)
   ============================================= */
html {
  touch-action: manipulation;
}

/* =============================================
   iOS 입력창 포커스 자동 확대(줌) 방지
   iOS/카카오 인앱브라우저는 폰트 16px 미만 폼 컨트롤에 포커스하면
   화면 전체를 확대한다. 앱의 입력창 다수가 text-sm(14px)이라 확대가 발생.
   viewport maximum-scale=1 은 인앱브라우저에서 무시될 수 있으므로
   근본 해결: 모바일에서 폼 컨트롤을 16px 로 강제 (레이아웃엔 무영향).
   ============================================= */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* =============================================
   Hide number input spin buttons
   ============================================= */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* =============================================
   Custom select arrow - light theme (default)
   ============================================= */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

/* =============================================
   Custom select arrow - dark theme (parent panel)
   Targets selects inside dark backgrounds by
   looking for the dark body/container classes.
   ============================================= */
body.bg-gray-950 select,
.bg-gray-950 select,
.bg-gray-900 select,
.bg-gray-800\/80 select,
select.dark-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Cyan-tinted arrow for the deposit form select on focus */
select:focus {
  outline: none;
}

/* =============================================
   미니게임 (미니빗 월드)
   ============================================= */
.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@keyframes minimon-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.minimon-bob { animation: minimon-bob 2.4s ease-in-out infinite; }

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.animate-pop-in { animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes star-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) scale(1.2); }
}
.star-float { animation: star-float 0.9s ease-out forwards; }

@keyframes tile-appear {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

/* 머지 타일 */
.merge-tile {
  transition: transform 0.12s ease, left 0.12s ease, top 0.12s ease;
  touch-action: none;
}
.merge-tile-new { animation: tile-appear 0.14s ease-out; }

/* 탭 버튼 눌림 */
@keyframes tap-punch {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.tap-punch { animation: tap-punch 0.16s ease-out; }