/* ============================================================
   骰子外观 · 全站唯一真源（ /assets/dice.css ）
   ------------------------------------------------------------
   与 /assets/dice.js 配套：js 出结构与排布顺序，css 出外观。
   点位颜色由 js 的 RED_DOTS 决定 —— even = 红（1、4 点），
   odd = 蓝（2、3、5、6 点）。

   尺寸档： .die.xs 26px（表格紧凑）｜ .die.sm 30px（列表）
            .die.md 56px（后台最新开奖卡）｜ .die.big 86px（开奖大厅主骰）

   点位定位方式：不用 gap，改为「格内百分比尺寸 + place-self:center」。
   gap 会随尺寸变化挤压单元格，在小尺寸（20~26px）下造成点位偏心、
   甚至被拉成椭圆；百分比 + 居中定位在任何尺寸下都严格居中且保持圆形。
   ============================================================ */
.die{
  position:relative;flex:none;
  background:linear-gradient(160deg,#fff,#e8eefb);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.38),inset 0 -4px 0 rgba(0,0,0,.07);
}
.die .dots{
  width:100%;height:100%;display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  padding:14%;
}
.die .dots i{
  display:block;border-radius:50%;
  width:76%;aspect-ratio:1/1;
  place-self:center;
  background:radial-gradient(circle at 35% 30%,#5b7bff,#1b3fd8);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.18);
}
.die .dots i.even{background:radial-gradient(circle at 35% 30%,#ff6a70,#e01f27)}
.die .dots i.odd {background:radial-gradient(circle at 35% 30%,#5b7bff,#1b3fd8)}

.die.xs{width:26px;height:26px;border-radius:7px}
.die.sm{width:30px;height:30px;border-radius:8px}
.die.md{width:56px;height:56px;border-radius:14px}
.die.big{width:86px;height:86px;border-radius:20px}
.die.xs i,.die.sm i{box-shadow:none}

.die.hit{animation:pop .5s ease}
@keyframes pop{
  0%{transform:scale(.72) rotate(-8deg)}
  60%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* ---- 小屏收档 ----
   必须放在上面尺寸定义之后：媒体查询不增加特异性，
   同特异性下靠顺序决胜。列表类页面（历史记录）8 列本就横向滚动，
   骰子收一档避免额外加宽。 */
@media(max-width:760px){
  .die.sm{width:26px;height:26px;border-radius:7px}
}
@media(max-width:430px){
  .die.sm{width:23px;height:23px;border-radius:6px}
}