.pcg-wrap{max-width:900px;margin:1rem 0; --pcg-sq:40px; overflow-x:auto;}

.pcg-multirounds{display:flex;flex-direction:column;gap:0}

.pcg-sep{
  height:1px;
  background:#e7e7e7;
  margin:16px 0;
}

/* Round header + selector */
.pcg-roundhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px 0;
}
.pcg-roundtitle{
  font-weight:700;
  font-size:15px;
  line-height:1.2;
}
.pcg-roundhead .pcg-selectwrap{
  margin:0;
  min-width:260px;
  flex:0 0 auto;
}

/* Viewer layout */
.pcg-grid{
  display:grid;
  grid-template-columns:calc(var(--pcg-sq) * 8) minmax(0, 1fr);
  gap:14px;
  align-items:start;
}

.pcg-board{
  display:grid;
  grid-template-columns:repeat(8,var(--pcg-sq));
  grid-template-rows:repeat(8,var(--pcg-sq));
  width: calc(var(--pcg-sq) * 8);
  height: calc(var(--pcg-sq) * 8);
  border:1px solid #222;
  border-radius:10px;
  overflow:hidden;
  background:#0000;
  position:relative;
  z-index:1;
}

.pcg-panel{
  border:1px solid #e2e2e2;
  border-radius:10px;
  padding:10px;
  position:relative;
  z-index:2;
  min-width:0;
}

.pcg-sq{display:flex;align-items:center;justify-content:center;user-select:none;position:relative}
.pcg-w{background:#f0d9b5}
.pcg-b{background:#b58863}

.pcg-piece{
  width: calc(var(--pcg-sq) * 0.9);
  height: calc(var(--pcg-sq) * 0.9);
  object-fit: contain;
  pointer-events: none;
}

.pcg-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
  touch-action: manipulation;
}
.pcg-btn{
  border:1px solid #ccc;
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-size:14px;
  pointer-events:auto;
}
.pcg-btn:hover{background:#f6f6f6}

/* Selector */
.pcg-select{
  width:100%;
  padding:6px 10px;
  border:1px solid #ccc;
  border-radius:10px;
  background:#fff;
  font-size:14px;
}

/* Header/info block */
.pcg-meta{font-size:13px;color:#222;margin-bottom:10px;min-height:16px}
.pcg-meta-inner{margin-top:0}
.pcg-headerbox{display:flex;flex-direction:column;gap:6px}
.pcg-hrow{line-height:1.45}
.pcg-hrow.pcg-title{font-weight:700;font-size:14px;margin-bottom:2px}

.pcg-tags{display:flex;flex-direction:column;gap:6px}
.pcg-tagrow code{
  background:#f6f6f6;
  padding:2px 6px;
  border-radius:8px;
  font-size:12px;
  margin-right:6px;
}
.pcg-fenval{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  word-break:break-word;
}

/* Moves */
.pcg-moves{max-height:340px;overflow:auto;font-size:14px;line-height:1.55}
.pcg-moveno{color:#666;margin-right:6px}
.pcg-moves .pcg-move{cursor:pointer;padding:2px 6px;border-radius:8px;display:inline-block;margin:2px 2px}
.pcg-moves .pcg-move:hover{background:#f0f0f0}
.pcg-moves .pcg-move.pcg-active{background:#003366;color:#fff}

@media (max-width:900px){
  .pcg-grid{grid-template-columns:1fr}
  .pcg-board{margin:0 auto}
  .pcg-roundhead{
    flex-direction:column;
    align-items:stretch;
  }
  .pcg-roundhead .pcg-selectwrap{
    min-width:0;
    width:100%;
  }
}