@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

:root {
  --cell: 44px;   /* 한 칸 크기 */
  --disc: 38px;   /* 돌 크기 */
  --board: calc(var(--cell) * 8); /* 8x8 보드 전체 */
  --oc-board-color: #008563;
}


body, h1, h2, h3, p, div, ul, ol, li, dl, dd, dt, table, form, blockquote, pre, address, input, textarea {
  margin: 0px;
  padding: 0px;
  font-family: 'Lato', sans-serif; /* 모든 요소의 폰트를 Lato로 설정 */
}

a,
button,
input,
textarea,
select,
label,
summary,
[role="button"],
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}


body {
  background-color: transparent;
}


/* Save 메뉴 (btnSavePhoto 옆 작은 드롭다운) */
.save-wrap { position: relative; display: inline-flex; align-items: center; }
.save-menu {
  position: absolute;
  /* 위로 열기: 더보기 패널이 툴바 위에 뜨는 배치에서 아래로 열면 패널/화면 하단에 잘림(2026-07-19) */
  bottom: 105%;
  left: 0;
  /* 우측 끝 버튼에서도 메뉴가 뷰어 밖으로 나가지 않도록 JS가 가로 보정값을 넣는다. */
  transform: translate(var(--save-menu-shift-x, 0px), -4px);
  min-width: 140px;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 0;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  z-index: 999999;
}
.save-menu.open { opacity: 1; pointer-events: auto; }
.save-item{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; font-size:15px; font-weight:600; cursor:pointer;
}
.save-item + .save-item{ border-top:1px solid #e5e7eb; }
.save-item:hover{ background:#f9fafb; }
.save-item.disabled{ color:#94a3b8; cursor:not-allowed; background:#f3f4f6; }

/* --- Edit Panel을 상단 toolbar와 동일 톤으로 --- */
#editPanel{
  display:none;
  max-width: calc(var(--board) + 30px);  /* 상단과 동일 폭 */
  margin:6px auto 0;                     /* 가운데 정렬 */
  box-sizing: border-box;
}
#editPanel .toolbar{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px;
  padding:6px 8px;
  background:#f8f9fa;
  border:1px solid #dee2e6;
  border-radius:8px;
}

/* 에디트용 돌 선택 버튼도 상단 아이콘 버튼 높이에 맞춤 */
#editPanel .edit-option{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:3px solid #01744d;
  background:#01744d;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .06s ease;
}
#editPanel .edit-option:active{ transform:translateY(1px); }

/* 안쪽 돌 크기(검/백) */
#editPanel .edit-option .disc{ width:30px; height:30px; border-radius:50%; }
#editPanel .edit-option .disc.white{ background:#fff; border:0px solid #ccc; }
#editPanel .edit-option .disc.black{ background:#000; }

/* 완료/취소 버튼을 상단 vbtn 톤에 맞춤 */
#editPanel .actions{ display:flex; gap:6px; margin-left:auto; }
#editPanel .actions .vbtn{
  padding:6px 10px; border:none; border-radius:6px;
  font-weight:400; cursor:pointer; font-size:1.1rem;
}
#editPanel .actions .vbtn.ok{ background:#28a745; color:#fff; }
#editPanel .actions .vbtn.cancel{ background:#dc3545; color:#fff; }

#photoImportPreview{
  display:none;
  max-width: calc(var(--board) + 30px);
  margin:6px auto 0;
  padding:6px;
  box-sizing:border-box;
  background:#f8f9fa;
  border:1px solid #dee2e6;
  border-radius:8px;
}
#photoImportPreview canvas,
#photoImportPreview img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:6px;
  background:#fff;
}
body.photo-import-overlay-edit #photoImportPreview canvas,
body.photo-import-overlay-edit #photoImportPreview img{
  width:auto;
  max-width:100%;
  max-height:var(--photo-import-preview-max-h, 180px);
  margin:0 auto;
}
body.photo-import-edit #op_button{
  display:none !important;
}
body.photo-import-active #ocvOverlayCloseButton{
  display:none !important;
}

/* 드래그 스크롤 방지 */
#op_button {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* Standard */
}

/* 보드판 드래그 방지 */
#ocgibo, #board, #frame {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* ----- Player header (top) ----- */
.player-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;   /* 좌우 유저 공간 중앙 여백(2026-07-11: 16px → 5px, 모바일과 통일) */
  padding:0px 0px 5px;
  width:382px;
  border:0px solid #000;  
}


.player-row{
  display:flex;
  align-items:center;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
}

.player-row .badge.black {
  margin-right:6px;   /* ← 원하는 만큼만 띄우기 */
}
.player-row.right .badge {
  margin-left:6px;    /* ← 오른쪽 플레이어는 반대로 왼쪽에 간격 */
}

.player-row.right{
  justify-content:flex-end;
}

/* 퍼즐 모드: 둘 차례(=내) 쪽 헤더 행 전체를 돌 색으로 강조 → "내 색" 한눈에.
   분석/온라인(공용 뷰어)은 body.oc-puzzle-mode 가 없어 미적용. */
