/* ======================== 杀手数独专用样式 ======================== */

/* 杀手数独笼子样式 */
.killer-cage {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.killer-cage-border {
    position: absolute;
    background-color: #344861;
    z-index: 2;
}

.killer-cage-border.horizontal {
    height: 2px;
    left: 0;
    right: 0;
}

.killer-cage-border.vertical {
    width: 2px;
    top: 0;
    bottom: 0;
}

.killer-cage-border.top {
    top: 0;
}

.killer-cage-border.bottom {
    bottom: 0;
}

.killer-cage-border.left {
    left: 0;
}

.killer-cage-border.right {
    right: 0;
}

/* 杀手数独笼子数字显示 */
.killer-cage-sum {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 10px;
    font-weight: bold;
    color: #344861;
    background-color: white;
    padding: 1px 3px;
    border-radius: 2px;
    z-index: 3;
    pointer-events: none;
    min-width: 12px;
    text-align: center;
    line-height: 1.2;
}

/* 杀手数独单元格特殊状态 */
.sudoku-cell.killer-cell {
    position: relative;
}

.sudoku-cell.killer-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #344861;
    z-index: 1;
    pointer-events: none;
}

/* 杀手数独选中状态 */
.sudoku-cell.killer-cell.selected {
    background-color: #E3F2FD;
}

.sudoku-cell.killer-cell.selected::before {
    border-color: #2196F3;
    border-width: 3px;
}

/* 杀手数独高亮状态 */
.sudoku-cell.killer-cell.highlighted {
    background-color: #FFF3E0;
}

.sudoku-cell.killer-cell.highlighted::before {
    border-color: #FF9800;
}

/* 杀手数独错误状态 */
.sudoku-cell.killer-cell.error {
    background-color: #FFEBEE;
}

.sudoku-cell.killer-cell.error::before {
    border-color: #F44336;
}

/* 杀手数独完成状态 */
.sudoku-cell.killer-cell.completed {
    background-color: #E8F5E8;
}

.sudoku-cell.killer-cell.completed::before {
    border-color: #4CAF50;
}

/* 杀手数独笔记模式 */
.sudoku-cell.killer-cell.notes-mode {
    background-color: #F3E5F5;
}

.sudoku-cell.killer-cell.notes-mode::before {
    border-color: #9C27B0;
    border-style: dashed;
}

/* 杀手数独笼子高亮 */
.killer-cage.highlighted .killer-cage-border {
    background-color: #FF9800;
}

.killer-cage.highlighted .killer-cage-sum {
    background-color: #FF9800;
    color: white;
}

/* 杀手数独笼子选中 */
.killer-cage.selected .killer-cage-border {
    background-color: #2196F3;
}

.killer-cage.selected .killer-cage-sum {
    background-color: #2196F3;
    color: white;
}

/* 杀手数独笼子错误 */
.killer-cage.error .killer-cage-border {
    background-color: #F44336;
}

.killer-cage.error .killer-cage-sum {
    background-color: #F44336;
    color: white;
}

/* 杀手数独移动端适配 */
@media (max-width: 768px) {
    .killer-cage-sum {
        font-size: 7px;
        padding: 0px 0px;
        min-width: 10px;
        top: 1px;
        left: 1px;
    }

    .killer-cage-border {
        width: 1px;
        height: 1px;
    }

    .killer-cage-border.horizontal {
        height: 1px;
    }

    .killer-cage-border.vertical {
        width: 1px;
    }

    /* 杀手模式移动端笔记数字大小 */
    .note-number {
        font-size: 8px;
        padding: 0 1px; /* 增加左右间距 */
    }

    /* 杀手模式移动端笔记网格位置 */
    .note-grid {
        margin-top: 3px; /* 向下移动3px */
    }
}

/* 杀手数独小屏幕适配 */
@media (max-width: 480px) {
    .killer-cage-sum {
        font-size: 7px;
        padding: 0px 1px;
        min-width: 8px;
        top: 1px;
        left: 1px;
    }
}

/* 杀手数独超小屏幕适配 (iPhone SE等) */
@media (max-width: 380px) {
    .killer-cage-sum {
        font-size: 6px;
        padding: 0px 1px;
        min-width: 7px;
        top: 1px;
        left: 1px;
    }

    .killer-cage-border.horizontal {
        height: 1px;
    }

    .killer-cage-border.vertical {
        width: 1px;
    }
}

/* 杀手数独动画效果 */
.killer-cage-sum {
    transition: all 0.2s ease-in-out;
}

.killer-cage-border {
    transition: all 0.2s ease-in-out;
}

.sudoku-cell.killer-cell {
    transition: all 0.2s ease-in-out;
}

/* 杀手数独特殊布局 */
.killer-sudoku-container {
    position: relative;
}

.killer-sudoku-grid {
    position: relative;
    z-index: 1;
}

.killer-cages-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* 杀手数独提示样式 */
.killer-hint-cell {
    animation: killer-hint-pulse 1s ease-in-out;
}

@keyframes killer-hint-pulse {
    0% {
        background-color: #FFF3E0;
        transform: scale(1);
    }
    50% {
        background-color: #FFE0B2;
        transform: scale(1.05);
    }
    100% {
        background-color: #FFF3E0;
        transform: scale(1);
    }
}

/* 杀手数独完成动画 */
.killer-complete-animation {
    animation: killer-complete-celebration 0.6s ease-in-out;
}

@keyframes killer-complete-celebration {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}