/* =============================================
   DRINK-DODGE POKER (술피하기 포커)
   Dark neon bar theme — Compact layout v2
   ============================================= */

/* -- Design Tokens -- */
:root {
  --dp-bg: #0a0a12;
  --dp-surface: #12121e;
  --dp-card-w: 100px;
  --dp-card-h: 140px;
  --dp-card-sm-w: 70px;
  --dp-card-sm-h: 98px;
  --dp-card-back: #2a1f5e;
  --dp-card-back-accent: #3d2f8a;
  --dp-soju: #4dd0e1;
  --dp-whiskey: #ffb74d;
  --dp-beer: #ffd54f;
  --dp-makgeolli: #c8e6c9;
  --dp-neon-pink: #ff2d78;
  --dp-neon-cyan: #00e5ff;
  --dp-neon-gold: #ffd700;
  --dp-neon-purple: #b388ff;
  --dp-radius: 12px;
  --dp-radius-sm: 8px;
  --dp-transition: 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ===== GAME SCREEN ===== */
#drinkpokerGame {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(77, 208, 225, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255, 183, 77, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 45, 120, 0.03) 0%, transparent 60%),
    linear-gradient(180deg, #08080f 0%, var(--dp-bg) 30%, #0c0c18 100%);
  padding: 0;
  gap: 0;
  position: relative;
  overflow: hidden;
}

#drinkpokerGame.dp-my-action {
  box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.08), inset 0 0 3px rgba(255, 215, 0, 0.15);
}

/* ===== HEADER ===== */
.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(77, 208, 225, 0.12);
  z-index: 10;
  flex-shrink: 0;
}

.dp-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dp-transition);
}
.dp-back-btn:active {
  background: rgba(255, 255, 255, 0.15);
}

.dp-header-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 16px;
  color: var(--dp-neon-cyan);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
  letter-spacing: 0.5px;
}

.dp-tracker-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dp-transition);
}
.dp-tracker-btn:active {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--dp-neon-cyan);
}

/* ===== TURN INDICATOR ===== */
.dp-turn-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim, #aaa);
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  min-height: 28px;
  transition: all 0.3s;
}
.dp-turn-indicator.my-turn {
  color: var(--dp-neon-gold);
  background: rgba(255, 215, 0, 0.08);
  border-bottom-color: rgba(255, 215, 0, 0.15);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
  animation: dp-my-turn-pulse 2s ease-in-out infinite;
}
@keyframes dp-my-turn-pulse {
  0%, 100% { background: rgba(255, 215, 0, 0.08); }
  50% { background: rgba(255, 215, 0, 0.14); }
}

/* ===== OPPONENTS AREA ===== */
.dp-opponents {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dp-opponents::-webkit-scrollbar { display: none; }

.dp-opp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid transparent;
  transition: all 0.3s;
  min-width: 76px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

/* JS uses dp-opp-active as a class name (not .dp-opp.active) */
.dp-opp.active,
.dp-opp.dp-opp-active {
  border-color: var(--dp-neon-gold);
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.25), inset 0 0 8px rgba(255, 215, 0, 0.06);
  transform: scale(1.04);
}

.dp-opp.dp-opp-sender {
  border-color: var(--dp-neon-pink);
  background: rgba(255, 45, 120, 0.06);
}
.dp-opp.dp-opp-sender .dp-opp-avatar {
  border-color: var(--dp-neon-pink);
  box-shadow: 0 0 8px rgba(255, 45, 120, 0.4);
}

.dp-opp.eliminated {
  opacity: 0.35;
  filter: grayscale(0.7);
}

.dp-opp-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.3s;
}

