.ct{
  --panel: rgba(255,255,255,0.0);
  --panelBorder: rgba(0,0,0,0.12);
  --muted: rgba(0,0,0,0.65);

  --sqLight:#f0d9b5;
  --sqDark:#b58863;
  --arrow: rgba(255,215,0,0.78);

  position: relative;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ct-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--panel);
  border:1px solid var(--panelBorder);
  border-radius:14px;
  padding:10px 12px;
}

.ct-status{
  font-size:14px;
  color:var(--muted);
  line-height:1.2;
  user-select:none;
}

.ct-retry{
  appearance:none;
  border:1px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.04);
  color:inherit;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
}
.ct-retry:hover{filter:brightness(1.06)}

.ct-boardShell{
  width:100%;
  max-width:100%;
  border-radius:0;
  overflow:hidden;
  position:relative;

  touch-action:none;
  -ms-touch-action:none;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
}
.ct-boardShell *{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

.ct-board{
  width:100%;
  max-width:100%;
  position:relative;
}

/* chessboard-js square classnames */
.ct .white-1e1d7{background-color:var(--sqLight)!important}
.ct .black-3c85d{background-color:var(--sqDark)!important}

/* If you later add SVG arrows with class .ai-arrow */
.ct .ai-arrow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.ct .ai-arrow .shaft,
.ct .ai-arrow .head,
.ct .ai-arrow .tailCap{fill:var(--arrow)}