/* ========================================
   骰子样式 - 3D骰子、动画效果
   ======================================== */

.dice-row {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 5px;
    flex-shrink: 0;
}

.dice-container {
    display: flex;
    gap: 18px;
    min-height: 62px;
    align-items: center;
    justify-content: center;
}

/* 场景容器：每个骰子一个场景 */
.scene {
    width: 56px;
    height: 56px;
    perspective: 400px;
    cursor: pointer;
}

/* 立方体 (Cube) - 负责旋转的物体 */
.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.1, 0.67, 0.1, 1);
}

/* 骰子的六个面 - 科技风格不透明材质 */
.cube__face {
    position: absolute;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(0, 242, 255, 0.4);
    border-radius: 8px;
    background: linear-gradient(145deg,
            rgba(35, 50, 65, 1) 0%,
            rgba(20, 30, 45, 1) 50%,
            rgba(28, 40, 55, 1) 100%);
    box-shadow:
        inset 0 0 15px rgba(0, 242, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 8px rgba(0, 0, 0, 0.5);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 7px;
    gap: 3px;
    backface-visibility: hidden;
}

/* 面位置计算 (56px / 2 = 28px) */
.cube__face--1 {
    transform: rotateY(0deg) translateZ(28px);
}

.cube__face--2 {
    transform: rotateY(90deg) translateZ(28px);
}

.cube__face--3 {
    transform: rotateY(180deg) translateZ(28px);
}

.cube__face--4 {
    transform: rotateY(-90deg) translateZ(28px);
}

.cube__face--5 {
    transform: rotateX(90deg) translateZ(28px);
}

.cube__face--6 {
    transform: rotateX(-90deg) translateZ(28px);
}

/* 点数 (Pip) - 发光霓虹风格 */
.pip {
    background-color: #00f2ff;
    border-radius: 50%;
    box-shadow:
        0 0 6px rgba(0, 242, 255, 0.8),
        0 0 12px rgba(0, 242, 255, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
    align-self: center;
    justify-self: center;
    width: 9px;
    height: 9px;
}

/* 红色点数 (1点) - 特殊高亮 */
.cube__face--1 .pip {
    background-color: #ff4757;
    box-shadow:
        0 0 8px rgba(255, 71, 87, 0.9),
        0 0 16px rgba(255, 71, 87, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    width: 13px;
    height: 13px;
}

/* 红色点数 (4点) */
.cube__face--4 .pip {
    background-color: #ff4757;
    box-shadow:
        0 0 6px rgba(255, 71, 87, 0.8),
        0 0 12px rgba(255, 71, 87, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* 锁定状态 - 骰子面变暗并改变边框颜色 */
.scene.locked .cube__face {
    filter: brightness(0.6);
    border-color: rgba(255, 200, 100, 0.4);
}

.scene.locked .pip {
    filter: brightness(0.65);
}

/* 禁用状态 - 游戏未开始时骰子不可交互 */
.scene.disabled {
    pointer-events: none;
}

.scene.disabled .cube__face {
    filter: grayscale(0.5) brightness(0.7);
}

/* Hover 效果 - 增强发光 */
.scene:hover .cube {
    transform: scale3d(1.1, 1.1, 1.1);
}

.scene:hover .cube__face {
    border-color: rgba(0, 242, 255, 0.6);
    box-shadow:
        inset 0 0 20px rgba(0, 242, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 15px rgba(0, 242, 255, 0.3);
}

.scene.disabled:hover .cube {
    transform: none;
}

.scene.disabled:hover .cube__face {
    border-color: rgba(0, 242, 255, 0.3);
    box-shadow:
        inset 0 0 15px rgba(0, 242, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 8px rgba(0, 0, 0, 0.5);
}
/* ========================================
   压制状态样式
   ======================================== */

/* 压制锁定的骰子 - 在普通锁定基础上增加遮罩 */
.scene.suppressed-lock {
    position: relative;
}

/* 压制锁定覆盖层 - 半透明遮罩带线条锁图标 */
.suppress-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(180, 60, 60, 0.2);
    border-radius: 8px;
    border: 2px solid rgba(255, 100, 100, 0.6);
    pointer-events: none;
    z-index: 5;
}

.suppress-lock-icon {
    width: 28px;
    height: 28px;
    color: rgba(255, 100, 100, 0.9);
    filter: drop-shadow(0 0 3px rgba(255, 100, 100, 0.8));
}

/* 压制状态徽章样式 */
.badge.suppress {
    background: linear-gradient(135deg, #ff6464 0%, #cc4444 100%);
    color: white;
    border: 1px solid rgba(255, 100, 100, 0.6);
    box-shadow: 0 0 8px rgba(255, 100, 100, 0.3);
}