/* 기록 숫자는 픽셀 폰트로. 공용 /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 .opt-row { display: flex; gap: 8px; }
#intro .opt-row[hidden] { display: none; }
#intro .opt-row button {
  border: 1px solid #e5e5e5; border-radius: 999px;
  padding: 8px 20px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #888; background: #fff;
}
#intro .opt-row button.on { color: #fff; background: #1a1a1a; border-color: #1a1a1a; }

#intro .note {
  font-size: 13px; font-weight: 500; line-height: 1.6; color: #777;
  word-break: keep-all;
}
#intro .note .rec { color: #b8813a; }
#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 button.text {
  margin-top: 2px; padding: 6px 12px;
  background: none; color: #999;
  font-size: 13px; font-weight: 600;
}
#over button.text:hover { color: #111; }

#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; }

/* 2인일 때 둘이 각각 몇 초 버텼는지 */
#over .vs { display: flex; gap: 14px; }
#over .vs:empty { display: none; }
#over .vs .who {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: #333;
}
#over .vs i { width: 11px; height: 11px; border-radius: 50%; }
#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; }