/* 퍼즐 흑 헤더↔보드는 5px, 백 헤더↔하단 컨트롤은 10px 간격을 유지한다. */
body.oc-puzzle-mode .player-header { gap:0; }
body.oc-puzzle-mode .player-header-black { padding-bottom:5px; }
body.oc-puzzle-mode .player-header-white { padding-bottom:10px; }
/* 차례 박스: 골드 테두리로 통일. 대신 돌 아이콘(뱃지)의 골드 링은 제거(퍼즐에서만). */
body.oc-puzzle-mode .player-row {
  min-width:0;
  min-height:48px;
  padding:6px 8px;
  border-radius:8px;
  box-sizing:border-box;
  box-shadow: inset 0 0 0 3px transparent;
}
body.oc-puzzle-mode .player-row.is-turn { box-shadow: inset 0 0 0 3px #c9a93c; }
body.oc-puzzle-mode .player-header .badge.turn { box-shadow: none; }
/* 흑 차례: 진한 배경 + 흰 글자 (왼쪽 행 = 흑) */
body.oc-puzzle-mode .player-row:not(.right).is-turn { background:#1a1a1a; }
body.oc-puzzle-mode .player-row:not(.right).is-turn .player-name,
body.oc-puzzle-mode .player-row:not(.right).is-turn .player-name * { color:#fff; }
body.oc-puzzle-mode .player-row:not(.right).is-turn .player-rating-live { color:#fff !important; }
/* 진한 배경에 묻히는 흑 돌(뱃지)에 흰 테두리 */
body.oc-puzzle-mode .player-row:not(.right).is-turn .badge.black { border-color:#fff; }
/* 백 차례: 밝은 배경 (오른쪽 행 = 백) */
body.oc-puzzle-mode .player-row.right.is-turn { background:#f1f5f9; }

/* XOT 퍼즐: 돌 수 아이콘은 양쪽 모두 유지하되 색상 텍스트는 현재 차례인 행에만 표시한다.
   PlayerBlackName/PlayerWhiteName의 실제 textContent는 공유·부모 동기화가 계속 읽도록 남겨 둔다. */
body.oc-puzzle-mode.oc-xot-puzzle-mode .player-name {
  font-size:0 !important;
}
body.oc-puzzle-mode.oc-xot-puzzle-mode .player-row.is-turn .player-name::after {
  content:attr(data-xot-turn-label);
  display:block;
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}

/* 이름 + (온라인 대전) 타이머 세로 스택 */
.player-name-wrap{ display:flex; flex:1 1 0; flex-direction:column; min-width:0; }
.player-row.right .player-name-wrap{ align-items:flex-end; }
.battle-seat-photo{ display:inline-flex; align-items:center; flex:0 0 auto; margin-right:4px; }
.battle-seat-photo:empty{ display:none!important; margin-right:0; }
.battle-seat-photo-img{
  display:block;
  width:24px;
  height:24px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  box-sizing:border-box;
  flex:0 0 24px;
}
.player-timer{ display:none; font:14px/1.2 ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; color:#6b7280; margin-top:1px; padding:1px 5px; border:1px solid transparent; border-radius:6px; opacity:.66; }
.player-timer.show{ display:block; }
.player-timer.is-active{ color:#111; opacity:1; border-color:#c9a93c; background:#fffdf3; box-shadow:0 0 0 1px rgba(201,169,60,.22); }
.player-timer.is-low{ color:#b91c1c; }
.player-timer-row{ display:flex; gap:5px; align-items:baseline; }
.player-row.right .player-timer-row{ justify-content:flex-end; }
.player-rating-live{ display:none; font-size:14px; font-weight:450; font-variant-numeric:tabular-nums; }
.player-rating-live.show{ display:inline-block; }
.player-rating-live.rating-unofficial{ color:#999; }
.player-rating-live.rating-local{ color:#666; }
body.oc-live-battle .player-row.has-pass-badge .player-name-wrap{
  flex:0 1 auto;
  max-width:58%;
}
.battle-pass-badge{
  display:none;
  flex:1 1 0;
  min-width:0;
  align-items:center;
  justify-content:center;
  align-self:center;
  height:36px;
  margin:0 2px 0 4px;
  color:#dc2626;
  font-size:17px;
  font-style:italic;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}
.battle-pass-badge.show{ display:flex; }

/* 전체 기능 ocviewer: 흑은 보드 위, 백은 보드 아래에 같은 방향으로 배치한다.
   embed.html은 기존 좌우 헤더를 유지하므로 정적 body 클래스에만 한정한다. */
body.ocv-split-players .player-header{
  display:block;
  gap:0;
}
body.ocv-split-players .player-header-white{
  padding-top:5px;
  padding-bottom:0;
}
body.ocv-split-players .player-header > .player-row{
  flex:1 1 auto;
  width:100%;
}
body.ocv-split-players .player-row,
body.ocv-split-players .player-row.right{
  flex:0 0 100%;
  justify-content:flex-start;
}
body.ocv-split-players .player-row .badge,
body.ocv-split-players .player-row.right .badge{
  margin-left:5px !important;
  margin-right:6px;
}
body.ocv-split-players .player-row.right .player-name-wrap{
  align-items:flex-start;
}
body.ocv-split-players .player-row.right .player-timer-row{
  justify-content:flex-start;
}
body.ocv-split-players .player-row .battle-seat-photo{
  width:36px;
  height:36px;
  margin:0 6px 0 0;
  flex:0 0 36px;
  align-self:center;
}
body.ocv-split-players .player-row .battle-seat-photo:empty{
  width:0;
  height:0;
  flex-basis:0;
  margin-right:0;
}
body.ocv-split-players .player-row .battle-seat-photo-img{
  width:36px;
  height:36px;
  flex-basis:36px;
  border-radius:3px;
}
body.ocv-split-players .player-row .player-name{
  width:100%;
  max-width:100%;
  text-align:left !important;
}
body.ocv-split-players .player-row .player-name-line,
body.ocv-split-players .player-row .player-label-name,
body.ocv-split-players .player-row .player-quest-link{
  text-align:left !important;
}
body.ocv-split-players .player-row .player-name-line{
  justify-content:flex-start;
}
body.ocv-split-players .player-row.right .battle-seat-control{
  margin-left:6px;
  margin-right:0;
}
/* 실시간 온라인 봇 대사: 플레이어 정보 뒤부터 보드 오른쪽 끝까지 남는 폭을 사용한다. */
body.oc-live-battle .player-row.has-bot-bubble .player-name-wrap{
  flex:0 1 auto;
  max-width:58%;
}
body.oc-live-battle .ocv-bot-bubble{
  position:relative;
  display:flex;
  align-items:center;
  flex:1 1 0;
  min-width:0;
  height:36px;
  max-height:36px;
  margin:0 2px 0 10px;
  padding:3px 8px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#1f2937;
  box-shadow:0 1px 4px rgba(15,23,42,.16);
  box-sizing:border-box;
  pointer-events:none;
}
body.oc-live-battle .ocv-bot-bubble[hidden]{ display:none; }
body.oc-live-battle .ocv-bot-bubble::before{
  content:"";
  position:absolute;
  left:-5px;
  top:50%;
  width:8px;
  height:8px;
  border-left:1px solid #cbd5e1;
  border-bottom:1px solid #cbd5e1;
  background:#fff;
  transform:translateY(-50%) rotate(45deg);
}
body.oc-live-battle .ocv-bot-bubble-text{
  display:-webkit-box;
  width:100%;
  max-height:28px;
  overflow:hidden;
  color:inherit;
  font-size:12px;
  line-height:14px;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
body.oc-live-battle .ocv-bot-bubble.is-mobile .ocv-bot-bubble-text{
  font-size:13px;
}
/* 퍼즐 차례 강조 박스를 보드 외곽선에 맞춰 좌우 1px씩 안쪽으로 둔다. */
body.oc-puzzle-mode.ocv-split-players .player-header > .player-row{
  width:calc(100% - 2px);
  flex-basis:calc(100% - 2px);
  margin-left:1px;
  margin-right:1px;
}
/* 백 행 위·아래의 실제 보이는 간격을 5px로 맞춘다.
   아래쪽은 헤더 padding 대신 툴바 안쪽 여백 한 곳에서만 만든다. */
body.ocv-split-players #op_button.toolbar{
  margin-top:0;
  max-width:none;
  padding-top:5px;
  padding-bottom:2px;
  padding-left:3px;
  padding-right:3px;
}

/* 배지(숫자 동그라미) — 절대 찌그러지지 않도록 고정폭/고정높이+flex-basis 0 */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;          /* 원하는 크기로 조절 */
  flex:0 0 36px;                    /* ← 이 줄이 ‘안 찌그러짐’의 핵심 */
  border-radius:50%;
  font-weight:700;
  font-size:18px;
  box-sizing:border-box;
}


.badge.black{ background:#000; color:#fff; border:2px solid #000; }
.badge.white{ background:#fff; color:#000; border:2px solid #000; }

/* 턴(옐로 테두리) */
.player-header .badge.turn{ box-shadow:0 0 0 3px #c9a93c inset; }


/* 이름은 한 줄, 길면 … 처리, 보드와 겹치지 않도록 줄바꿈 없이 폭 제어 */
.player-name{
  display:block;
  font-size:17px;
  font-weight:700;
  line-height:1.1;
  max-width: min(42vw, 520px);      /* 화면 반 넘지 않게 가드(원하면 조정) */
}
.player-name .player-label-name{
  display:block;
}
.player-name .player-quest-link{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  cursor:pointer;
  text-align:inherit;
}
.player-name .player-quest-link:hover{
  text-decoration:underline;
}
.player-name .player-quest-link:focus-visible{
  outline:1px solid currentColor;
  outline-offset:2px;
}
/* WOF 선수 이름 → 레이팅 프로필(gplayer.php). 색은 상속해 레이팅 색 클래스를 그대로 쓴다. */
.player-name .player-wof-link{
  color:inherit;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  text-decoration:none;
  cursor:pointer;
}
.player-name .player-wof-link:hover{
  text-decoration:underline;
}
.player-name .player-wof-link:focus-visible{
  outline:1px solid currentColor;
  outline-offset:2px;
}
/* 이름/레이팅은 복사할 수 있어야 한다(#ocgibo 의 보드 드래그 방지 규칙이 헤더까지 상속되던 것 해제). */
.player-header .player-name,
.player-header .player-rating,
.player-header .player-rating-live{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
.player-name .player-rating{
  display:block;
  color:#111;
  font-weight:400;
  font-size:.82em;
  margin-top:2px;
}
/* === Bottom Toolbar – Modern, compact, board-attached === */

/* control strip layout reset (HTML 구조상 필요) */
#control{
  float:none !important;
  width:auto !important;
  background:transparent !important;
}

/* embed.html은 별도 2열 구성을 유지한다. */
body.embed-viewer #op_button.toolbar .flex-break{
  flex-basis:100%;
  width:100%;
  height:0;
  margin:0;
  padding:0;
}

#op_button.toolbar{
  /* glassy container */
  position:relative;
  z-index:1000;
  display:flex;
  align-items:center;
  background: rgba(255,255,255,0.9);
  border:1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  
  row-gap: 3px;
  column-gap: 6px;
  padding:6px 8px; 

  /* layout */
  max-width: calc(var(--board) + 10px);
  /* 텍스트(ACCURACY/DEPTH)↔버튼 상단 여백은 2px로 최소화하고, 그만큼을 버튼 하단 여백으로 이동 */
  margin: 2px 2px 7px;
  flex-wrap: wrap;
  overflow:visible;
}

#op_button.toolbar #first,
#op_button.toolbar #last{
  display:none !important;
}

/* Buttons – flat & crisp */
#op_button.toolbar button{
  -webkit-appearance: none;
  appearance: none;
  height: 36px;
  min-width: 46px;
  padding: 0 10px;

  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #ffffff;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  cursor: pointer;

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}


/* Small screens */
@media (max-width: 420px){  
  
}


@media (hover: hover) and (pointer: fine){
  #op_button.toolbar button:hover{
    transform: translateY(-1.5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.16);
    background:#f7f7f7;
  }
}  
#op_button.toolbar button:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}




/* Icon & toggles – unify size and weight */
#op_button.toolbar .icon,
#op_button.toolbar .icon-toggle{
  height: 36px;
  min-width: 42px;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  color: #333;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
#op_button.toolbar .icon svg,
#op_button.toolbar .icon-toggle svg{
  width:21px; height:21px;
}
#op_button.toolbar #btnDiscAnim svg{
  width:24px; height:24px;
}

#op_button.toolbar .tooltip_left{
  margin-left: auto;
}

#op_button.toolbar #btnAnalyze{
  width:42px;
  min-width:42px;
  position:relative;
}

#op_button.toolbar #btnAnalyze .analyze-busy{
  display:none;
  width:18px;
  height:18px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  box-sizing:border-box;
  animation:ocvAnalyzeBusySpin 0.75s linear infinite;
}

#op_button.toolbar #btnAnalyze[data-analyze-busy="1"] .analyze-icon{
  display:none;
}

#op_button.toolbar #btnAnalyze[data-analyze-busy="1"] .analyze-busy{
  display:inline-block;
}

@keyframes ocvAnalyzeBusySpin{
  to { transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  #op_button.toolbar #btnAnalyze .analyze-busy{
    animation:none;
    border-right-color:currentColor;
  }
}

#op_button.toolbar #btnNewGame svg{
  width:30px;
  height:23px;
}

