/* ══════════════════════════════════════════════════════════
   pure.css — 壁纸模式 / 屏保 / 悬浮迷你时钟
   在 app.css 之后加载，覆写老的 .pure-* 规则
   ══════════════════════════════════════════════════════════ */

/* ══════════ 舞台 ══════════ */
/* 半透明玻璃底：沿用原版配色，略微透出底下的仪表盘轮廓。
   --pure-a 是不透明度，由控制条的「透明度」滑杆写入（默认 .96，和原版一致） */
.pure-overlay{
  --pure-a:.96;
  background:linear-gradient(135deg,rgba(6,11,25,var(--pure-a)) 0%,rgba(17,12,38,var(--pure-a)) 50%,rgba(26,10,24,var(--pure-a)) 100%);
}
.pure-overlay .pure-bg{opacity:var(--pure-a);transition:filter .35s;}
.pure-overlay .pure-bg-dim{transition:background .3s;}

.pure-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  padding:0 24px;max-width:min(96vw,1200px);text-align:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);}
/* 控制条出现时整体往上让一点，矮屏上不压住今日进度 */
@media (max-height:820px){
  .pure-overlay:has(.wc-visible) .pure-stage{transform:translateY(-6vh);}
}

/* ══════════ 大时钟 ══════════ */
.pure-overlay .pure-time,
.pure-overlay .pure-flap{
  font-family:var(--font-display,'SF Mono',Consolas,monospace);
  font-size:clamp(3.4rem,15vw,13rem);font-weight:300;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 6px 46px rgba(255,183,197,.34));
  margin:0 0 clamp(14px,2.4vh,30px);
}
/* 渐变字要落在每个数字上：翻转中的数字自带图层，父级的 background-clip:text 裁不到它，会整位消失 */
.pure-overlay .pure-time,
.pure-overlay .pure-flap .fdig,
.pure-overlay .pure-flap .flap-colon{
  background:linear-gradient(180deg,#fff 6%,var(--pink-sakura,#ffb7c5) 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.pure-overlay .pure-flap{display:flex;align-items:center;justify-content:center;gap:.01em;perspective:520px;}
.pure-overlay .pure-flap .fdig{display:inline-block;min-width:.62em;text-align:center;backface-visibility:hidden;}
.pure-overlay .pure-flap .flap-colon{padding:0 .03em;opacity:.85;}
.pure-overlay .pure-flap .fdig.flip{animation:pureFlip .3s cubic-bezier(.4,0,.3,1);}
@keyframes pureFlip{0%{transform:rotateX(0)}49%{transform:rotateX(-90deg)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}

/* 两种样式二选一 */
.pure-stage[data-style="flap"]  .pure-time{display:none;}
.pure-stage[data-style="plain"] .pure-flap{display:none;}

/* ══════════ 日期 / 农历 / 问候 ══════════ */
.pure-overlay .pure-date{
  font-size:clamp(.98rem,2.6vw,1.55rem);color:rgba(255,214,224,.9);
  letter-spacing:.16em;font-weight:300;margin:0;}
.pure-sub{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:10px;font-size:clamp(.74rem,1.6vw,.92rem);letter-spacing:.08em;}
.pure-sub span{padding:3px 12px;border-radius:999px;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.pure-sub span.fest{color:#ffd9e2;background:rgba(255,107,157,.2);box-shadow:inset 0 0 0 1px rgba(255,150,185,.44);}
.pure-overlay .pure-greeting{
  font-size:clamp(.78rem,1.9vw,1.06rem);color:rgba(255,255,255,.44);
  letter-spacing:.24em;margin-top:clamp(12px,2vh,20px);}

/* ══════════ 信息行：城市 / 时区 / 日出日落 / 月相 ══════════ */
.pure-meta{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,3vw,38px);margin-top:clamp(18px,3.2vh,34px);
  color:rgba(255,255,255,.6);font-size:clamp(.72rem,1.5vw,.88rem);letter-spacing:.06em;}
.pure-meta i{display:inline-flex;align-items:center;gap:7px;font-style:normal;}
.pure-meta svg.ico{width:1.05em;height:1.05em;opacity:.8;}
.pure-meta b{font-weight:600;color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums;}
.pure-meta .dz-moon{width:1.15em;height:1.15em;}

/* 主题自带动态壁纸时照旧透出去（app.css 里的老规则，这里补上更高的优先级） */
body.theme-wallpaper-active.pure-mode-on .pure-overlay{background:transparent;}

/* 今日进度 */
.pure-day{position:relative;z-index:2;display:flex;align-items:center;gap:12px;
  width:min(64vw,520px);margin-top:clamp(16px,2.6vh,28px);}
.pure-day-track{flex:1;height:3px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.14);}
.pure-day-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,183,197,.55),#ffb7c5);transition:width 1s linear;}
.pure-day-lbl{font-size:.7rem;letter-spacing:.1em;color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;white-space:nowrap;}

/* 精简模式：只留时间和日期 */
.pure-stage[data-info="0"] .pure-meta,
.pure-stage[data-info="0"] .pure-day,
.pure-stage[data-info="0"] .pure-sub{display:none;}

/* ══════════ 入场 ══════════ */
.pure-overlay .pure-time,
.pure-overlay .pure-flap,
.pure-overlay .pure-date,
.pure-sub,.pure-overlay .pure-greeting,.pure-meta,.pure-day{
  opacity:0;transform:translateY(18px);}
.pure-overlay.active .pure-line-in{
  opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}

/* ══════════ 提示条 ══════════ */
.pure-hint{position:fixed;left:50%;top:clamp(18px,4vh,42px);transform:translateX(-50%);z-index:53;
  display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;
  font-size:.76rem;letter-spacing:.08em;color:rgba(255,255,255,.66);
  background:rgba(12,10,24,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .5s;}
.pure-hint.on{opacity:1;}
.pure-hint svg.ico{width:14px;height:14px;opacity:.75;}

/* ══════════ 控制层（退出键 + 底部 dock 一起淡入淡出）══════════ */
.wallpaper-controls{
  position:fixed;inset:0;left:0;top:0;transform:none;z-index:52;
  display:block;pointer-events:none;transition:opacity .35s;}
.wallpaper-controls.wc-visible{opacity:1;transform:none;}
.wallpaper-controls.wc-hidden{opacity:0;transform:none;pointer-events:none;}
.wallpaper-controls.wc-visible .pure-x,
.wallpaper-controls.wc-visible .pure-dock{pointer-events:auto;}

.pure-x{position:absolute;top:clamp(16px,3vh,32px);right:clamp(16px,3vw,36px);
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px 9px 15px;border:0;cursor:pointer;
  border-radius:999px;font:inherit;font-size:.8rem;letter-spacing:.1em;color:#ffd9e2;
  background:rgba(18,12,30,.58);box-shadow:inset 0 0 0 1px rgba(255,183,197,.3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .16s,transform .12s;}
.pure-x:hover{background:rgba(255,107,157,.26);transform:translateY(-1px);}
.pure-x:active{transform:scale(.96);}
.pure-x svg.ico{width:14px;height:14px;}

.pure-dock{position:absolute;left:50%;bottom:clamp(18px,4vh,40px);transform:translateX(-50%);
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 0;
  width:max-content;max-width:94vw;padding:8px 6px;border-radius:22px;
  background:rgba(14,11,26,.56);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 24px 60px -30px rgba(0,0,0,.95);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);}
/* 站点没有全局 [hidden] 重置，下面这些控件自带 display，会把 hidden 顶掉 */
.pure-dock [hidden],.pure-overlay [hidden]{display:none!important;}
.wp-grp{display:flex;align-items:center;gap:8px;padding:0 6px;}
.wp-grp+.wp-grp{border-left:1px solid rgba(255,255,255,.14);padding-left:12px;margin-left:4px;}

.pure-dock .wp-btn,.pure-dock .wp-tog{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:0;cursor:pointer;
  border-radius:14px;font:inherit;font-size:.78rem;letter-spacing:.04em;color:#f2ecf5;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .15s,transform .12s,color .15s;backdrop-filter:none;}
.pure-dock .wp-btn:hover,.pure-dock .wp-tog:hover{background:rgba(255,255,255,.17);transform:translateY(-1px);}
.pure-dock .wp-btn:active,.pure-dock .wp-tog:active{transform:scale(.95);}
.pure-dock .wp-btn svg.ico,.pure-dock .wp-tog svg.ico{width:15px;height:15px;}
.pure-dock .wp-tog.on{color:#2a0d18;background:linear-gradient(135deg,#ffd0dc,#ff9ab4);
  box-shadow:0 8px 22px -12px rgba(255,140,175,.95);}
.pure-dock .wp-btn label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;}

/* 滑杆 */
.pure-dock .wp-range{display:flex;align-items:center;gap:9px;padding:6px 14px;border-radius:14px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.pure-dock .wp-range .wp-k{display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;color:rgba(242,236,245,.72);white-space:nowrap;}
.pure-dock .wp-range .wp-k svg.ico{width:14px;height:14px;opacity:.8;}
.pure-dock .wp-range input[type=range]{width:88px;accent-color:#ffb7c5;cursor:pointer;}
.pure-dock .wp-range b{min-width:2.4em;text-align:right;font-size:.72rem;font-weight:600;
  color:#ffd9e2;font-variant-numeric:tabular-nums;}

/* 样式分段 */
.pure-dock .wp-seg{display:flex;padding:3px;border-radius:14px;gap:3px;
  background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.pure-dock .wp-seg button{border:0;cursor:pointer;font:inherit;font-size:.74rem;letter-spacing:.04em;
  padding:6px 13px;border-radius:11px;color:rgba(242,236,245,.62);background:transparent;
  transition:background .15s,color .15s;}
.pure-dock .wp-seg button:hover{color:#fff;}
.pure-dock .wp-seg button.on{color:#2a0d18;background:linear-gradient(135deg,#ffd0dc,#ff9ab4);}

/* ══════════ 屏保：极缓慢漂移，避免长时间静止烧屏 ══════════ */
.pure-overlay.saver .pure-stage{animation:pureDrift 240s ease-in-out infinite;}
@keyframes pureDrift{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(2.2vw,-1.6vh)}
  50%{transform:translate(-1.4vw,2vh)}
  75%{transform:translate(-2.4vw,-1.2vh)}
}

/* ══════════ 窄屏 ══════════ */
@media (max-width:768px){
  .pure-stage{padding:0 16px;}
  .pure-day{width:min(86vw,420px);}
  .pure-dock{gap:8px;padding:8px;border-radius:18px;bottom:14px;flex-direction:column;}
  .wp-grp{flex-wrap:wrap;justify-content:center;gap:6px;}
  .wp-grp+.wp-grp{border-left:0;padding-left:6px;margin-left:0;}
  .pure-dock .wp-range input[type=range]{width:64px;}
  .pure-dock .wp-btn,.pure-dock .wp-tog{padding:7px 12px;font-size:.74rem;}
  .pure-x{top:14px;right:14px;padding:8px 14px 8px 12px;}
  /* 放到退出键下面，窄屏上两个胶囊会撞在一起 */
  .pure-hint{top:64px;font-size:.7rem;padding:7px 14px;white-space:nowrap;max-width:calc(100vw - 32px);}
}
/* 矮屏（笔电横屏 / 手机横屏）：先砍信息行，保住时间 */
@media (max-height:520px){
  .pure-meta,.pure-day{display:none;}
  .pure-overlay .pure-time,.pure-overlay .pure-flap{font-size:clamp(2.6rem,11vh,6rem);margin-bottom:10px;}
  .pure-overlay .pure-greeting{margin-top:8px;}
}

/* 浅色主题：和原版一样沿用深色玻璃底，不单独做浅色 */

/* ══════════ 降低动效 ══════════ */
@media (prefers-reduced-motion:reduce){
  .pure-overlay .pure-flap .fdig.flip{animation:none;}
  .pure-overlay.saver .pure-stage{animation:none;}
  .pure-overlay.active .pure-line-in{transition:opacity .2s;}
  .pure-stage{transition:none;}
}