/* 页面全局背景色 */
/* 隐藏浏览器滚动条但保持滚动功能 */
html {
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
body {
  background-color: #ffc6fd;
}
/* 引入 3D 彩色字体 */
@font-face {
  font-family: "Color3D";
  src: url("./resource/3Dcolorfulexperimental-color.ttf") format("truetype");
  font-display: swap;
}

/* 次要 3D 字体（landb 版本） */
@font-face {
  font-family: "Land3D";
  src: url("./resource/3Dcolorfulexperimental-landb.ttf") format("truetype");
  font-display: swap;
}

/* hello 文本样式 */
.hello-text {
  width: max-content;
  height: auto;
  margin: 5vh auto 0 auto;
  font-family: "Color3D";
  font-size: clamp(80px, 20vw, 450px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  letter-spacing: clamp(-150px, -10vw, -50px);
}

/* 描述文本样式 */
.description-text {
  max-width: 800px;
  margin: 0 auto 5vh auto;
  padding: 20px 30px;
  font-family: "Arial", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  color: #111111;
}
/* 字符网格布局 */
#glyph-grid {
  display: grid;
  grid-template-columns: 398px auto;
  gap: 30px;
  align-items: center;
  justify-content: center;
  margin: 0 5vh 0 5vh;
  /* 防止布局重排导致的闪烁 */
  will-change: auto;
  contain: layout;
}

.big-cell {
  width: 418px;
  height: 418px;
  background: #ffc6fd;
  border: 1px solid #000;
  box-sizing: border-box; /* 确保padding不会增加总尺寸 */
  /* 防止字体渲染导致的闪烁 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible; /* 允许字体超出边界显示 */
  /* 优化渲染性能 */
  will-change: contents;
  transform: translateZ(0); /* 启用硬件加速 */
  backface-visibility: hidden;
  /* 调整字体显示位置 - 只影响内容不影响边框 */
  position: relative;
  z-index: 1;
  padding-top: 80px; /* 通过padding下移字体内容 */
}

.small-grid {
  display: grid;
  height: 420px; /* 与左侧大格同高 */
  grid-template-columns: repeat(12, 1fr); /* 12列布局 */
  grid-template-rows: repeat(
    3,
    calc((420px - 2 * 10px) / 3)
  ); /* 扣除两处行间距后均分高度 */
  grid-auto-flow: row; /* 先填满一行，再向下增加行 */
  gap: 10px;
  /* 防止小格变化影响整体布局 */
  contain: layout style;
}

.small-grid .cell {
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: Arial, sans-serif;
  background: transparent;
  aspect-ratio: 1 / 1; /* 让每个小格保持正方形 */
  /* 优化悬浮效果性能 */
  transition: background-color 0.2s ease;
  will-change: background-color;
}