/* Toggle ON – gold ring, clearer state */
#op_button.toolbar .icon-toggle.on{
  background:#fffdf3;
  border-color:#c9a93c;
  box-shadow: inset 0 0 0 2px #c9a93c, 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* Focus visibility (keyboard) */
#op_button.toolbar button:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.35);
}

/* 6) 숨긴 체크박스는 화면 밖으로 */
.hidden{ position:absolute !important; left:-9999px !important; }


/* Disabled (브라우저 기본 대비 개선) */
#op_button.toolbar button:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

#op_button.toolbar .tooltip button:disabled,
#op_button.toolbar .tooltip_left button:disabled {
  pointer-events: none;
}

.tooltip_left {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* 말풍선 텍스트 (버튼 왼쪽에 표시) */
.tooltip_left .tooltip-text {
  visibility: hidden;
  opacity: 0;
  background: #fff;
  color: #333;
  text-align: center;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: absolute;
  top: 50%;
  right: 120%;                 /* 요소 기준 오른쪽에서 90% 만큼 이동하여 버튼 왼쪽에 표시 */
  transform: translateY(-50%);
  transition: opacity 0.15s ease-in-out;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* 말풍선 화살표 (→ 버튼 쪽을 가리킴) */
.tooltip_left .tooltip-text::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;                  /* 말풍선 박스의 오른쪽 끝에 화살표 */
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

/* 터치로 여는 분석 버튼 툴팁 제거(모바일 터치에선 툴팁 안 뜸). PC hover 는 아래 media query 로 유지. */

#op_button.toolbar .tooltip_left.tooltip-analyze .tooltip-text{
  top:auto;
  right:0;
  bottom:calc(100% + 8px);
  transform:none;
  z-index:1001;
}

#op_button.toolbar .tooltip_left.tooltip-analyze .tooltip-text::after{
  top:100%;
  left:auto;
  right:16px;
  transform:none;
  border-color:#fff transparent transparent transparent;
}



.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip.ocv-disabled-shell,
.tooltip[aria-disabled="true"],
.tooltip_left.ocv-disabled-shell,
.tooltip_left[aria-disabled="true"],
label.ocv-disabled-shell {
  cursor: not-allowed;
}

.tooltip.ocv-disabled-shell .icon-toggle,
.tooltip_left.ocv-disabled-shell .icon-toggle,
label.ocv-disabled-shell .icon-toggle {
  cursor: not-allowed;
}

/* FTD 대회 라이브 중계 뷰어(ftd_live=1 = body.oc-ftd-live): 다른 기보를 불러오거나 판을
   바꾸는 컨트롤 비활성 — 내 게임(btnNewGame)·불러오기(btnSaveGame)·보드 편집(btnEditBoard).
   중계는 릴레이 폴링(ocviewer.ftd-live.js)이 transcript diff 로 보드를 갱신하므로, 편집/다른
   기보 로드는 중계 갱신을 멈추거나(loadExternalLive 가 editMode 면 false) 상태를 깨뜨린다.
   평가/분석·공유·이미지저장 등은 유지. JS disabled 는 재활성 경로가 있어 CSS 로 하드 잠금. */
body.oc-ftd-live #btnNewGame,
body.oc-ftd-live #btnSaveGame,
body.oc-ftd-live #btnEditBoard {
  opacity: .4 !important;
  pointer-events: none !important;
  cursor: not-allowed;
}

/* 말풍선 텍스트 (버튼 위에 표시 — 하단 툴바라 아래로 띄우면 화면 밖으로 짤림) */
.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  background: #fff;
  color: #333;
  text-align: center;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: absolute;
  bottom: 125%;                /* 버튼 위로 띄우기 */
  left: 50%;
  /* --tt-shift: 뷰포트 밖으로 짤릴 때 JS(ocviewer.ui.js)가 안쪽으로 밀어주는 보정값 */
  transform: translateX(calc(-50% + var(--tt-shift, 0px)));
  transition: opacity 0.15s ease-in-out;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* 말풍선 화살표 (아래쪽 버튼을 가리키도록; 박스가 보정돼도 버튼 중앙을 가리키게 역보정) */
.tooltip .tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;                   /* 텍스트 박스 바로 아래 */
  left: calc(50% - var(--tt-shift, 0px));
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.tooltip.tooltip-start .tooltip-text {
  left: 0;
  transform: none;
}

.tooltip.tooltip-start .tooltip-text::after {
  left: 18px;
  transform: none;
}

.tooltip.tooltip-end .tooltip-text {
  left: auto;
  right: 0;
  transform: none;
}

.tooltip.tooltip-end .tooltip-text::after {
  left: auto;
  right: 18px;
  transform: none;
}

#morePanel > .tooltip:first-of-type .tooltip-text {
  left: 0;
  transform: none;
}

#morePanel > .tooltip:first-of-type .tooltip-text::after {
  left: 18px;
  transform: none;
}

#morePanel > .tooltip:last-of-type .tooltip-text {
  left: auto;
  right: 0;
  transform: none;
}

#morePanel > .tooltip:last-of-type .tooltip-text::after {
  left: auto;
  right: 18px;
  transform: none;
}

/* 기본: 숨김. 표시는 PC(hover:hover, pointer:fine)에서 마우스오버 시에만(아래 media query).
   터치 환경에서는 툴팁을 띄우지 않는다(무조건 hover 규칙은 터치 sticky-hover 를 유발하므로 제거). */
