/* Global body styling */
body {
  margin: 0;
  font-family: sans-serif;
  background: #424046;
  color: #eee;
  overflow: hidden;
}

html, body {
  overflow: hidden;   /* disables scrolling */
  height: 100%;       /* ensures body fills viewport */
  touch-action: none; /* disables touch gestures like scroll/pinch */
  user-select: none; 
}
#menu {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 220px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  z-index: 1000;
  
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*#menu button,*/
/*#menu label {*/
/* display: flex; */
/* align-items: center;*/
/*  justify-content: flex-start;*/
/*	background-color:transparent;*/
/*  width: 100%;*/
/*  text-align: left;*/
/*  padding: 8px;*/
/*  border: none;*/
/*  border-radius: 4px;*/
/*  cursor: pointer;*/
/*  font-size: 14px;*/
/*  color:black;*/
/*}*/

#menu button,
#menu label {
border: none;
	color:black;
	padding-top:8px;
	padding-bottom:8px;
	font-size: 14px;
	background-color:transparent;
  display: flex;           /* flex container */
  align-items: center;
  justify-content: flex-start;
  width: 100%;             /* same width */
}

#menu button:hover,
#menu label:hover {
  background: #e0e0e0;
}

#menu input[type="number"] {
  width: 70px;
  margin-left: 5px;
}

/* Toolbar with mirror buttons */
.toolbar {

	display:flex;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1000;
  padding:5px;
  align-items:center;
  justify-content:center;
  
  
}

/* Style for buttons and labels inside toolbar */
.toolbar button,
.toolbar label {
	margin :2px 2px 2px 2px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  background: #28262a;
  color: #fff;
  border: none;
  border-radius: 3px;
  transition: background 0.2s;
}

/* Hover effect */
.toolbar button:hover,
.toolbar label:hover {
  background: #666;
}

/* Main board */
.board {
  width: 1280px;
  height: 1280px;
  position: relative;
  overflow: hidden;
  background-color: #5e5c64;
  transform-origin: 0 0;
}
/* Image container */

.board-resize{
position:absolute;width:12px;height:12px;background:blue;z-index:1000;cursor:nwse-resize;bottom:0;right:0;
}
.image-box {
  position: absolute;
/*  border: 2px solid transparent;*/
  background-color: transparent;
  display: inline-block;
  will-change: transform; /* hint GPU acceleration */
}

/* Highlight when selected */
.image-box.selected {
  outline: 2px solid yellow;
  outline-offset: -2px; /* moves outline inward */
}


/* Image itself */
.image-box img {
  display: block;
  max-width: none;   /* allow free scaling */
  max-height: none;
  pointer-events: none; /* prevent ghost drag */
}

/* Prevent text selection globally */
.noselect {
  user-select: none;
}

/* Resize handle (hidden by default) */

.resize-handle {
  display: none;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 2px solid #000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: nwse-resize; /* or grab, since it's centered */
}

/* Rotate handle (top center) */
.rotate-handle {
  display: none;
  width: 32px;
  height: 32px;
  background: #0ff;
  border: 2px solid #000;
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  cursor: grab;
}

/* Show handles only when selected */
.image-box.selected .resize-handle,
.image-box.selected .rotate-handle {
  display: block;
}
input[type="number"]{width:40px; appearance: textfield; }

/* Bottom-left button */
.nav-toggle {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 1000;
  user-select: none; 
}

.nav-toggle button {
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  background: #28262a;
  color: #fff;
  border: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.nav-toggle button:hover {
  background: #666;
}

/* Centered overlay controls */
.overlay-controls {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
  
}

.overlay-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(68,68,68,0.85);
  color: #fff;
  border-radius: 50%;
  cursor: grab;
  font-size: 22px;
  transition: background 0.2s;
}

.overlay-btn:hover {
  background: rgba(102,102,102,0.9);
}

.import-btn {
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  background: #444;
  color: #fff;
  border: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.import-btn:hover {
  background: #666;
}

/*@media (max-width: 600px) {*/
/*.nav-toggle {display:block;*/
/*}*/