/* 냥냥 매치 — 화면 */
:root {
  --bg: #FFE9EF;
  --bg2: #FFF6F0;
  --ink: #4A3328;
  --ink2: #8C6A5A;
  --card: #FFFFFF;
  --accent: #FF7BA9;
  --accent2: #FFB86B;
  --board: #FFFFFF;
  --tile: #FFF1F4;
  --cell: 44px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jua', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
button {
  font: inherit; color: inherit; border: 0; cursor: pointer;
  touch-action: manipulation;
}
img { -webkit-user-drag: none; pointer-events: none; }

#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 20% 10%, #FFF8E1 0, transparent 40%),
    radial-gradient(circle at 85% 90%, #FFE0EA 0, transparent 45%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  overflow: hidden;
}

/* ── 위쪽 정보띠 ── */
#hud {
  padding: calc(8px + var(--sat)) calc(12px + var(--sar)) 6px calc(12px + var(--sal));
  flex: 0 0 auto;
}
#hud .row { display: flex; gap: 8px; align-items: stretch; }
#hud .stat {
  background: var(--card); border-radius: 14px; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center; min-width: 64px;
  box-shadow: 0 2px 0 #F3C9D3;
}
#hud .stat.wide { flex: 1; }
#hud .lbl { font-size: 12px; color: var(--ink2); line-height: 1; }
#hud .stat b { font-size: 22px; line-height: 1.15; font-weight: 400; }
#mute {
  width: 44px; border-radius: 14px; background: var(--card); font-size: 20px;
  box-shadow: 0 2px 0 #F3C9D3; color: var(--ink);
}
#mute.off { color: #C9B2AA; text-decoration: line-through; }
#goalbar {
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.65); border-radius: 14px; padding: 6px 10px;
}
#goalbar .lbl { font-size: 13px; color: var(--ink2); }
#goals { display: flex; gap: 10px; flex: 1; justify-content: center; flex-wrap: wrap; }
.goal {
  display: flex; align-items: center; gap: 4px;
  font-size: 16px; padding: 2px 8px 2px 4px; border-radius: 12px; background: #fff;
}
.goal .ico { width: 30px; height: 30px; border-radius: 9px; background-size: 80%; background-repeat: no-repeat; background-position: center; }
.goal.done { opacity: .55; }
.goal.done b::after { content: ' ✓'; color: #4CAF50; }

/* ── 판 ── */
#stage {
  flex: 1 1 auto; position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px calc(8px + var(--sar)) 6px calc(8px + var(--sal));
}
#board {
  position: relative;
  touch-action: none;   /* 판 안의 끌기는 전부 우리 것 — 브라우저가 스크롤로 가로채지 않게 */
  width: calc(var(--cell) * 8 + 12px);
  height: calc(var(--cell) * 8 + 12px);
  background: var(--board); border-radius: 22px; padding: 6px;
  box-shadow: 0 6px 0 #F3C9D3, 0 10px 30px rgba(255,123,169,.15);
}
.tile {
  position: absolute; width: var(--cell); height: var(--cell);
  padding: 3px;
}
.tile::before {
  content: ''; position: absolute; inset: 3px; border-radius: 11px;
  background: var(--tile);
}
.kit {
  position: absolute; width: var(--cell); height: var(--cell); padding: 3px;
  will-change: transform;
  transition: transform .18s cubic-bezier(.2,.8,.3,1.2);
}
.kit .tint {
  position: absolute; inset: 3px; border-radius: 11px;
  background: var(--tint, #eee); opacity: .55;
}
.kit .pic {
  position: absolute; inset: 4px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform-origin: 50% 90%;
}
.kit.sel .tint { opacity: 1; box-shadow: 0 0 0 3px #fff inset, 0 0 0 3px var(--accent); }
.kit.sel .pic { animation: wiggle .5s ease-in-out infinite; }
.kit.pop .pic { animation: pop .32s ease-out forwards; }
.kit.pop .tint { animation: fadeout .3s ease-out forwards; }
.kit.drop { transition: transform .32s cubic-bezier(.3,.9,.4,1.15); }
.kit.hint .pic { animation: hop .7s ease-in-out infinite; }
.kit.nope { animation: shake .3s ease-in-out; }
.kit.fresh { animation: land .35s ease-out; }

/* 없는 그림 대비 — 색 동그라미로라도 보이게 */
.kit .pic.fallback { border-radius: 50%; background: var(--tint); inset: 9px; }
.kit .pic.fallback::after {
  content: ''; position: absolute; left: 30%; top: 32%; width: 10%; height: 10%;
  border-radius: 50%; background: #3B2A20; box-shadow: 0 0 0 0 #000, 400% 0 0 0 #3B2A20;
}

@keyframes wiggle { 0%,100%{transform:rotate(-6deg) scale(1.06)} 50%{transform:rotate(6deg) scale(1.06)} }
@keyframes hop { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14%)} }
@keyframes pop { 0%{transform:scale(1)} 60%{transform:scale(1.35);opacity:1} 100%{transform:scale(0);opacity:0} }
@keyframes fadeout { to{opacity:0} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes land { 0%{transform:scaleY(.8) scaleX(1.12)} 60%{transform:scaleY(1.06)} 100%{transform:none} }

/* ── 어른 고양이 달려 나가기 ── */
#runway { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.runner {
  position: absolute; height: calc(var(--cell) * 1.6); width: calc(var(--cell) * 2.4);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform-origin: 50% 70%;
  animation: dash 1.05s cubic-bezier(.5,0,.9,.4) forwards;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.15));
}
.runner.fallback { border-radius: 40% 40% 45% 45%; background: var(--tint); opacity: .95; }
@keyframes dash {
  0%   { transform: translate(-50%,-50%) scale(.3); opacity: 0; }
  18%  { transform: translate(-50%,-56%) scale(1.15); opacity: 1; }
  32%  { transform: translate(-50%,-50%) scale(1); }
  100% { transform: translate(140vw,-70%) scale(1.05); opacity: 1; }
}
.slow .runner { animation-duration: 6s; }
.slow .float { animation-duration: 5s; }
.dust {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; opacity: .9; pointer-events: none;
  animation: dust .6s ease-out forwards;
}
@keyframes dust { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.float {
  position: absolute; pointer-events: none; font-size: 22px; color: var(--accent);
  text-shadow: 0 2px 0 #fff, 0 0 8px #fff;
  animation: floatup .9s ease-out forwards; transform: translate(-50%,-50%);
}
@keyframes floatup { to { transform: translate(-50%,-160%); opacity: 0; } }

#tip {
  flex: 0 0 auto; text-align: center; font-size: 14px; color: var(--ink2);
  padding: 4px 12px calc(10px + var(--sab));
  min-height: calc(28px + var(--sab));
}

