/* 냥냥 인형뽑기 전용 스타일 (공통은 ../style.css) */

.best { text-align: center; margin: 0 0 4px; font-size: 1.1rem; }
.best b { color: var(--accent); font-size: 1.5rem; }
.center { text-align: center; }
.muted { color: var(--muted); margin: 0 0 8px; }

/* 위 상태줄: 글자 크기를 게임판 폭에 맞춰(claw.js resize) 어느 폰·브라우저에서도 한 줄로 */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin: 8px auto 6px;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  max-width: 100%;
}
.hud > span { flex: none; }
#hudScore { color: var(--accent); }
.hud-btns { display: flex; gap: 0.35em; flex: none; }
.hud button { padding: 0.25em 0.55em; font-size: 1em; border-radius: 0.5em; }

.play { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#game.side .play { flex-direction: row; justify-content: center; align-items: flex-end; gap: 14px; }
.stage-wrap { display: flex; justify-content: center; }
.stage-box { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
#stage {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.over-score { margin: 4px 0 0; font-size: 2.2rem; font-weight: 800; color: var(--accent); }

.playing .rules { display: none; }
body.playing { overscroll-behavior: none; user-select: none; -webkit-user-select: none; }

.dex-title { text-align: center; font-weight: 800; margin: 14px 0 6px; }
.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.dex-cell { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border: 2px solid var(--border); border-radius: 12px; background: #fff; min-width: 0; }
.dex-cell canvas { width: 44px; height: 44px; }
.dex-cell small { font-size: 0.66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dex-cell:not(.got) { opacity: 0.7; }

/* 게임 화면 위 글자 */
#timer { position: absolute; bottom: 8px; right: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); font-weight: 800; color: #6c7088; font-size: 0.95rem; pointer-events: none; }
#timer.hurry { color: #e63946; }
#msg { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: #b5482d; font-weight: 800; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
#floaters { position: absolute; inset: 0; pointer-events: none; }
.floater { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.2rem; color: #b5482d; text-shadow: 0 0 4px #fff, 0 0 8px var(--glow, #fff), 0 0 2px #fff; animation: float-up 1.4s ease-out forwards; white-space: nowrap; }
@keyframes float-up { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -60px; } }

/* 상품 칸과 조작판 */
.ctl { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.tray { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px; border-radius: 12px; background: #ffe7ef; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tray::-webkit-scrollbar { display: none; }
.tray canvas { width: 38px; height: 38px; flex: none; }
.tray canvas.pop { animation: tray-pop 0.4s ease-out; }
@keyframes tray-pop { 0% { transform: scale(0.2); } 70% { transform: scale(1.2); } 100% { transform: none; } }
.tray-empty { width: 100%; text-align: center; font-size: 0.8rem; font-weight: 700; color: #c7718f; }
.pad { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: #ff7aa2; user-select: none; -webkit-user-select: none; }
.grab-btn { padding: 0; border: 0; border-radius: 12px; font-weight: 900; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.grab-btn { flex: 1; align-self: stretch; min-height: 64px; background: #ffd23f; color: #b5482d; font-size: 1.4rem; box-shadow: inset 0 -5px 0 rgba(180, 90, 0, 0.3); }
.grab-btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(180, 90, 0, 0.3); }
.pad.busy button, .pad.busy .stick { opacity: 0.45; }
#game.side .pad { flex-direction: column; align-items: stretch; }
#game.side .grab-btn { flex: none; width: 100%; height: 72px; }

/* 기계 돌려 보기 */
.spin { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 6px; }
.spin button { min-width: 38px; height: 34px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: #c2457a; font-weight: 900; font-size: 1.05rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.spin button[data-spin="0"] { font-size: 0.78rem; }
.spin button:active { background: #fff; transform: scale(0.94); }
.coin-hint { color: #b5482d; font-weight: 700; }
#btnStart:disabled { opacity: 0.5; }

/* 조이스틱 */
.stick {
  position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffe3ec 0 55%, #ffc4d6 56% 100%);
  box-shadow: inset 0 4px 10px rgba(160, 40, 90, 0.25), 0 2px 0 rgba(255, 255, 255, 0.5);
  touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; cursor: grab;
}
.knob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #ffb3c9, #e0457a 70%);
  box-shadow: 0 4px 8px rgba(120, 20, 60, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease-out; pointer-events: none;
}
.stick.on { cursor: grabbing; }
.stick.on .knob { transition: none; }
#game.side .stick { align-self: center; width: 132px; height: 132px; }
#game.side .knob { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.spin button { padding: 0 12px; font-size: 0.85rem; }
#stage { cursor: ew-resize; }
.stick i { position: absolute; font-style: normal; font-size: 0.7rem; color: rgba(194, 69, 122, 0.45); pointer-events: none; transform: translate(-50%, -50%); }
.stick .a-u { left: 50%; top: 11%; } .stick .a-d { left: 50%; top: 89%; } .stick .a-l { left: 11%; top: 50%; } .stick .a-r { left: 89%; top: 50%; }