/* ============================================================
   瑾雯 · 生日祝福页
   设计主题：地质 / 矿物 / 宝石
   适配：iPhone (iOS Safari) + Windows (Edge/Chrome)
   ============================================================ */

:root{
  --crust:   #3a2a1c;   /* 地壳深色 */
  --mantle:  #6b4a2f;   /* 地幔 */
  --ore:     #9c5a3c;   /* 矿脉 */
  --gem:     #3a7a8c;   /* 宝石蓝 */
  --crystal: #7fd4e0;   /* 晶体高光 */
  --gold:    #e0a93e;   /* 金脉 */
  --rose:    #c46a8a;   /* 玫瑰晶 */
  --parchment:#f4ecd8;  /* 羊皮纸字色 */
  --ink:     #2c2318;   /* 墨色 */
}

/* ---------- 基础重置 ---------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(127,212,224,.18), transparent 60%),
    radial-gradient(1000px 700px at 90% 90%, rgba(224,169,62,.16), transparent 60%),
    linear-gradient(180deg,#2a1d12 0%, #3a2a1c 40%, #241a10 100%);
  color:var(--parchment);
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:28px 16px 64px;
  -webkit-text-size-adjust:100%;
}

/* ---------- 背景 canvas ---------- */
#bg{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:-1;
  pointer-events:none;
}

/* ---------- 卡片 ---------- */
.card{
  position:relative;
  z-index:10;
  width:100%;
  max-width:520px;
  margin:0 auto;
  border-radius:28px;
  padding:40px 28px 36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 8px),
    linear-gradient(180deg,#4a3320,#332416);
  border:1px solid rgba(224,169,62,.25);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(127,212,224,.25), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(224,169,62,.22), transparent 45%);
  pointer-events:none;
}