/* ── 겹치는 화면 ── */
.screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,233,239,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: calc(16px + var(--sat)) 16px calc(16px + var(--sab));
  transition: opacity .25s;
}
.screen.hidden-screen { opacity: 0; pointer-events: none; }
.card {
  background: var(--card); border-radius: 28px; padding: 26px 22px 18px; width: min(360px, 92%);
  text-align: center; box-shadow: 0 8px 0 #F3C9D3, 0 20px 50px rgba(255,123,169,.25);
}
.logo .cats { height: 120px; display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin-bottom: 6px; }
.logo .cats span {
  width: 64px; height: 64px; background-size: contain; background-repeat: no-repeat; background-position: bottom;
  animation: hop 1.4s ease-in-out infinite;
}
.logo .cats span:nth-child(2) { animation-delay: .2s; width: 76px; height: 76px; }
.logo .cats span:nth-child(3) { animation-delay: .4s; }
h1 { margin: 0; font-size: 40px; line-height: 1.1; color: var(--accent); font-weight: 400; text-shadow: 0 3px 0 #FFD9E4; }
h2 { margin: 0 0 8px; font-size: 30px; font-weight: 400; color: var(--accent); }
.card p { margin: 8px 0 18px; font-size: 16px; line-height: 1.45; color: var(--ink2); word-break: keep-all; }
button.big {
  display: block; width: 100%; padding: 14px; border-radius: 18px; font-size: 22px; color: #fff;
  background: linear-gradient(180deg, #FF8FB8, #FF6A9E); box-shadow: 0 5px 0 #D94F80;
}
button.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #D94F80; }
button.ghost { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 16px; background: #FFF1F4; color: var(--ink2); font-size: 17px; }
#r-stars { font-size: 34px; color: #FFC53D; letter-spacing: 4px; margin: 0 0 14px; text-shadow: 0 2px 0 #E9A400; }
#r-stars .dim { color: #E8DCD6; text-shadow: none; }
.foot { margin-top: 14px; font-size: 12px; color: #C9B2AA; }
#sound-note { font-size: 13px; color: var(--ink2); margin-top: 10px; }

@media (max-height: 640px) {
  .logo .cats { height: 90px; }
  h1 { font-size: 34px; }
}