/* 开始界面 + 次要按钮：与主样式分文件，避免改 style.css 时误碰其他规则 */

#start {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  overflow: auto;
  background: radial-gradient(70% 60% at 50% 38%, rgba(28, 7, 26, 0.86), rgba(0, 0, 0, 0.94));
  backdrop-filter: blur(3px);
  transition: opacity 0.45s ease;
}
#start.hide { opacity: 0; pointer-events: none; }

.panel {
  width: 100%;
  max-width: 430px;
  min-width: 0;
  margin: auto;
  padding: 28px 26px 22px;
  border-radius: 22px;
  text-align: center;
  overflow-wrap: anywhere;
  background: linear-gradient(160deg, rgba(255, 122, 182, 0.12), rgba(179, 136, 255, 0.09) 55%, rgba(143, 211, 255, 0.09));
  box-shadow: inset 0 0 0 1px rgba(255, 158, 207, 0.26), 0 30px 90px rgba(155, 107, 255, 0.22);
}

.panel h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.10em;
  background: linear-gradient(96deg, #ff9ecf, #a7e8ff 58%, #b388ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.panel .sub {
  margin: 0 0 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.02em;
}

.panel button,
.card button {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 13px 18px;
  border: 0;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: #1a0410;
  background: linear-gradient(96deg, #ff9ecf, #a7e8ff);
  box-shadow: 0 12px 34px rgba(255, 122, 182, 0.32);
}
.panel button:active,
.card button:active { transform: translateY(1px); }

.panel button.ghost,
.card button.ghost {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(167, 232, 255, 0.28);
}
.panel button.ghost:active,
.card button.ghost:active { background: rgba(255, 255, 255, 0.1); }

.panel .tiny,
.card .tiny {
  margin: 16px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.38);
}

.card .actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.card .actions button {
  width: auto;
  flex: 1;
  margin: 0;
  padding: 10px 12px;
  font-size: 12.5px;
}

/* 手机上把开始界面做成上滑卡片的感觉，按钮更大更好点 */
@media (max-width: 640px) {
  .panel { padding: 24px 20px 18px; border-radius: 20px; }
  .panel h1 { font-size: 22px; }
  .panel .sub { font-size: 12px; margin-bottom: 16px; }
  .panel button { padding: 15px 16px; font-size: 14.5px; }
}