/* 人生轮盘 / 人生轮盘 共用的页面样式(两页只有文案和维度不同) */
:root { --glass-pad: 20px; }

h2 { font-size: 14px; margin-bottom: 10px; }
.sub { font-size: 13px; line-height: 1.7; }
.btnrow { justify-content: center; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.wheelbox { position: sticky; top: 12px; text-align: center; }
#wheel { width: 100%; max-width: 420px; height: auto; touch-action: none; cursor: pointer; }
.hint { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 8px; line-height: 1.6; }

.dim {
  display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: center;
  padding: 9px 0; border-top: 1px solid rgba(255,255,255,.10);
}
.dim:first-of-type { border-top: none; }
.dim .name {
  font-size: 13.5px; color: #fff; border: none; background: transparent;
  font-family: inherit; width: 100%; padding: 2px 0;
}
.dim .name:focus { outline: none; border-bottom: 1px dashed rgba(255,255,255,.3); }
.dim .score { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dim input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: #9fd8f5; height: 22px; }

.sig { margin-top: 13px; text-align: left; }
.sig label { font-size: 11.5px; color: rgba(255,255,255,.52); display: block; margin-bottom: 5px; }
.sig input {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  font-family: inherit; font-size: 12.5px; line-height: 1.35; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; padding: 0 11px; height: 42px;
  -webkit-appearance: none; appearance: none;
  color-scheme: dark;            /* 让原生日期控件用深色主题:图标变浅,弹出的日历也是深色 */
}
/* 原生日期控件内部有自己的一套字号/间距,逐个抹平,让它和普通输入框一模一样 */
.sig input[type=date] { text-align: left; }
.sig input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; padding: 0; }
.sig input[type=date]::-webkit-datetime-edit {
  display: flex; align-items: center; height: 100%;
  padding: 0; margin: 0; font: inherit; color: inherit;
}
.sig input[type=date]::-webkit-datetime-edit-fields-wrapper,
.sig input[type=date]::-webkit-datetime-edit-text,
.sig input[type=date]::-webkit-datetime-edit-month-field,
.sig input[type=date]::-webkit-datetime-edit-day-field,
.sig input[type=date]::-webkit-datetime-edit-year-field {
  padding: 0 1px; margin: 0; font: inherit; line-height: normal; color: inherit;
}
.sig input[type=date]::-webkit-calendar-picker-indicator {
  margin: 0; padding: 0 2px; opacity: .6; cursor: pointer;
}

.reflect { margin-top: 16px; }
.reflect p { font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.85; }
.reflect p strong { color: #fff; }

@media (max-width: 700px) {
  :root { --body-pad: 18px 10px 40px; --h1-size: 21px; --glass-pad: 15px; --glass-radius: 18px;
          --btn-pad: 13px 22px; --btn-size: 15px; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .sub { font-size: 13px; }
  .wheelbox { position: static; }
  #wheel { max-width: 100%; }
  .dim { padding: 12px 0; grid-template-columns: 1fr 46px; }
  .dim .name { font-size: 16px; }           /* >=16px 防止 iOS 聚焦时自动放大 */
  .dim .score { font-size: 17px; }
  .dim input[type=range] { height: 34px; }
  .sig input { font-size: 16px; padding: 0 12px; height: 50px; }
  .btnrow { gap: 8px; }
  footer { font-size: 11px; }
}
@media (max-width: 380px) {
  :root { --glass-pad: 13px; --h1-size: 19px; }
  .dim .name { font-size: 16px; }
}