/* 퍼즐 보드 확대(전체화면) 모드 공용 CSS (2026-10-10, _puzzle_zoom_style.php 의 인라인 <style> 에서 분리: 페이지마다 다시 받던 CSS 를 캐시되는 파일로). 이 파일만 고친다. */
/* 일반 웹 개별 퍼즐의 초기 제목: 제목(퍼즐 수) 바로 오른쪽에 풀이 인원을 붙인다.
   검정 바 우측 끝으로 밀어 두니 제목과 멀어 한 덩어리로 안 읽혔다(2026-09-17 지적).
   검정 배경이므로 퍼즐 홈 다크모드 배지와 같은 violet-400을 항상 사용한다. */
#pzTitle.pz-title-initial { display:flex; align-items:center; gap:8px; width:100%; max-width:100%; }
#pzTitle.pz-title-initial .pz-initial-caption { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pzTitle.pz-title-initial .pz-initial-playing { display:inline-flex; align-items:center; gap:4px; padding-right:8px; flex:0 0 auto; color:#a78bfa; font-size:.88em; font-weight:700; line-height:1; white-space:nowrap; }
#pzTitle.pz-title-initial .pz-initial-playing-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 auto; }

/* ── 전체화면(확대) 토글 버튼 — ocviewer 의 Full Screen 아이콘 재사용 ── */
#pzZoomBtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
  border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
  color: #374151; cursor: pointer;
}
#pzZoomBtn svg { width: 18px; height: 18px; display: block; }
#pzZoomBtn:hover { background: #f3f4f6; }
#pzZoomBtn[data-pz-tooltip]::after {
  content: attr(data-pz-tooltip);
  position: absolute; left: 50%; bottom: 125%; transform: translateX(-50%);
  z-index: 10; display: block; padding: 6px 10px; border-radius: 4px;
  background: #fff; color: #333; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  font: 400 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}
#pzZoomBtn[data-pz-tooltip]::before {
  content: ""; position: absolute; left: 50%; bottom: calc(125% - 6px); transform: translateX(-50%);
  z-index: 11; border-width: 6px; border-style: solid; border-color: #fff transparent transparent transparent;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}
#pzZoomBtn[data-pz-tooltip]:hover::after,
#pzZoomBtn[data-pz-tooltip]:focus-visible::after,
#pzZoomBtn[data-pz-tooltip]:hover::before,
#pzZoomBtn[data-pz-tooltip]:focus-visible::before {
  opacity: 1; visibility: visible;
}
#pzZoomBtn.on { /* 활성: ocviewer 골드 링 */
  border-color: #c9a93c; color: #9a7d1f;
  box-shadow: inset 0 0 0 2px #c9a93c, 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* PC 웹 전체화면 복귀와 모바일 앱 퍼즐 뒤로가기는 같은 화살표/박스를 사용한다. */
#pzZoomExitBtn,
#pzBackBtn {
  display: none; align-items: center; justify-content: center;
  width: 31px; height: 25px; min-width: 31px; flex: 0 0 31px; margin: 0; padding: 0 2px;
  border: 0; border-radius: 0; background: transparent; color: inherit;
  font: 700 22px/25px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* 제목이 길어 fitPuzzleTitle 이 글자를 줄이면 화살표도 같은 비율로 줄인다. 22px 고정이면
     스웨덴어처럼 긴 제목에서 12px 글자 옆에 22px 화살표가 남아 따로 노는 것처럼 보였다(2026-09-16).
     박스 폭(31px)은 그대로 둬야 제목 가용폭이 바뀌지 않아 되먹임 없이 한 번에 정해진다. */
  font-size: calc(22px * var(--pz-arrow-scale, 1));
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
#pzZoomExitBtn svg,
#pzBackBtn svg {
  display: block; overflow: visible;
  width: calc(22px * var(--pz-arrow-scale, 1));
  height: calc(22px * var(--pz-arrow-scale, 1));
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
body.pz-zoom #pzZoomExitBtn,
#pzBackBtn { display: inline-flex; }
#pzZoomExitBtn:hover,
#pzBackBtn:hover { background: rgba(255,255,255,.12); }
#pzZoomExitBtn:focus-visible,
#pzBackBtn:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; }
/* 터치 영역만 넓힌다(2026-10-11 "잘 안 눌린다"): 보이는 박스(31×25)와 제목 가용폭은 그대로 두고, 투명한 덧영역을
   위아래 8px(제목줄 높이 33px 를 다 채움, 제목줄 overflow:hidden 이 넘치는 부분은 자른다)·왼쪽 10px·오른쪽 16px(제목 앞부분 위)로 붙인다.
   제목 글자는 누를 데가 없어 덮어도 된다. */
