/* 기록 숫자는 픽셀 폰트로. 공용 /assets에 있어 로컬·배포 모두 같은 경로로 뜬다. */
@font-face {
  font-family: 'Moneygraphy';
  src: url('../assets/Moneygraphy-Pixel.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* PC·모바일 모두 게임 창을 따로 띄운다. 바깥 배경을 한 톤 눌러 창이 도드라지게. */
html, body { width: 100%; height: 100%; overflow: hidden; background: #E7E2D5; }
body {
  /* 게임 화면은 기록 숫자와 같은 픽셀체로 통일한다. 아래 문서(.gdoc)는 gamedoc.css가 Pretendard로 되돌린다. */
  font-family: 'Moneygraphy', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  color: #1a1a1a;
}

canvas {
  display: block; position: absolute;
  background: #F6F3EC;
  border: 2px solid rgba(26, 26, 26, 0.85);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  touch-action: none;
}

.back-link {
  position: fixed; top: 12px; left: 12px; z-index: 20;
  background: rgba(255,255,255,0.92); color: #111;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; text-decoration: none;
  border: 1px solid #e5e5e5; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

#title {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 5;
  text-align: center; pointer-events: none;
  transition: opacity 300ms ease;
}
#title.faded { opacity: 0; }
#title h1 {
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
  color: #111;
}
#title p {
  margin-top: 3px;
  font-size: 11px; font-weight: 500;
  color: #999;
}

/* ── 조이스틱 (터치 기기에서만 보인다) ─────────────────────── */
#joy {
  position: absolute; z-index: 10;
  left: 0; right: 0; bottom: 0;
  touch-action: none;
}
#joy[hidden] { display: none; }
/* 받침 반지름 = 노브 반지름(29) + 최대 이동(32). 끝까지 끌면 노브가 받침을 꽉 채운다.
   링에 여유가 남으면 노브가 헐렁하게 노는 것처럼 보인다. */
#joy-base {
  position: absolute;
  width: 122px; height: 122px;
  border-radius: 50%;
  border: 2px solid rgba(26, 26, 26, 0.28);
  background: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
}
#joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  transition: transform 90ms ease-out;
}
#joy.active #joy-knob { transition: none; }

/* ── 시작 / 게임오버 오버레이 ─────────────────────────────── */
#intro, #over {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(243, 240, 233, 0.72);
  backdrop-filter: blur(3px);
}
#intro[hidden], #over[hidden] { display: none; }

#intro .card, #over .card {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 28px 28px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.10);
  text-align: center;
  animation: rise 260ms cubic-bezier(0.22, 1.2, 0.36, 1);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

#intro .big { font-size: 22px; font-weight: 800; word-break: keep-all; }
#intro .sub { font-size: 14px; font-weight: 500; color: #777; word-break: keep-all; }
#intro button, #over button {
  margin-top: 10px; border: 0; cursor: pointer;
  padding: 13px 34px; border-radius: 999px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  color: #fff; background: #1a1a1a;
}

#over .badge {
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: #fff; background: #d9542b;
  padding: 5px 14px; border-radius: 999px;
}
#over .badge[hidden] { display: none; }
#over .time {
  font-family: 'Moneygraphy', 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 54px; line-height: 1.1; color: #111;
  letter-spacing: -0.02em;
}
#over .time small { font-size: 24px; }
#over .line { font-size: 14px; font-weight: 600; color: #666; }
#over .line strong { color: #111; }
#over .graze { font-size: 13px; font-weight: 500; color: #999; }
#over .graze:empty { display: none; }