/**
 * xnx_dice 摇骰子样式
 *
 * CSS 3D 立方体骰子动画：
 * - 每颗骰子 = .dice 容器 + 6 个 .dice-face 子元素
 * - 6 个面通过 transform: rotateX/Y translateZ 组成立方体
 * - 动画期间 .dice.rolling 应用旋转动画
 * - 动画结束通过 .show-N 类停留在对应面朝前
 * - 骰子点数用 background radial-gradient 绘制（每面 1-6 点位布局）
 */

/* ==================== 骰子舞台 ==================== */
.dice-stage {
    perspective: 1200px;
    perspective-origin: 50% 30%;
}

/* ==================== 骰子立方体 ==================== */
.dice {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    /* 定格过渡：从 rolling 状态(0deg)平滑旋转到结果面(多圈+目标角度) */
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 旋转中：CSS animation 连续翻滚（linear infinite），比 setInterval 跳变更流畅
 * 移除 rolling 类后 animation 停止，transform 回到 0，transition 接管定格过渡 */
.dice.rolling {
    transition: none;
    animation: dice-roll 0.5s linear infinite;
}

/* 骰子翻滚动画：X/Y 各转 1 圈，循环间无跳变（360≡0） */
@keyframes dice-roll {
    0%   { transform: rotateX(0deg)   rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 错误响应时骰子摇头动画（让用户感知点击生效） */
.dice.dice-shake {
    animation: dice-shake 0.5s ease-in-out;
}
@keyframes dice-shake {
    0%, 100% { transform: rotateZ(0deg); }
    25%      { transform: rotateZ(-15deg); }
    75%      { transform: rotateZ(15deg); }
}

/* 6 个面（80px / 2 = 40px 偏移） */
.dice-face {
    position: absolute;
    width: 80px;
    height: 80px;
    /* ponytail: 适配暗黑模式，用 CSS 变量覆盖 Bootstrap 主题色 */
    background-color: var(--xnx-dice-face-bg, #ffffff);
    border: 2px solid var(--xnx-dice-face-border, #dee2e6);
    border-radius: 14px;
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.06),
        inset 0 -3px 6px rgba(0, 0, 0, 0.04);
    /* 点数颜色 + 大小（通过 radial-gradient 绘制） */
    --dot-color: var(--xnx-dice-dot-color, #e63946);
    --dot-size: 11px;
    background-repeat: no-repeat;
}

/* 暗黑模式骰子配色：深底浅点，避免白底刺眼 */
[data-bs-theme="dark"] .dice-face,
.dark .dice-face {
    --xnx-dice-face-bg: #2c3034;
    --xnx-dice-face-border: #495057;
    --xnx-dice-dot-color: #f8d7da;
}

/* 面的 transform 组成立方体 */
.face-1 { transform: rotateY(0deg)    translateZ(40px); }
.face-2 { transform: rotateY(90deg)   translateZ(40px); }
.face-3 { transform: rotateY(180deg)  translateZ(40px); }
.face-4 { transform: rotateY(-90deg)  translateZ(40px); }
.face-5 { transform: rotateX(90deg)   translateZ(40px); }
.face-6 { transform: rotateX(-90deg)  translateZ(40px); }

/* ==================== 最终停止态：让 N 面朝前 ==================== */
.dice.show-1 { transform: rotateX(0deg)   rotateY(0deg);   }
.dice.show-2 { transform: rotateX(0deg)   rotateY(-90deg); }
.dice.show-3 { transform: rotateX(0deg)   rotateY(180deg); }
.dice.show-4 { transform: rotateX(0deg)   rotateY(90deg);  }
.dice.show-5 { transform: rotateX(-90deg) rotateY(0deg);   }
.dice.show-6 { transform: rotateX(90deg)  rotateY(0deg);   }

/* ==================== 骰子点数（用 background radial-gradient 绘制） ====================
 * 骰子面尺寸 80x80，padding 10，内部点位区 60x60
 * 用 3x3 grid 布局点位：top-left/top-mid/top-right / mid-left/mid/mid-right / bot-left/bot-mid/bot-right
 * 每个点位用 radial-gradient 画一个圆点
 */

/* face-1: 中心 1 个点 */
.face-1 {
    background-image:
        radial-gradient(circle at 50% 50%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size));
}

/* face-2: 左上 + 右下 2 个点 */
.face-2 {
    background-image:
        radial-gradient(circle at 25% 25%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 75%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size));
}

/* face-3: 对角线 3 个点（左上 + 中心 + 右下） */
.face-3 {
    background-image:
        radial-gradient(circle at 25% 25%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 50% 50%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 75%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size));
}

/* face-4: 四角 4 个点 */
.face-4 {
    background-image:
        radial-gradient(circle at 25% 25%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 25%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 25% 75%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 75%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size));
}

/* face-5: 四角 + 中心 5 个点 */
.face-5 {
    background-image:
        radial-gradient(circle at 25% 25%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 25%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 50% 50%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 25% 75%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 75%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size));
}

