.page { background: #e9a548; }


/* 自定义导航 */
.nav { position: absolute; left: 0; right: 0; top: 0; z-index: 20; display: flex; align-items: center; height: 44px; padding-top: env(safe-area-inset-top,0px); box-sizing: content-box; }
.back { margin-left: calc(var(--r)*20); padding: 0 calc(var(--r)*24) 0 calc(var(--r)*16); display: flex; align-items: center;
  border-radius: calc(var(--r)*999); background: rgba(120, 40, 10, .42); border: calc(var(--r)*1) solid rgba(255, 255, 255, .35);
  color: #fff; font-size: calc(var(--r)*28); }
.back-arrow { font-size: calc(var(--r)*44); line-height: 1; margin: calc(var(--r)*-6) calc(var(--r)*6) 0 0; }
.back-hover { background: rgba(120, 40, 10, .7); }

/* 内容：动画靠上，表单靠下 */
.content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; }
/* 上中下留白按比例分配：动画偏上、表单偏下、整体居中协调 */
.sp { flex-shrink: 1; min-height: 0; }
.sp-a { flex-grow: 1; max-height: calc(var(--r)*60); }
.sp-b { flex-grow: 2; }
.sp-c { flex-grow: 1; max-height: calc(var(--r)*70); }
.top { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.title { width: calc(var(--r)*540); display: block; }
.anim { position: relative; margin-top: calc(var(--r)*-10); }

.anim-still { z-index: 2; }
.anim-canvas { z-index: 1; }
.breath { animation: breath 3.2s ease-in-out infinite; }
@keyframes breath { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,210,120,0)); transform: scale(1); }
  50% { filter: brightness(1.12) drop-shadow(0 0 calc(var(--r)*24) rgba(255,210,120,.65)); transform: scale(1.015); } }
.burst { position: absolute; left: 50%; top: 50%; width: calc(var(--r)*760); height: calc(var(--r)*760); margin: calc(var(--r)*-380) 0 0 calc(var(--r)*-380); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,170,.9) 0, rgba(255,200,110,.35) 32%, rgba(255,180,90,0) 64%);
  opacity: 0; transform: scale(.1); pointer-events: none; z-index: 3; }
.burst.go { animation: burst 1.3s ease-out forwards; }
@keyframes burst { 0% { opacity: 0; transform: scale(.1); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }

.form { display: flex; flex-direction: column; align-items: center; padding-bottom: calc(var(--r)*28); flex-shrink: 0; }
.label { display: block; }
.label-name { width: calc(var(--r)*143); }
.label-birth { width: calc(var(--r)*179); margin-top: calc(var(--r)*14); }
/* 输入框与象神页同比例：460×calc(var(--r)*87)（784:148） */
.frame { position: relative; width: calc(var(--r)*460); height: calc(var(--r)*87); margin-top: calc(var(--r)*4); }
.frame-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 输入区 = 外框奶油色区域（按原比例） */
.field { position: absolute; left: 13.5%; width: 73%; top: 21.6%; height: 56.8%; z-index: 2;
  font-size: calc(var(--r)*30); color: #8a2a10; font-weight: 700; text-align: center; letter-spacing: calc(var(--r)*2); }
.picker-text { display: flex; align-items: center; justify-content: center; }
.ph { color: #c79a6a; font-weight: 500; }

.btns { display: flex; align-items: center; justify-content: center; margin-top: calc(var(--r)*30); }
.btns .btn-pray { margin: 0 calc(var(--r)*34); }
.btn { display: block; transition: transform .12s ease; }
.btn-pray { width: calc(var(--r)*210); }
.btn-sm { width: calc(var(--r)*134); }
.share-wrap { position: relative; width: calc(var(--r)*126); }
.share-img { width: calc(var(--r)*126); display: block; }
.share-btn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; }
.share-btn::after { border: 0; }
.pressed { transform: scale(.92); }
.divider { width: calc(var(--r)*360); margin-top: calc(var(--r)*18); }

.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(calc(var(--r)*-10)); } 40%, 80% { transform: translateX(calc(var(--r)*10)); } }

