/* ══ 승부예측 (공개 화면) ═══════════════════════════════════
   엔치원2 세계관 그대로입니다. 색·둥근모서리·그림자는 전부
   shared/theme.css 와 game-ui.css 의 값을 씁니다.
   ⚠️ 여기에 새 팔레트를 만들지 마세요 — 다른 엔치원2 화면과 어긋납니다.
        테란 파랑 #2f6ed6 · 프로토스 노랑 #d79a0d · 저그 보라 #8b45c9
   ══════════════════════════════════════════════════════════ */
.pd-app{ margin-top:6px; }

.pd-load{ padding:52px 16px; text-align:center; font-size:14px; color:var(--ink-3); }

/* 통째로 못 불러왔을 때 — '경기 없음' 과 확실히 다르게 보여야 합니다 */
.pd-fail{
  margin-top:20px; padding:34px 22px; text-align:center; border-radius:var(--r-lg);
  background:var(--surface); border:1.5px dashed var(--line-2);
}
.pd-fail b{ display:block; font-family:'Jua',sans-serif; font-weight:400; font-size:20px;
  color:var(--ink); }
.pd-fail p{ margin:8px 0 16px; font-size:13.5px; color:var(--ink-2); }

/* 저장 결과 알림 */
.pd-msg{
  margin:0 0 14px; padding:11px 15px; border-radius:12px;
  font-size:13.5px; font-weight:700;
}
.pd-msg.ok{ background:#eef7f1; border:1.5px solid #bfe0cb; color:#1f7a55; }
.pd-msg.no{ background:#fdf1f3; border:1.5px solid #f0c4cf; color:#b3313f; }

/* ── 묶음 ── */
.pd-sec{ margin-top:26px; }
.pd-h{
  display:flex; align-items:baseline; gap:9px; margin:0 0 12px;
  font-family:'Jua',sans-serif; font-weight:400; font-size:20px; color:var(--ink);
}
.pd-h em{ font-style:normal; font-family:inherit; font-size:12.5px; font-weight:800;
  color:var(--ink-3); }

.pd-none{
  padding:26px 18px; text-align:center; border-radius:var(--r-lg);
  font-size:13.5px; line-height:1.8; color:var(--ink-2);
  background:var(--surface-2); border:1.5px dashed var(--line);
}
.pd-none span{ font-size:12.5px; color:var(--ink-3); }

.pd-list{ display:grid; gap:12px; }

/* ══ 경기 카드 ═════════════════════════════════════════════ */
.pd-m{
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1.5px solid var(--line);
  box-shadow:var(--shadow);
}
/* 지금 예측할 수 있는 경기만 눈에 띄게 — 나머지는 조용히 */
.pd-m.live{ border-color:var(--pink); box-shadow:0 6px 20px rgba(255,111,168,.16); }
.pd-m.void{ opacity:.62; }

.pd-m-h{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:11px 15px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.pd-m-h .sp{ flex:1; }
.pd-at{ font-size:12px; color:var(--ink-3); }
.pd-title{ font-size:13px; font-weight:800; color:var(--ink-2); }

/* 상태 뱃지 — 다섯 가지가 한눈에 구분돼야 합니다 */
.pd-st{
  font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px;
  background:#eceff3; color:#6b7280; white-space:nowrap;
}
.pd-st.live{ background:#ffeef4; color:#c0426b; }
.pd-st.soon{ background:#eef4fd; color:#2f6ed6; }
.pd-st.closed{ background:#f2f0f6; color:#6b5aa8; }
.pd-st.done{ background:#e8f6ec; color:#237a45; }
.pd-st.void{ background:#f4f4f5; color:#9096a1; text-decoration:line-through; }

/* ── 양쪽 선수 ── */
.pd-vs{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:10px;
  padding:16px 15px;
}
.pd-x{
  align-self:center; font-family:'Jua',sans-serif; font-size:15px; color:var(--ink-3);
  letter-spacing:.04em;
}

.pd-side{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:5px; padding:15px 12px 13px; border-radius:14px; text-align:center;
  font-family:inherit; width:100%;
  background:var(--surface-2); border:2px solid var(--line);
  transition:border-color .15s, background .15s, transform .12s;
}
.pd-side.can{ cursor:pointer; }
.pd-side.can:hover{ border-color:var(--pink); transform:translateY(-1px); }
.pd-side.on{ border-color:#2f6ed6; background:#f2f7ff; }
.pd-side.win{ border-color:#2f9e63; background:#f1faf4; }
.pd-side.lost{ opacity:.6; }

/* 종족 색 — 엔치원2 공통값 */
.pd-side.t{ --rc:#2f6ed6; }
.pd-side.p{ --rc:#d79a0d; }
.pd-side.z{ --rc:#8b45c9; }
.pd-side.t .pd-rc{ color:#2f6ed6; background:rgba(47,110,214,.12); }
.pd-side.p .pd-rc{ color:#b07c05; background:rgba(215,154,13,.16); }
.pd-side.z .pd-rc{ color:#8b45c9; background:rgba(139,69,201,.12); }

.pd-nm{ font-family:'Jua',sans-serif; font-weight:400; font-size:17px; color:var(--ink);
  line-height:1.25; word-break:keep-all; }
.pd-rc{ font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px;
  background:#eceff3; color:#6b7280; }
.pd-won{ font-size:11.5px; font-weight:800; color:#1f7a55; }
.pd-mine{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:999px;
  background:#2f6ed6; color:#fff; white-space:nowrap;
}

/* 참여 분포 — 마감 뒤에만 나옵니다 */
.pd-bar{ display:block; width:100%; height:6px; border-radius:999px;
  background:var(--line); overflow:hidden; margin-top:4px; }
.pd-bar i{ display:block; height:100%; background:var(--rc, #9aa2b1); }
.pd-pct{ font-size:11px; color:var(--ink-3); }

/* ── 카드 아래줄 ── */
.pd-m-f{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 15px; border-top:1px solid var(--line); font-size:12.5px;
}
.pd-left{ font-weight:800; color:var(--pink-ink); }
.pd-close{ color:var(--ink-3); }
.pd-ask{ margin-left:auto; font-weight:800; color:var(--ink-2); }
.pd-ok{ margin-left:auto; font-weight:800; color:#1f7a55; }
.pd-hit{ margin-left:auto; font-weight:800; color:#1f7a55; }
.pd-miss{ margin-left:auto; font-weight:700; color:var(--ink-3); }
.pd-need{ margin-left:auto; font-weight:800; color:var(--pink-ink); text-decoration:none; }
a.pd-need:hover{ text-decoration:underline; }

/* ══ 내 기록 ═══════════════════════════════════════════════ */
.pd-me-guest{
  padding:26px 18px; text-align:center; border-radius:var(--r-lg);
  background:var(--surface-2); border:1.5px dashed var(--line);
}
.pd-me-guest p{ margin:0 0 14px; font-size:13.5px; color:var(--ink-2); }

.pd-nums{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  border-radius:var(--r-lg); overflow:hidden; background:var(--line);
  border:1.5px solid var(--line); }
.pd-n{ background:var(--surface); padding:14px 6px; text-align:center; }
.pd-n b{ display:block; font-family:'Jua',sans-serif; font-weight:400; font-size:19px;
  color:var(--ink); }
.pd-n span{ display:block; font-size:11px; font-weight:800; color:var(--ink-3); margin-top:3px; }

.pd-hint{ margin:10px 2px 0; font-size:12.5px; color:var(--ink-3); }
.pd-hint.ok{ color:#1f7a55; font-weight:700; }

/* ══ 랭킹 ══════════════════════════════════════════════════ */
.pd-rank{ border-radius:var(--r-lg); overflow:hidden;
  border:1.5px solid var(--line); background:var(--surface); }
.pd-r{
  display:grid; grid-template-columns:52px 1fr 92px 66px 74px;
  align-items:center; gap:6px; padding:11px 14px;
  border-top:1px solid var(--line); font-size:13.5px;
}
.pd-r:first-child{ border-top:0; }
.pd-r-h{ background:var(--surface-2); font-size:11.5px; font-weight:800;
  color:var(--ink-3); }
.pd-r .rk{ font-weight:800; color:var(--ink-2); font-size:15px; }
.pd-r .nk{ font-weight:800; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-r .wl{ color:var(--ink-2); }
.pd-r .wl b{ color:#1f7a55; }
.pd-r .rt{ color:var(--ink-2); }
.pd-r .pt{ font-weight:800; color:var(--pink-ink); text-align:right; }
.pd-r.top{ background:linear-gradient(90deg, rgba(255,111,168,.07), transparent 60%); }
.pd-r.t1{ background:linear-gradient(90deg, rgba(255,193,71,.16), transparent 62%); }

/* ══ 상품 ══════════════════════════════════════════════════ */
.pd-prz{ display:grid; gap:9px; }
.pd-pz{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:13px 15px; border-radius:14px;
  background:var(--surface); border:1.5px solid var(--line);
}
.pz-r{ flex:0 0 auto; font-family:'Jua',sans-serif; font-size:14px; color:#fff;
  padding:4px 13px; border-radius:999px; background:var(--pink); }
.pz-p{ font-size:14.5px; font-weight:800; color:var(--ink); }
.pz-n{ font-size:12px; color:var(--ink-3); }

/* ══ 안내 ══════════════════════════════════════════════════ */
.pd-guide{
  margin-top:26px; padding:18px 20px 16px; border-radius:var(--r-lg);
  background:var(--surface-2); border:1.5px solid var(--line);
}
.pd-g-h{ font-family:'Jua',sans-serif; font-size:16px; color:var(--ink); margin-bottom:9px; }
.pd-g-l{ margin:0; padding-left:20px; }
.pd-g-l li{ font-size:13.5px; line-height:1.9; color:var(--ink-2); }
.pd-g-l b{ color:var(--pink-ink); }

/* ══ 버튼 ══════════════════════════════════════════════════ */
.pd-btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  font-family:inherit; font-size:13.5px; font-weight:800;
  padding:10px 20px; border-radius:999px;
  background:var(--surface); border:1.5px solid var(--line-2); color:var(--ink-2);
}
.pd-btn:hover{ border-color:var(--pink); color:var(--pink-ink); }
.pd-btn.go{ background:var(--pink); border-color:var(--pink); color:#fff; }
.pd-btn.go:hover{ filter:brightness(1.05); color:#fff; }
.pd-btn.sm{ font-size:12px; padding:6px 13px; }

/* ══ 모바일 ════════════════════════════════════════════════
   좁은 화면에서는 VS 를 가운데 줄로 내려서 두 선수를 위아래로 놓습니다.
   가로로 밀어야 보이는 화면을 만들지 않습니다. */
@media (max-width:700px){
  .pd-h{ font-size:18px; }

  .pd-vs{ grid-template-columns:1fr; gap:8px; padding:13px 12px; }
  .pd-x{ justify-self:center; font-size:13px; }
  .pd-side{ padding:13px 11px 11px; }
  .pd-nm{ font-size:16px; }
  .pd-mine{ top:-8px; }

  .pd-m-h{ padding:10px 12px; }
  .pd-m-f{ padding:10px 12px; font-size:12px; }
  .pd-ask, .pd-ok, .pd-hit, .pd-miss, .pd-need{ margin-left:0; width:100%; }

  /* 5칸을 한 줄에 넣으면 글자가 뭉개집니다 — 3+2 로 접습니다 */
  .pd-nums{ grid-template-columns:repeat(3,1fr); }
  .pd-n b{ font-size:17px; }

  /* ── 랭킹 — 좁은 화면에서는 두 줄로 접습니다 ──────────────
     ⚠️ 열을 숨기지 않습니다. 적중·적중률·포인트는 주인님이 요청하신
        필수 정보라, 가로로 우겨넣는 대신 아랫줄로 내립니다.
     ⚠️ 가로 스크롤도 만들지 않습니다. */
  /* ⚠️ grid-area 를 셋이 나눠 쓰면 같은 칸에 겹쳐 찍힙니다 (실측).
     그래서 좁은 화면에서는 grid 를 접고 flex 줄바꿈으로 흘립니다. */
  .pd-r{
    display:flex; flex-wrap:wrap; align-items:center;
    row-gap:3px; column-gap:0; padding:10px 12px; font-size:13px;
  }
  .pd-r .rk{ flex:0 0 32px; }
  .pd-r .nk{ flex:1 1 auto; width:calc(100% - 32px); }
  /* 아랫줄 — 닉네임 아래로 들여씁니다 */
  .pd-r .wl{ flex:0 0 auto; margin-left:32px; font-size:12px; }
  .pd-r .rt, .pd-r .pt{ flex:0 0 auto; font-size:12px; text-align:left; }
  .pd-r .rt::before, .pd-r .pt::before{
    content:"·"; margin:0 6px; color:var(--line-2); font-weight:400;
  }
  /* 머리줄은 접을 게 없으니 순위·닉네임만 */
  .pd-r-h .wl, .pd-r-h .rt, .pd-r-h .pt{ display:none; }

  .pd-pz{ padding:11px 13px; gap:9px; }
  .pd-guide{ padding:15px 16px 13px; }
  .pd-g-l li{ font-size:13px; line-height:1.85; }
}

/* 아주 좁은 화면 — 내 기록 5칸을 2줄로 (3칸이면 글자가 뭉개집니다).
   ⚠️ 랭킹은 위에서 이미 두 줄로 접혀 있어 여기서 더 손대지 않습니다.
      (열을 숨기면 요청하신 정보가 사라집니다) */
@media (max-width:380px){
  .pd-nums{ grid-template-columns:repeat(2,1fr); }
  /* 5칸 중 마지막 한 칸이 홀로 남으므로 가로로 채웁니다 */
  .pd-n:last-child{ grid-column:1 / -1; }
}