.tooltip .tooltip-text { visibility: hidden; opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .tooltip.ocv-tooltip-hover-open .tooltip-text,
  .tooltip_left.ocv-tooltip-hover-open .tooltip-text,
  .tooltip.ocv-tooltip-focus-open .tooltip-text,
  .tooltip_left.ocv-tooltip-focus-open .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
}

/* 터치 환경(모바일)에서는 툴팁을 표시하지 않는다(요구사항: 터치로는 툴팁 안 뜸).
   터치로 열던 focus-within / ocv-tooltip-touch-open 표시 규칙을 제거. */

/* 포탈로 이동된 전역 공유 메뉴 기본 스타일 */
#shareMenu {
  /* 포탈이 위치를 담당하므로 position은 기본값(static) */
  width: max-content;
  min-width: 140px;
  max-width: 220px;
  white-space: nowrap;

  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* 열렸을 때 */
#shareMenu.open {
  opacity: 1;
  pointer-events: auto;
}

/* 항목들(아이콘+텍스트) */
#shareMenu .share-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
#shareMenu .share-item + .share-item { border-top: 1px solid #e5e7eb; }
#shareMenu .share-item:hover { background: #f9fafb; }

/* 아이콘 */
#shareMenu .icons { width:18px; height:18px; flex-shrink:0; color:#374151; stroke-width:2; }


/* Import(게임 불러오기) 메뉴도 포탈로 이동되므로 동일 스타일 적용 */
#saveGameMenu {
  width: max-content;
  min-width: 140px;
  max-width: 220px;
  white-space: nowrap;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#saveGameMenu.open {
  opacity: 1;
  pointer-events: auto;
}
#saveGameMenu .share-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
#saveGameMenu .share-item + .share-item { border-top: 1px solid #e5e7eb; }
#saveGameMenu .share-item:hover { background: #f9fafb; }
#saveGameMenu .share-item.disabled {
  color: #94a3b8;
  cursor: not-allowed;
  background: #f3f4f6;
}
#saveGameMenu .icons { width:18px; height:18px; flex-shrink:0; color:#374151; stroke-width:2; }

#newGameMenu {
  width: max-content;
  min-width: 140px;
  max-width: 200px;
  white-space: nowrap;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#newGameMenu.open {
  opacity: 1;
  pointer-events: auto;
}
#newGameMenu .share-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
}
#newGameMenu .share-item + .share-item { border-top: 1px solid #e5e7eb; }
#newGameMenu .share-item:hover { background: #f9fafb; }
#newGameMenu .icons { width:18px; height:18px; flex-shrink:0; color:#374151; stroke-width:2; }


/* === 공유 메뉴: 버튼 오른쪽 + 하단 정렬 === */
#op_button.toolbar .share-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#op_button.toolbar .share-wrap .share-menu {
  /* JavaScript에서 body로 이동되므로 기본 스타일만 유지 */
  width: max-content;
  min-width: 140px;
  max-width: 200px;
  white-space: nowrap;

  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 6px 0;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#op_button.toolbar .share-wrap .share-menu.open {
  opacity: 1;
  pointer-events: auto;
}

/* 아이콘 (이름 충돌 방지 → .icons 사용) */
.share-menu .share-item .icons {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #374151;   /* 텍스트와 어울리는 회색 */
  stroke-width: 2;
}

/* 메뉴 항목 */
#op_button.toolbar .share-wrap .share-menu .share-item {
  display: flex;           /* 아이콘+텍스트 가로 정렬 */
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  cursor: pointer;
  background: transparent;
  text-align: left;
}
#op_button.toolbar .share-wrap .share-menu .share-item + .share-item {
  border-top: 1px solid #e5e7eb;
}
#op_button.toolbar .share-wrap .share-menu .share-item:hover {
  background: #f9fafb;
}


/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #op_button.toolbar button{ transition:none; }
  #op_button.toolbar button:hover,
  #op_button.toolbar button:active{ transform:none; }
}


/* --- score panel (same as before) --- */

.move-indicator{
  min-width:72px; text-align:center; font-weight:800; font-size:18px;
  padding:4px 12px; border:2px solid #9A9169; border-radius:10px; background:#fff;
}
#BlackFrame, #WhiteFrame, #NextMove { display:none !important; }



/* === Toolbar 버튼 가독성 업그레이드 === */

/* 공통: 활성(기본) 모습을 살짝 또렷하게 */
#op_button.toolbar button,
#op_button.toolbar .icon-toggle {
  background: #fff;
  color: #1f2937;                 /* 진한 텍스트 */
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}

/* hover/active는 '활성'에만 적용되도록 */
@media (hover:hover) and (pointer:fine){
  #op_button.toolbar button:not(:disabled):hover,
  #op_button.toolbar .icon-toggle:not(:disabled):hover{
    transform: translateY(-1.5px);
    box-shadow: 0 6px 12px rgba(0,0,0,.16);
    background:#f5f7fa;
  }
}
#op_button.toolbar button:not(:disabled):active,
#op_button.toolbar .icon-toggle:not(:disabled):active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.14);
}

/* 토글 ON 표기(금색 링)는 유지하되 더 선명하게 */
#op_button.toolbar .icon-toggle.on{
  background:#fffdf5;
  border-color:#c9a93c;
  box-shadow: inset 0 0 0 2px #c9a93c, 0 1px 0 rgba(255,255,255,.6) inset;
  color:#6b5b1e;
}

/* ✨ 핵심: 비활성(Disabled)을 확실히 구분 */
#op_button.toolbar button:disabled,
#op_button.toolbar .icon-toggle:disabled{
  background:#f3f4f6;            /* 평평한 회색 배경 */
  color:#94a3b8;                  /* 옅은 문자색 */
  border-color:#e5e7eb;           /* 옅은 테두리 */
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  filter: grayscale(80%);         /* 아이콘/텍스트 전체를 탈색 */
  opacity: 0.9;                   /* 투명도는 과하게 낮추지 않기 */
}

/* 비활성 아이콘 SVG도 옅게 */
#op_button.toolbar button:disabled svg,
#op_button.toolbar .icon-toggle:disabled svg{
  opacity:.55;
}

/* 키보드 포커스 링(활성만) */
#op_button.toolbar button:focus-visible:not(:disabled),
#op_button.toolbar .icon-toggle:focus-visible:not(:disabled){
  outline:none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}

/* 작은 화면에서도 차이 유지 */
@media (max-width: 420px){
  #op_button.toolbar button:disabled,
  #op_button.toolbar .icon-toggle:disabled{
    filter: grayscale(90%);
  }
}


.loss-circle {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:14px;
  height:14px;
  margin-bottom:4px;
  border-radius:50%;
  font-size:12px;
  font-weight:bold;
  vertical-align:middle;
}
.loss-circle.black {
  background:#000;
  border:2px solid #000;
  color:#fff;
}
.loss-circle.white {
  border:2px solid #000;
  background:#fff;
  color:#000;
}


#ocgibo {
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 0px;
  border-color: black;
}

/* 첫 autoScale(스케일 적용) 전까지 보드 숨김 — 자연크기로 한 번 깜빡인 뒤 width-fill 로
   점프하는 것 방지. visibility:hidden 은 레이아웃/측정을 유지하므로 autoScale 폭 측정에 영향 없음. */
html:not(.ocv-sized) #ocgibo { visibility: hidden; }

#ocbody {
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 0px;
  border-color: black;
}

#ocboard {
  width: auto;
  height: auto;
  border-style: solid;
  border-width: 0px;
  border-color: black;
}


#frame {
  border: 14px solid #feedc2;
  padding: 0px;
  background-color: var(--oc-board-color);
  position: relative;
  display: inline-block;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    0 0 0 1px #dacba5;
}
/* 확대 시(전체화면 fit 모드 + 폭채움 확대 oc-textfit 모두): 보드(흑/백 아이콘·숫자 포함)는
   transform:scale 로 함께 커지지만, 플레이어 텍스트(이름·레이팅·시계)는 보드 확대를 80%만 따라간다. */
