/* 이 게임은 배민 꾸불림체로 통일한다. 폰트는 공용 /assets에 있어 로컬·배포 모두 같은 경로로 뜬다. */
@font-face {
  font-family: 'BMKkubulim';
  src: url('../assets/BMKkubulimTTF.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #fafafa; }
body {
  font-family: 'BMKkubulim', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  color: #1a1a1a;
}
canvas { display: block; background: #fafafa; 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: 16px; 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;
}

/* 인트로에선 게임 제목, 케이크를 자르는 중엔 주인공 이름을 건 현수막으로 갈아 건다. */
#title .banner { display: none; }
#title.game .default { display: none; }
#title.game .banner {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin-top: 34px;   /* 좌상단 '다른 게임' 버튼과 겹치지 않게 그 아래로 건다 */
}
#title .bn-title {
  max-width: calc(100vw - 24px);
  padding: 13px 28px;
  background: #fff;
  border: 2px solid #ffd0de;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(224,86,127,0.18);
  font-size: 20px; font-weight: 800; color: #e0567f;
  word-break: keep-all; line-height: 1.35;
}
#title .bn-hint {
  font-size: 14px; font-weight: 500; color: #999;
}

#intro {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(250,250,250,0.72);
  backdrop-filter: blur(3px);
}
#intro[hidden] { display: none; }
#intro .card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 17px;
  padding: 38px 32px 32px;
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.10);
  text-align: center;
}
#intro .q { font-size: 21px; font-weight: 800; }
#intro .chips { display: flex; gap: 8px; }
#intro .chips button {
  border: 1px solid #e5e5e5; border-radius: 999px;
  padding: 9px 20px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 700;
  color: #666; background: #fff;
}
#intro .chips button.on { color: #fff; background: #1a1a1a; border-color: #1a1a1a; }
#intro input {
  width: 150px; text-align: center;
  border: 1px solid #e5e5e5; border-radius: 14px;
  padding: 12px 0; background: #fafafa;
  font-family: inherit; font-size: 28px; font-weight: 800; color: #111;
  -moz-appearance: textfield;
}
#intro input.name {
  width: 100%; font-size: 22px; padding: 15px 18px; text-align: center;
}
#intro input.name::placeholder { font-weight: 600; color: #bbb; }
#intro input::-webkit-outer-spin-button,
#intro input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#intro .hint { font-size: 14px; font-weight: 500; color: #999; }
#intro .hint.bad { color: #e0567f; }
#intro .hint:empty { display: none; }   /* 평소엔 자리도 차지하지 않는다 */
#intro #start {
  margin-top: 4px; border: 0; cursor: pointer;
  padding: 14px 32px; border-radius: 999px;
  font-family: inherit; font-size: 18px; font-weight: 700;
  color: #fff; background: #1a1a1a;
}

/* 반전을 숨기는 진짜 생일 카드. 여기엔 장난기가 하나도 없어야 케이크를 가를 때 반전이 산다. */
#card {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(250,250,250,0.72);
  backdrop-filter: blur(3px);
}
#card[hidden] { display: none; }
#card .card-inner {
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 26px 24px;
  background: linear-gradient(180deg, #fffdf9 0%, #fff6ef 100%);
  border: 1px solid #f0e6da;
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(90,60,40,0.12);
  text-align: center;
  /* #result의 pop을 쓰면 그쪽에 박힌 translateX(-50%) 때문에 카드가 왼쪽으로 밀렸다 튄다.
     이 카드는 flex로 가운데 정렬되니 좌우 이동 없이 살짝 떠오르기만 한다. */
  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; }
}
#card .msg {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  word-break: keep-all;
}
#card .who { font-size: 19px; font-weight: 800; color: #2a2a2a; }
#card .who:empty { display: none; }
#card .num {
  font-size: 68px; font-weight: 800; line-height: 1.05; color: #e0567f;
  letter-spacing: -0.02em;
}
#card .tail {
  font-size: 16px; font-weight: 700; color: #444; line-height: 1.5;
  max-width: 15em;
}
#card #to-cake {
  margin-top: 18px; border: 0; cursor: pointer;
  padding: 12px 26px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: #fff; background: #1a1a1a;
}

#result {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 30; width: min(320px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 20px 16px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
  text-align: center;
  animation: pop 260ms cubic-bezier(0.22, 1.2, 0.36, 1);
}
#result[hidden] { display: none; }
@keyframes pop {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 배지는 빗나갔을 때만 뜬다. 성공은 캔버스 엔딩으로 넘어가서 카드를 안 쓴다. */
#result .badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: #999; background: #f2f2f2;
  padding: 4px 12px; border-radius: 999px;
}
/* 성공 엔딩은 축하 문구와 나이를 캔버스가 화면 가운데에 그린다. 카드는 버튼만 남긴다. */
#result.ending { background: transparent; box-shadow: none; padding: 0; }
#result.ending .badge,
#result.ending .split,
#result.ending .comment { display: none; }
#result .split {
  font-size: 30px; font-weight: 800; letter-spacing: -0.01em;
  color: #111;
}
#result .comment {
  font-size: 13px; font-weight: 500; line-height: 1.5;
  color: #777;
  word-break: keep-all;        /* 한국어를 음절이 아니라 단어 단위로 줄바꿈 */
  overflow-wrap: break-word;
}
#result button {
  margin-top: 6px; border: 0; cursor: pointer;
  padding: 9px 22px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: #fff; background: #1a1a1a;
}