/* ---------- 瑾雯照片 ---------- */
.portrait{
  width:100%;
  max-width:280px;
  display:block;
  margin:0 auto 22px;
  border-radius:18px;
  border:2px solid rgba(224,169,62,.5);
  box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(127,212,224,.15) inset;
  object-fit:cover;
  aspect-ratio:1/1;
  filter:saturate(1.05) contrast(1.05);
  animation:fadeUp .9s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- 矿物晶体 ---------- */
.gems{
  position:relative;
  height:70px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:18px;
}
.gem{
  width:34px;height:54px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  transform:rotate(45deg);
  opacity:.9;
  box-shadow:0 0 18px currentColor;
  animation:float 3.6s ease-in-out infinite;
}
.gem--crystal{color:var(--crystal);background:linear-gradient(160deg,#baf2f7,#3a7a8c)}
.gem--gold{color:var(--gold);background:linear-gradient(160deg,#ffd98a,#9c5a3c);width:28px;height:46px}
.gem--rose{color:var(--rose);background:linear-gradient(160deg,#f6b3cf,#7a3a55);width:38px;height:58px}
@keyframes float{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-8px) rotate(45deg)}}

/* ---------- 徽章 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:2px;color:var(--gold);
  border:1px solid rgba(224,169,62,.4);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
  background:rgba(224,169,62,.08);
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--crystal);box-shadow:0 0 10px var(--crystal);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- 标题 ---------- */
h1{
  font-size:clamp(34px,9vw,52px);
  font-weight:800;
  line-height:1.15;
  margin-bottom:10px;
  background:linear-gradient(180deg,#fff6dc,#e0a93e 40%,#c07a2e);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 24px rgba(224,169,62,.2);
}
h1 .name{display:block;font-size:1em;color:var(--gold);-webkit-text-fill-color:var(--gold)}

.sub{font-size:15px;color:rgba(244,236,216,.72);margin-bottom:26px;line-height:1.7}
.sub strong{color:var(--crystal);font-weight:600}
.sub .rock{color:var(--crystal)}

/* ---------- 引用 ---------- */
.quote{
  border-left:3px solid var(--gold);
  padding:14px 18px;margin:22px 0 26px;
  background:rgba(0,0,0,.18);border-radius:0 12px 12px 0;
  font-size:15px;line-height:1.8;color:var(--parchment);
  font-style:italic;
}
.quote .em{color:var(--crystal);font-style:normal;font-weight:600}

/* ---------- 信息卡 ---------- */
.facts{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px;
}
.fact{
  border:1px solid rgba(127,212,224,.2);
  border-radius:14px;padding:14px 16px;
  background:rgba(0,0,0,.2);
}
.fact .k{font-size:11px;letter-spacing:1.5px;color:var(--crystal);text-transform:uppercase}
.fact .v{font-size:18px;font-weight:700;margin-top:4px}
.fact .v small{font-size:12px;font-weight:400;color:rgba(244,236,216,.6)}

/* ---------- 交互小游戏：暴雨集水 ---------- */
.game{
  margin:26px 0 28px;
  padding:20px 18px 18px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12)),
    radial-gradient(circle at 50% 0%, rgba(224,169,62,.18), transparent 60%);
  border:1px solid rgba(127,212,224,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.game__title{
  font-size:18px;font-weight:700;margin-bottom:4px;
  background:linear-gradient(180deg,#fff6dc,#e0a93e);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.game__hint{font-size:13px;color:rgba(244,236,216,.62);margin-bottom:18px}

.game__stage{
  position:relative;
  height:170px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:14px;
  margin-bottom:18px;
}

/* 雨滴 */
.hammer{
  position:relative;
  font-size:40px;
  line-height:1;
  transform:translateY(0);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
  user-select:none;
  pointer-events:none;
}
.hammer.drop{animation:raindrop .5s ease forwards}
@keyframes raindrop{
  0%{transform:translateY(-52px) scale(1);opacity:0}
  35%{transform:translateY(-6px) scale(1.15);opacity:1}
  70%{transform:translateY(0) scale(.9);opacity:1}
  100%{transform:translateY(0) scale(.7);opacity:0}
}

/* 集水盆 */
.basin{
  position:relative;
  width:150px;height:90px;
  border-radius:10px 10px 50% 50%/6px 6px 46% 46%;
  background:
    radial-gradient(circle at 50% 0%, rgba(127,212,224,.15), transparent 55%),
    linear-gradient(180deg,#2c5a3a,#18301f);
  border:2px solid rgba(127,212,224,.45);
  box-shadow:0 14px 28px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.12);
  cursor:pointer;
  overflow:hidden;
  user-select:none;
}
.basin:active{transform:scale(.97)}
.basin.ripple .water{animation:ripple .5s ease}
@keyframes ripple{
  0%,100%{box-shadow:0 0 0 0 rgba(127,212,224,.45)}
  50%{box-shadow:0 0 0 12px rgba(127,212,224,0)}
}

/* 水面：从底部上涨 */
.water{
  position:absolute;left:0;right:0;bottom:0;
  height:0%;
  background:linear-gradient(180deg,#7fd4e0,#3a7a8c);
  transition:height .5s ease;
  z-index:1;
}
.water::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 45%);
}

/* 花草：随水位依次绽放 */
.plant{
  position:absolute;
  bottom:0;
  z-index:2;
  font-size:0;
  opacity:0;
  transform:translateY(12px) scale(.4);
  transform-origin:bottom center;
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.plant--1{left:8%;  bottom:6px}
.plant--2{left:26%; bottom:2px}
.plant--3{left:47%; bottom:8px}
.plant--4{left:66%; bottom:2px}
.plant--5{left:84%; bottom:6px}
.plant.grown{
  font-size:22px;
  opacity:1;
  transform:translateY(0) scale(1);
}

.game__progress{margin-bottom:14px}
.progress__bar{
  height:10px;border-radius:999px;
  background:rgba(0,0,0,.35);
  overflow:hidden;
  border:1px solid rgba(127,212,224,.2);
}
.progress__fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#7fd4e0,#e0a93e);
  border-radius:999px;
  transition:width .35s ease;
}
.progress__text{
  text-align:right;font-size:12px;color:rgba(244,236,216,.6);
  margin-top:6px;letter-spacing:1px;
}
.progress__text.done{color:var(--gold);font-weight:700}

.game__msg{
  min-height:24px;
  text-align:center;font-size:15px;color:var(--parchment);
  font-weight:600;margin-bottom:14px;
  transition:opacity .2s ease;
}
.game__msg.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(.9);opacity:.4}50%{transform:scale(1.06)}100%{transform:scale(1)}}

.game__reset{
  display:block;margin:0 auto;
  padding:9px 22px;border-radius:999px;
  border:1px solid rgba(224,169,62,.5);
  background:rgba(224,169,62,.12);
  color:var(--gold);
  font-size:13px;letter-spacing:1px;
  cursor:pointer;
  transition:background .2s, transform .1s;
}
.game__reset:hover{background:rgba(224,169,62,.25)}
.game__reset:active{transform:scale(.96)}

/* ---------- 生日倒计时 ---------- */
.countdown{
  margin:22px 0 26px;
  text-align:center;
}
.cd__label{
  font-size:12px;letter-spacing:3px;color:var(--crystal);
  text-transform:uppercase;margin-bottom:10px;
}
.cd__value{
  font-family:"SF Mono","Consolas","Menlo",monospace;
  font-size:clamp(20px,5vw,28px);
  font-weight:700;
  letter-spacing:2px;
  color:var(--parchment);
  background:rgba(0,0,0,.25);
  border:1px solid rgba(127,212,224,.2);
  border-radius:12px;
  padding:12px 16px;
  display:inline-block;
  transition:transform .2s ease;
}
.cd__value.pulse{
  color:var(--gold);
  transform:scale(1.03);
  box-shadow:0 0 24px rgba(224,169,62,.4);
}

/* ---------- 章节分割 ---------- */
.section{
  margin:30px 0 8px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(224,169,62,.18);
}
.section:last-of-type{border-bottom:none}
.section__eyebrow{
  font-size:11px;letter-spacing:3px;color:var(--crystal);
  text-transform:uppercase;margin-bottom:6px;
}
.section__title{
  font-size:19px;font-weight:700;
  background:linear-gradient(180deg,#fff6dc,#e0a93e);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section__sub{font-size:13px;color:rgba(244,236,216,.6);margin-top:6px}

/* ---------- 径流数据卡 ---------- */
.data-card{
  border:1px solid rgba(127,212,224,.22);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.12)),
    radial-gradient(circle at 50% 0%, rgba(127,212,224,.12), transparent 60%);
  padding:18px 16px 14px;
  margin-bottom:14px;
}
.data-card__head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px;
}
.data-card__head .dc__name{font-size:15px;font-weight:700}
.data-card__head .dc__unit{font-size:11px;color:rgba(244,236,216,.5);letter-spacing:1px}
.data-card__desc{font-size:12.5px;color:rgba(244,236,216,.65);line-height:1.65;margin-bottom:12px}

/* 径流过程线 */
.hydro{
  width:100%;
  display:block;
  overflow:hidden;
}
.hydro .axis{stroke:rgba(244,236,216,.28);stroke-width:1}
.hydro .grid{stroke:rgba(244,236,216,.08);stroke-width:1}
.hydro .flow{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.hydro .rain{fill:rgba(127,212,224,.30)}
.hydro .tick{fill:rgba(244,236,216,.55);font-size:10px;font-family:inherit}
.hydro .label{fill:rgba(244,236,216,.85);font-size:11px;font-family:inherit;font-weight:600}
.hydro .tooltip rect{fill:#1a1a19;stroke:rgba(224,169,62,.5)}
.hydro .tooltip text{fill:var(--parchment);font-size:11px;font-family:inherit}

/* 径流指标 */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:14px;
}
.metric{
  text-align:center;
  border:1px solid rgba(127,212,224,.18);
  border-radius:10px;
  padding:8px 6px;
  background:rgba(0,0,0,.2);
}
.metric .m__v{font-size:17px;font-weight:700;color:var(--gold)}
.metric .m__v small{font-size:10px;font-weight:400;color:rgba(244,236,216,.5)}
.metric .m__k{font-size:10px;letter-spacing:1px;color:var(--crystal);margin-top:2px}

/* 径流指标表 */
.runoff-table{
  width:100%;border-collapse:collapse;
  font-size:12.5px;margin-top:6px;
}
.runoff-table th,.runoff-table td{
  text-align:left;padding:7px 8px;
  border-bottom:1px solid rgba(127,212,224,.12);
  color:var(--parchment);
}
.runoff-table th{
  color:var(--crystal);
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  border-bottom:1px solid rgba(127,212,224,.25);
}
.runoff-table td:nth-child(2){color:var(--gold);font-family:"SF Mono","Consolas",monospace}

/* ---------- 祝福列表 ---------- */
.wishes{margin-bottom:26px}
.wishes .w{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;border-radius:12px;margin-bottom:10px;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(224,169,62,.12);
}
.w .ico{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  background:linear-gradient(135deg,rgba(127,212,224,.25),rgba(224,169,62,.15));
  border:1px solid rgba(127,212,224,.3);
}
.w .t{font-size:14.5px;line-height:1.7}
.w .t b{color:var(--gold)}

.sign{text-align:right;font-size:14px;color:rgba(244,236,216,.65);margin-top:8px}
.sign .rock{color:var(--crystal)}

.footer{
  margin-top:28px;text-align:center;
  font-size:12px;color:rgba(244,236,216,.4);letter-spacing:1px;
  border-top:1px dashed rgba(224,169,62,.2);padding-top:18px;
}

/* ---------- 粒子背景 ---------- */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0}
.particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--crystal);opacity:.5;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.6}100%{transform:translateY(-110vh) scale(0);opacity:0}}

/* ---------- 无障碍 / 减弱动画 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- 响应式：小屏手机 ---------- */
@media (max-width:380px){
  .card{padding:32px 20px 28px;border-radius:22px}
  .facts{grid-template-columns:1fr}
  .wishes .w{padding:10px 12px}
}
/* ---------- 大屏：iPhone Pro Max / 横屏 ---------- */
@media (min-width:480px) and (orientation:landscape) and (max-height:420px){
  body{align-items:flex-start;padding-top:12px}
  .card{margin-top:0}
}