.dp-opp.active .dp-opp-avatar,
.dp-opp.dp-opp-active .dp-opp-avatar {
  border-color: var(--dp-neon-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.dp-opp-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text, #eee);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-opp-hand-count {
  font-size: 11px;
  color: var(--text-dim, #aaa);
  font-weight: 700;
}
.dp-hand-icon { font-size: 12px; }

.dp-opp-faceup {
  display: flex;
  gap: 2px;
  margin-top: 1px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 72px;
}

/* ===== FACE-UP BADGES (dpRenderFaceUpBadges output) ===== */
/* JS generates: dp-faceup-badge dp-badge-<type> [dp-badge-danger|dp-badge-warn] */
.dp-faceup-badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
}
.dp-badge-soju,
.dp-faceup-badge.soju {
  background: rgba(77, 208, 225, 0.15);
  color: var(--dp-soju);
  box-shadow: 0 0 4px rgba(77, 208, 225, 0.3);
}
.dp-badge-whiskey,
.dp-faceup-badge.whiskey {
  background: rgba(255, 183, 77, 0.15);
  color: var(--dp-whiskey);
  box-shadow: 0 0 4px rgba(255, 183, 77, 0.3);
}
.dp-badge-beer,
.dp-faceup-badge.beer {
  background: rgba(255, 213, 79, 0.15);
  color: var(--dp-beer);
  box-shadow: 0 0 4px rgba(255, 213, 79, 0.3);
}
.dp-badge-makgeolli,
.dp-faceup-badge.makgeolli {
  background: rgba(200, 230, 201, 0.15);
  color: var(--dp-makgeolli);
  box-shadow: 0 0 4px rgba(200, 230, 201, 0.3);
}

.dp-badge-danger,
.dp-faceup-badge.danger {
  animation: dp-badge-danger-pulse 1s ease-in-out infinite;
  border: 1px solid var(--dp-neon-pink);
}
@keyframes dp-badge-danger-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 45, 120, 0.3); }
  50% { box-shadow: 0 0 10px rgba(255, 45, 120, 0.6); }
}

.dp-badge-warn,
.dp-faceup-badge.warn {
  border: 1px solid rgba(255, 183, 77, 0.4);
}

.dp-faceup-none {
  font-size: 9px;
  color: var(--text-dim, #aaa);
  opacity: 0.5;
}

.dp-badge-empty {
  opacity: 0.3;
  filter: grayscale(0.5);
}

/* Also keep dp-result-badge for game-over results */
.dp-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
  margin: 0 2px;
}