body.oc-fitmode .player-name,
body.oc-textfit .player-name { font-size: calc(17px * var(--fit-text-factor, 1)); }
body.oc-fitmode .player-timer,
body.oc-fitmode .player-rating-live,
body.oc-textfit .player-timer,
body.oc-textfit .player-rating-live { font-size: calc(14px * var(--fit-text-factor, 1)); }

.oc-frame-wood {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    #feedc2 0px,
    #feedc2 1.5px,
    #eedeb6 2.5px,
    #feedc2 4.5px,
    #eedeb6 5px,
    #feedc2 7px,
    #eedeb6 8.5px
  );
}

.oc-frame-wood-top {
  left: -14px;
  right: -14px;
  top: -14px;
  height: 14px;
}

.oc-frame-wood-right {
  top: 0;
  right: -14px;
  bottom: 0;
  width: 14px;
}

.oc-frame-wood-bottom {
  left: -14px;
  right: -14px;
  bottom: -14px;
  height: 14px;
}

.oc-frame-wood-left {
  top: 0;
  left: -14px;
  bottom: 0;
  width: 14px;
}

.oc-frame-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 10px;
  line-height: 13px;
  font-size: 12px;
  text-align: center;
  font-weight: 700;
  color: #5d3a1a;
  z-index: 4;
}

.oc-frame-label a,
.oc-frame-label a:visited,
.oc-frame-label a:hover,
.oc-frame-label a:focus,
.oc-frame-label a:active {
  color: #5d3a1a;
  text-decoration: none;
}

.oc-frame-opening {
  position: absolute;
  /* 오프닝 이름 전용 고정 가로영역: 가운데 FlipSight 오른쪽(50%+30px) ~ 우측 끝.
     이 폭을 넘으면 JS가 scrollWidth/clientWidth 로 판정해 폰트만 축소 → FlipSight와 겹치지 않음. */
  left: calc(50% + 30px);
  right: 0;
  bottom: -10px;
  height: 10px;
  line-height: 13px;
  font-size: 12px;
  text-align: right;
  font-weight: 700;
  color: #5d3a1a;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.ocv-save-capture-frame .oc-frame-opening {
  bottom: -11px;
  line-height: 10px;
}

/* html2canvas can paint absolutely positioned children with z-index:auto/0
   behind the frame border. Keep the real wood-grain strips above the flat
   fallback border in the save-only clone. */
.ocv-save-capture-frame .oc-frame-wood {
  z-index: 1;
}

.oc-frame-move {
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 10px;
  line-height: 13px;
  font-size: 12px;
  text-align: left;
  font-weight: 700;
  color: #5d3a1a;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.oc-frame-move-color {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  vertical-align: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.oc-frame-move-color.is-black {
  background: #000;
  border: 1px solid #000;
}

.oc-frame-move-color.is-white {
  background: #fff;
  border: 1px solid currentColor;
}

.ocv-save-capture-frame .oc-frame-label {
  bottom: -11px;
  line-height: 10px;
}

.ocv-save-capture-frame .oc-frame-move {
  bottom: -11px;
  line-height: 10px;
}

.oc-frame-move.is-branch,
.oc-frame-move[data-branch="1"],
#MoveNo.is-branch,
#MoveNo[data-branch="1"] {
  color: #2a46a6 !important;
}

#board {
  position: relative;
  width: var(--board);
  height: var(--board);
  background-color: var(--oc-board-color);
  box-shadow: inset 0 0 0 1px black;
  z-index: 1;
}

.oc_disc {
  border-width: 0px;
  margin: 0px;
  padding: 3px 0 0 3px;
  position: absolute;
  width: var(--disc);
  height: var(--disc);
  z-index: 1;
}

.oc-disc-flip {
  position: absolute;
  width: var(--disc);
  height: var(--disc);
  padding: 3px 0 0 3px;
  margin: 0;
  border: 0;
  z-index: 250;
  pointer-events: none;
  transform: translateZ(0);
}

.oc-disc-flip__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .oc-disc-flip {
    display: none;
  }
}
.oc_cell {
  border-style: solid;
  border-width: 0px 1px 1px 0px;
  border-color: black;
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  line-height: var(--cell);
  position: absolute;
  text-align: center;
  width: var(--cell);
  height: var(--cell);
  z-index: 3;
}

#cell_h1, #cell_h2, #cell_h3, #cell_h4,
#cell_h5, #cell_h6, #cell_h7, #cell_h8 {
  border-right-width: 0px;
}

#cell_a8, #cell_b8, #cell_c8, #cell_d8,
#cell_e8, #cell_f8, #cell_g8, #cell_h8 {
  border-bottom-width: 0px;
}


.oc_eval {
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  line-height: var(--cell);
  position: absolute;
  text-align: center;
  color: yellow;
  width: var(--cell);
  height: var(--cell);
  z-index: 300;
}

.eval-score-text {
  position: relative;
  z-index: 2;
}

.eval-badge-icon {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(var(--cell) * 0.30);
  height: calc(var(--cell) * 0.30);
  color: currentColor;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.eval-badge-exact {
  width: calc(var(--cell) * 0.30 - 2px);
  height: calc(var(--cell) * 0.30 - 2px);
}

.eval-badge-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* x_char와 y_char 위치도 그대로 유지 */
#x-coordinate {
  top: -14px;
  left: -22px;
  width: calc(100% - 20px);
  text-align: center;
  color: #5d3a1a;
  position: absolute;
  z-index: 2;
}
#y-coordinate {
  top: 13px;
  left: -17px;
  height: calc(100% - 20px);
  color: #5d3a1a;
  position: absolute;
  z-index: 2;
}

.x_char {
  position: absolute;
  font-size: 11px !important;
  text-align: center;
  text-transform: uppercase;
}

.y_char {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 11px !important;
  text-align: center;
  text-transform: uppercase;
}

/* x축 */
#char_a { left: calc(var(--cell) * 1); }
#char_b { left: calc(var(--cell) * 2); }
#char_c { left: calc(var(--cell) * 3); }
#char_d { left: calc(var(--cell) * 4); }
#char_e { left: calc(var(--cell) * 5); }
#char_f { left: calc(var(--cell) * 6); }
#char_g { left: calc(var(--cell) * 7); }
#char_h { left: calc(var(--cell) * 8); }

/* y축 */
#char_1 { top: calc(var(--cell) * 0); }
#char_2 { top: calc(var(--cell) * 1); }
#char_3 { top: calc(var(--cell) * 2); }
#char_4 { top: calc(var(--cell) * 3); }
#char_5 { top: calc(var(--cell) * 4); }
#char_6 { top: calc(var(--cell) * 5); }
#char_7 { top: calc(var(--cell) * 6); }
#char_8 { top: calc(var(--cell) * 7); }


