/* ============================================================
   顶栏「骰子导航」—— 1:1 复刻 ankergames 的 3D 骰子按钮
   语义：随机推荐（hover 投掷换面，点击直接跳 /random，不播骰子动画）
   主题色跟随站点 --color-accent；骰子本体为奶油白 + 黑点（与暗色顶栏形成质感对比）
   ============================================================ */
.nav-dice{
  --dice-size:40px; --dice-half:20px; --dice-scale:.5;   /* 实渲 20px（= ankergames 原站尺寸） */
  --tilt-x:0deg; --tilt-y:0deg;
  --face-x:0deg; --face-y:0deg;
  --prev-x:0deg; --prev-y:0deg;
  --turns-x:-360deg; --turns-y:-360deg;
  /* 固定 3/4 视角：落定姿态恒定，每次只换新面（与 ankergames 一致） */
  --dice-view-x:-22deg; --dice-view-y:-32deg;
  --dice-rest:rotateX(calc(var(--dice-view-x) + var(--tilt-y)))
              rotateY(calc(var(--dice-view-y) + var(--tilt-x)))
              rotateX(var(--face-x)) rotateY(var(--face-y));
  --pip:#3f3f46;                 /* 黑点（奶油面专用，不随主题变） */
  width:var(--dice-size); height:var(--dice-size); color:var(--pip);
  -webkit-tap-highlight-color:transparent;
  border-radius:.5rem; justify-content:center; align-items:center;
  transition:color .15s,background-color .2s;
  display:inline-flex; position:relative;
  cursor:pointer; flex:0 0 auto;   /* 顶栏 flex 布局里不被压缩 */
  margin:0 6px;                    /* 与相邻导航/搜索留出呼吸位 */
}
.nav-dice:hover{ background-color:var(--color-accent-soft,#f3f4f6); }
.nav-dice:hover,.nav-dice:focus-visible{ color:var(--color-accent,#4f46e5); }
.nav-dice:focus-visible{ outline:2px solid var(--color-accent,#4f46e5); outline-offset:2px; }

.nav-dice__scene{
  width:var(--dice-size); height:var(--dice-size);
  perspective:calc(var(--dice-size) * 5.5); perspective-origin:50% 40%;
  transform-origin:50%; display:block; position:relative;
  transform:scale(var(--dice-scale));
}
.nav-dice__shadow{
  background:radial-gradient(#00000057 0%,#0000001f 45%,#0000 72%);
  border-radius:50%; width:calc(var(--dice-size) * 1.3); height:calc(var(--dice-size) * 0.4); margin-left:calc(var(--dice-size) * -0.65);
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .32s;
  display:block; position:absolute; bottom:calc(var(--dice-size) * -0.45); left:50%; transform:translateZ(0);
}
.nav-dice__cube{
  width:100%; height:100%; transform-style:preserve-3d;
  /* 内芯实底色：封住圆角面在棱/顶点处留下的缝隙，避免透出顶栏底色 */
  background:#e6dfd0;
  transform:var(--dice-rest);
  transition:transform .26s cubic-bezier(.22,1,.36,1);
  display:block; position:relative;
}

.nav-dice.is-toss-a .nav-dice__cube{ animation:.78s cubic-bezier(.2,.75,.25,1) nav-dice-toss-a; }
.nav-dice.is-toss-b .nav-dice__cube{ animation:.78s cubic-bezier(.2,.75,.25,1) nav-dice-toss-b; }
.nav-dice.is-toss-a .nav-dice__scene{ animation:.78s ease-in-out nav-dice-lift-a; }
.nav-dice.is-toss-b .nav-dice__scene{ animation:.78s ease-in-out nav-dice-lift-b; }
.nav-dice.is-toss-a .nav-dice__shadow{ animation:.78s ease-in-out nav-dice-shadow-toss-a; }
.nav-dice.is-toss-b .nav-dice__shadow{ animation:.78s ease-in-out nav-dice-shadow-toss-b; }

.nav-dice__face{
  backface-visibility:hidden;
  background:linear-gradient(150deg,#fff 0%,#f9f6ee 45%,#ece6d8 100%);
  border-radius:calc(var(--dice-size) * 0.2); display:block; position:absolute;   /* 面圆角=边长20%（=原站8px/40px）；再大就会把面切成互不相接的「枕形块」，棱边露缺口 */
  inset:calc(var(--dice-size) * -0.055);   /* 各面略外扩：相邻面在棱边相互搭接，封死圆角缺口 */
  box-shadow:inset 0 2px #ffffffe6,inset 0 -2px 2px #5448301f;
}
.nav-dice__face svg{ width:100%; height:100%; display:block; }
.nav-dice__face circle{ fill:currentColor; }
.nav-dice__face .pip-shade{ fill:url(#nav-dice-pip); }
.nav-dice__face--1{ transform:translateZ(var(--dice-half)); }
.nav-dice__face--6{ transform:rotateY(180deg) translateZ(var(--dice-half)); }
.nav-dice__face--3{ transform:rotateY(90deg) translateZ(var(--dice-half)); }
.nav-dice__face--4{ transform:rotateY(-90deg) translateZ(var(--dice-half)); }
.nav-dice__face--2{ transform:rotateX(90deg) translateZ(var(--dice-half)); }
.nav-dice__face--5{ transform:rotateX(-90deg) translateZ(var(--dice-half)); }
.nav-dice__face--2,.nav-dice__face--5{ background:linear-gradient(150deg,#fff 0%,#fdfbf6 55%,#f3eee2 100%); }
.nav-dice__face--3,.nav-dice__face--4{ background:linear-gradient(150deg,#f3efe5 0%,#e9e3d4 50%,#ddd5c3 100%); }
.nav-dice__face--6{ background:linear-gradient(150deg,#ece6d8 0%,#e2dbcb 50%,#d6cdba 100%); }

@keyframes nav-dice-toss-a{
  0%{ transform:rotateX(var(--dice-view-x)) rotateY(var(--dice-view-y)) rotateX(var(--prev-x)) rotateY(var(--prev-y)); }
  to{ transform:rotateX(calc(var(--dice-view-x) + var(--turns-x))) rotateY(calc(var(--dice-view-y) + var(--turns-y))) rotateX(var(--face-x)) rotateY(var(--face-y)); }
}
@keyframes nav-dice-toss-b{
  0%{ transform:rotateX(var(--dice-view-x)) rotateY(var(--dice-view-y)) rotateX(var(--prev-x)) rotateY(var(--prev-y)); }
  to{ transform:rotateX(calc(var(--dice-view-x) + var(--turns-x))) rotateY(calc(var(--dice-view-y) + var(--turns-y))) rotateX(var(--face-x)) rotateY(var(--face-y)); }
}
@keyframes nav-dice-lift-a{ 0%{transform:scale(var(--dice-scale)) translateY(0)} 45%{transform:scale(var(--dice-scale)) translateY(calc(var(--dice-size) * -0.275))} to{transform:scale(var(--dice-scale)) translateY(0)} }
@keyframes nav-dice-lift-b{ 0%{transform:scale(var(--dice-scale)) translateY(0)} 45%{transform:scale(var(--dice-scale)) translateY(calc(var(--dice-size) * -0.275))} to{transform:scale(var(--dice-scale)) translateY(0)} }
@keyframes nav-dice-shadow-toss-a{ 0%{opacity:1;transform:translateZ(0) scale(1)} 45%{opacity:.45;transform:translateZ(0) scale(.55)} to{opacity:1;transform:translateZ(0) scale(1)} }
@keyframes nav-dice-shadow-toss-b{ 0%{opacity:1;transform:translateZ(0) scale(1)} 45%{opacity:.45;transform:translateZ(0) scale(.55)} to{opacity:1;transform:translateZ(0) scale(1)} }

@media (prefers-reduced-motion: reduce){
  .nav-dice__cube,.nav-dice__shadow{ transition:none }
}