/* ===== CENTER AREA ===== */
.dp-center {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.dp-center-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Center card: 1.6x scale */
.dp-center-card .dp-card-drawn {
  width: calc(var(--dp-card-w) * 1.6);
  height: calc(var(--dp-card-h) * 1.6);
  margin: 0;
  border-width: 2px;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(0, 229, 255, 0.2);
}

.dp-center-card .dp-card-drawn .dp-card-emoji {
  font-size: 40px;
}

.dp-center-card .dp-card-drawn .dp-card-name {
  font-size: 13px;
  margin-top: 4px;
}

.dp-center-claim {
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  color: var(--text, #eee);
  min-height: 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.dp-center-from {
  font-size: 12px;
  color: var(--text-dim, #aaa);
  text-align: center;
}

/* ===== CLAIM TAG ===== */
.dp-claim-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 900;
  color: var(--dp-neon-gold);
  padding: 5px 14px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 24px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.dp-claim-emoji { font-size: 22px; }

/* ===== ROUTE DISPLAY ===== */
.dp-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #eee);
}
.dp-route-arrow {
  font-size: 16px;
  color: var(--dp-neon-cyan);
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}
.dp-route-target {
  color: var(--dp-neon-cyan);
}

/* ===== DECK VISUAL (center send phase) ===== */
.dp-deck-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 14px;
  transition: background 0.2s;
}
.dp-deck-visual:active {
  background: rgba(255, 215, 0, 0.06);
}
.dp-deck-stack {
  position: relative;
  width: 100px;
  height: 140px;
}
.dp-deck-card {
  position: absolute;
  width: 100px !important;
  height: 140px !important;
  border-radius: 10px !important;
  margin: 0 !important;
  cursor: pointer !important;
}
.dp-deck-1 { top: 0; left: 0; z-index: 3; }
.dp-deck-2 { top: -3px; left: 3px; z-index: 2; transform: rotate(3deg) !important; }
.dp-deck-3 { top: -5px; left: -3px; z-index: 1; transform: rotate(-2deg) !important; opacity: 0.7; }
.dp-deck-tap {
  font-size: 13px;
  font-weight: 800;
  color: var(--dp-neon-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
  animation: dp-tap-pulse 1.5s ease-in-out infinite;
}
@keyframes dp-tap-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ===== PEEK TRAIL ===== */
.dp-peek-trail {
  font-size: 12px;
  color: var(--dp-neon-purple);
  text-align: center;
  padding: 4px 10px;
  background: rgba(179, 136, 255, 0.08);
  border-radius: 8px;
  margin-top: 2px;
}
.dp-peek-name {
  font-weight: 800;
  color: #d1b3ff;
}

/* ===== REVEAL RESULT (in center area) ===== */
.dp-reveal-result {
  font-size: 16px;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 10px;
  text-align: center;
  animation: dp-reveal-pop 0.4s ease-out;
}
@keyframes dp-reveal-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.dp-reveal-true {
  color: var(--dp-neon-cyan);
  background: rgba(0, 229, 255, 0.12);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
.dp-reveal-false {
  color: var(--dp-neon-pink);
  background: rgba(255, 45, 120, 0.12);
  text-shadow: 0 0 10px rgba(255, 45, 120, 0.4);
}

/* ===== CARDS ===== */
.dp-card {
  width: var(--dp-card-w);
  height: var(--dp-card-h);
  border-radius: var(--dp-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dp-transition);
  position: relative;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  margin: 0 -6px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  user-select: none;
  -webkit-user-select: none;
  scroll-snap-align: center;
  flex-shrink: 0;
}

.dp-card:hover {
  transform: translateY(-12px) scale(1.05);
  z-index: 10;
}

.dp-card.selected {
  transform: translateY(-20px) scale(1.08);
  z-index: 11;
  border-color: var(--dp-neon-gold);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.3),
    0 0 40px rgba(255, 215, 0, 0.1);
}

.dp-card.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.dp-card-clickable {
  cursor: pointer;
}
.dp-card-clickable:active {
  transform: translateY(-16px) scale(1.06);
}

.dp-card-front {
  /* Base for face-up cards in hand/center */
}

.dp-card-emoji {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.dp-card-name {
  font-size: 9px;
  font-weight: 800;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Card type colors: JS uses dp-card-<type> class prefix */
.dp-card-soju {
  background: linear-gradient(145deg, #5ce0ee 0%, #38b2bd 40%, #269aa5 100%);
  color: #0a2a2e;
}
.dp-card-whiskey {
  background: linear-gradient(145deg, #ffc870 0%, #e09830 40%, #c07818 100%);
  color: #2a1a05;
}
.dp-card-beer {
  background: linear-gradient(145deg, #ffe07a 0%, #e0b830 40%, #c09818 100%);
  color: #2a2205;
}
.dp-card-makgeolli {
  background: linear-gradient(145deg, #d8f0da 0%, #a8c8aa 40%, #88a88a 100%);
  color: #1a2a1a;
}

/* Peeked card overlay */
.dp-card-peeked {
  position: relative;
  border-color: var(--dp-neon-purple);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(179, 136, 255, 0.3);
}

.dp-card-peek-label {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 900;
  color: var(--dp-neon-purple);
  text-shadow: 0 0 6px rgba(179, 136, 255, 0.6);
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 0;
  border-radius: 0 0 6px 6px;
}

/* Card back (face-down in hand / center) */
.dp-card-back,
.dp-card.dp-card-back {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    linear-gradient(145deg, var(--dp-card-back-accent), var(--dp-card-back));
  border-color: rgba(179, 136, 255, 0.3);
  cursor: default;
}
.dp-card-back::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(179, 136, 255, 0.15);
  border-radius: 5px;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(179, 136, 255, 0.04) 4px,
      rgba(179, 136, 255, 0.04) 5px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 4px,
      rgba(179, 136, 255, 0.04) 4px,
      rgba(179, 136, 255, 0.04) 5px
    );
  pointer-events: none;
}
.dp-card-back .dp-card-emoji {
  font-size: 20px;
  opacity: 0.4;
}

/* ===== MY INFO BAR (face-up + hand combined) ===== */
.dp-my-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== MY FACE-UP (inside info bar) ===== */
.dp-my-faceup {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  flex: 1;
  min-height: auto;
  min-width: 0;
}

.dp-my-faceup-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim, #aaa);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.dp-my-faceup-cards {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.dp-my-faceup-cards::-webkit-scrollbar { display: none; }

/* Face-up badge sizes: my info bar (slightly larger) */
.dp-my-faceup .dp-faceup-badge {
  font-size: 12px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 12px;
}

/* Face-up badge sizes: opponent area (larger for visibility) */
.dp-opp-faceup .dp-faceup-badge {
  font-size: 14px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 10px;
}

/* ===== MY HAND (compact badge inside info bar) ===== */
.dp-my-hand {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  flex: 0 0 auto;
}

.dp-hand-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--dp-neon-cyan);
  padding: 4px 12px;
  background: rgba(0, 229, 255, 0.08);
  border-radius: 18px;
  border: 1px solid rgba(0, 229, 255, 0.15);
  white-space: nowrap;
}
.dp-hand-compact-empty {
  color: var(--text-dim, #aaa);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.dp-hand-icon-sm { font-size: 15px; }
.dp-hand-num {
  font-size: 16px;
  font-weight: 900;
}

/* Legacy: keep for backwards compat */
.dp-hand-empty {
  font-size: 12px;
  color: var(--text-dim, #aaa);
  text-align: center;
  opacity: 0.7;
}

/* ===== ACTION BAR ===== */
.dp-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px 12px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dp-action-hint {
  font-size: 13px;
  color: var(--text-dim, #aaa);
  text-align: center;
  padding: 4px 0;
}

.dp-respond-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #eee);
  text-align: center;
  margin-bottom: 2px;
}

.dp-respond-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.dp-respond-main {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.dp-btn-peek-full {
  width: 100%;
  flex: none;
  font-size: 13px;
  padding: 10px;
  opacity: 0.85;
  margin-top: 2px;
}

/* ===== BUTTONS ===== */
.dp-btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  border-radius: var(--dp-radius);
  font-size: 15px;
  font-weight: 900;
  font-family: 'Noto Sans KR', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  min-width: 0;
  touch-action: manipulation;
}
.dp-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none !important;
}
.dp-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.dp-btn-true {
  background: linear-gradient(135deg, #00c853, #00e676);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 200, 83, 0.3);
}

.dp-btn-false {
  background: linear-gradient(135deg, var(--dp-neon-pink), #e0164a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 45, 120, 0.3);
}

.dp-btn-peek {
  background: linear-gradient(135deg, var(--dp-neon-purple), #9c5fff);
  color: #fff;
  box-shadow: 0 4px 14px rgba(179, 136, 255, 0.3);
}

.dp-btn-pass {
  background: linear-gradient(135deg, #546e7a, #78909c);
  color: #fff;
  box-shadow: 0 4px 10px rgba(84, 110, 122, 0.3);
}

.dp-btn-confirm {
  background: linear-gradient(135deg, var(--dp-neon-cyan), #00b8d4);
  color: #000;
  box-shadow: 0 4px 16px rgba(0, 229, 255, 0.3);
}
.dp-btn-confirm:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.dp-btn-cancel {
  background: transparent;
  color: var(--text-dim, #aaa);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.dp-btn-cancel:active {
  background: rgba(255, 255, 255, 0.06);
}

.dp-btn-close {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 28px;
}
.dp-btn-close:active {
  background: rgba(255, 255, 255, 0.18);
}

.dp-btn-big {
  padding: 14px 12px;
  font-size: 16px;
}

/* ===== WAITING INDICATOR ===== */
.dp-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-dim, #aaa);
}
.dp-waiting::after {
  content: '';
  animation: dp-dots 1.5s steps(4, end) infinite;
}
@keyframes dp-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* ===== MODALS (shared base) ===== */
.dp-modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  animation: dp-fade-in 0.25s ease-out;
}
.dp-modal.active,
.dp-modal[style*="display: flex"],
.dp-modal[style*="display:flex"] {
  /* display managed by JS via style.display */
}

@keyframes dp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Send modal specific */
.dp-send-modal {}

/* Peek-pass modal specific */
.dp-peek-modal {}

.dp-modal-content {
  background: var(--dp-surface);
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  border: 1px solid rgba(77, 208, 225, 0.15);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(77, 208, 225, 0.06);
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dp-modal-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 20px;
  color: var(--dp-neon-cyan);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.dp-peek-modal .dp-modal-title {
  color: var(--dp-neon-purple);
  text-shadow: 0 0 10px rgba(179, 136, 255, 0.3);
}

.dp-modal-card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}
.dp-modal-card .dp-card {
  margin: 0;
  cursor: default;
}

.dp-modal-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 14px;
  position: relative;
}

/* 1단계: 대상 플레이어 섹션 */
.dp-modal-section.dp-section-target {
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.15);
}

/* 2단계: 술 종류 선택 섹션 */
.dp-modal-section.dp-section-claim {
  background: rgba(255, 183, 77, 0.05);
  border: 1px solid rgba(255, 183, 77, 0.15);
}

/* 스텝 넘버 배지 */
.dp-section-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  margin-right: 6px;
  flex-shrink: 0;
}

.dp-section-target .dp-section-step {
  background: var(--dp-neon-cyan);
  color: #000;
}

.dp-section-claim .dp-section-step {
  background: var(--dp-whiskey);
  color: #000;
}

.dp-modal-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #eee);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
}

/* --- Target buttons in modal --- */
.dp-modal-targets {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dp-target-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #eee);
  font-family: 'Noto Sans KR', sans-serif;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.dp-target-btn:hover {
  border-color: rgba(0, 229, 255, 0.3);
  background: rgba(0, 229, 255, 0.06);
}
.dp-target-btn.selected {
  border-color: var(--dp-neon-cyan);
  background: rgba(0, 229, 255, 0.15);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
  color: var(--dp-neon-cyan);
  transform: scale(1.03);
}

/* --- Claim buttons in modal --- */
.dp-modal-claims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dp-claim-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: 20px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #eee);
  font-family: 'Noto Sans KR', sans-serif;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

/* Claim button drink-type colors via data attribute or secondary class */
.dp-claim-btn[data-claim="soju"],
.dp-claim-btn.soju {
  color: var(--dp-soju);
  border-color: rgba(77, 208, 225, 0.2);
}
.dp-claim-btn[data-claim="soju"]:hover,
.dp-claim-btn.soju:hover {
  border-color: var(--dp-soju);
  background: rgba(77, 208, 225, 0.12);
}
.dp-claim-btn[data-claim="soju"].selected,
.dp-claim-btn.soju.selected {
  border-color: var(--dp-soju);
  background: rgba(77, 208, 225, 0.18);
  box-shadow: 0 0 12px rgba(77, 208, 225, 0.3);
  transform: scale(1.05);
}

.dp-claim-btn[data-claim="whiskey"],
.dp-claim-btn.whiskey {
  color: var(--dp-whiskey);
  border-color: rgba(255, 183, 77, 0.2);
}
.dp-claim-btn[data-claim="whiskey"]:hover,
.dp-claim-btn.whiskey:hover {
  border-color: var(--dp-whiskey);
  background: rgba(255, 183, 77, 0.12);
}
.dp-claim-btn[data-claim="whiskey"].selected,
.dp-claim-btn.whiskey.selected {
  border-color: var(--dp-whiskey);
  background: rgba(255, 183, 77, 0.18);
  box-shadow: 0 0 12px rgba(255, 183, 77, 0.3);
  transform: scale(1.05);
}

.dp-claim-btn[data-claim="beer"],
.dp-claim-btn.beer {
  color: var(--dp-beer);
  border-color: rgba(255, 213, 79, 0.2);
}
.dp-claim-btn[data-claim="beer"]:hover,
.dp-claim-btn.beer:hover {
  border-color: var(--dp-beer);
  background: rgba(255, 213, 79, 0.12);
}
.dp-claim-btn[data-claim="beer"].selected,
.dp-claim-btn.beer.selected {
  border-color: var(--dp-beer);
  background: rgba(255, 213, 79, 0.18);
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.3);
  transform: scale(1.05);
}

.dp-claim-btn[data-claim="makgeolli"],
.dp-claim-btn.makgeolli {
  color: var(--dp-makgeolli);
  border-color: rgba(200, 230, 201, 0.2);
}
.dp-claim-btn[data-claim="makgeolli"]:hover,
.dp-claim-btn.makgeolli:hover {
  border-color: var(--dp-makgeolli);
  background: rgba(200, 230, 201, 0.12);
}
.dp-claim-btn[data-claim="makgeolli"].selected,
.dp-claim-btn.makgeolli.selected {
  border-color: var(--dp-makgeolli);
  background: rgba(200, 230, 201, 0.18);
  box-shadow: 0 0 12px rgba(200, 230, 201, 0.3);
  transform: scale(1.05);
}

/* --- Modal actions row --- */
.dp-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.dp-modal-actions .dp-btn {
  min-width: 80px;
}

/* --- Modal card bigger --- */
.dp-modal-card-big .dp-card {
  width: 90px;
  height: 126px;
  margin: 0;
  cursor: default;
}
.dp-modal-card-big .dp-card-emoji { font-size: 40px; }
.dp-modal-card-big .dp-card-name { font-size: 12px; margin-top: 6px; }

/* --- Peek-pass modal: actual card reveal info --- */
.dp-modal-peek-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: rgba(179, 136, 255, 0.06);
  border-radius: var(--dp-radius);
  border: 1px solid rgba(179, 136, 255, 0.15);
}
.dp-modal-peek-info .dp-card {
  margin: 0;
  cursor: default;
  animation: dp-peek-reveal 0.5s ease-out;
}

@keyframes dp-peek-reveal {
  0% { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

/* ===== TRACKER OVERLAY ===== */
.dp-tracker-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 20px;
}

.dp-tracker-box {
  background: var(--dp-surface);
  border-radius: 20px;
  padding: 20px;
  max-width: 360px;
  width: 100%;
  border: 1px solid rgba(77, 208, 225, 0.15);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.dp-tracker-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 18px;
  color: var(--dp-neon-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
  text-align: center;
  margin-bottom: 14px;
}

.dp-tracker-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tracker table (generated by dpUpdateTrackerContent) */
.dp-tracker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dp-tracker-table th {
  padding: 6px 4px;
  color: var(--text-dim, #aaa);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
}
.dp-tracker-table td {
  padding: 8px 4px;
  text-align: center;
  color: var(--text, #eee);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.dp-tracker-table tr.dp-tracker-me {
  background: rgba(0, 229, 255, 0.08);
}
.dp-tracker-table tr.dp-tracker-me td:first-child {
  color: var(--dp-neon-cyan);
  font-weight: 800;
}
.dp-tracker-danger {
  color: var(--dp-neon-pink) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 6px rgba(255, 45, 120, 0.4);
}
.dp-tracker-warn {
  color: var(--dp-whiskey) !important;
  font-weight: 800 !important;
}

.dp-tracker-legend {
  font-size: 11px;
  color: var(--text-dim, #aaa);
  text-align: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Also support row-based tracker layout */
.dp-tracker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.dp-tracker-player {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
  color: var(--text, #eee);
}

.dp-tracker-counts {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dp-tracker-count {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 800;
}
.dp-tracker-count.soju { color: var(--dp-soju); }
.dp-tracker-count.whiskey { color: var(--dp-whiskey); }
.dp-tracker-count.beer { color: var(--dp-beer); }
.dp-tracker-count.makgeolli { color: var(--dp-makgeolli); }
.dp-tracker-count.danger {
  color: var(--dp-neon-pink);
  animation: dp-badge-danger-pulse 1s ease-in-out infinite;
}
.dp-tracker-count.warn {
  color: var(--dp-whiskey);
}

/* ===== GAME OVER OVERLAY ===== */
.dp-gameover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  gap: 20px;
  padding: 24px;
}
.dp-gameover[style*="display: flex"],
.dp-gameover[style*="display:flex"] {
  animation: dp-gameover-entrance 0.6s ease-out;
}

@keyframes dp-gameover-entrance {
  0% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.02); }
  100% { transform: scale(1); }
}

.dp-gameover-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 28px;
  text-align: center;
  letter-spacing: 1px;
}
.dp-gameover-title.dp-gameover-win {
  color: var(--dp-neon-gold);
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.6);
}
.dp-gameover-title.dp-gameover-lose {
  color: var(--dp-neon-pink);
  text-shadow:
    0 0 20px rgba(255, 45, 120, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.6);
}

.dp-gameover-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  margin-top: 8px;
}

/* ===== RANKINGS (game over) ===== */
.dp-rankings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

.dp-rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  transition: all 0.3s;
}
.dp-rank-winner {
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.15);
}
.dp-rank-loser {
  background: rgba(255, 45, 120, 0.1);
  border: 2px solid rgba(255, 45, 120, 0.25);
  box-shadow: 0 0 12px rgba(255, 45, 120, 0.1);
}

.dp-rank-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.dp-rank-name {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  color: var(--text, #eee);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-rank-faceup {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dp-rank-label {
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.dp-rank-loser .dp-rank-label {
  color: var(--dp-neon-pink);
}
.dp-rank-winner .dp-rank-label {
  color: var(--dp-neon-gold);
}

/* Also support generic ranking classes from the requirement list */
.dp-ranking-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.dp-ranking-pos {
  font-size: 18px;
  font-weight: 900;
  min-width: 28px;
  text-align: center;
  color: var(--dp-neon-gold);
}
.dp-ranking-name {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
  color: var(--text, #eee);
}
.dp-ranking-detail {
  font-size: 12px;
  color: var(--text-dim, #aaa);
}

/* ===== OFFLINE PRESENTATION STYLES ===== */

/* 상대에게 제시할 때 큰 뒷면 카드 */
.dp-card-present {
  position: relative;
  overflow: visible;
  animation: dp-card-present-drop 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes dp-card-present-drop {
  0% { transform: translateY(-30px) scale(0.9) rotateX(20deg); opacity: 0; }
  60% { transform: translateY(4px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* respond 페이즈: 받는 쪽에서 카드가 도착하는 느낌 */
.dp-center-card .dp-card-drawn.dp-card-present {
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(0, 229, 255, 0.15),
    0 0 40px rgba(0, 229, 255, 0.08);
  animation: dp-card-arrive 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes dp-card-arrive {
  0% { transform: scale(0.7) translateY(-20px); opacity: 0; box-shadow: none; }
  70% { transform: scale(1.06) translateY(4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
  .dp-header-title {
    font-size: 14px;
  }
  .dp-turn-indicator {
    font-size: 12px;
    padding: 4px 8px;
    min-height: 24px;
  }
}

@media (max-height: 700px) {
  .dp-center {
    padding: 8px 10px;
    gap: 6px;
  }
  .dp-center-card .dp-card-drawn {
    width: calc(var(--dp-card-w) * 1.3);
    height: calc(var(--dp-card-h) * 1.3);
  }
  .dp-center-card .dp-card-drawn .dp-card-emoji { font-size: 34px; }
  .dp-center-card .dp-card-drawn .dp-card-name { font-size: 11px; }
  .dp-deck-stack { width: 66px; height: 92px; }
  .dp-deck-card { width: 66px !important; height: 92px !important; }
  .dp-opp {
    padding: 3px 6px;
    min-width: 56px;
  }
  .dp-opp-avatar {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
  .dp-opp-name { font-size: 9px; }
  .dp-opp-hand-count { font-size: 10px; }
  .dp-my-info-bar { padding: 4px 10px; }
  .dp-actions {
    padding: 6px 12px 10px;
    gap: 5px;
  }
  .dp-btn {
    padding: 10px 6px;
    font-size: 14px;
  }
  .dp-btn-big { padding: 12px 10px; font-size: 15px; }
  .dp-claim-tag { font-size: 14px; padding: 4px 12px; }
  .dp-route { font-size: 12px; gap: 5px; }
}

@media (max-height: 600px) {
  .dp-header { padding: 4px 10px; }
  .dp-turn-indicator {
    padding: 2px 8px;
    font-size: 11px;
    min-height: 20px;
  }
  .dp-center {
    padding: 6px 8px;
    gap: 4px;
  }
  .dp-center-card .dp-card-drawn {
    width: calc(var(--dp-card-w) * 1.15);
    height: calc(var(--dp-card-h) * 1.15);
  }
  .dp-center-card .dp-card-drawn .dp-card-emoji { font-size: 28px; }
  .dp-center-card .dp-card-drawn .dp-card-name { font-size: 10px; }
  .dp-deck-stack { width: 56px; height: 78px; }
  .dp-deck-card { width: 56px !important; height: 78px !important; }
  .dp-opponents { padding: 3px 6px 2px; gap: 3px; }
  .dp-my-info-bar { padding: 3px 8px; }
  .dp-my-faceup .dp-faceup-badge { font-size: 10px; padding: 2px 5px; }
  .dp-hand-compact { font-size: 12px; padding: 3px 8px; }
  .dp-hand-num { font-size: 13px; }
  .dp-actions {
    padding: 4px 10px 8px;
    gap: 4px;
  }
  .dp-btn {
    padding: 8px 4px;
    font-size: 13px;
    border-radius: 8px;
  }
  .dp-btn-big { padding: 10px 8px; font-size: 14px; }
  .dp-claim-tag { font-size: 13px; padding: 3px 10px; }
  .dp-reveal-result { font-size: 14px; padding: 4px 10px; }
}

@media (max-height: 500px) {
  .dp-turn-indicator { display: none; }
  .dp-center {
    padding: 4px 6px;
    gap: 3px;
  }
  .dp-center-card .dp-card-drawn {
    width: calc(var(--dp-card-w) * 1);
    height: calc(var(--dp-card-h) * 1);
  }
  .dp-center-card .dp-card-drawn .dp-card-emoji { font-size: 24px; }
  .dp-center-card .dp-card-drawn .dp-card-name { font-size: 9px; }
  .dp-deck-stack { width: 48px; height: 67px; }
  .dp-deck-card { width: 48px !important; height: 67px !important; }
  .dp-opponents { padding: 2px 4px 0; gap: 2px; }
  .dp-opp { padding: 2px 4px; min-width: 48px; }
  .dp-opp-avatar { width: 22px; height: 22px; font-size: 12px; }
  .dp-opp-faceup { display: none; }
  .dp-claim-tag { font-size: 12px; padding: 2px 8px; }
  .dp-claim-emoji { font-size: 16px; }
}