/* 弹层 */
.mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; background: rgba(60, 20, 4, .55);
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.mask.show { opacity: 1; pointer-events: auto; }
.card { width: calc(var(--r)*600); padding: calc(var(--r)*52) calc(var(--r)*44) calc(var(--r)*44); box-sizing: border-box; text-align: center; border-radius: calc(var(--r)*28);
  background: linear-gradient(180deg, #b4381a, #6e1a0c); border: calc(var(--r)*3) solid #f3c66e;
  box-shadow: 0 0 calc(var(--r)*48) rgba(255, 190, 100, .45), inset 0 0 0 calc(var(--r)*8) rgba(246, 212, 140, .16);
  transform: translateY(calc(var(--r)*30)) scale(.96); transition: transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.mask.show .card { transform: none; }
.card-title { font-size: calc(var(--r)*44); font-weight: 700; letter-spacing: calc(var(--r)*8); color: #ffe7a6; }
.card-who { margin-top: calc(var(--r)*12); font-size: calc(var(--r)*24); color: #f6c9a8; }
.card-text { margin-top: calc(var(--r)*26); font-size: calc(var(--r)*30); line-height: 1.75; color: #fff3cf; }
.card-meta { margin-top: calc(var(--r)*22); display: flex; justify-content: center; font-size: calc(var(--r)*24); color: #f6d48c; }
.hi { color: #fff3cf; font-weight: 700; }
.card-btn { margin: calc(var(--r)*36) auto 0; width: calc(var(--r)*300); height: calc(var(--r)*80); line-height: calc(var(--r)*80); border-radius: calc(var(--r)*999); font-size: calc(var(--r)*30); font-weight: 700;
  color: #4a2508; background: linear-gradient(180deg, #fff2c8, #f2c76e 55%, #c98d35); box-shadow: 0 calc(var(--r)*6) calc(var(--r)*18) rgba(0, 0, 0, .35); }
.card-btn-hover { filter: brightness(1.08); transform: scale(.97); }
.card-meta text + text { margin-left: calc(var(--r)*28); }

/* 未出帧前把原生画布移到屏幕外（原生组件层级高于 image，透明度/层级对其无效） */


.back{height:32px;border-width:1px;border-style:solid;cursor:pointer;text-decoration:none}
.back:active{opacity:.8}
.content{top:calc(44px + env(safe-area-inset-top,0px))}
.anim-canvas{z-index:3}.anim-still{z-index:2}
/* 光圈特效：柔光晕（呼吸）+ 旋转光芒，位于动画下层，屏幕混合提亮 */
.halo{position:absolute;pointer-events:none;z-index:1;left:calc(var(--hx)*100%);top:calc(var(--hy)*100%);width:calc(var(--hs)*100%);height:0;padding-bottom:calc(var(--hs)*100%);margin-left:calc(var(--hs)*-50%);margin-top:calc(var(--hs)*-50%)}
.halo img{position:absolute;left:0;top:0;width:100%;height:auto;mix-blend-mode:screen}
.halo .glow{-webkit-animation:hglow 3.6s ease-in-out infinite;animation:hglow 3.6s ease-in-out infinite}
.halo .rays{-webkit-animation:hspin 48s linear infinite;animation:hspin 48s linear infinite;opacity:.75}
.halo .rays2{-webkit-animation:hspin2 70s linear infinite;animation:hspin2 70s linear infinite;opacity:.45;-webkit-transform:scale(.9);transform:scale(.9)}
@-webkit-keyframes hglow{0%,100%{opacity:.55;-webkit-transform:scale(.97)}50%{opacity:.95;-webkit-transform:scale(1.04)}}
@keyframes hglow{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:.95;transform:scale(1.04)}}
@-webkit-keyframes hspin{to{-webkit-transform:rotate(360deg)}}
@keyframes hspin{to{transform:rotate(360deg)}}
@-webkit-keyframes hspin2{from{-webkit-transform:scale(.9) rotate(0)}to{-webkit-transform:scale(.9) rotate(-360deg)}}
@keyframes hspin2{from{transform:scale(.9) rotate(0)}to{transform:scale(.9) rotate(-360deg)}}
.burst{z-index:4}
/* 表单控件 */
.field{border:0;outline:0;background:transparent;display:flex;align-items:center;justify-content:center;line-height:1}
.field::-webkit-input-placeholder{color:inherit;opacity:1}
input.field::placeholder{opacity:1}
input.field::-webkit-input-placeholder{color:var(--ph)}
input.field::placeholder{color:var(--ph)}
.ym{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;z-index:3;cursor:pointer;font-size:16px}
.btn{border:0;background:transparent;padding:0;cursor:pointer}
.btn img{width:100%}
.mask{display:flex}
.card-btn{border:0;cursor:pointer;display:block}
.halo .rays{opacity:.95}.halo .rays2{opacity:.6}

/* 光圈只在动画区域及以下显示，顶部渐隐，不遮挡标题文字 */
.title{position:relative;z-index:6}
.top{position:relative;z-index:2}
.halo-clip{position:absolute;left:-30%;right:-30%;top:0;bottom:-25%;overflow:hidden;pointer-events:none;z-index:1;
  -webkit-mask-image:-webkit-linear-gradient(top,transparent 6%,#000 24%);-webkit-mask-image:linear-gradient(to bottom,transparent 6%,#000 24%);mask-image:linear-gradient(to bottom,transparent 6%,#000 24%)}
.halo-clip .halo{left:calc((0.3 + var(--hx))/1.6*100%);top:calc(var(--hy)/1.25*100%);width:calc(var(--hs)/1.6*100%);padding-bottom:calc(var(--hs)/1.6*100%);margin-left:calc(var(--hs)/1.6*-50%);margin-top:calc(var(--hs)/1.6*-50%)}

.anim-in{position:absolute;left:0;right:0;bottom:0}