/* Jelly Escape 06_VISUAL_DESIGN_SYSTEM.md 기반 CSS 토큰 */
:root {
  --strawberry-500: #FF5F7E;
  --strawberry-700: #C93358;
  --soda-500: #45BEEA;
  --soda-700: #167CA8;
  --lemon-400: #FFD84D;
  --lemon-700: #9A6A00;
  --mint-400: #62D6A4;
  --cream-050: #FFF8EE;
  --cream-200: #F2E4D1;
  --plum-800: #3B235A;
  --plum-950: #211330;
  --danger: #E44747;
  --warn: #F28B30;
  --success: #35B879;
  --locked: #80778A;
  --phase-ready: #8C67E8;
  --phase-cd: #AAA4B8;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-out-back: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --r-card: 20px;
  --r-btn: 16px;
  --r-chip: 12px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
             "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; padding: 0;
  font-family: var(--font-ui);
  color: var(--plum-800);
  background: radial-gradient(circle at 50% 30%, #FFE8F1 0%, #F1D9F9 40%, #A987E8 100%);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body { display: flex; align-items: center; justify-content: center; }

/* 논리 캔버스 스테이지: 360x800 비율을 유지 */
.stage {
  position: relative;
  width: 100vw; height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.stage::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #FFF2DF 0%, #E7F7FF 50%, #FFF0CF 100%);
  opacity: 0.35;
  pointer-events: none;
}

/* 게임 캔버스: JS에서 스케일을 지정 */
#game {
  position: relative;
  z-index: 1;
  display: block;
  background: linear-gradient(180deg, #FFF2DF 0%, #FFE7CB 100%);
  box-shadow: 0 20px 60px rgba(59,35,90,0.35);
  border-radius: 22px;
  image-rendering: pixelated;
}

/* UI 오버레이: 캔버스와 동일 크기·위치로 정렬됨 (JS가 재계산) */
.ui-root {
  position: absolute;
  z-index: 2;
  color: var(--plum-800);
  pointer-events: none;
}
.ui-root .scene { pointer-events: auto; }

/* [hidden]의 display:none은 UA 스타일이라 author의 display 선언(.countdown, .skin-unlock 등)에
   덮인다. hidden 속성을 쓰는 요소가 실제로 숨겨지도록 보강. */
[hidden] { display: none !important; }

/* 감소된 움직임 */
.reduced-motion * {
  animation-duration: 40ms !important;
  transition-duration: 40ms !important;
}