/* 보드 칸의 위치 조정 */
#disc_a1, #cell_a1, #eval_a1 { top: 0px; left: 0px; }
#disc_b1, #cell_b1, #eval_b1 { top: 0px; left: 38px; }
#disc_c1, #cell_c1, #eval_c1 { top: 0px; left: 76px; }
#disc_d1, #cell_d1, #eval_d1 { top: 0px; left: 114px; }
#disc_e1, #cell_e1, #eval_e1 { top: 0px; left: 152px; }
#disc_f1, #cell_f1, #eval_f1 { top: 0px; left: 190px; }
#disc_g1, #cell_g1, #eval_g1 { top: 0px; left: 228px; }
#disc_h1, #cell_h1, #eval_h1 { top: 0px; left: 266px; }
#disc_a2, #cell_a2, #eval_a2 { top: 38px; left: 0px; }
#disc_b2, #cell_b2, #eval_b2 { top: 38px; left: 38px; }
#disc_c2, #cell_c2, #eval_c2 { top: 38px; left: 76px; }
#disc_d2, #cell_d2, #eval_d2 { top: 38px; left: 114px; }
#disc_e2, #cell_e2, #eval_e2 { top: 38px; left: 152px; }
#disc_f2, #cell_f2, #eval_f2 { top: 38px; left: 190px; }
#disc_g2, #cell_g2, #eval_g2 { top: 38px; left: 228px; }
#disc_h2, #cell_h2, #eval_h2 { top: 38px; left: 266px; }
#disc_a3, #cell_a3, #eval_a3 { top: 76px; left: 0px; }
#disc_b3, #cell_b3, #eval_b3 { top: 76px; left: 38px; }
#disc_c3, #cell_c3, #eval_c3 { top: 76px; left: 76px; }
#disc_d3, #cell_d3, #eval_d3 { top: 76px; left: 114px; }
#disc_e3, #cell_e3, #eval_e3 { top: 76px; left: 152px; }
#disc_f3, #cell_f3, #eval_f3 { top: 76px; left: 190px; }
#disc_g3, #cell_g3, #eval_g3 { top: 76px; left: 228px; }
#disc_h3, #cell_h3, #eval_h3 { top: 76px; left: 266px; }
#disc_a4, #cell_a4, #eval_a4 { top: 114px; left: 0px; }
#disc_b4, #cell_b4, #eval_b4 { top: 114px; left: 38px; }
#disc_c4, #cell_c4, #eval_c4 { top: 114px; left: 76px; }
#disc_d4, #cell_d4, #eval_d4 { top: 114px; left: 114px; }
#disc_e4, #cell_e4, #eval_e4 { top: 114px; left: 152px; }
#disc_f4, #cell_f4, #eval_f4 { top: 114px; left: 190px; }
#disc_g4, #cell_g4, #eval_g4 { top: 114px; left: 228px; }
#disc_h4, #cell_h4, #eval_h4 { top: 114px; left: 266px; }
#disc_a5, #cell_a5, #eval_a5 { top: 152px; left: 0px; }
#disc_b5, #cell_b5, #eval_b5 { top: 152px; left: 38px; }
#disc_c5, #cell_c5, #eval_c5 { top: 152px; left: 76px; }
#disc_d5, #cell_d5, #eval_d5 { top: 152px; left: 114px; }
#disc_e5, #cell_e5, #eval_e5 { top: 152px; left: 152px; }
#disc_f5, #cell_f5, #eval_f5 { top: 152px; left: 190px; }
#disc_g5, #cell_g5, #eval_g5 { top: 152px; left: 228px; }
#disc_h5, #cell_h5, #eval_h5 { top: 152px; left: 266px; }
#disc_a6, #cell_a6, #eval_a6 { top: 190px; left: 0px; }
#disc_b6, #cell_b6, #eval_b6 { top: 190px; left: 38px; }
#disc_c6, #cell_c6, #eval_c6 { top: 190px; left: 76px; }
#disc_d6, #cell_d6, #eval_d6 { top: 190px; left: 114px; }
#disc_e6, #cell_e6, #eval_e6 { top: 190px; left: 152px; }
#disc_f6, #cell_f6, #eval_f6 { top: 190px; left: 190px; }
#disc_g6, #cell_g6, #eval_g6 { top: 190px; left: 228px; }
#disc_h6, #cell_h6, #eval_h6 { top: 190px; left: 266px; }
#disc_a7, #cell_a7, #eval_a7 { top: 228px; left: 0px; }
#disc_b7, #cell_b7, #eval_b7 { top: 228px; left: 38px; }
#disc_c7, #cell_c7, #eval_c7 { top: 228px; left: 76px; }
#disc_d7, #cell_d7, #eval_d7 { top: 228px; left: 114px; }
#disc_e7, #cell_e7, #eval_e7 { top: 228px; left: 152px; }
#disc_f7, #cell_f7, #eval_f7 { top: 228px; left: 190px; }
#disc_g7, #cell_g7, #eval_g7 { top: 228px; left: 228px; }
#disc_h7, #cell_h7, #eval_h7 { top: 228px; left: 266px; }
#disc_a8, #cell_a8, #eval_a8 { top: 266px; left: 0px; }
#disc_b8, #cell_b8, #eval_b8 { top: 266px; left: 38px; }
#disc_c8, #cell_c8, #eval_c8 { top: 266px; left: 76px; }
#disc_d8, #cell_d8, #eval_d8 { top: 266px; left: 114px; }
#disc_e8, #cell_e8, #eval_e8 { top: 266px; left: 152px; }
#disc_f8, #cell_f8, #eval_f8 { top: 266px; left: 190px; }
#disc_g8, #cell_g8, #eval_g8 { top: 266px; left: 228px; }
#disc_h8, #cell_h8, #eval_h8 { top: 266px; left: 266px; }






.x_corner {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  position: absolute;
  width: 5px; /* 점 크기 조정 */
  height: 5px; /* 점 크기 조정 */
  background-color:black;
  border-radius: 50%; /*  원형으로 */
}



#dot_lu { top: calc(var(--cell) * 2 - 3px); left: calc(var(--cell) * 2 - 3px); }
#dot_ru { top: calc(var(--cell) * 2 - 3px); left: calc(var(--cell) * 6 - 3px); }
#dot_ld { top: calc(var(--cell) * 6 - 3px); left: calc(var(--cell) * 2 - 3px); }
#dot_rd { top: calc(var(--cell) * 6 - 3px); left: calc(var(--cell) * 6 - 3px); }





#check {
  float: left;
  position: relative;
  width: 14px;
}

#repeat {
  position: absolute;
  margin: 0px;
  padding:0px;
  top:  3px;
  left: 0px;
  width:  14px;
  height: 14px;
  cursor: pointer;
}

#checkPM {
  position: absolute;
  top:  25px;
  left: 0px;
}

#checkPE {
  position:absolute;
  top: 45px;
  left: 0px;
}

#PutMark {
  width: 16px;
  height:16px;
}

.putmarkdot {
  padding-top:10px;
}

#PutEnable {
  width: 16px;
  height:16px;
}

#control {
  float: right;
  width: 317px;
  background-color: #bdb76b;
}

#score_panel {
  clear: both;
  position: relative;

  font-size:22px;
  height:27px;
}

#BlackFrame {
  position: absolute;
  top: 2px;
  left:1px;
  border-style: solid;
  border-width: 2px;
  border-color: #bdb76b;
  width: 45px;
  height:21px;
  line-height:18px;
}

#BlackStone {
  text-align: left;
  color: black;
  font-size:20px;
}

#BlackCount {
  text-align: left;
  color: white;
}

#WhiteFrame {
  position: absolute;
  top: 2px;
  left:60px;
  border-style: solid;
  border-width: 2px;
  border-color: #bdb76b;
  width: 45px;
  height:21px;
  line-height:18px;
}

#WhiteStone {
  text-align: left;
  color: white;
    font-size:20px;
}

#WhiteCount {
  text-align: left;
  color: black;

}

#NextMove {
  position: absolute;
  top:  4px;
  left: 125px;
  border-style: solid;
  border-width: 0px;
  border-color: #bdb76b;
  text-align: left;
  color: black;
  width: 85px;
  height:18px;
  line-height:18px;
}

#MoveNo {
  margin-left: 0;
  padding: 0px;
  text-align: left;
  color: inherit;
}

#PutNext {
  position: absolute;
  top:  6px;
  left: 178px;
  width:  14px;
  height: 14px;
}

#NextCheck {
  position: absolute;
  top: 2px;
  left: 195px;
  line-height:20px;
}



#Loop {
  position: absolute;
  top:  -1px;
  left: 242px;
  color: crimson;
}

#KifuText {
  position: absolute;
  top:  2px;
  left: 1px;
  width:230px;
  height:20px;

  font-size:20px;
}

#SetKifu {
  position: absolute;
  top:  2px;
  left: 237px;
  width: 62px;
  height:25px;

  font-size:16px;
}

#op_button {
  clear: both;
  position: relative;

}
#solve {
  margin-top: 1px;
  position: absolute;
  top:  0px;
  left: 256px;
  width:61px;
  height:27px;
  font-size:16px;
}

#first { width:65px; height:33px; font-size:20px; }
#prev  { width:65px; height:33px; font-size:20px; }
#btnAnalyze  { width:42px; min-width:42px; height:33px; font-size:20px; }
#next  { width:65px; height:33px; font-size:20px; }
#last  { width:65px; height:33px; font-size:20px; margin-right:0;}

