* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #0477f4;
  color: #101828;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/*
  手动调整区：
  left 越大越往右，越小越往左。
  top 越大越往下，越小越往上。
  width/height 控制可点击或显示区域大小。
  font-size 控制字体大小。
*/
:root {
  /* 饭团等级文字：横向位置，数值越大越往右 */
  --level-left: 46.2%;
  /* 饭团等级文字：纵向位置，数值越大越往下 */
  --level-top: 46.78%;
  /* 饭团等级文字：显示区域宽度，文字太挤就加大 */
  --level-width: 20.8%;
  /* 饭团等级文字：显示区域高度，一般不用改 */
  --level-height: 4.55%;
  /* 饭团等级文字：字体大小 */
  --level-font-size: 15px;

  /* 首次加入饭团日期：横向位置，数值越大越往右 */
  --date-left: 46.04%;
  /* 首次加入饭团日期：纵向位置，数值越大越往下 */
  --date-top: 53.05%;
  /* 首次加入饭团日期：显示区域宽度，日期压到左边文字就减小或右移 */
  --date-width: 22.2%;
  /* 首次加入饭团日期：显示区域高度，一般不用改 */
  --date-height: 4.55%;
  /* 首次加入饭团日期：字体大小，日期太长就调小 */
  --date-font-size: 12px;

  /* 陪伴天数文字：横向位置，数值越大越往右 */
  --days-left: 46.2%;
  /* 陪伴天数文字：纵向位置，数值越大越往下 */
  --days-top: 59%;
  /* 陪伴天数文字：显示区域宽度，文字太挤就加大 */
  --days-width: 20.8%;
  /* 陪伴天数文字：显示区域高度，一般不用改 */
  --days-height: 4.55%;
  /* 陪伴天数文字：字体大小 */
  --days-font-size: 13px;

  /* 问题反馈点击区：横向位置，数值越大越往右 */
  --feedback-left: 52.0%;
  /* 问题反馈点击区：纵向位置，数值越大越往下 */
  --feedback-top: 65.55%;
  /* 问题反馈点击区：点击区域宽度 */
  --feedback-width: 17.5%;
  /* 问题反馈点击区：点击区域高度 */
  --feedback-height: 3.5%;
  /* 问题反馈点击区调试颜色：0 是隐藏，0.35 是显示半透明色块 */
  --feedback-debug-opacity: 0;
}

.page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .22), transparent 24%),
    linear-gradient(180deg, #1395ff 0%, #035ef0 100%);
}

.poster {
  position: relative;
  width: min(100vw, 941px);
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  background: url("/assets/fantuan-level-center.png?v=202606202") center top / 100% 100% no-repeat;
}

.value {
  position: absolute;
  z-index: 2;
  left: var(--value-left);
  top: var(--value-top);
  width: var(--value-width);
  height: var(--value-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0;
  line-height: 1;
  font-size: var(--value-font-size);
  color: #0864ee;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .88), 0 5px 10px rgba(0, 91, 231, .16);
}

.value-level {
  --value-left: var(--level-left);
  --value-top: var(--level-top);
  --value-width: var(--level-width);
  --value-height: var(--level-height);
  --value-font-size: var(--level-font-size);
}

.value-date {
  --value-left: var(--date-left);
  --value-top: var(--date-top);
  --value-width: var(--date-width);
  --value-height: var(--date-height);
  --value-font-size: var(--date-font-size);
  color: #111827;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .88);
}

.value-days {
  --value-left: var(--days-left);
  --value-top: var(--days-top);
  --value-width: var(--days-width);
  --value-height: var(--days-height);
  --value-font-size: var(--days-font-size);
}

.feedback-hit {
  position: absolute;
  z-index: 3;
  left: var(--feedback-left);
  top: var(--feedback-top);
  width: var(--feedback-width);
  height: var(--feedback-height);
  border-radius: 24px;
  background: rgba(0, 180, 180, var(--feedback-debug-opacity));
  text-indent: -9999px;
  overflow: hidden;
}

.query-button {
  position: absolute;
  z-index: 3;
  left: 29.3%;
  top: 68.6%;
  width: 41.9%;
  height: 5.0%;
  border-radius: 999px;
  text-indent: -9999px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.query-button:active {
  transform: translateY(2px) scale(.995);
}
.value {
  color: #0864ee;
}