<template>
  <div
    style="background-color: #fff;margin: 20px;border-radius: 6px;box-shadow: 0 2px 12px rgba(0,0,0,0.1);padding: 20px;">
    <div class="lottery-container">
      <div class="header-section">
        <el-tabs v-model="activeType" @tab-click="handleTabClick">
          <el-tab-pane label="极速赛车" name="1"></el-tab-pane>
          <el-tab-pane label="极速时时彩" name="2"></el-tab-pane>
          <el-tab-pane label="极速飞艇" name="3"></el-tab-pane>
          <el-tab-pane label="SG时时彩" name="4"></el-tab-pane>
          <el-tab-pane label="SG飞艇" name="5"></el-tab-pane>
          <el-tab-pane label="极速快3" name="6"></el-tab-pane>
          <el-tab-pane label="SG快3" name="7"></el-tab-pane>
        </el-tabs>

        <el-form :inline="true" :model="queryForm" class="search-form">
          <el-form-item label="期号">
            <el-input v-model="queryForm.issue" clearable placeholder="请输入期号"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryForm.status" clearable placeholder="请选择状态">
              <el-option :value="0" label="待发布"></el-option>
              <el-option :value="1" label="投注中"></el-option>
              <el-option :value="2" label="封盘"></el-option>
              <el-option :value="3" label="开奖"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算状态">
            <el-select v-model="queryForm.is_settlement" clearable placeholder="请选择结算状态">
              <el-option :value="0" label="未结算"></el-option>
              <el-option :value="1" label="已结算"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开奖时间">
            <el-date-picker
              v-model="queryForm.timeRange"
              clearable
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-section">
        <el-table v-loading="loading" :data="tableData" border height="100%" style="width: 100%">
          <el-table-column label="期号" min-width="120" prop="issue"/>

          <el-table-column label="类型" min-width="110">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 1">极速赛车</span>
              <span v-else-if="scope.row.type === 2">极速时时彩</span>
              <span v-else-if="scope.row.type === 3">极速飞艇</span>
              <span v-else-if="scope.row.type === 4">SG时时彩</span>
              <span v-else-if="scope.row.type === 5">SG飞艇</span>
              <span v-else-if="scope.row.type === 6">极速快3</span>
              <span v-else-if="scope.row.type === 7">SG快3</span>
              <span v-else>{{ scope.row.type }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="状态" min-width="90">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="info">待发布</el-tag>
              <el-tag v-else-if="scope.row.status === 1" size="small" type="primary">投注中</el-tag>
              <el-tag v-else-if="scope.row.status === 2" size="small" type="warning">封盘</el-tag>
              <el-tag v-else-if="scope.row.status === 3" size="small" type="success">开奖</el-tag>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column label="开奖号码" min-width="400">
            <template slot-scope="scope">
              <div v-if="scope.row.open_code" class="table-balls">
                <template v-if="[6, 7].includes(scope.row.type)">
                  <span
                    v-for="(num, idx) in scope.row.open_code.split(',')"
                    :key="idx"
                    :class="['dice-icon', 'dice-' + num]"
                  ></span>
                </template>
                <template v-else>
                  <span
                    v-for="(num, idx) in scope.row.open_code.split(',')"
                    :key="idx"
                    :class="getBallColorClass(num, scope.row.type)"
                    class="ball-mini"
                  >{{ num }}</span>
                </template>
              </div>
              <div v-if="scope.row.open_code_other" class="other-code-container">
                <span
                  v-for="(item, idx) in scope.row.open_code_other.split(',')"
                  :key="'other-' + idx"
                  class="other-tag"
                >{{ item }}</span>
              </div>
              <span v-if="!scope.row.open_code && !scope.row.open_code_other">--</span>
            </template>
          </el-table-column>

          <el-table-column label="预开奖号码" min-width="360">
            <template slot-scope="scope">
              <div v-if="scope.row.advance_code" class="table-balls">
                <template v-if="[6, 7].includes(scope.row.type)">
                  <span
                    v-for="(num, idx) in scope.row.advance_code.split(',')"
                    :key="idx"
                    :class="['dice-icon', 'dice-' + num]"
                  ></span>
                </template>
                <template v-else>
                  <span
                    v-for="(num, idx) in scope.row.advance_code.split(',')"
                    :key="idx"
                    :class="getBallColorClass(num, scope.row.type)"
                    class="ball-mini"
                  >{{ num }}</span>
                </template>
              </div>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column label="开奖时间" min-width="160" prop="open_time"/>

          <el-table-column align="center" label="结算" min-width="80">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_settlement === 1 ? 'success' : 'info'" effect="plain" size="small">
                {{ scope.row.is_settlement === 1 ? '已结算' : '未结算' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="下期期号" min-width="100" prop="next_issue"/>
          <el-table-column label="下期开奖时间" min-width="160" prop="next_open_time"/>

          <el-table-column align="center" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status != 3 && !scope.row.advance_code && scope.row.type !== 4 && scope.row.type !== 5 && scope.row.type !== 7"
                size="small"
                type="text"
                @click="handleOpen(scope.row)"
              >预开奖
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>

      <el-dialog
        :visible.sync="dialogVisible"
        custom-class="lottery-dialog"
        title="设置本期开奖号码"
        top="5vh"
        width="580px"
        @close="resetDialog"
      >
        <div class="dialog-inner">
          <div class="slots-container">
            <div class="slots-label">
              <span>选号预览</span>
              <el-button class="clear-btn" size="mini" type="text" @click="selectedNumbers = []">清空重选</el-button>
            </div>
            <div class="slots-wrapper">
              <div class="normal-slots">
                <template v-if="currentRow && [1, 3, 5].includes(currentRow.type)">
                  <div
                    v-for="i in 10" :key="'normal-'+i"
                    :class="{'is-filled': selectedNumbers[i-1]}"
                    class="slot-item"
                  >
                    <div v-if="selectedNumbers[i-1]" :class="getBallColorClass(selectedNumbers[i-1], currentRow.type)"
                         class="ball-display">
                      {{ selectedNumbers[i - 1] }}
                    </div>
                    <div v-else class="ball-placeholder">号码</div>
                  </div>
                </template>

                <template v-else-if="currentRow && [2, 4].includes(currentRow.type)">
                  <div
                    v-for="i in 5" :key="'normal-'+i"
                    :class="{'is-filled': selectedNumbers[i-1]}"
                    class="slot-item"
                  >
                    <div v-if="selectedNumbers[i-1]" :class="getBallColorClass(selectedNumbers[i-1], currentRow.type)"
                         class="ball-display">
                      {{ selectedNumbers[i - 1] }}
                    </div>
                    <div v-else class="ball-placeholder">号码</div>
                  </div>
                </template>

                <template v-else-if="currentRow && [6].includes(currentRow.type)">
                  <div
                    v-for="i in 3" :key="'normal-'+i"
                    :class="{'is-filled': selectedNumbers[i-1]}"
                    class="slot-item"
                  >
                    <div v-if="selectedNumbers[i-1]" :class="['dice-icon', 'dice-display', 'dice-' + selectedNumbers[i-1]]"></div>
                    <div v-else class="ball-placeholder">号码</div>
                  </div>
                </template>
              </div>
            </div>
          </div>

          <div class="picker-container">
            <div class="picker-grid" v-if="currentRow && [1, 3, 5].includes(currentRow.type)">
              <div
                v-for="n in 10" :key="n"
                :class="[
                { 'is-active': selectedNumbers.includes(n.toString()) },
                getBallColorClass(n.toString(), currentRow.type)
              ]"
                class="picker-item"
                @click="toggleNum(n.toString(), currentRow.type)"
              >
                <span class="num-text">{{ n }}</span>
              </div>
            </div>

            <div class="picker-grid" v-else-if="currentRow && [2, 4].includes(currentRow.type)">
              <div
                v-for="n in 10" :key="n-1"
                :class="getBallColorClass((n-1).toString(), currentRow.type)"
                class="picker-item"
                @click="toggleNum((n-1).toString(), currentRow.type)"
              >
                <span class="num-text">{{ n - 1 }}</span>
              </div>
            </div>

            <div class="picker-grid" v-else-if="currentRow && [6].includes(currentRow.type)" style="grid-template-columns: repeat(6, 1fr);">
              <div
                v-for="n in 6" :key="n"
                class="picker-item"
                @click="toggleNum(n.toString(), currentRow.type)"
              >
                <span :class="['dice-icon', 'dice-' + n]" style="box-shadow: none;"></span>
              </div>
            </div>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            :disabled="!(currentRow && (([1, 3, 5].includes(currentRow.type) && selectedNumbers.length === 10) || ([2, 4].includes(currentRow.type) && selectedNumbers.length === 5) || ([6].includes(currentRow.type) && selectedNumbers.length === 3)))"
            style="width: 120px;"
            type="primary"
            @click="submitCode">
            确认提交
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getJisuLotteryList, setJisuOpenCode} from '@/api/data';

export default {
  name: 'LotteryList',
  data() {
    return {
      activeType: '1',
      loading: false,
      tableData: [],
      queryForm: {
        issue: '',
        status: '',
        is_settlement: '',
        timeRange: []
      },
      page: 1,
      limit: 10,
      total: 0,

      dialogVisible: false,
      selectedNumbers: [],
      currentRow: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 动态获取波色 Class
    getBallColorClass(numStr, type) {
      if (!numStr) return '';

      if ([1, 3, 5].includes(type)) {
        // 1,3,5 类型 1-10对应不同颜色
        return `color-${numStr}`;
      } else if ([2, 4].includes(type)) {
        // 2,4 类型 固定蓝色
        return 'wave-blue';
      }

      return '';
    },

    handleSearch() {
      this.page = 1;
      this.fetchData();
    },

    async fetchData() {
      this.loading = true;

      const params = {
        type: Number(this.activeType),
        issue: this.queryForm.issue || undefined,
        status: this.queryForm.status !== '' ? this.queryForm.status : undefined,
        is_settlement: this.queryForm.is_settlement !== '' ? this.queryForm.is_settlement : undefined,
        page: this.page,
        limit: this.limit
      };

      if (this.queryForm.timeRange && this.queryForm.timeRange.length === 2) {
        params.start_time = this.queryForm.timeRange[0];
        params.end_time = this.queryForm.timeRange[1];
      }

      try {
        const res = await getJisuLotteryList(params);

        let list = [];
        if (res.data && Array.isArray(res.data.data)) {
          list = res.data.data;
          this.total = res.data.total || 0;
        } else if (res.data && Array.isArray(res.data.list)) {
          list = res.data.list;
          this.total = res.data.total || 0;
        } else if (Array.isArray(res.data)) {
          list = res.data;
          this.total = res.total || list.length;
        } else if (Array.isArray(res)) {
          list = res;
          this.total = list.length;
        }

        this.tableData = list;
      } catch (e) {
        console.error('获取列表失败:', e);
        this.tableData = [];
        this.total = 0;
      } finally {
        this.loading = false;
      }
    },

    handleSizeChange(val) {
      this.limit = val;
      this.page = 1;
      this.fetchData();
    },

    handleCurrentChange(val) {
      this.page = val;
      this.fetchData();
    },

    handleTabClick() {
      this.queryForm.issue = '';
      this.queryForm.status = '';
      this.queryForm.is_settlement = '';
      this.queryForm.timeRange = [];
      this.page = 1;
      this.fetchData();
    },

    handleOpen(row) {
      this.currentRow = row;
      this.selectedNumbers = [];
      this.dialogVisible = true;
    },

    toggleNum(numStr, type) {
      if ([1, 3, 5].includes(type)) {
        // 1,3,5 类型：不允许重复，点击切换选中/取消状态，最多10个
        const idx = this.selectedNumbers.indexOf(numStr);
        if (idx > -1) {
          this.selectedNumbers.splice(idx, 1);
        } else if (this.selectedNumbers.length < 10) {
          this.selectedNumbers.push(numStr);
        }
      } else if ([2, 4].includes(type)) {
        // 2,4 类型：允许重复（时时彩），仅执行追加，最多5个，若想撤销可通过"清空重选"
        if (this.selectedNumbers.length < 5) {
          this.selectedNumbers.push(numStr);
        }
      } else if ([6].includes(type)) {
        // 6 类型(快3)：允许重复，最多3个
        if (this.selectedNumbers.length < 3) {
          this.selectedNumbers.push(numStr);
          this.selectedNumbers.sort((a, b) => Number(a) - Number(b));
        }
      }
    },

    resetDialog() {
      this.selectedNumbers = [];
      this.currentRow = null;
    },

    async submitCode() {
      try {
        await setJisuOpenCode({
          id: this.currentRow.id,
          type: this.currentRow.type, // 新增参数：当前预开奖的彩种类型
          advance_code: this.selectedNumbers
        });
        this.$message.success('设置成功');
        this.dialogVisible = false;
        this.fetchData();
      } catch (e) {
        console.error('设置失败:', e);
      }
    }
  }
};
</script>

<style scoped>
/* ========== 页面基础布局 ========== */
.lottery-container {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.header-section {
  flex-shrink: 0;
}

.table-section {
  flex: 1;
  height: 0;
}

.search-form {
  margin-bottom: 10px;
}

/* ========== 分页样式 ========== */
.pagination-container {
  padding-top: 15px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ========== 波色核心样式定义 ========== */
/* 2、4 类型的固定蓝色 */
.wave-blue.ball-mini, .wave-blue.ball-display, .picker-item.is-active.wave-blue {
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  border-color: #1e88e5;
  color: #fff;
}
.picker-item.wave-blue {
  border-color: #a0cfff;
  color: #303133;
}

/* 1、3、5 类型的十种专属颜色 */
.color-1.ball-mini, .color-1.ball-display, .picker-item.is-active.color-1 { background: #E6DE00; border-color: #E6DE00; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.color-2.ball-mini, .color-2.ball-display, .picker-item.is-active.color-2 { background: #0092FF; border-color: #0092FF; color: #fff; }
.color-3.ball-mini, .color-3.ball-display, .picker-item.is-active.color-3 { background: #4D4D4D; border-color: #4D4D4D; color: #fff; }
.color-4.ball-mini, .color-4.ball-display, .picker-item.is-active.color-4 { background: #FF7600; border-color: #FF7600; color: #fff; }
.color-5.ball-mini, .color-5.ball-display, .picker-item.is-active.color-5 { background: #17E2E5; border-color: #17E2E5; color: #fff; }
.color-6.ball-mini, .color-6.ball-display, .picker-item.is-active.color-6 { background: #5234FF; border-color: #5234FF; color: #fff; }
.color-7.ball-mini, .color-7.ball-display, .picker-item.is-active.color-7 { background: #BFBFBF; border-color: #BFBFBF; color: #fff; }
.color-8.ball-mini, .color-8.ball-display, .picker-item.is-active.color-8 { background: #FF2600; border-color: #FF2600; color: #fff; }
.color-9.ball-mini, .color-9.ball-display, .picker-item.is-active.color-9 { background: #780B00; border-color: #780B00; color: #fff; }
.color-10.ball-mini, .color-10.ball-display, .picker-item.is-active.color-10 { background: #07BF00; border-color: #07BF00; color: #fff; }

.picker-item.color-1 { border-color: #E6DE00; color: #303133; }
.picker-item.color-2 { border-color: #0092FF; color: #303133; }
.picker-item.color-3 { border-color: #4D4D4D; color: #303133; }
.picker-item.color-4 { border-color: #FF7600; color: #303133; }
.picker-item.color-5 { border-color: #17E2E5; color: #303133; }
.picker-item.color-6 { border-color: #5234FF; color: #303133; }
.picker-item.color-7 { border-color: #BFBFBF; color: #303133; }
.picker-item.color-8 { border-color: #FF2600; color: #303133; }
.picker-item.color-9 { border-color: #780B00; color: #303133; }
.picker-item.color-10 { border-color: #07BF00; color: #303133; }

/* ========== 列表内号码球样式 ========== */
.table-balls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ball-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========== 补充号码样式 ========== */
.other-code-container {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.other-tag {
  display: inline-block;
  padding: 2px 6px;
  background-color: #f4f4f5;
  border: 1px solid #e9e9eb;
  border-radius: 4px;
  font-size: 12px;
  color: #909399;
}

/* ========== 弹窗内部样式 ========== */
::v-deep .lottery-dialog .el-dialog__body {
  padding: 20px 30px 30px;
}

.dialog-inner {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* 1. 顶部预览槽位 */
.slots-container {
  background: #f8f9fb;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 16px 20px;
}

.slots-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}

.clear-btn {
  padding: 0;
  color: #909399;
}

.clear-btn:hover {
  color: #f56c6c;
}

.slots-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.normal-slots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 槽位基础样式 */
.slot-item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed #dcdfe6;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.slot-item.is-filled {
  border: none;
  background: transparent;
}

.ball-placeholder {
  font-size: 12px;
  color: #c0c4cc;
}

/* 选中后的球体样式 (3D质感) */
.ball-display {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 -3px 4px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. 底部 选号盘 */
.picker-container {
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* 网格默认未选中基础结构 */
.picker-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.picker-item:hover {
  background: #f4f4f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* 激活状态额外增强 */
.picker-item.is-active {
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
  z-index: 2;
}

/* 激活状态加点内发光，增强立体感 */
.picker-item.is-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

/* 动画效果 */
@keyframes popIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== 快3 骰子样式 ========== */
.dice-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.dice-display {
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dice-1 { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="white" stroke="%23dcdfe6" stroke-width="1"/><circle cx="12" cy="12" r="4" fill="%23F56C6C"/></svg>') no-repeat center/contain; }
.dice-2 { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="white" stroke="%23dcdfe6" stroke-width="1"/><circle cx="7" cy="7" r="2.5" fill="%23303133"/><circle cx="17" cy="17" r="2.5" fill="%23303133"/></svg>') no-repeat center/contain; }
.dice-3 { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="white" stroke="%23dcdfe6" stroke-width="1"/><circle cx="6" cy="6" r="2.5" fill="%23303133"/><circle cx="12" cy="12" r="2.5" fill="%23303133"/><circle cx="18" cy="18" r="2.5" fill="%23303133"/></svg>') no-repeat center/contain; }
.dice-4 { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="white" stroke="%23dcdfe6" stroke-width="1"/><circle cx="7" cy="7" r="2.5" fill="%23F56C6C"/><circle cx="17" cy="7" r="2.5" fill="%23F56C6C"/><circle cx="7" cy="17" r="2.5" fill="%23F56C6C"/><circle cx="17" cy="17" r="2.5" fill="%23F56C6C"/></svg>') no-repeat center/contain; }
.dice-5 { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="white" stroke="%23dcdfe6" stroke-width="1"/><circle cx="6" cy="6" r="2.5" fill="%23303133"/><circle cx="18" cy="6" r="2.5" fill="%23303133"/><circle cx="12" cy="12" r="2.5" fill="%23303133"/><circle cx="6" cy="18" r="2.5" fill="%23303133"/><circle cx="18" cy="18" r="2.5" fill="%23303133"/></svg>') no-repeat center/contain; }
.dice-6 { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="white" stroke="%23dcdfe6" stroke-width="1"/><circle cx="7" cy="5" r="2.5" fill="%23303133"/><circle cx="17" cy="5" r="2.5" fill="%23303133"/><circle cx="7" cy="12" r="2.5" fill="%23303133"/><circle cx="17" cy="12" r="2.5" fill="%23303133"/><circle cx="7" cy="19" r="2.5" fill="%23303133"/><circle cx="17" cy="19" r="2.5" fill="%23303133"/></svg>') no-repeat center/contain; }
</style>