#pzZoomExitBtn,
#pzBackBtn { position: relative; z-index: 1; }
#pzZoomExitBtn::after,
#pzBackBtn::after { content: ""; position: absolute; top: -8px; bottom: -8px; left: -10px; right: -16px; }
/* 일반 앱 화면의 History/전체화면 버튼도 라이트 고정색을 쓰므로 별도 다크 상태를 둔다.
   pz-zoom 진입 뒤의 버튼은 아래 전체화면 스코프 규칙이 이어서 담당한다. */
html.fs-app-theme-dark body:not(.pz-zoom) #pzZoomBtn,
html.fs-app-theme-dark body:not(.pz-zoom) .pz-history-btn {
  background: var(--fs-app-surface-2, #1c2635) !important;
  border-color: var(--fs-app-border, #334155) !important;
  color: var(--fs-app-text-2, #cbd5e1) !important;
}
html.fs-app-theme-dark body:not(.pz-zoom) #pzZoomBtn:hover:not(:disabled),
html.fs-app-theme-dark body:not(.pz-zoom) #pzZoomBtn:focus-visible,
html.fs-app-theme-dark body:not(.pz-zoom) .pz-history-btn:hover:not(:disabled),
html.fs-app-theme-dark body:not(.pz-zoom) .pz-history-btn:focus-visible {
  background: var(--fs-app-surface-3, #253247) !important;
  border-color: #475569 !important;
  color: #fff !important;
  outline: none;
}
html.fs-app-theme-dark body:not(.pz-zoom) #pzZoomBtn:disabled,
html.fs-app-theme-dark body:not(.pz-zoom) .pz-history-btn:disabled {
  background: #14181e !important;
  border-color: #313946 !important;
  color: #94a3b8 !important;
  opacity: .65;
}
html.fs-app-theme-dark #pzZoomBtn[data-pz-tooltip]::after {
  background: var(--fs-app-surface-3, #253247);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
html.fs-app-theme-dark #pzZoomBtn[data-pz-tooltip]::before {
  border-color: var(--fs-app-surface-3, #253247) transparent transparent transparent;
}
/* 확대는 PC(≥992px)에서만 — 모바일에선 버튼 숨김 */
@media (max-width: 991px) { #pzZoomBtn { display: none; } }
/* 단, 이미 확대 모드면 좁아져도 버튼 유지(해제 가능). specificity 우위로 위 규칙 오버라이드 */
body.pz-zoom #pzZoomBtn { display: inline-flex; }
/* 앱의 단일열 레이아웃에서는 자체 전체화면 흐름을 사용하므로 PC용 확대 버튼을 숨긴다.
   992px 이상 iPad PC 레이아웃은 웹과 같은 2열 구조이므로 버튼과 pz-zoom을 그대로 허용한다. */
@media (max-width: 991.98px) {
  html.fs-embed #pzZoomBtn { display: none !important; }
}
/* 모바일 앱에서만 퍼즐 내 기록/리더보드를 숨긴다. iPad 앱은 레이아웃을 그대로 노출. */
@media (max-width: 767.98px) {
  html.fs-embed .pz-puzzle-page .pz-col-rank { display: none !important; }
}
@media (max-width: 991px) {
  #pzZoomBtn[data-pz-tooltip]::before,
  #pzZoomBtn[data-pz-tooltip]::after { display: none !important; }
}

/* 모바일(≤575) 인라인 보드: 화면 가로폭을 꽉 채운다(풀블리드). */
@media (max-width: 575.98px) {
  body:not(.pz-zoom) .pz-col-board #ocInlineWrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  body:not(.pz-zoom) .pz-col-board #ocInlineWrap #ocviewerFrame {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}
/* 576~991(태블릿): 보드판은 가로 전체의 80%. 비로그인 안내(#pzGuestNotice)·하단 컨트롤 행·결과창(#pzResult)
   까지 #pzPanel 폭을 80%로 넓혀 모두 보드 폭에 맞춘다(컨트롤 버튼은 space-between 으로 보드 좌우 끝에 정렬). */
@media (min-width: 576px) and (max-width: 991.98px) {
  body:not(.pz-zoom) .pz-col-board #ocInlineWrap #ocviewerFrame {
    width: 80% !important;
    max-width: 80% !important;
  }
  body:not(.pz-zoom) .pz-col-board #pzGuestNotice { max-width: 80% !important; }
  body:not(.pz-zoom) .pz-col-board #pzPanel { max-width: 80% !important; }
}
/* iPad 앱 일반 모드(576px 이상): 보드는 자기 컬럼 가용 폭까지 쓰되, 보드 아래 기준선
   (기본 #pzPanel 하단, 스프린트는 시간 막대 그래프)까지가 화면에 남도록 JS(puzzle-zoom.js)가
   폭을 한 번 확정해 --pz-app-inline-width 로 넣는다. 결과창은 스크롤로 보는 영역이라
   예약하지 않는다(2026-09-10). JS 계산 전 폴백은 컬럼 폭 100%. */
@media (min-width: 576px) {
  html.fs-embed body:not(.pz-zoom) .pz-col-board #ocInlineWrap #ocviewerFrame {
    width: var(--pz-app-inline-width, 100%) !important;
    max-width: 100% !important;
  }
  html.fs-embed body:not(.pz-zoom) .pz-col-board #pzGuestNotice,
  html.fs-embed body:not(.pz-zoom) .pz-col-board #pzPanel {
    max-width: var(--pz-app-inline-width, 100%) !important;
  }
  /* (EN 본문 .text 캡 해제는 play.css 의 앱·비-ko 일괄 규칙으로 처리 — 여기서 중복 안 함) */
}

/* ── 확대 모드(body.pz-zoom) ──────────────────────────────────────────────
   보드 래퍼(#ocInlineWrap)를 전체화면 고정 레이어로 만들어 주변 UI(헤더·메뉴·
   사이드·푸터)를 통째로 덮는다. en/ko 본문 래퍼 폭에 갇히지 않으므로 보드가
   뷰포트 기준으로 커진다. iframe 크기는 JS(fitBoard)가 뷰포트 기준으로 지정. */
body.pz-zoom { overflow: hidden; }
/* 검정 제목바(대회명)는 상단 전체폭 고정으로 노출 — 오버레이보다 위(z) */
body.pz-zoom #pzTitleBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1002; margin: 0;
}
/* 보드 래퍼: 제목바 아래~화면 끝을 채우는 고정 레이어. 보드는 좌측·상단 정렬(상단 여백 없음).
   (top 은 JS 가 제목바 높이로 지정) */
body.pz-zoom #ocInlineWrap {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; margin: 0;
  background: #fff; display: flex; align-items: flex-start;
  /* Bootstrap .justify-content-center 가 !important 라 덮어써야 좌측 정렬됨 */
  justify-content: flex-start !important;
  padding-left: 16px; padding-top: 10px;   /* 보드(흑/백) 위 여백 — JS ZOOM_TOP 과 일치 */
}
/* 퍼즐 종류 탭의 전체 페이지 이동 때 일반 배치와 확대 배치가 연속으로 그려지는 것을 막는다.
   JS가 iframe fit을 확정하면 pending을 제거하며, JS 실패 시에도 1.2초 뒤에는 공개한다. */
body.pz-zoom-pending #pzTitleBar,
body.pz-zoom-pending #pzZoomTabs,
body.pz-zoom-pending .pz-puzzle-page {
  visibility: hidden !important;
  animation: pzZoomPendingFallback 0s 1.2s forwards;
}
@keyframes pzZoomPendingFallback { to { visibility: visible; } }
/* iPad 앱 가로모드는 이 PC형 pz-zoom 레이어를 사용한다. 일반 앱 페이지의
   다크 배경 위에 별도 fixed 레이어가 올라오므로 여기서도 테마 표면을 명시한다. */
html.fs-app-theme-dark body.pz-zoom #ocInlineWrap {
  background: var(--fs-app-bg, #0b1018);
  color: var(--fs-app-text, #f1f5f9);
  color-scheme: dark;
}
/* 방어: app-mode.css 와 동일한 chrome 셀렉터로 주변 UI 숨김(오버레이가 못 덮는
   transform 조상 등 엣지 대비). ko/다국어 모두 커버. */
body.pz-zoom #header-navbar, body.pz-zoom #hd, body.pz-zoom #gnb, body.pz-zoom #skip_to_container,
body.pz-zoom #whole-wrap > .content > .top,
body.pz-zoom #menuTopBar, body.pz-zoom #dynamic-info, body.pz-zoom #menu_pc,
body.pz-zoom .video:has(.central-content_g5),
body.pz-zoom .central-content2_g5,
body.pz-zoom .container:has(> .row .central-content2_g5),
body.pz-zoom .path,
body.pz-zoom #contentsLeft > h2:has(> #dynamic-info),
body.pz-zoom .col-md-4.col-lg-3,
body.pz-zoom .col-lg-3:not(.pz-col-rank),
body.pz-zoom #ft, body.pz-zoom .path-bottom, body.pz-zoom .site-footer-wrap,
body.pz-zoom .list-group.list-group-flush {
  display: none !important;
}
/* 위 .list-group 숨김은 페이지 사이드바 목록용이다. 오프캔버스(알림·새글·어드민 등) 안의
   목록까지 걸려 전체화면에서 알림 패널이 빈 채로 뜨던 것을 되살린다(2026-09-11). */
body.pz-zoom .offcanvas .list-group.list-group-flush {
  display: flex !important;
}
body.pz-zoom .contentsRight { margin-right: 0 !important; }

/* 우측 사이드바: 내기록/리더보드(aside.pz-col-rank)를 고정 컬럼으로 — 그 맨 위로
   JS 가 컨트롤(#pzPanel)·비로그인 안내(#pzGuestNotice)를 이동시켜
   [컨트롤 → 비로그인 → 내기록 → 리더보드] 순으로 쌓는다.
   폭(width)·위치(top)는 JS(fitBoard)가 남는 가로공간에 맞춰 지정(최소 420px). */
body.pz-zoom .pz-col-rank {
  display: flex !important; flex-direction: column; gap: 12px;
  position: fixed; right: 24px; bottom: 0; z-index: 1001; margin: 0 !important;
  overflow-y: auto; overflow-x: hidden; padding-bottom: 16px;
}
/* 컨트롤 패널: 사이드바 안에서 카드 형태로 전체폭 */
body.pz-zoom #pzPanel {
  width: 100%; max-width: none; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px;
}
html.fs-app-theme-dark body.pz-zoom #pzPanel {
  background: var(--fs-app-surface, #151d2a);
  border-color: var(--fs-app-border, #334155);
  color: var(--fs-app-text, #f1f5f9);
}
body.pz-zoom #pzPanel .row { margin: 0; }
/* 비회원 안내: 사이드바 전체폭(인라인 max-width:380px 오버라이드) */
body.pz-zoom #pzGuestNotice { width: 100% !important; max-width: none !important; margin: 0 !important; }
/* 사이드바 안 카드 정리: 마진 제거(gap 으로 간격), 리더보드 sticky 해제 */
body.pz-zoom .pz-col-rank > .card { margin: 0; }
body.pz-zoom .pz-col-rank .pz-leaderboard-card { position: static !important; top: auto; }

/* 퍼즐 내 기록/리더보드의 라이트 고정 텍스트색을 다크 테마에서 교정한다.
   일반 배치와 iPad 가로 전체화면 배치가 같은 카드를 공유하므로 pz-zoom에 한정하지 않는다. */
html.fs-app-theme-dark .pz-puzzle-page .pz-record-meta,
html.fs-app-theme-dark .pz-puzzle-page .pz-record-rating-line,
html.fs-app-theme-dark .pz-puzzle-page #pzMyRecordStats,
html.fs-app-theme-dark .pz-puzzle-page .pz-record-rank,
html.fs-app-theme-dark .pz-puzzle-page .pz-leaderboard-filter {
  color: var(--fs-app-text-2, #cbd5e1) !important;
}
html.fs-app-theme-dark .pz-puzzle-page .pz-record-head .card-title,
html.fs-app-theme-dark .pz-puzzle-page .pz-my-record-link,
html.fs-app-theme-dark .pz-puzzle-page .pz-record-rank-link {
  color: #93c5fd !important;
  -webkit-text-fill-color: #93c5fd !important;
}
html.fs-app-theme-dark .pz-puzzle-page .pz-leaderboard-filter input {
  color-scheme: dark;
  accent-color: #60a5fa;
}
html.fs-app-theme-dark .pz-message-confirm-overlay {
  background: rgba(2, 6, 23, .68) !important;
}
html.fs-app-theme-dark .pz-message-confirm-dialog {
  border-color: var(--fs-app-border, #475569) !important;
  background: var(--fs-app-surface-2, #1c2635) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .48) !important;
}
html.fs-app-theme-dark .pz-message-confirm-text {
  color: var(--fs-app-text, #f1f5f9) !important;
}
html.fs-app-theme-dark .pz-message-confirm-btn.is-secondary {
  border-color: #64748b !important;
  background: #334155 !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html.fs-app-theme-dark .pz-message-confirm-btn.is-primary {
  border-color: #60a5fa !important;
  background: #2563eb !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 우측 사이드바 상단 탭(온라인/XOT/미드/엔딩) — 평소 숨김, 확대 시 사이드바 최상단 */
#pzZoomTabs { display: none; }
body.pz-zoom #pzZoomTabs { display: flex; gap: 6px; width: 100%; }
body.pz-zoom .pz-zoom-tabs a,
body.pz-zoom .pz-zoom-tabs a:link,
body.pz-zoom .pz-zoom-tabs a:visited {
  /* 폭은 라벨 길이에 비례해 나눈다(XOT 는 좁게, '얼리 엔드'·'Miттельшпиль' 같은 긴 라벨은 넓게).
     그래도 모자라면 버튼 밖으로 흘리지 않고 말줄임 — 15개 언어 중 어떤 라벨이 와도 안전하다
     (2026-09-18 지적: PC 웹 확대 탭에서 'Early Endgame' 이 버튼을 넘어갔다). */
  flex: 1 1 auto; min-width: 0; text-align: center; padding: 8px 4px;
  border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
  color: #374151 !important; -webkit-text-fill-color: #374151 !important;
  font-weight: 700; font-size: 13px; line-height: 1.1;
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.pz-zoom .pz-zoom-tabs a:hover { background: #f3f4f6; }
body.pz-zoom .pz-zoom-tabs a.active,
body.pz-zoom .pz-zoom-tabs a.active:link,
body.pz-zoom .pz-zoom-tabs a.active:visited {
  background: #2563eb; border-color: #2563eb; color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.pz-zoom .pz-zoom-tabs a.active:hover { background: #1d4ed8; border-color: #1d4ed8; }
html.fs-app-theme-dark body.pz-zoom .pz-zoom-tabs a,
html.fs-app-theme-dark body.pz-zoom .pz-zoom-tabs a:link,
html.fs-app-theme-dark body.pz-zoom .pz-zoom-tabs a:visited,
html.fs-app-theme-dark body.pz-zoom #pzZoomBtn {
  background: var(--fs-app-surface-2, #1c2635) !important;
  border-color: var(--fs-app-border, #334155) !important;
  color: var(--fs-app-text-2, #cbd5e1) !important;
  -webkit-text-fill-color: var(--fs-app-text-2, #cbd5e1) !important;
}
html.fs-app-theme-dark body.pz-zoom .pz-zoom-tabs a:hover,
html.fs-app-theme-dark body.pz-zoom #pzZoomBtn:hover {
  background: var(--fs-app-surface-3, #253247) !important;
  color: #fff !important;
}
html.fs-app-theme-dark body.pz-zoom .pz-zoom-tabs a.active,
html.fs-app-theme-dark body.pz-zoom .pz-zoom-tabs a.active:link,
html.fs-app-theme-dark body.pz-zoom .pz-zoom-tabs a.active:visited {
  background: #2563eb !important;
  border-color: #60a5fa !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
/* 전체화면 우측 컬럼 액션. 온라인의 대기실/나가기/관전 이동과 퍼즐 History는
   각 페이지의 라이트 고정색을 사용하므로 pz-zoom 다크 스코프에서 명시적으로 덮는다. */
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obBoardActions .pz-btn,
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obSpecNav .ob-nav-btn,
html.fs-app-theme-dark body.pz-zoom .pz-col-rank .pz-history-btn {
  background: var(--fs-app-surface-2, #1c2635);
  border-color: var(--fs-app-border, #334155);
  color: var(--fs-app-text, #f1f5f9);
}
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obBoardActions .pz-btn:hover:not(:disabled),
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obBoardActions .pz-btn:focus-visible,
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obSpecNav .ob-nav-btn:hover:not(:disabled),
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obSpecNav .ob-nav-btn:focus-visible,
html.fs-app-theme-dark body.pz-zoom .pz-col-rank .pz-history-btn:hover:not(:disabled),
html.fs-app-theme-dark body.pz-zoom .pz-col-rank .pz-history-btn:focus-visible {
  background: var(--fs-app-surface-3, #253247);
  border-color: #475569;
  color: #fff;
  outline: none;
}
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obBoardActions .pz-btn.primary {
  background: #2563eb;
  border-color: #3b82f6;
  color: #fff;
}
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obBoardActions .pz-btn.primary:hover:not(:disabled),
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obBoardActions .pz-btn.primary:focus-visible {
  background: #1d4ed8;
  border-color: #60a5fa;
}
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obBoardActions .pz-btn:disabled,
html.fs-app-theme-dark body.pz-zoom .pz-col-rank #obSpecNav .ob-nav-btn:disabled,
html.fs-app-theme-dark body.pz-zoom .pz-col-rank .pz-history-btn:disabled {
  background: #14181e;
  border-color: #313946;
  color: #94a3b8;
  opacity: .65;
}
html.fs-app-theme-dark body.pz-zoom .pz-col-rank .ob-sidebar-table-footer {
  background: var(--fs-app-surface, #151d2a);
  border-color: var(--fs-app-border, #334155);
}
html.fs-app-theme-dark body.pz-zoom .pz-col-rank .ob-sidebar-table-action {
  background: transparent;
  color: var(--fs-app-link, #60a5fa);
}
html.fs-app-theme-dark body.pz-zoom .pz-col-rank .ob-sidebar-table-action:hover,
html.fs-app-theme-dark body.pz-zoom .pz-col-rank .ob-sidebar-table-action:focus-visible {
  background: var(--fs-app-surface-2, #1c2635);
  color: #bfdbfe;
}