#solve,
#first,
#prev,
#game,
#next,
#last {
  background-color: #e7e4be;
  border: 1px solid #9A9169;
  border-radius: 7px;
  color: #222222;
  display: inline-block;
  padding: 3px 0px 2px 0px;
  font-weight: normal;
  text-decoration: none;
  text-shadow: 0px 1px 0 rgba(255,255,255,0.4);
  outline: none;
}

#solve:active,
#first:active,
#prev:active,
#kifu:active,
#next:active,
#last:active {
  background-color: #D6E3AD;
  border: 1px solid #7A7179;
}

#solve:disabled,
#first:disabled,
#prev:disabled,
#kifu:disabled,
#next:disabled,
#last:disabled {
  color: #999999;
  background-color: #D6D3AD;
  border: 1px solid #BDB76B;
}
#board [id^="eval_"] {
  transition: opacity 0.2s ease;
}

/* Keep the full viewer within the 670px fullscreen baseline. */
#anSvg {
  display: block;
  height: 120px;
}

/* 모바일앱 전체화면(FlipSightApp UA + ovl=1)에서만 그래프를 키운다(120→160). 웹 전체화면은 제외.
   viewBox 높이(const.js H·ocviewer.html)도 같은 비율(150:250=120:200=0.6)로 키워 좌표 숫자 왜곡을 막는다.
   #ocvStatisticsPanel 이 anPanel(inset:0)을 채우므로 통계 리스트도 함께 커진다. 인라인·웹은 120px 그대로. */
body.ocv-app-graph-tall #anSvg { height: 150px; }

/* Evaluate OFF: 결과 그래프/수치는 노출하지 않고 동일한 높이의 비활성 골격만 남긴다. */
#anPanel.is-evaluate-disabled {
  position: relative;
}
#anPanel.is-evaluate-disabled #anSvg {
  opacity: .38;
  filter: grayscale(1);
}
#anPanel.is-evaluate-disabled #anPath,
#anPanel.is-evaluate-disabled #anDots,
#anPanel.is-evaluate-disabled #branchLayer {
  display: none;
}
#anPanel.is-evaluate-disabled #anFooter {
  opacity: .45;
  filter: grayscale(1);
}
#anPanel.is-evaluate-disabled #anFooter .an-report-value {
  color: transparent !important;
  position: relative;
}
#anPanel.is-evaluate-disabled #anFooter .an-report-value::after {
  content: "--";
  color: #111827;
  position: absolute;
  inset: 0 auto auto 0;
}

#anFooter .an-summary-line {
  min-height: 20px;
}

/* Toolbar row balancing: keep equal gaps without spacer-created empty slots. */
body:not(.embed-viewer) #op_button.toolbar{
  justify-content:flex-start;
  column-gap:4px;
  border:0;
  box-shadow:none;
}

body:not(.embed-viewer) #op_button.toolbar #prev,
body:not(.embed-viewer) #op_button.toolbar #next{
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:36px;
}

body:not(.embed-viewer) #op_button.toolbar .tooltip_left{
  flex:0 0 42px;
  margin-left:0;
}

body:not(.embed-viewer) #op_button.toolbar #btnAnalyze{
  width:42px;
  min-width:42px;
  height:36px;
}

body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-import,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-my-games,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-evaluate{
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  display:flex;
}

body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-import > .tooltip,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-my-games > .tooltip{
  width:100%;
  min-width:0;
}

body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-evaluate > label{
  display:flex;
  width:100%;
  min-width:0;
}

body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-import .icon-toggle,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-my-games .icon-toggle,
body:not(.embed-viewer) #op_button.toolbar > .ocv-toolbar-evaluate .icon-toggle{
  width:100%;
  min-width:0;
}

body:not(.embed-viewer) #op_button.toolbar > .tooltip-more{
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  display:flex;
}

body:not(.embed-viewer) #op_button.toolbar > .tooltip-more > .icon-toggle{
  width:100%;
  min-width:0;
}

/* Embed toolbar uses a smaller button set than the full viewer. */
body.embed-viewer #op_button.toolbar{
  justify-content:flex-start;
}

body.embed-viewer #op_button.toolbar #prev,
body.embed-viewer #op_button.toolbar #next{
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:36px;
}

body.embed-viewer #op_button.toolbar .tooltip_left{
  flex:0 0 42px;
  margin-left:0;
}

body.embed-viewer #op_button.toolbar #btnAnalyze{
  width:42px;
  min-width:42px;
  height:36px;
}

body.embed-viewer #op_button.toolbar > .share-wrap,
body.embed-viewer #op_button.toolbar > .tooltip{
  flex:0 0 42px;
}

/* ── Current-position game statistics ─────────────────────────────────── */
#anPanel {
  position: relative;
}

#anPanel.ocv-statistics-active #anSvg,
#anPanel.ocv-statistics-active #anFooter {
  visibility: hidden;
}

#ocvStatisticsPanel {
  --ocv-bg: #fff;
  --ocv-surface: #f7f7f7;
  --ocv-surface-2: #eef0f3;
  --ocv-hover: #eef6ff;
  --ocv-text: #111827;
  --ocv-muted: #667085;
  --ocv-border: #d7dce5;
  --ocv-card-border: #f0f0f0;
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ocv-text, #111827);
  background: var(--ocv-bg, #fff);
}

#ocvStatisticsPanel[hidden] {
  display: none;
}

/* 앱 전체화면은 iframe 자체가 하단 조작 패널 바로 위에서 끝난다. 보드/플레이어의
   기존 확대율은 유지하고 통계 패널만 iframe 바닥까지 넘겨, 목록 스크롤 영역이
   남은 세로 공간을 모두 사용하게 한다. */
body.ocv-app-fullscreen-shell #anPanel.ocv-statistics-active #ocvStatisticsPanel {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--ocv-statistics-fullscreen-height, 100%);
}

.ocv-statistics-head {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 1px 5px 3px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border-bottom: 1px solid var(--ocv-border, #d7dce5);
  box-sizing: border-box;
}

#ocvStatisticsCount {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ocv-muted, #667085);
}

.ocv-statistics-head-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.ocv-statistics-basis {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ocv-muted, #667085);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.ocv-statistics-basis[hidden] {
  display: none !important;
}