/* face-6: 左右两列各 3 个点（共 6 个） */
.face-6 {
    background-image:
        radial-gradient(circle at 25% 20%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 25% 50%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 25% 80%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 20%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 50%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size)),
        radial-gradient(circle at 75% 80%, var(--dot-color) 0 var(--dot-size), transparent var(--dot-size));
}

/* ==================== 押注选项 / 档位按钮选中态 ==================== */

/* 押注类型 tab 选中态（Bootstrap nav-pills 已自带，无需额外样式） */

/* 押注值（大/小/单字）按钮选中态：复用 Bootstrap .btn-check:checked + .btn-outline-primary */

/* 档位按钮选中态 */
.bet-amount-btn.active {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

/* "全押"档位按钮选中态（warning 色） */
.bet-amount-btn.active.btn-outline-warning {
    background-color: var(--bs-warning, #ffc107);
    border-color: var(--bs-warning, #ffc107);
    color: #212529;
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.25);
}

/* 摇骰子按钮 hover 抬升效果 */
#roll-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(13, 110, 253, 0.25);
}
#roll-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ==================== 历史记录列表 ==================== */
/* 列表项用 py-2 留白分隔，不用 border-bottom（符合项目规范） */
.dice-history-item {
    transition: background-color 0.15s ease;
    border-radius: 8px;
}
.dice-history-item:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* 新增历史记录高亮动画（hx-swap-oob 注入时） */
.dice-history-item.dice-history-new {
    animation: dice-history-highlight 1.5s ease-out;
}
@keyframes dice-history-highlight {
    0%   { background-color: rgba(13, 110, 253, 0.15); }
    100% { background-color: transparent; }
}

/* ==================== 结果区动画 ==================== */
#dice-result .alert {
    animation: dice-result-pop 0.4s ease-out;
}
@keyframes dice-result-pop {
    0%   { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ==================== 结果展示组件（骰子正下方） ==================== */

/* 空状态（初始无结果时不占空间） */
.dice-outcome-empty {
    min-height: 0;
    overflow: hidden;
}

/* 结果容器：横向布局，左边框颜色条 + 图标 + 文字 + 点数和 */
.dice-outcome {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border-left: 5px solid;
    animation: dice-outcome-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 0.5rem;
}

/* 中奖：绿色系 */
.dice-outcome-win {
    border-left-color: #198754;
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.12) 0%, rgba(25, 135, 84, 0.04) 100%);
}

/* 输了：红色系 */
.dice-outcome-lose {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.12) 0%, rgba(220, 53, 69, 0.04) 100%);
}

/* 错误：橙色系 */
.dice-outcome-error {
    border-left-color: #fd7e14;
    background: rgba(253, 126, 20, 0.08);
}

