/* 퍼즐 History(지난 게임) 팝업 — 내 기록 카드의 History 버튼에서 오픈.
   퍼즐 기록은 보드 썸네일, 온라인 최근 게임은 로비의 컴팩트 유저 행을 쓴다. */
.pzh-popup {
  --pzh-viewport-top: 0px;
  --pzh-viewport-left: 0px;
  --pzh-viewport-width: 100%;
  --pzh-viewport-height: 100vh;
  position:absolute;
  top:var(--pzh-viewport-top);
  left:var(--pzh-viewport-left);
  width:var(--pzh-viewport-width);
  height:var(--pzh-viewport-height);
  z-index:12040; display:none;
  box-sizing:border-box;
  padding:calc(12px * var(--ls, 1));
  padding-top:calc(calc(12px * var(--ls, 1)) + env(safe-area-inset-top));
  padding-bottom:calc(calc(12px * var(--ls, 1)) + env(safe-area-inset-bottom));
  overflow:hidden;
}
.pzh-popup.open {
  display:flex;
  align-items:center;
  justify-content:center;
  align-items:safe center;
  justify-content:safe center;
}
.pzh-popup__backdrop { position:absolute; inset:0; background:rgba(17,24,39,0.55); }
.pzh-popup__dialog {
  position:relative; z-index:1;
  width:min(calc(560px * var(--ls, 1)), 100%);
  max-width:100%;
  max-height:calc(var(--pzh-viewport-height, 100vh) - calc(24px * var(--ls, 1)) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  background:#fff; border-radius:calc(14px * var(--ls, 1)); box-shadow:0 calc(18px * var(--ls, 1)) calc(50px * var(--ls, 1)) rgba(0,0,0,0.3); overflow:hidden;
}
.pzh-popup__header { display:flex; align-items:center; flex-wrap:wrap; gap:calc(10px * var(--ls, 1)); padding:calc(14px * var(--ls, 1)) calc(16px * var(--ls, 1)) calc(10px * var(--ls, 1)); border-bottom:1px solid #eef0f4; }
.pzh-popup__title { margin:0; font-size:1.1rem; font-weight:700; color:#111; flex:0 0 auto; }
.pzh-popup__modes { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:calc(6px * var(--ls, 1)); margin-left:auto; min-width:0; }
.pzh-recent-bot-filter { display:none; align-items:center; gap:calc(4px * var(--ls, 1)); color:#64748b; font-size:calc(12px * var(--ls, 1)); font-weight:500; white-space:nowrap; cursor:pointer; }
.pzh-popup--global-recent .pzh-recent-bot-filter { display:inline-flex; }
.pzh-recent-bot-filter input { width:calc(14px * var(--ls, 1)); height:calc(14px * var(--ls, 1)); margin:0; accent-color:#254EAD; cursor:pointer; }
.pzh-mode-tab {
  appearance:none; border:1px solid #d7dce6; background:#fff; color:#374151;
  font-size:calc(13px * var(--ls, 1)); font-weight:600; padding:calc(5px * var(--ls, 1)) calc(12px * var(--ls, 1)); border-radius:calc(999px * var(--ls, 1)); cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.pzh-mode-tab:hover { border-color:#254EAD; color:#254EAD; }
.pzh-mode-tab.active { background:#254EAD; border-color:#254EAD; color:#fff; }
.pzh-popup--single-mode .pzh-mode-tab:not(.active) { display:none; }
.pzh-popup__close {
  appearance:none; border:none; background:transparent; font-size:calc(24px * var(--ls, 1)); line-height:1;
  color:#9ca3af; cursor:pointer; padding:0 calc(4px * var(--ls, 1)); flex:0 0 auto;
}
.pzh-popup__close:hover { color:#374151; }
.pzh-popup__body { flex:1 1 auto; min-height:0; padding:calc(8px * var(--ls, 1)) calc(14px * var(--ls, 1)) calc(14px * var(--ls, 1)); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pzh-empty, .pzh-loading, .pzh-error { text-align:center; color:#9ca3af; font-size:calc(14px * var(--ls, 1)); padding:calc(28px * var(--ls, 1)) 0; }
.pzh-error { color:#b91c1c; }

.pzh-list { display:flex; flex-direction:column; gap:calc(8px * var(--ls, 1)); }
.pzh-item {
  display:flex; gap:calc(12px * var(--ls, 1)); align-items:center; padding:calc(8px * var(--ls, 1)); border:1px solid #eef0f4;
  border-radius:calc(10px * var(--ls, 1)); cursor:pointer; background:#fff; transition:border-color .12s ease, box-shadow .12s ease;
}
.pzh-item:hover { border-color:#254EAD; box-shadow:0 2px calc(10px * var(--ls, 1)) rgba(37,78,173,0.12); }
.pzh-item__board { flex:0 0 auto; width:calc(84px * var(--ls, 1)); height:calc(84px * var(--ls, 1)); border-radius:calc(6px * var(--ls, 1)); overflow:hidden; }
.pzh-board { display:block; width:100%; height:100%; }
.pzh-item__info { flex:1 1 auto; min-width:0; font-size:calc(13px * var(--ls, 1)); color:#374151; line-height:1.55; }
.pzh-item__meta { color:#374151; }
.pzh-item__meta b { color:#111; }
.pzh-item__result { margin-top:calc(3px * var(--ls, 1)); display:flex; align-items:center; flex-wrap:wrap; gap:calc(8px * var(--ls, 1)); }
.pzh-verdict { font-weight:800; font-size:calc(13px * var(--ls, 1)); padding:1px calc(8px * var(--ls, 1)); border-radius:calc(999px * var(--ls, 1)); }
.pzh-verdict.correct { background:#dcfce7; color:#166534; }
.pzh-verdict.near    { background:#fef9c3; color:#854d0e; }
.pzh-verdict.wrong   { background:#fee2e2; color:#991b1b; }
.pzh-verdict.void    { background:#e5e7eb; color:#475569; }   /* 무효(기술중단): 중립 회색 */
.pzh-delta-pos { color:#15803d; font-weight:500; }
.pzh-delta-neg { color:#b91c1c; font-weight:500; }
.pzh-delta-none { color:#64748b; font-weight:500; }           /* 무효: 레이팅 변동 없음 */
.pzh-ldiscs { color:#6b7280; }
.pzh-popup .pz-rt-red{ color:#e53935; font-weight:450; }
.pzh-popup .pz-rt-orange{ color:#fb8c00; font-weight:450; }
.pzh-popup .pz-rt-purple{ color:#8e24aa; font-weight:450; }
.pzh-popup .pz-rt-blue{ color:#1e88e5; font-weight:450; }
.pzh-popup .pz-rt-green{ color:#43a047; font-weight:450; }
.pzh-popup .pz-rating-unofficial{ color:#999; font-weight:450; }
.pzh-item__date { margin-top:2px; font-size:calc(12px * var(--ls, 1)); color:#9ca3af; }
.pzh-online-meta { display:flex; align-items:center; flex-wrap:wrap; gap:calc(6px * var(--ls, 1)); }
.pzh-online-stone { flex:0 0 auto; width:calc(14px * var(--ls, 1)); height:calc(14px * var(--ls, 1)); border-radius:50%; border:1px solid #cbd5e1; box-sizing:border-box; }
.pzh-online-stone.b { background:#111827; border-color:#111827; }
.pzh-online-stone.w { background:#fff; border-color:#111827; }
.pzh-online-rating { font-weight:700; }
.pzh-online-rating-change { display:inline-flex; align-items:center; gap:calc(3px * var(--ls, 1)); font-weight:400; }
.pzh-online-rating-change .pzh-online-rating { font-size:calc(1em + 2px); font-weight:450; line-height:inherit; }
/* 변동폭은 최근·온라인·퍼즐 History 공통으로 레이팅보다 약간만 강조한 500. */
.pzh-online-rating-change .pzh-delta-pos,
.pzh-online-rating-change .pzh-delta-neg,
.pzh-online-rating-change .pzh-delta-none { font-size:calc(1em + 2px); font-weight:500; line-height:inherit; }
.pzh-online-badges { display:inline-flex; align-items:center; flex-wrap:wrap; gap:calc(4px * var(--ls, 1)); }
.pzh-online-badge { display:inline-flex; align-items:center; min-height:calc(18px * var(--ls, 1)); padding:1px calc(6px * var(--ls, 1)); border-radius:calc(6px * var(--ls, 1)); font-size:calc(10px * var(--ls, 1)); font-weight:700; line-height:1.2; }
/* ── 게임 행 배지 색(라이트) ─────────────────────────────────────────────────────
   History·최근 게임 팝업(.pzh-online-badge-*), 로비 최근 대국·게임방(.ob-badge-*),
   내 게임(.mg-*-badge)이 함께 쓰는 **유일한** 선언이다(2026-09-19 통일).
   예전에는 같은 의미의 배지 색이 이 파일·online.php 인라인·mygames.php 인라인에 흩어져 있어
   아레나는 색이, 연습은 회색 톤이, 타입은 다크 색이 화면마다 달랐다.
   세 화면 모두 이 파일을 불러온다(내 게임은 이 규칙 때문에 링크를 추가했다).
   기본 클래스(.pzh-online-badge·.ob-badge·.mg-practice-badge)가 같은 특정도로 배경을 깔므로
   두 클래스를 붙여 특정도를 올린다 — 파일 로드 순서와 무관하게 이긴다.
   다크는 app-theme.css 의 같은 이름 블록 한 곳에서만 정한다. */
/* 아레나 */
.pzh-online-badge.pzh-online-badge-arena,
.ob-badge.ob-badge-arena,
.mg-practice-badge.mg-arena-badge { background:#fff7ed; color:#c2410c; box-shadow:inset 0 0 0 1px #fed7aa; }
/* 빠른 매칭 */
.pzh-online-badge.pzh-online-badge-auto,
.ob-badge.ob-badge-auto { background:#ecfeff; color:#0e7490; box-shadow:inset 0 0 0 1px #a5f3fc; }
/* 대국 신청으로 만든 방(2026-10-10): 다른 배지(주황·청록·보라·남색·회색·호박, 방 안 준비 초록)와 겹치지 않는 로즈 */
.pzh-online-badge.pzh-online-badge-challenge,
.ob-badge.ob-badge-challenge,
.mg-practice-badge.mg-challenge-badge { background:#fdf2f8; color:#be185d; box-shadow:inset 0 0 0 1px #fbcfe8; }
/* 훈련: 연습(중립 회색)과 구분되는 보라 */
.pzh-online-badge.pzh-online-badge-training,
.ob-badge.ob-badge-training,
.mg-practice-badge.mg-training-badge { background:#ede9fe; color:#5b21b6; }
/* 대국 종류(XOT 1분 등)·봇 표시 */
.pzh-online-badge.pzh-online-badge-type,
.pzh-online-badge.pzh-online-badge-bot,
.ob-badge.ob-badge-type { background:#eef2ff; color:#3730a3; }
/* 연습·종료 같은 중립 회색 */
.pzh-online-badge.pzh-online-badge-practice,
.ob-badge.ob-badge-finished,
.mg-practice-badge { background:#e5e7eb; color:#374151; }
/* ── 여기까지 공용 배지 색 ─────────────────────────────────────────────────── */
.pzh-online-badge-ban { background:#b91c1c; color:#fff; }
.pzh-online-date { display:flex; align-items:center; flex-wrap:wrap; gap:calc(6px * var(--ls, 1)); }
.pzh-online-practice { color:#6b7280; font-weight:700; }
.pzh-recent-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,max-content); gap:calc(10px * var(--ls, 1)); align-items:center; padding:calc(6px * var(--ls, 1)) calc(10px * var(--ls, 1)); }
.pzh-popup--global-recent .pzh-list { gap:calc(7px * var(--ls, 1)); }
.pzh-recent-players { display:grid; gap:calc(4px * var(--ls, 1)); min-width:0; font-weight:700; }
.pzh-recent-player-row { display:flex; align-items:center; min-width:0; width:100%; }
.pzh-recent-player-row .pz-photo { width:calc(16px * var(--ls, 1)); height:calc(16px * var(--ls, 1)); border-radius:50%; object-fit:cover; margin:0 calc(5px * var(--ls, 1)) 0 0; background:#eee; flex:0 0 auto; }
.pzh-recent-player-row .pz-photo[src*="/flipsight/image/bot/26.svg"] { background:#64748b; }
.pzh-recent-player-row .ob-player-photo-trigger { display:inline-flex; align-items:center; flex:0 0 auto; margin:0 calc(5px * var(--ls, 1)) 0 0; line-height:1; cursor:pointer; }
.pzh-recent-player-row .ob-player-photo-trigger .pz-photo { margin:0; }
.pzh-recent-player-row .pz-nick-tip { min-width:0; overflow:hidden; }
.pzh-recent-player-row .pz-id-text { display:flex; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; font-weight:400; }
.pzh-recent-player-row .oc-flag { width:calc(20px * var(--ls, 1)); height:calc(15px * var(--ls, 1)); object-fit:cover; border-radius:2px; margin-right:calc(4px * var(--ls, 1)); border:1px solid rgba(0,0,0,.15); box-sizing:border-box; flex:0 0 auto; }
.pzh-recent-player-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:calc(14px * var(--ls, 1)); font-weight:400; line-height:1.2; color:#254ead; cursor:pointer; }
.pzh-recent-player-name:hover, .pzh-recent-player-name:focus-visible { color:#0d6efd; }
html.fs-app-theme-dark .pzh-recent-item .pzh-recent-player-name { color:#93c5fd !important; }
html.fs-app-theme-dark .pzh-recent-item .pzh-recent-player-name:hover,
html.fs-app-theme-dark .pzh-recent-item .pzh-recent-player-name:focus-visible { color:#bfdbfe !important; }
.pzh-recent-player-row .ocpv-verified-badge { display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; margin-left:calc(4px * var(--ls, 1)); border-radius:50%; background:#18a058; color:#fff; font-size:var(--oc-badge-size,.9em); font-weight:800; line-height:1; vertical-align:middle; flex:0 0 auto; }
.pzh-recent-player-row .ocpv-verified-badge > span { font-size:.66em; line-height:1; }
.pzh-recent-player-row .pzh-recent-rating-change { margin-left:calc(4px * var(--ls, 1)); font-size:calc(14px * var(--ls, 1)); font-weight:400; }
.pzh-recent-player-row .pzh-recent-rating-change .pzh-online-rating { font-size:calc(14px * var(--ls, 1)); font-weight:450; line-height:1.2; }
.pzh-recent-side { display:grid; grid-template-columns:minmax(0,auto) minmax(calc(54px * var(--ls, 1)),max-content); min-width:0; max-width:100%; align-items:center; justify-content:end; gap:0; white-space:nowrap; color:#64748b; font-size:calc(13px * var(--ls, 1)); }
.pzh-recent-meta-info { display:grid; min-width:0; justify-items:end; gap:calc(4px * var(--ls, 1)); }
.pzh-recent-meta-top { display:flex; align-items:center; justify-content:flex-end; gap:calc(4px * var(--ls, 1)); }
.pzh-recent-meta-top .pzh-online-badge { box-sizing:border-box; height:calc(14px * var(--ls, 1)); min-height:calc(14px * var(--ls, 1)); }
.pzh-recent-date { margin:0; color:#7a879c; font-size:calc(10px * var(--ls, 1)); font-weight:500; line-height:1.2; }
.pzh-recent-outcomes { display:grid; grid-template-rows:repeat(2,minmax(1.2em,auto)); align-items:center; justify-items:end; gap:calc(3px * var(--ls, 1)); width:max-content; min-width:calc(54px * var(--ls, 1)); max-width:100%; font-weight:800; }
.pzh-recent-win-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 calc(14px * var(--ls, 1)); width:calc(14px * var(--ls, 1)); height:calc(14px * var(--ls, 1)); font-size:calc(12px * var(--ls, 1)); line-height:1; }
.pzh-recent-outcome { display:inline-flex; min-width:0; max-width:100%; align-items:center; justify-content:flex-end; gap:calc(4px * var(--ls, 1)); min-height:1.2em; padding-left:calc(4px * var(--ls, 1)); white-space:normal; }
/* 결과 숫자 알약. 색은 뷰어 통계(.ocv-statistics-result)와 같은 승/무/패 3색. 미확정은 중립. */
.pzh-recent-disc { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:auto; min-width:calc(32px * var(--ls, 1)); max-width:100%; padding:2px calc(5px * var(--ls, 1)); border-radius:calc(4px * var(--ls, 1)); background:#f1f5f9; color:#475569; font-size:calc(12px * var(--ls, 1)); font-weight:800; line-height:1.1; text-align:center; white-space:normal; overflow-wrap:anywhere; }
.pzh-recent-outcome.is-win .pzh-recent-disc { background:#dcfce7; color:#166534; }
.pzh-recent-outcome.is-draw .pzh-recent-disc { background:#fef9c3; color:#854d0e; }
.pzh-recent-outcome.is-loss .pzh-recent-disc { background:#fee2e2; color:#991b1b; }
.pzh-recent-rating-change { display:inline-flex; align-items:baseline; gap:calc(3px * var(--ls, 1)); flex:0 0 auto; white-space:nowrap; }
.pzh-recent-rating-change .pzh-delta-pos,
.pzh-recent-rating-change .pzh-delta-neg,
.pzh-recent-rating-change .pzh-delta-none { font-size:calc(12px * var(--ls, 1)); line-height:1; }
/* .pzh-online-badge-bot 색은 위 공용 배지 블록에서 정한다 */
.pzh-view-all { display:flex; justify-content:flex-end; margin:0 0 calc(8px * var(--ls, 1)); font-size:calc(13px * var(--ls, 1)); font-weight:700; }
.pzh-view-all a { color:#2563eb; text-decoration:none; }
.pzh-view-all a:hover, .pzh-view-all a:focus { text-decoration:underline; }

.pzh-more {
  display:block; width:100%; margin-top:calc(12px * var(--ls, 1)); padding:calc(9px * var(--ls, 1)); border:1px solid #d7dce6;
  background:#f8fafc; color:#254EAD; font-size:calc(13px * var(--ls, 1)); font-weight:600; border-radius:calc(8px * var(--ls, 1)); cursor:pointer;
}
.pzh-more:hover { background:#eef2fb; }
.pzh-more[disabled] { opacity:.6; cursor:default; }
body.pzh-popup-open { overflow:hidden; }

@supports (height: 100dvh) {
  .pzh-popup { --pzh-viewport-height: 100dvh; }
}

@media (max-width:480px) {
  .pzh-popup__title { flex:1 1 auto; }
  .pzh-popup__modes { flex:1 1 100%; order:3; margin-left:0; justify-content:flex-start; }
  .pzh-popup--single-mode .pzh-popup__title { flex:0 0 auto; }
  .pzh-popup--single-mode .pzh-popup__modes { flex:0 0 auto; order:0; margin-left:auto; justify-content:flex-end; }
}

@media (max-width:575.98px) {
  .pzh-recent-item { grid-template-columns:minmax(0,1fr) minmax(calc(40px * var(--ls, 1)),max-content); grid-template-areas:"meta meta" "players outcomes"; column-gap:calc(6px * var(--ls, 1)); row-gap:2px; padding:calc(4px * var(--ls, 1)) calc(8px * var(--ls, 1)); }
  .pzh-recent-players { grid-area:players; gap:calc(4px * var(--ls, 1)); }
  .pzh-recent-player-name { font-size:calc(15px * var(--ls, 1)); line-height:1.15; }
  .pzh-recent-player-row .pzh-recent-rating-change { font-size:calc(15px * var(--ls, 1)); }
  .pzh-recent-player-row .pzh-recent-rating-change .pzh-online-rating { font-size:calc(15px * var(--ls, 1)); line-height:1.15; }
  .pzh-recent-side { display:contents; }
  .pzh-recent-meta-info { grid-area:meta; display:flex; align-items:center; justify-content:space-between; gap:calc(6px * var(--ls, 1)); min-width:0; line-height:1; }
  .pzh-recent-meta-top { min-width:0; flex-direction:row-reverse; justify-content:flex-end; gap:calc(3px * var(--ls, 1)); }   /* 3줄 배치: 오른쪽 정렬 때의 역순(종류 배지가 왼쪽 끝, 2026-10-10) */
  .pzh-recent-date { flex:0 0 auto; font-size:calc(10px * var(--ls, 1)); line-height:1; }
  .pzh-recent-outcomes { grid-area:outcomes; min-width:calc(40px * var(--ls, 1)); gap:calc(4px * var(--ls, 1)); }
  .pzh-recent-outcomes .pzh-recent-disc { padding:1px calc(5px * var(--ls, 1)); font-size:calc(13px * var(--ls, 1)); line-height:1; }
}

/* 목록 상단 필터와 현재 필터에 해당하는 전체 건수. */
.pzh-counts { display:flex; flex-wrap:wrap; gap:calc(4px * var(--ls, 1)) calc(14px * var(--ls, 1)); margin:0 0 calc(8px * var(--ls, 1)); padding:0 2px calc(8px * var(--ls, 1)); border-bottom:1px solid #eef0f4; color:#374151; font-size:calc(14px * var(--ls, 1)); line-height:1.4; }

/* 오답 필터는 목록 상단 우측 끝. 좁은 화면/긴 번역은 오른쪽 정렬을 유지해 줄바꿈한다. */
.pzh-counts { align-items:center; }
.pzh-history-total { font-size:calc(12px * var(--ls, 1)); font-variant-numeric:tabular-nums; }
.pzh-wrong-filter { display:inline-flex; align-items:center; gap:calc(5px * var(--ls, 1)); margin-left:auto; max-width:100%; color:inherit; font-size:calc(12px * var(--ls, 1)); cursor:pointer; }
.pzh-wrong-filter input { flex:0 0 auto; width:calc(14px * var(--ls, 1)); height:calc(14px * var(--ls, 1)); margin:0; accent-color:#254ead; cursor:pointer; }
html.fs-app-theme-dark .pzh-wrong-filter input { accent-color:#60a5fa; color-scheme:dark; }