/* ============================================================
   浮层：开场倒计时、设置面板
   ============================================================ */

/* ---------- 倒计时 ---------- */
.count {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.94), rgba(255,241,224,.9));
  backdrop-filter: blur(6px);
}
.count[data-on="true"] { display: flex; }

.count__ring {
  position: absolute;
  width: min(62vh, 62vw); aspect-ratio: 1;
  border-radius: 50%;
  border: 14px solid var(--c-cream-2);
}
.count__sweep {
  position: absolute;
  width: min(62vh, 62vw); aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--count-tone, var(--c-strawberry)) var(--p, 0turn), rgba(0,0,0,0) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 14px), #000 calc(50% - 14px));
  mask: radial-gradient(circle, transparent calc(50% - 14px), #000 calc(50% - 14px));
  transition: background .18s linear;
}

.count__n {
  position: relative;
  font-family: var(--font-en);
  font-size: min(34vh, 34vw);
  font-weight: 900;
  line-height: 1;
  color: var(--count-tone, var(--c-strawberry));
  text-shadow: 0 10px 0 rgba(0,0,0,.06), 0 22px 44px rgba(122,92,70,.22);
  animation: count-pop .82s var(--ease-bounce);
}
@keyframes count-pop {
  0%   { opacity: 0; transform: scale(2.1) rotate(-9deg); }
  36%  { opacity: 1; transform: scale(.92) rotate(2deg); }
  52%  { transform: scale(1.04) rotate(0deg); }
  76%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.count__go {
  position: relative;
  font-family: var(--font-en);
  font-size: min(22vh, 22vw);
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  padding: .12em .5em;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--c-lemon), var(--c-strawberry));
  box-shadow: 0 12px 0 var(--c-strawberry-deep), 0 26px 50px rgba(232,74,128,.35);
  animation: go-pop .62s var(--ease-bounce);
}
@keyframes go-pop {
  0%   { opacity: 0; transform: scale(.4) rotate(-12deg); }
  55%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* 倒计时四周飞出的小圆点 */
.count__dot {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  animation: dot-fly .9s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes dot-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}

/* ---------- 设置面板 ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 80;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(74, 63, 85, .28);
  backdrop-filter: blur(3px);
}
.sheet[data-on="true"] { display: flex; }

.sheet__card {
  width: min(880px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--c-card);
  box-shadow: 0 14px 0 rgba(0,0,0,.06), 0 40px 80px rgba(122,92,70,.3);
  animation: pop-in var(--t-mid) var(--ease-bounce);
}
.sheet__row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; }
.sheet__row + .sheet__row { border-top: 2px dashed var(--c-line); }
.sheet__key { flex: 0 0 92px; font-size: 15px; font-weight: 800; color: var(--c-ink-soft); }
.sheet__val { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1 1 auto; }

.chip {
  padding: 10px 20px;
  border-radius: var(--r-full);
  background: var(--c-cream-2);
  font-family: var(--font-en);
  font-size: 17px; font-weight: 800;
  color: var(--c-ink-soft);
  transition: all var(--t-fast) var(--ease-bounce);
}
.chip[aria-pressed="true"] {
  background: var(--c-primary); color: #fff;
  box-shadow: 0 3px 0 var(--c-primary-deep), 0 8px 16px rgba(232,74,128,.28);
  transform: translateY(-1px);
}
.chip:active { transform: scale(.94); }

/* 自选字母的 26 个小方块 */
.pick { display: flex; flex-wrap: wrap; gap: 7px; }
.pick__b {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--c-cream-2);
  font-family: var(--font-en); font-size: 19px; font-weight: 800;
  color: var(--c-ink-soft);
  transition: all var(--t-fast) var(--ease-bounce);
}
.pick__b[aria-pressed="true"] {
  background: hsl(var(--lh) 62% 66%); color: #fff;
  box-shadow: 0 3px 0 hsl(var(--lh) 58% 46%);
}
.pick__b:active { transform: scale(.9); }

.sheet__close {
  display: block; margin: var(--sp-5) auto 0;
  padding: 14px 44px; border-radius: var(--r-full);
  background: var(--c-primary); color: #fff;
  font-size: 18px; font-weight: 800;
  box-shadow: 0 4px 0 var(--c-primary-deep), 0 10px 22px rgba(232,74,128,.3);
}
.sheet__close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-primary-deep); }