/* moai-games 공유 디자인 토큰 — Pastel Pixel (backendwcs.com + 단어퀴즈 studyTheme 추출) */
/* 전 게임 공용. 게임별 style.css 에서 이 변수를 쓴다. */

@font-face {
  font-family: 'Jua';
  src: url('./fonts/Jua-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Galmuri11';
  src: url('./fonts/Galmuri11.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* 파스텔 */
  --c-lavender: #E0D7FF;
  --c-pink: #FFD6F0;
  --c-yellow: #FFF2C4;
  --c-cyan: #C4F1F9;
  --c-mint: #D8F5E3;
  /* 강조/잉크 */
  --c-purple: #6B5BA8;
  --c-primary: #8B63CA;
  --ink: #2E2548;
  --ink2: #4A4068;
  --soft: #8B82A8;
  /* 배경/카드/보더 */
  --bg: #FAF7FF;
  --bg2: #F2EDFF;
  --card: #FFFFFF;
  --card-soft: #FBF8FF;
  --b-soft: #EDE6FF;
  --b: #DCD0F5;
  /* 상태 */
  --ok: #1F7A50;
  --ok-bg: #F1FBF5;
  --ng: #B83A6E;
  --ng-bg: #FFF2F8;
  /* 라운드 */
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 32px;
  --r-pill: 999px;
  /* 그림자 */
  --sh-soft: 0 8px 24px -8px rgba(107, 91, 168, .18);
  --sh-card: 0 14px 40px -12px rgba(107, 91, 168, .22), 0 2px 6px rgba(107, 91, 168, .06);
  --sh-pop: 0 24px 60px -20px rgba(107, 91, 168, .35);
  /* 폰트 */
  --f-display: 'Jua', system-ui, sans-serif;
  --f-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-pixel: 'Galmuri11', 'DungGeunMo', 'Press Start 2P', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-primary: #C9B3F2;
    --c-purple: #C9B3F2;
    --ink: #F3EEFF;
    --ink2: #C7BCE0;
    --soft: #9A90B8;
    --bg: #161320;
    --bg2: #1C1830;
    --card: #221E30;
    --card-soft: #1E1A2C;
    --b-soft: #3A3350;
    --b: #4A4068;
    --ok: #73D6A4;
    --ng: #F2A0C4;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
  touch-action: manipulation;
}

/* 픽셀아트 선명 */
.pixel, .pixel svg, svg.pixel, .pixel img, canvas.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  shape-rendering: crispEdges;
}

/* 파스텔 blob 배경 */
.bg-field {
  background:
    radial-gradient(900px 700px at 10% 5%, rgba(224, 215, 255, .55), transparent 60%),
    radial-gradient(700px 600px at 95% 25%, rgba(255, 214, 240, .45), transparent 60%),
    radial-gradient(800px 700px at 50% 95%, rgba(196, 241, 249, .40), transparent 60%),
    var(--bg);
}

/* 3D 픽셀 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(46, 37, 72, .18);
  transition: transform .12s, box-shadow .12s;
  min-height: 48px;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(46, 37, 72, .20); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(46, 37, 72, .18); }
.btn.ghost { background: var(--card); color: var(--ink); }

/* 카드 */
.card {
  background: var(--card);
  border: 1.5px solid var(--b-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: 20px;
}

/* HUD 픽셀 라벨 */
.pixel-label {
  font-family: var(--f-pixel);
  letter-spacing: .04em;
  color: var(--c-purple);
}

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes shakeX { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.bob { animation: bob 1.8s ease-in-out infinite; }