/* 멍멍 끝말잇기. 색은 모두 여기 변수로 모은다. 밝은 화면 하나로 간다. */
:root {
  --bg: #FFF6E3;
  --bg-deep: #FFE9BF;
  --sky: #DDF3FF;
  --grass: #BDE7A0;
  --ink: #3D2C20;
  --ink-soft: #6B5546;
  --line: #4A3426;
  --card: #FFFFFF;
  --primary: #FF8A3D;
  --primary-deep: #D9631B;
  --primary-ink: #FFFFFF;
  --good: #2F9E5B;
  --warn: #F08C00;
  --bad: #D9433B;
  --star: #FFB703;
  --star-off: #E4DACB;
  --bubble-me: #FFE29A;
  --bubble-dog: #FFFFFF;
  --bubble-kumi: #E7F6FF;
  --bar: #57B8E6;
  --shadow: 0 4px 0 rgba(74, 52, 38, .18);
  --app-h: 100dvh;
  --app-top: 0px;
  --font: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--bg-deep); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.4;
  touch-action: manipulation; -webkit-text-size-adjust: 100%; user-select: none; -webkit-user-select: none;
}
#app {
  position: fixed; left: 50%; transform: translateX(-50%); top: var(--app-top); height: var(--app-h);
  width: 100%; max-width: 430px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column;
}
button, input { font-family: inherit; color: inherit; }
button {
  min-width: 48px; min-height: 48px; border: 3px solid var(--line); border-radius: 16px; background: var(--card);
  font-size: 18px; cursor: pointer; box-shadow: var(--shadow); padding: 4px 12px; touch-action: manipulation;
}
button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(74, 52, 38, .18); }
button[aria-disabled="true"] { opacity: .45; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-big { width: 100%; min-height: 64px; font-size: 26px; border-radius: 20px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > button { flex: 1; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.page { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
h1, h2, h3 { margin: 0; font-weight: normal; }
.topbar {
  display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: var(--card); border-bottom: 3px solid var(--line); z-index: 3;
}
.topbar h1 { flex: 1; font-size: 24px; }

/* 강아지 그림 */
.dog { display: inline-block; line-height: 0; }
.dog svg { width: 100%; height: 100%; display: block; }
.dog[data-face="basic"] .face-basic, .dog[data-face="happy"] .face-happy, .dog[data-face="think"] .face-think,
.dog[data-face="surprised"] .face-surprised, .dog[data-face="sad"] .face-sad { display: inline; }
.dog[data-face="worry"] .face-worry { display: inline; }
.dog:not([data-face="basic"]) .face-basic { display: none; }
.dog.silhouette { filter: brightness(0) opacity(.28); }
.bounce { animation: bounce .7s ease infinite; }
.wag { animation: wag .5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes wag { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* 처음 화면 */
.start { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.say { position: relative; background: var(--bubble-kumi); border: 3px solid var(--line); border-radius: 18px; padding: 10px 14px; font-size: 20px; }
.kumi-hello { display: flex; align-items: center; gap: 10px; }
.kumi-hello .dog { width: 110px; height: 120px; flex: none; }
.name-input {
  width: 100%; min-height: 60px; font-size: 28px; padding: 6px 14px; border: 3px solid var(--line); border-radius: 16px;
  background: var(--card); user-select: text; -webkit-user-select: text; text-align: center;
}
.msg-bad { color: var(--bad); font-size: 20px; min-height: 28px; text-align: center; }
.color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.color-grid button { display: flex; flex-direction: column; align-items: center; padding: 6px; font-size: 20px; }
.color-grid button.on { background: var(--bubble-me); border-width: 5px; }
.color-grid .dog { width: 72px; height: 78px; }

/* 단계 지도 */
.map-top { flex-wrap: wrap; }
.map-top .me { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 19px; }
.map-top .me .dog { width: 40px; height: 44px; flex: none; }
.map-top .me b { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.star-total { color: var(--primary-deep); white-space: nowrap; }
.map-tools { display: flex; gap: 8px; width: 100%; }
.map-tools button { flex: 1; font-size: 17px; padding: 2px 4px; }
.map-scroll { background: linear-gradient(180deg, var(--sky) 0%, #EAF8E0 45%, var(--grass) 100%); }
.trail { position: relative; display: flex; flex-direction: column-reverse; gap: 6px; padding: 26px 16px 60px; }
.trail::before {
  content: ""; position: absolute; top: 40px; bottom: 60px; left: 50%; margin-left: -9px; width: 18px;
  background: repeating-linear-gradient(180deg, #E5C48F 0 16px, transparent 16px 28px); border-radius: 9px;
}
.stop {
  position: relative; width: 74%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 10px;
  background: var(--card); min-height: 96px; border-radius: 22px;
}
.stop:nth-child(odd) { align-self: flex-start; }
.stop:nth-child(even) { align-self: flex-end; }
.stop .dog { width: 74px; height: 80px; flex: none; }
.stop .info { flex: 1; min-width: 0; }
.stop .num { font-size: 16px; color: var(--ink-soft); }
.stop .name { font-size: 20px; }
.stars { color: var(--star); letter-spacing: 1px; font-size: 20px; }
.stars .off { color: var(--star-off); }
.stop.king { width: 100%; align-self: center; background: linear-gradient(135deg, #FFF3C4, #FFD9A0); }
.stop.king .dog { width: 92px; height: 100px; }
.stop.king.locked { background: #EFE8DC; }
.stop.locked { background: #EFE8DC; border-color: #9C8D7D; box-shadow: none; }
.stop .lock { font-size: 26px; position: absolute; right: 10px; top: 10px; }
.stop.current { background: #FFF3C4; animation: glow 1.4s ease-in-out infinite; }
.stop .go { color: var(--primary-deep); font-size: 20px; }
.stop.unlocking .lock { animation: unlock 1s forwards; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 183, 3, .7), var(--shadow); } 50% { box-shadow: 0 0 0 10px rgba(255, 183, 3, .25), var(--shadow); } }
@keyframes unlock { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7) rotate(-14deg); } 100% { transform: scale(0); opacity: 0; } }
.resume { margin: 8px 12px 0; display: flex; align-items: center; gap: 8px; }
.resume span { flex: 1; }

/* 아래에서 올라오는 카드, 확인 카드 */
.overlay { position: fixed; inset: 0; background: rgba(40, 28, 20, .5); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.overlay.center { align-items: center; padding: 16px; }
.sheet {
  width: 100%; max-width: 430px; background: var(--card); border: 3px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; animation: rise .22s ease-out;
  max-height: 92%; overflow-y: auto;
}
.overlay.center .sheet { border-bottom: 3px solid var(--line); border-radius: 24px; max-width: 380px; padding: 18px 16px; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet .dog { width: 130px; height: 140px; align-self: center; }
.sheet h2 { font-size: 28px; text-align: center; }
.sheet p { margin: 0; font-size: 20px; text-align: center; }
.facts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 18px; color: var(--ink-soft); }
.facts span { background: var(--bg); border-radius: 10px; padding: 3px 10px; }

.sound-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 22px; }
.sound-row button { min-width: 96px; }

/* 대결 화면 */
.battle { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.b-top { display: flex; align-items: center; gap: 10px; padding: calc(6px + env(safe-area-inset-top)) 12px 6px; background: var(--card); border-bottom: 3px solid var(--line); }
.b-top .dog { width: 84px; height: 92px; flex: none; }
.b-top .who { flex: 1; min-width: 0; }
.b-top .name { font-size: 22px; }
.b-top .left { font-size: 24px; color: var(--primary-deep); }
.b-top .score { font-size: 18px; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.b-top .name { display: flex; align-items: center; gap: 8px; }
.hearts { color: var(--bad); font-size: 20px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.hearts.last { animation: blink .7s steps(2) 3; }
.b-rule { display: inline-block; font-size: 16px; color: #fff; background: var(--primary-deep); border-radius: 8px; padding: 0 8px; }
.b-react { font-size: 18px; color: var(--good); min-height: 24px; }
.b-time { height: 12px; background: #EDE3D2; flex: none; display: none; }
.b-time.on { display: block; }
.b-time i { display: block; height: 100%; width: 100%; background: var(--bar); transform-origin: left; }
.b-time.warn i { background: var(--warn); }
.b-time.danger i { background: var(--bad); animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
/* 자판이 열렸을 때만 보이는 위쪽 한 줄 */
.b-last { display: none; padding: 2px 12px; background: var(--card); border-bottom: 3px solid var(--line); }
.b-last .row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.b-last .dog { width: 37px; height: 40px; flex: none; }
.b-last .b-name { flex: 1; min-width: 0; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-last .word { display: none; flex: 1; min-width: 0; font-size: 30px; line-height: 1.1; white-space: nowrap; }
.b-last .word em { font-style: normal; color: var(--primary-deep); }
.b-last .side { flex: none; display: flex; align-items: center; gap: 8px; }
.b-last .side .hearts { font-size: 18px; }
.b-last .left { font-size: 20px; color: var(--primary-deep); white-space: nowrap; }
.b-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overscroll-behavior: contain; }
.bub { max-width: 84%; padding: 7px 14px; border: 3px solid var(--line); border-radius: 18px; font-size: 26px; line-height: 1.25; }
.bub.me { align-self: flex-end; background: var(--bubble-me); border-bottom-right-radius: 4px; }
.bub.dog-b { align-self: flex-start; background: var(--bubble-dog); border-bottom-left-radius: 4px; }
.bub .word em { font-style: normal; color: var(--primary-deep); }
.bub .mean { display: block; font-size: 16px; color: var(--ink-soft); line-height: 1.3; margin-top: 2px; }
.bub.greet { font-size: 20px; }
.bub.thinking .dots { display: inline-flex; gap: 6px; padding: 6px 2px; }
.bub.thinking .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-soft); animation: dots 1s infinite; }
.bub.thinking .dots i:nth-child(2) { animation-delay: .15s; }
.bub.thinking .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-7px); opacity: 1; } }
/* 쿠미 줄: 입력칸 바로 위. 자판이 열려도 닫혀도 같은 자리, 같은 한 줄이다. */
.b-kumi { display: flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--bg-deep); border-top: 3px solid var(--line); flex: none; }
.b-kumi .dog { width: 41px; height: 44px; flex: none; }
.b-kumi .text {
  flex: 1; min-width: 0; font-size: 19px; line-height: 1.25; white-space: nowrap; overflow: hidden;
  background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 4px 10px;
}
.b-kumi.bad .text { color: var(--bad); }
.b-input { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--card); }
.b-input.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.b-tip {
  position: absolute; left: 50%; bottom: calc(100% + 60px); transform: translateX(-50%); z-index: 2; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 12px; padding: 4px 12px; font-size: 18px;
}
.b-field.invite { animation: sparkle 1.2s ease-in-out infinite; }
.gone, body.kb .gone { display: none !important; }
.chip { min-width: 52px; height: 56px; font-size: 30px; padding: 0 6px; background: var(--bubble-me); flex: none; box-shadow: none; }
.chip.swap::after { content: "⇄"; font-size: 13px; display: block; line-height: 1; }
.b-field {
  flex: 1; min-width: 0; height: 56px; font-size: 28px; padding: 2px 10px; border: 3px solid var(--line); border-radius: 14px;
  background: #FFFDF6; user-select: text; -webkit-user-select: text; outline: none;
}
.b-field:focus { border-color: var(--primary-deep); }
.b-send { width: 58px; height: 56px; font-size: 24px; padding: 0; flex: none; }
.b-icon { display: none; width: 48px; height: 48px; font-size: 22px; padding: 0; flex: none; box-shadow: none; }
.b-help { display: flex; gap: 10px; padding: 0 10px calc(8px + env(safe-area-inset-bottom)); background: var(--card); }
.b-help button { flex: 1; font-size: 19px; }

/* 자판이 열렸을 때 */
/* 맨 아래 말풍선이 쿠미 줄에 붙거나 가려지지 않게 대화 목록 끝에 여백을 둔다. */
.b-log::after { content: ""; flex: none; height: 10px; }

body.kb .b-top, body.kb .b-help { display: none; }
/* 자판이 열려도 머리 부분과 쿠미 줄 사이를 대화 목록이 채운다. 말풍선은 조금 작게. */
body.kb .b-log { padding: 6px 10px; gap: 6px; }
body.kb .battle.log-off .b-log { display: none; }
body.kb .bub { font-size: 24px; padding: 4px 11px; border-radius: 16px; }
body.kb .bub .mean { font-size: 15px; }
body.kb .bub.greet { font-size: 17px; }
/* 가장 최근 강아지 낱말: 조금 크게, 진한 테두리, 나타날 때 톡 튀어나온다. */
body.kb .bub.dog-b.latest { font-size: 28px; border: 4px solid var(--primary-deep); animation: popin .35s cubic-bezier(.3, 1.6, .5, 1) both; }
body.kb .bub.dog-b.latest .mean { font-size: 16px; }
@keyframes popin { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
/* 대화 목록을 숨길 만큼 좁으면 위쪽 줄에 최근 낱말을 대신 보여 준다. */
body.kb .battle.log-off .b-last .b-name { display: none; }
body.kb .battle.log-off .b-last .word { display: block; }
body.kb .b-last { display: block; }
body.kb .b-tip { display: none; }
body.kb .b-kumi { margin-top: auto; }
body.kb .b-icon { display: block; }
body.kb .b-input { padding-bottom: 6px; }
/* 자판이 열렸는데도 공간이 모자라면: ① 상대 강아지를 빼고 ② (점수는 이미 숨김) ③ 쿠미를 36px로 줄인다.
   직전 낱말, 뜻, 시간 막대, 남은 목표, 하트, 입력칸은 줄이지 않는다. */
@media (max-height: 340px) {
  body.kb .b-last .row .dog { display: none; }
}
@media (max-height: 290px) {
  body.kb .b-kumi .dog { width: 33px; height: 36px; }
  body.kb .b-kumi { padding: 1px 10px; }
}

/* 결과 */
.result { display: flex; flex-direction: column; gap: 12px; }
.r-head { text-align: center; }
.r-head h1 { font-size: 34px; }
.r-dogs { display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.r-dogs .dog { width: 120px; height: 130px; }
.r-dogs .dog.small { width: 88px; height: 96px; }
.r-stars { display: flex; justify-content: center; gap: 8px; font-size: 54px; line-height: 1; min-height: 58px; }
.r-stars span { color: var(--star-off); }
.r-stars span.on { color: var(--star); animation: drop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes drop { from { transform: translateY(-70px) scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
.r-record { text-align: center; margin: 0; font-size: 24px; color: var(--primary-deep); }
.r-score { text-align: center; font-size: 36px; color: var(--primary-deep); }
.card { background: var(--card); border: 3px solid var(--line); border-radius: 18px; padding: 12px 14px; }
.card h2 { font-size: 22px; margin-bottom: 6px; }
.detail { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 19px; }
.star-tip { font-size: 18px; color: var(--ink-soft); margin: 2px 0 0; }
.friend-card { display: flex; align-items: center; gap: 10px; background: #FFF3C4; }
.friend-card .dog { width: 84px; height: 92px; flex: none; }
.learn { display: flex; flex-direction: column; gap: 8px; }
.learn div { border-top: 2px dashed #E5D8C3; padding-top: 6px; }
.learn div:first-child { border-top: 0; padding-top: 0; }
.learn b { font-weight: normal; font-size: 22px; }
.learn small { font-size: 16px; color: var(--ink-soft); display: block; }
.tag-hard { font-size: 14px; background: #FFE0B8; border-radius: 8px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.levelup {
  position: fixed; inset: 0; z-index: 30; background: rgba(40, 28, 20, .95); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; color: #fff; text-align: center; padding: 16px;
}
.levelup h1 { font-size: 58px; color: #FFD84D; text-shadow: 0 4px 0 var(--primary-deep); animation: pop .6s cubic-bezier(.3, 1.7, .5, 1) both; }
.levelup .pair { display: flex; align-items: flex-end; gap: 14px; }
.levelup .dog { width: 150px; height: 164px; }
.levelup .dog.small { width: 96px; height: 104px; }
.levelup p { font-size: 22px; margin: 0; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; display: none; }
.sparkle { animation: sparkle 1.2s ease-in-out 2; }
@keyframes sparkle { 50% { box-shadow: 0 0 0 8px rgba(255, 216, 77, .8); } }

/* 도감 */
.dex { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dex .cell { background: var(--card); border: 3px solid var(--line); border-radius: 18px; padding: 8px; text-align: center; min-height: 190px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dex .cell.unknown { background: #EFE8DC; border-color: #9C8D7D; }
.dex .cell.kumi { grid-column: 1 / -1; flex-direction: row; text-align: left; min-height: 0; background: #FFF3C4; gap: 10px; }
.dex .dog { width: 96px; height: 104px; flex: none; }
.dex .name { font-size: 21px; }
.dex .intro { font-size: 16px; color: var(--ink-soft); line-height: 1.3; }

/* 순위 */
.tabs { display: flex; gap: 8px; padding: 10px 12px 4px; }
.tabs button { flex: 1; }
.tabs button.on { background: var(--primary); color: #fff; }
.tabs button { padding: 2px 4px; font-size: 17px; }
.tabs.sub { padding-top: 4px; }
.tabs.sub button { box-shadow: none; }
.tabs.sub button.on { background: var(--bubble-me); color: var(--ink); }
.rank-note { background: #FFF3C4; border: 3px solid var(--line); border-radius: 14px; padding: 8px 12px; text-align: center; margin-bottom: 10px; }
.rank-row .pts small { display: block; font-size: 15px; color: var(--ink-soft); text-align: right; line-height: 1.1; }
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row { display: flex; align-items: center; gap: 6px; background: var(--card); border: 3px solid var(--line); border-radius: 14px; padding: 4px 8px; min-height: 58px; }
.rank-row.me { background: var(--bubble-me); border-width: 4px; }
.rank-row .rk { width: 34px; font-size: 22px; text-align: center; flex: none; }
.rank-row .dog { width: 40px; height: 44px; flex: none; }
.rank-row .who { flex: 1; min-width: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .pts { font-size: 20px; color: var(--primary-deep); white-space: nowrap; }
.rank-row .slot { width: 4px; flex: none; }
.rank-gap { text-align: center; color: var(--ink-soft); }
.empty { text-align: center; color: var(--ink-soft); padding: 26px 8px; font-size: 20px; }

/* 이어 하기 코드, 신고 */
.code-big { font-size: 40px; text-align: center; letter-spacing: 1px; background: var(--bubble-me); border: 3px solid var(--line);
  border-radius: 16px; padding: 8px 10px; user-select: text; -webkit-user-select: text; }
.report-name { font-size: 28px; }
.code-note { font-size: 17px !important; color: var(--ink-soft); }
.code-names { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.code-names button { padding: 2px; font-size: 17px; }
.code-names button.on { background: var(--bubble-me); border-width: 5px; }
.code-digits { letter-spacing: 8px; }
.name-tip { margin: -6px 0 0; text-align: center; color: var(--ink-soft); }
.code-tip { background: #E7F6FF; display: flex; flex-direction: column; gap: 6px; }
.code-tip p { margin: 0; }
.rank-row .report { width: 48px; height: 48px; padding: 0; font-size: 18px; flex: none; box-shadow: none; border-width: 2px; }

/* 안내 */
.about h2 { font-size: 23px; margin: 10px 0 4px; }
.about p, .about li { font-size: 18px; margin: 4px 0; }
.about ul { padding-left: 22px; margin: 4px 0; }
.about a { color: var(--primary-deep); }
.about { user-select: text; -webkit-user-select: text; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}