.ocv-statistics-basis-buttons {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--ocv-border, #d7dce5);
  border-radius: 6px;
  background: var(--ocv-surface, #f4f6f9);
}

.ocv-statistics-basis button {
  min-width: 24px;
  height: 22px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  color: var(--ocv-muted, #667085);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ocv-statistics-basis button + button {
  border-left: 1px solid var(--ocv-border, #d7dce5);
}

.ocv-statistics-basis button.is-selected {
  color: #fff;
  background: #111827;
}

.ocv-statistics-source {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 1px;
  border: 1px solid var(--ocv-border, #d7dce5);
  border-radius: 7px;
  background: var(--ocv-surface, #f4f6f9);
}

.ocv-statistics-source button {
  min-width: 50px;
  height: 22px;
  padding: 0 5px;
  border: 0;
  border-radius: 5px;
  color: var(--ocv-muted, #667085);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.ocv-statistics-source button.is-selected {
  color: #fff;
  background: #111827;
}

.ocv-statistics-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.ocv-statistics-game {
  width: 100%;
  padding: 5px 14px;
  display: block;
  border: 0;
  border-bottom: 1px solid var(--ocv-card-border, #f0f0f0);
  color: var(--ocv-text, #111827);
  background: var(--ocv-bg, #fff);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.ocv-statistics-game:nth-child(even) {
  background: var(--ocv-surface, #f7f7f7);
}

.ocv-statistics-game:active {
  filter: brightness(.97);
}

.ocv-statistics-game-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ocv-statistics-game-meta {
  margin-bottom: 2px;
  color: var(--ocv-muted, #8a93a3);
  font-size: 11px;
  font-weight: 600;
}

.ocv-statistics-game-type {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocv-statistics-game-badge {
  display: inline-block;
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  color: #6b7280;
  background: #eef0f3;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.ocv-statistics-game-badge.is-training {
  color: #5b21b6;
  background: #ede9fe;
}

.ocv-statistics-game-meta time {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12px;
  white-space: nowrap;
}

.ocv-statistics-game-main {
  min-height: 19px;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0 8px;
  font-size: 14px;
}

.ocv-statistics-result {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ocv-statistics-result strong {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ocv-statistics-result strong.is-win,
.ocv-statistics-result strong.is-draw,
.ocv-statistics-result strong.is-loss {
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 800;
}

.ocv-statistics-result strong.is-win {
  color: #166534;
  background: #dcfce7;
}

.ocv-statistics-result strong.is-draw {
  color: #854d0e;
  background: #fef9c3;
}

.ocv-statistics-result strong.is-loss {
  color: #991b1b;
  background: #fee2e2;
}

.ocv-statistics-player {
  display: flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--ocv-text, #111827);
}

.ocv-statistics-player b {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.ocv-statistics-rating {
  flex: 0 0 auto;
  margin: 0 3px;
  color: var(--ocv-muted, #8a93a3);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
}

.ocv-statistics-rating.is-rating-red { color: #e53935; }
.ocv-statistics-rating.is-rating-orange { color: #fb8c00; }
.ocv-statistics-rating.is-rating-purple { color: #8e24aa; }
.ocv-statistics-rating.is-rating-blue { color: #1e88e5; }
.ocv-statistics-rating.is-rating-green { color: #43a047; }
.ocv-statistics-rating.is-rating-gold { color: #d4a017; }
.ocv-statistics-rating.is-rating-gray { color: #8a93a3; }

@media (hover: hover) {
  .ocv-statistics-game:hover {
    background: var(--ocv-hover, #eef6ff);
  }
}

@media (hover: none), (pointer: coarse) {
  .ocv-statistics-game-type { font-size: 12px; }
  .ocv-statistics-game-meta time { font-size: 13px; }
  .ocv-statistics-player b,
  .ocv-statistics-rating,
  .ocv-statistics-result strong { font-size: 15px; }
}

html.fs-app-theme-dark .ocv-statistics-game-badge {
  color: var(--fs-app-text-2, #cbd5e1);
  background: var(--fs-app-surface-3, #253247);
}

html.fs-app-theme-dark .ocv-statistics-game-badge.is-training {
  color: #ddd6fe;
  background: #3b2a63;
}

html.fs-app-theme-dark .ocv-statistics-result strong.is-win {
  color: var(--fs-result-win-text, #4ade80);
  background: var(--fs-result-win-bg, rgba(34, 197, 94, .18));
}

html.fs-app-theme-dark .ocv-statistics-result strong.is-draw {
  color: var(--fs-result-draw-text, #fde047);
  background: var(--fs-result-draw-bg, rgba(234, 179, 8, .18));
}

html.fs-app-theme-dark .ocv-statistics-result strong.is-loss {
  color: var(--fs-result-loss-text, #f87171);
  background: var(--fs-result-loss-bg, rgba(239, 68, 68, .18));
}

/* app-theme.css의 범용 small 색상보다 우선하여 My Games와 같은 레이팅 팔레트를 유지한다. */
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-red {
  color: var(--fs-rating-red, #ef5b5b) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-orange {
  color: var(--fs-rating-orange, #fb923c) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-purple {
  color: var(--fs-rating-purple, #c084fc) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-blue {
  color: var(--fs-rating-blue, #60a5fa) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-green {
  color: var(--fs-rating-green, #4ade80) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-gold {
  color: var(--fs-rating-gold, #facc15) !important;
}
html.fs-app-theme-dark .ocv-statistics-rating.is-rating-gray {
  color: var(--fs-rating-unofficial, #a8b4c4) !important;
}

.ocv-statistics-message {
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ocv-muted, #667085);
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
}

.ocv-statistics-message a {
  margin-left: 4px;
  color: #2f6ee5;
  font-weight: 700;
}

.ocv-statistics-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ocv-border, #d7dce5);
  border-top-color: #2f6ee5;
  border-radius: 50%;
  animation: ocv-statistics-spin .7s linear infinite;
}

@keyframes ocv-statistics-spin {
  to { transform: rotate(360deg); }
}

.ocv-stat-cell {
  position: absolute;
  z-index: 310;
  width: var(--cell);
  height: var(--cell);
  color: #fff;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  pointer-events: none;
  box-sizing: border-box;
}

.ocv-stat-count {
  position: absolute;
  left: 2px;
  right: 2px;
  top: calc(50% + 5px);
  transform: translateY(-50%);
  max-width: calc(var(--cell) - 4px);
  margin: 0 auto;
  font-size: calc(var(--cell) * var(--ocv-stat-count-scale, .31) + 2px);
  font-weight: 800;
  white-space: nowrap;
}

.ocv-stat-cell.is-eval-size .ocv-stat-count {
  font-size: 18px;
}

.ocv-stat-cell.is-eval-size-minus-one .ocv-stat-count {
  font-size: 17px;
}

.ocv-stat-rate {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 68%;
  margin-top: 4px;
  font-size: calc(var(--cell) * var(--ocv-stat-rate-scale, .20));
  font-weight: 700;
  white-space: nowrap;
}

.ocv-stat-win {
  position: absolute;
  left: 2px;
  right: 2px;
  top: calc(24% + 2px);
  font-size: calc(var(--cell) * .17);
  font-weight: 700;
  white-space: nowrap;
}

/* 통계 ON 중에는 대국자 개인 정보(사진·국기·레이팅·시간·인증배지)를 숨긴다.
   국면(수순) 통계 열람 화면이라 특정 대국자 정보는 불필요/혼란스럽다. 디스크 수 배지는 게임 상태라 유지.
   DOM 은 안 건드리므로 통계 OFF 시 클래스 제거만으로 원상 복원된다(이름은 JS 로 Black/White 초기화). */
html.ocv-statistics-on #BlackPhotoSlot,
html.ocv-statistics-on #WhitePhotoSlot,
html.ocv-statistics-on #BlackFlagSlot,
html.ocv-statistics-on #WhiteFlagSlot,
html.ocv-statistics-on #BlackRating,
html.ocv-statistics-on #WhiteRating,
html.ocv-statistics-on #BlackTimer,
html.ocv-statistics-on #WhiteTimer,
html.ocv-statistics-on #BlackVerifiedSlot,
html.ocv-statistics-on #WhiteVerifiedSlot {
  display: none !important;
}

html.ocv-statistics-on .oc_eval {
  z-index: 320;
  padding: 2px 2px 0 0;
  font-size: calc(var(--cell) * .24);
  line-height: 1;
  text-align: right;
  box-sizing: border-box;
}

html.ocv-statistics-on .oc_eval .eval-score-text {
  position: static;
  font-size: inherit;
  line-height: inherit;
}

html.ocv-statistics-on .oc_eval .eval-badge-icon {
  width: calc(var(--cell) * .23);
  height: calc(var(--cell) * .23);
}

html.fs-app-theme-dark #ocvStatisticsPanel {
  --ocv-bg: var(--fs-app-surface, #151d2a);
  --ocv-surface: var(--fs-app-surface-2, #1c2635);
  --ocv-surface-2: var(--fs-app-surface-3, #253247);
  --ocv-hover: var(--fs-app-surface-3, #253247);
  --ocv-text: var(--fs-app-text, #f1f5f9);
  --ocv-muted: var(--fs-app-text-2, #cbd5e1);
  --ocv-border: var(--fs-app-border, #3a414c);
  --ocv-card-border: #282f39;
}

html.fs-app-theme-dark .ocv-statistics-source button.is-selected {
  color: #fff;
  background: #2b65d9;
}

html.fs-app-theme-dark .ocv-statistics-basis button.is-selected {
  color: #fff;
  background: #2b65d9;
}

html.fs-app-theme-dark .ocv-statistics-message a {
  color: #86b8ff;
}