* { box-sizing: border-box; touch-action: manipulation; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f5f5f5; margin: 0; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; }
h2 { text-align: center; color: #333; }
.hint { text-align: center; color: #666; font-size: 0.9em; margin-bottom: 20px; }

.card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 20px; }
.hidden { display: none; }

button { width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-bottom: 10px; transition: opacity 0.2s; }
button:active { opacity: 0.7; }
.btn-primary { background: #007bff; color: white; }
.btn-secondary { background: #e2e6ea; color: #333; width: 100%; display: inline-block; }
.btn-success { background: #28a745; color: white; }
.btn-warning { background: #ffc107; color: #333; }

.controls-top { display: flex; justify-content: space-between; margin-bottom: 10px; }
.controls-bottom { margin-top: 15px; border-top: 1px solid #eee; pt: 15px; }
.color-control { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.color-control input { width: 50px; height: 40px; border: none; margin-left: 10px; }

.canvas-wrapper {
    position: relative;
    width: 100%;
    height: 60vh; /* 或者固定高度 */
    overflow: hidden; /* 防止旋转后图片溢出容器 */
    background-color: #f0f0f0;
    display: flex;       /* 使用 Flex 布局让图片天然居中 */
    justify-content: center;
    align-items: center;
}

#base-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease-out; /* 增加一点过渡效果，使旋转更平滑 */
    transform-origin: center center;     /* 确保围绕中心旋转 */
    user-select: none;
    pointer-events: none; /* 防止图片本身响应拖拽，让事件穿透到 wrapper 或 compass */
}

/* 罗盘层需要绝对定位，覆盖在图片上 */
.compass-layer {
    position: absolute;
    top: 0;
    left: 0;
    /* 初始位置由 JS 控制，这里不设具体 top/left 值，或者设为 50% 配合 transform */
    /* 根据你的 JS 逻辑 resetCompass，它直接设置了 style.left/top，所以这里可以留空 */
    cursor: move;
    touch-action: none; /* 防止触摸时触发浏览器默认滚动 */
    z-index: 10;
}

.compass-layer img {
    display: block;
    max-width: 100px; /* 限制罗盘初始大小 */
    pointer-events: none; /* 让鼠标事件穿透图片本身，作用于 div */
}

/* 罗盘图片：自适应原始尺寸，但限制最大不超过屏幕 */
#compass-img {
    display: block;
    
    /* 核心策略：
       1. 优先保持原始尺寸 (width: auto)
       2. 但如果原始尺寸太大，则限制最大宽度为屏幕的 80%
       3. 高度同理，确保完整显示在屏幕内
    */
    max-width: 80vw;  /* 最大不超过视口宽度的 80% */
    max-height: 80vh; /* 最大不超过视口高度的 80% */
    width: auto;      /* 宽度自适应 */
    height: auto;     /* 高度自适应 */
    
    object-fit: contain; /* 保持比例 */
    pointer-events: none; /* 点击穿透到父容器 .compass-layer */
    
    /* 修复模糊：确保高清屏渲染清晰 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}