/* 도블 - 홍차넷 오락실 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: radial-gradient(circle at 30% 20%, #2c3e6b 0%, #1a2340 55%, #121830 100%);
  color: #fff;
}

.db-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- 헤더 ---------- */
.db-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.db-back {
  color: #8fa3d9;
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
}
.db-back:active { background: rgba(255,255,255,0.1); }

.db-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
}

.db-hud {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.db-timer {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffd76a;
  min-width: 84px;
  text-align: right;
}

.db-remain {
  font-size: 13px;
  color: #8fa3d9;
  white-space: nowrap;
}

/* 효과음 토글 */
.db-sound {
  border: none;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.db-sound:active { transform: scale(0.92); }

/* 좁은 화면: 남은 카드 수는 더미 라벨과 중복이라 숨김 */
@media (max-width: 600px) {
  .db-remain { display: none; }
}

/* ---------- 게임 보드 ---------- */
.db-board {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  padding: 26px 10px 30px;
}

/* ---------- 더미(파일) ---------- */
.db-pile {
  --size: min(86vw, 36vh);
  --size: min(86vw, 36dvh);
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
}

/* 더미 뒷장: 카드 두께 표현 */
.db-pile-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5f3ec 0%, #e6e3d6 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 0 4px #fff;
  display: none;
}
.db-pile.has-1 .db-pile-layer.l1 { display: block; transform: translate(4px, 5px) rotate(3deg); }
.db-pile.has-2 .db-pile-layer.l2 { display: block; transform: translate(-5px, 9px) rotate(-4deg); }

.db-pile-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #8fa3d9;
  letter-spacing: 1px;
  pointer-events: none;
}
.db-pile--deck .db-pile-label { top: -22px; }
.db-pile--mine .db-pile-label { bottom: -22px; }
.db-pile-label b { color: #ffd76a; }

.db-card {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f2f0e9 70%, #e3e0d4 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 0 0 6px #fff, inset 0 0 0 9px #d9d4c3;
  will-change: transform;
}

.db-vs {
  position: relative;
  z-index: 5;
  font-size: 12px;
  font-weight: 700;
  color: #6d7fb4;
  background: rgba(255,255,255,0.08);
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: 1px;
  transition: all 0.15s;
}

/* 정답 외침 토스트 — fixed라 레이아웃에 영향 없음 (덜걱거림 방지) */
.db-shout {
  position: fixed;
  z-index: 40;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  color: #3a2000;
  background: #ffd76a;
  font-size: 17px;
  font-weight: 700;
  padding: 7px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255, 200, 80, 0.45);
}
.db-shout.is-on {
  animation: db-shout 0.9s ease-out forwards;
}
@keyframes db-shout {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  25%  { transform: translate(-50%, -50%) scale(1); }
  80%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0; }
}

/* 새 카드 공개 애니메이션 */
@keyframes db-in {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.db-card.anim-in { animation: db-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); }

@keyframes db-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.db-card.shake { animation: db-shake 0.35s ease; }

/* ---------- 심볼 ---------- */
.db-sym {
  position: absolute;
  width: 27%;
  height: 27%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  border: none;
  background: none;
  font-size: calc(var(--size) * 0.155);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* 캐릭터 이미지 심볼 — 이모지 시각 크기에 맞춤, 클릭은 버튼이 받도록 통과 */
.db-sym img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  border-radius: 50%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.db-sym.is-hit { animation: db-pop 0.2s ease; }
@keyframes db-pop {
  50% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * 1.35)); }
}

.db-sym.is-miss {
  filter: grayscale(1) brightness(0.6);
}

.db-penalty-float {
  position: fixed;
  z-index: 50;
  transform: translate(-50%, 0);
  font-size: 20px;
  font-weight: 800;
  color: #ff5a6e;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  pointer-events: none;
  animation: db-float 0.9s ease-out forwards;
}
@keyframes db-float {
  from { opacity: 1; margin-top: 0; }
  to   { opacity: 0; margin-top: -46px; }
}

/* ---------- 오버레이 ---------- */
.db-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 30, 0.86);
  z-index: 100;
  padding: 20px;
}
.db-overlay.is-open { display: flex; }

.db-panel {
  width: 100%;
  max-width: 400px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  background: linear-gradient(160deg, #232f57 0%, #1a2340 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.db-logo {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(90deg, #ffd76a, #ff8a5c, #ff5a6e, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.db-logo span {
  display: block;
  font-size: 12px;
  letter-spacing: 10px;
  margin-top: 2px;
  -webkit-text-fill-color: #6d7fb4;
}

.db-desc {
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #c2cdef;
}
.db-desc b { color: #ffd76a; }
.db-desc-warn { color: #ff8a99; font-size: 13px; }

.db-mybest {
  min-height: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #7ee2a8;
  margin-bottom: 10px;
}

.db-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 15px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 10px;
  font-family: inherit;
}

.db-btn--start {
  background: linear-gradient(90deg, #ffb84d, #ff8a5c);
  color: #3a2000;
  box-shadow: 0 6px 18px rgba(255, 150, 60, 0.35);
}
.db-btn--start:active { transform: scale(0.97); }

.db-btn--sub {
  background: rgba(255,255,255,0.1);
  color: #c2cdef;
}

.db-ranks { margin-top: 22px; }
.db-ranks-title {
  font-size: 12px;
  font-weight: 700;
  color: #6d7fb4;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.db-ranks ol {
  list-style: none;
  counter-reset: rk;
}
.db-ranks li {
  counter-increment: rk;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 14px;
}
.db-ranks li:nth-child(odd) { background: rgba(255,255,255,0.05); }
.db-ranks li::before {
  content: counter(rk);
  font-weight: 800;
  color: #6d7fb4;
  width: 18px;
  flex: 0 0 auto;
}
.db-ranks li:nth-child(1)::before { content: "🥇"; width: 22px; }
.db-ranks li:nth-child(2)::before { content: "🥈"; width: 22px; }
.db-ranks li:nth-child(3)::before { content: "🥉"; width: 22px; }
.db-rank-name {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-rank-time {
  font-variant-numeric: tabular-nums;
  color: #ffd76a;
  font-weight: 700;
}

.db-login-note {
  margin-top: 14px;
  font-size: 12px;
  color: #8fa3d9;
}

.db-clear-title {
  font-size: 30px;
  font-weight: 900;
  color: #7ee2a8;
}

.db-final-time {
  font-size: 46px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffd76a;
  margin: 12px 0 4px;
}

.db-final-detail {
  font-size: 13px;
  color: #8fa3d9;
  margin-bottom: 14px;
}

.db-record-msg {
  min-height: 22px;
  font-size: 15px;
  font-weight: 700;
  color: #c2cdef;
  margin-bottom: 12px;
}
.db-record-msg.is-new { color: #7ee2a8; }
.db-record-msg.is-err { color: #ff8a99; }

/* ---------- 가로 화면 / 데스크탑 ---------- */
@media (min-aspect-ratio: 5/4) {
  .db-board {
    flex-direction: row;
    gap: 24px;
  }
  .db-pile {
    --size: min(36vw, 68vh);
    --size: min(36vw, 68dvh);
  }
  .db-pile--mine .db-pile-label { bottom: auto; top: -22px; }
}