body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}
.page {
  background-color: rgba(10, 3, 30, 1);
  position: relative;
  width: 100%;
  height: 100%;
}
input {
  background-color: transparent;
  border: 0;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}

/* 隐藏滚动条但保持滚动功能 */
body,html {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

body::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
}

/* 根字号随视口自适应，保证 rem 布局等比例缩放（设计宽度 1920px => 51.2rem，1rem=37.5px）*/
html {
  font-size: clamp(12px, calc(100vw / 51.2), 37.5px);
}

/* 让常用容器在布局中可收缩且不超过父容器 */
.flex-col,
.flex-row {
  min-width: 0;
  max-width: 100%;
}

/* 优先允许文本换行，避免带有 nowrap 的样式在窄屏下撑破容器 */
[class^="text_"],
[class*=" text_"],
[class^="paragraph_"],
[class*=" paragraph_"] {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal !important;
}

/* 防止子元素宽度溢出父容器 */
img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* 允许 flex/grid 子项在容器内收缩，避免强制撑破容器 */
*, *::before, *::after {
  min-width: 0;
}

/* 让图片等替换元素在 flex 容器内可缩放，不被固定尺寸撑破 */
img, video {
  flex-shrink: 1;
}