/* 大号状态图标 */
.dice-outcome-icon {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
}
.dice-outcome-win  .dice-outcome-icon { color: #198754; }
.dice-outcome-lose .dice-outcome-icon { color: #dc3545; }
.dice-outcome-error .dice-outcome-icon { color: #fd7e14; }

/* 结果文字（标签 + 金额） */
.dice-outcome-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex-grow: 1;
}
.dice-outcome-label {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 500;
}
.dice-outcome-amount {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1.2rem;
}
.dice-outcome-amount .dice-amount-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}
.dice-outcome-win  .dice-outcome-amount { color: #198754; }
.dice-outcome-lose .dice-outcome-amount { color: #dc3545; }

/* 点数和（右侧） */
.dice-outcome-sum {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
    flex-shrink: 0;
}
.dice-outcome-sum strong {
    font-size: 1.5rem;
    color: var(--bs-body-color, #212529);
}

/* 结果出现动画（弹性放大） */
@keyframes dice-outcome-in {
    0%   { transform: scale(0.8) translateY(-10px); opacity: 0; }
    100% { transform: scale(1)   translateY(0);     opacity: 1; }
}

/* ==================== 输赢反馈动画 ==================== */

/* 中奖：骰子舞台绿色光晕脉冲 */
.dice-stage.dice-stage-win {
    animation: dice-stage-win 1.5s ease-out;
}
@keyframes dice-stage-win {
    0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5); }
    50%  { box-shadow: 0 0 30px 10px rgba(25, 135, 84, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* 输了：骰子舞台红色闪烁 */
.dice-stage.dice-stage-lose {
    animation: dice-stage-lose 0.8s ease-out;
}
@keyframes dice-stage-lose {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    25%, 75% { box-shadow: 0 0 20px 5px rgba(220, 53, 69, 0.3); }
}

/* 浮动盈亏数字（中奖 +N / 输了 -N 从骰子区飞出） */
.dice-profit-pop {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    font-weight: bold;
    pointer-events: none;
    z-index: 10;
    animation: dice-profit-float 1.5s ease-out forwards;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.dice-profit-pop.win  { color: #198754; }
.dice-profit-pop.lose { color: #dc3545; }
@keyframes dice-profit-float {
    0%   { transform: translateX(-50%) translateY(0)    scale(0.5); opacity: 0; }
    20%  { transform: translateX(-50%) translateY(-10px) scale(1.2); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-80px) scale(1);   opacity: 0; }
}

/* 余额数字变化高亮 */
#dice-balance.dice-balance-flash {
    animation: dice-balance-flash 0.6s ease-out;
}
@keyframes dice-balance-flash {
    0%   { transform: scale(1);    color: var(--bs-primary, #0d6efd); }
    50%  { transform: scale(1.3);  color: var(--bs-success, #198754); }
    100% { transform: scale(1);    color: inherit; }
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 575.98px) {
    .dice {
        width: 60px;
        height: 60px;
    }
    .dice-face {
        width: 60px;
        height: 60px;
        --dot-size: 9px;
    }
    /* 移动端立方体偏移：60/2 = 30px */
    .face-1 { transform: rotateY(0deg)    translateZ(30px); }
    .face-2 { transform: rotateY(90deg)   translateZ(30px); }
    .face-3 { transform: rotateY(180deg)  translateZ(30px); }
    .face-4 { transform: rotateY(-90deg)  translateZ(30px); }
    .face-5 { transform: rotateX(90deg)   translateZ(30px); }
    .face-6 { transform: rotateX(-90deg)  translateZ(30px); }

    .dice-stage {
        gap: 1rem !important;
    }

    /* 移动端结果区缩小 */
    .dice-outcome {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }
    .dice-outcome-icon {
        font-size: 2.2rem;
    }
    .dice-outcome-amount {
        font-size: 1.3rem;
        gap: 0.2rem 0.8rem;
    }
    .dice-outcome-sum strong {
        font-size: 1.2rem;
    }
}