/* 패독 대전 화면 */

.pd-top{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.pd-title{ font-size:1.3rem; letter-spacing:-.02em; margin:0; }
.chip-badge{
  font-size:.82rem; padding:4px 11px; border-radius:999px;
  border:1px solid var(--rule); color:var(--ink-soft);
}
.chip-badge b{ font-family:'Azeret Mono',monospace; color:var(--ink); }
.pd-top .conn{ margin-left:auto; }

/* ---- 테이블 ---- */

.pd-table{ margin-bottom:16px; }

.pd-seats{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:8px; margin-bottom:14px;
}
.pd-seat{
  background:var(--paper); border:1px solid var(--rule);
  border-radius:10px; padding:9px 8px; text-align:center;
  font-size:.82rem; position:relative;
}
.pd-seat[data-me="1"]{ border-color:var(--ink); }
.pd-seat[data-turn="1"]{
  border-color:var(--accent); box-shadow:0 0 0 2px rgba(74,222,128,.2);
}
.pd-seat[data-passed="1"]{ opacity:.5; }
.pd-seat[data-out="1"]{ background:var(--surface); }
.pd-seat-name{
  font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pd-seat-tag{ font-size:.7rem; color:var(--ink-soft); margin-top:1px; }
.pd-seat-count{
  font-family:'Azeret Mono',monospace; font-weight:900;
  font-size:1.15rem; margin-top:4px;
}
.pd-seat-place{
  position:absolute; top:-6px; right:-6px;
  background:var(--accent); color:var(--ink);
  font-size:.66rem; font-weight:700;
  width:20px; height:20px; line-height:20px; border-radius:50%;
}

.pd-center{
  background:var(--paper); border:1px solid var(--rule);
  border-radius:12px; padding:18px 12px; text-align:center;
  min-height:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.pd-played{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.pd-empty{ color:var(--ink-soft); font-size:.86rem; }
.pd-label{ font-size:.78rem; color:var(--ink-soft); margin-top:8px; }

.pd-turn{
  text-align:center; margin-top:10px; font-size:.9rem;
}
.pd-turn b{ font-family:'Azeret Mono',monospace; }
.pd-turn[data-mine="1"]{ color:var(--accent); font-weight:600; }

/* ---- 타일 ---- */

.tile{
  width:42px; height:56px; border-radius:7px;
  border:1px solid var(--rule); background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Azeret Mono',monospace; font-weight:900;
  cursor:default; user-select:none; flex-shrink:0;
  transition:transform .08s, border-color .08s;
}
.tile-n{ font-size:1.05rem; line-height:1; }
.tile-s{ font-size:.82rem; line-height:1.2; margin-top:2px; }

.tile[data-suit="구름"]{ color:#6B7A8F; }
.tile[data-suit="별"]  { color:#C08A3E; }
.tile[data-suit="달"]  { color:#4A7C59; }
.tile[data-suit="해"]  { color:#B84A3E; }

.pd-played .tile{ width:38px; height:50px; }

/* ---- 손패 ---- */

.pd-hand{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  padding:12px 4px; margin-bottom:12px;
  min-height:68px;
}
.pd-hand .tile{ cursor:pointer; }
.pd-hand .tile:hover{ border-color:var(--ink); }
.pd-hand .tile[data-sel="1"]{
  transform:translateY(-10px);
  border-color:var(--accent); box-shadow:0 0 0 2px rgba(74,222,128,.25);
}

.pd-actions{ display:flex; gap:8px; margin-bottom:12px; }
.btn--grow{ flex:1; }

@media (max-width:520px){
  .tile{ width:36px; height:48px; }
  .tile-n{ font-size:.92rem; }
  .pd-played .tile{ width:32px; height:42px; }
  .pd-seats{ gap:5px; }
  .pd-seat{ padding:7px 4px; font-size:.76rem; }
}