/* ゲートパレット・回路グリッド・観測ボタン */

#board:focus-visible { outline: 1px solid var(--fg-dim);outline-offset: 2px; }

#booth {
  display: flex;
  gap: 14px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel2));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  align-items: stretch;
  /* フリー(ゲート7種=パレット4段)でも収まる高さで固定し、コース切替で伸縮しない */
  min-height: 308px;
}
#booth.locked #board, #booth.locked #palette {
  opacity: 0.55;
  pointer-events: none;
}

.booth-label {
  font-size: 0.72rem;
  color: var(--fg-dim);
  margin-bottom: 6px;
  text-align: center;
}

/* パレット(コースでゲート数が変わっても幅を固定し、盤面の大きさを一定に保つ) */
#palette-wrap { flex: 0 0 112px; }
#palette {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  justify-items: center;
  align-content: start;
}

.gate-token {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.05rem;
  color: #10081e;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  position: relative;
}
.palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.palette-caption {
  font-size: 0.55rem;
  color: var(--fg-dim);
  text-align: center;
  line-height: 1.1;
  max-width: 56px;
}
/* CX・CCX は文字数が多いので少し小さく */
.gate-token[data-gate="CNOT"], .gate-token[data-gate="CCNOT"] {
  font-size: 0.78rem;
  letter-spacing: -0.02em;
}
.gate-token .glyph {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .gate-token .glyph { transition: none; }
}
.gate-token .theta {
  position: absolute;
  bottom: -2px;
  font-size: 0.5rem;
  font-weight: normal;
  color: #10081e;
}
.palette-token.selected {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.gate-token.dragging { opacity: 0.35; }
.gate-token.multi-selected {
  outline: 2px dashed #fff;
  outline-offset: 2px;
}
.select-box {
  position: absolute;
  z-index: 6;
  border: 1.5px dashed var(--accent2);
  background: rgba(56, 198, 255, 0.1);
  border-radius: 6px;
  pointer-events: none;
}
#drag-ghost .gate-token { opacity: 0.9; }

#drag-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.1);
}

/* 回路グリッド */
#board-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}
#board {
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--rows, 3), var(--row-height, 52px));
  gap: 4px;
  min-width: 640px;
  padding-left: 34px;
}
.board-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 15), 1fr);
  gap: 4px;
  position: relative;
}
.row-label {
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--fg-dim);
}
.cell {
  position: relative;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed #3a2a6055;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  touch-action: none;
}
/* 配線(横線) */
.cell::before {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  top: 50%;
  height: 2px;
  background: #4a3a70;
  z-index: 0;
}
.cell.drop-hint {
  border-color: var(--accent2);
  background: rgba(56, 198, 255, 0.12);
}
.cell .gate-token {
  width: 38px;
  height: 38px;
  z-index: 1;
  font-size: 0.95rem;
}
/* CX/CCX の制御マーカー C(すべて同サイズの◯) */
.cell .cnot-ctrl {
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid #7dff6a;
  color: #7dff6a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.85rem;
  line-height: 1;
  background: var(--bg-panel);
}
.cnot-link {
  position: absolute;
  width: 2.5px;
  background: #7dff6a;
  z-index: 0;
  pointer-events: none;
}
.cnot-link.g-link { background: #ff6af0; }

/* コントロール */
#controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
#measure-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid #ffd700;
  background: radial-gradient(circle at 35% 30%, #ffe680, #e6a817 65%, #a86f00);
  color: #241500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(255, 200, 60, 0.45), 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s;
}
#measure-btn:hover { transform: scale(1.05); }
#measure-btn:active { transform: scale(0.95); }
#measure-btn .m { font-size: 1.7rem; font-weight: bold; line-height: 1; }
#measure-btn .label { font-size: 0.65rem; }
#release-btn {
  border: 2px solid var(--accent2);
  background: rgba(56, 198, 255, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  line-height: 1.3;
}
#reset-btn {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--fg-dim);
  cursor: pointer;
}
#reset-btn:hover { color: var(--fg); }

.board-help {
  margin-top: 8px;
  font-size: 0.68rem;
  color: var(--fg-dim);
  line-height: 1.6;
}
.board-help strong { color: var(--fg); font-weight: normal; }
.board-help .sym-target,
.board-help .sym-ctrl { color: #7dff6a; font-weight: bold; }

@media (max-width: 720px) {
  #booth { flex-direction: column; min-height: 0; }
  #palette-wrap { flex: none; }
  #palette { display: flex; flex-wrap: wrap; justify-content: center; }
  #controls { flex-direction: row; }
  #board { min-width: 560px; }
}