/* v27 · 手机锁屏与拆礼物。角色直接复用 critters.js 的分层 SVG。 */
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
body.is-locked { overflow:hidden; }
body.is-locked > .shell { visibility:hidden; }
.phone-lock.login-card {
  width:100vw;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;padding:0;
  border:0;border-radius:0;box-shadow:none;overflow:auto;color:#554d58;
  background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.68),transparent 60%),#e9e4e7;
}
.phone-lock::backdrop { background:#e9e4e7;backdrop-filter:none; }
.phone-lock .lock-face {
  position:relative;width:min(100%,430px);min-height:100%;margin:auto;padding:max(22px,env(safe-area-inset-top)) 26px max(25px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(247,239,245,.32),rgba(241,232,239,.40)),url('/assets/backgrounds/lucky-day-polka.jpg') center / cover;
}
.lock-face::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(247,243,247,.15) 26%,rgba(239,232,239,.70) 48%,rgba(242,233,240,.8)); }
.lock-face > * { position:relative;z-index:1; }
.lock-header { width:100%;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#817780; }
.lock-header svg { position:absolute;left:calc(50% - 9px);top:-3px; }
.lock-clock { margin-top:clamp(24px,5.5dvh,54px); }
.lock-clock time { display:block;font:300 clamp(64px,11dvh,88px)/1.04 var(--font-ui);letter-spacing:-.07em;padding-right:.07em;color:#5c535e;font-variant-numeric:tabular-nums; }
.phone-lock .lock-clock p { margin:9px 0 0;color:#77707b;font-size:12px;letter-spacing:.13em; }
.lock-pets { display:flex;justify-content:center;align-items:flex-end;margin:clamp(13px,3dvh,27px) 0 12px; }
.lock-pets > span { width:50px;height:46px;margin:0 -3px; }
.lock-pets > span:nth-child(2) { width:57px;height:52px;z-index:1; }
.lock-pets .critter { width:100%;height:100%;filter:drop-shadow(0 4px 3px rgba(114,93,111,.08)); }
.phone-lock h2 { margin:0;font:500 16px/1.5 var(--font-ui);letter-spacing:.14em;padding:0;color:#655967; }
.phone-lock .lock-instruction { margin:7px 0 0;font-size:11px;letter-spacing:.06em;color:#867a86; }
.pin-input-label { position:relative;display:flex;justify-content:center;cursor:text;margin:20px 0 8px; }
.phone-lock input.pin-native { position:absolute;width:1px;height:1px;min-height:0;opacity:0;padding:0;border:0;pointer-events:none; }
.pin-dots { display:flex;gap:18px;padding:5px; }
.pin-dots i { width:10px;height:10px;border:1.2px solid #9e8b9e;border-radius:50%;background:rgba(255,255,255,.45);transition:background .13s,transform .13s,box-shadow .13s; }
.pin-dots i.filled { background:#a7899f;box-shadow:0 0 0 4px rgba(168,138,160,.1);transform:scale(1.04); }
.pin-input-label:focus-within .pin-dots { outline:1px solid rgba(177,150,173,.25);outline-offset:6px;border-radius:20px; }
.phone-lock .pin-feedback { min-height:24px;max-width:270px;margin:0 0 4px;font-size:11px;line-height:24px;color:#8b647d;letter-spacing:.02em; }
.pin-keypad { width:min(100%,282px);display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;align-items:center;gap:clamp(9px,1.5dvh,15px) 22px;margin-top:4px; }
.phone-lock .pin-key { display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(60px,8.4dvh,73px);height:clamp(60px,8.4dvh,73px);padding:0;border:1px solid rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.42);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.60),rgba(255,255,255,.22));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 5px 13px rgba(118,96,114,.035);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .12s,background .12s;touch-action:manipulation; }
.pin-key > span { font:300 28px/1.05 var(--font-ui);color:#655568; }
.phone-lock .pin-key small { min-height:10px;margin-top:3px;font-size:7px;font-weight:500;letter-spacing:.18em;color:#9b879c; }
.pin-key[data-pin="0"] > span { transform:translateY(-3px); }
.pin-key:active { transform:scale(.92);background:rgba(213,189,207,.6); }
.pin-action { min-width:60px;min-height:54px;padding:8px;border:0;background:transparent;font-size:11px;color:#8b7c8c;letter-spacing:.08em;display:grid;place-items:center;touch-action:manipulation; }
.phone-lock .lock-footer { display:flex;align-items:center;gap:13px;margin-top:auto;padding:23px 0 17px;color:#a393a1; }
.phone-lock .lock-footer small { min-height:0;font-size:10px;color:inherit;letter-spacing:.2em; }
.lock-footer > span { width:19px;height:3px;background:radial-gradient(circle,#b7a5b3 1px,transparent 1.4px) 0 0 / 7px 3px; }
.home-indicator { width:100px;height:4px;border-radius:4px;background:rgba(130,112,127,.35); }
.phone-lock.unlocking { animation:lock-open .22s ease-in both; }
.pin-error .pin-dots { animation:pin-shake .38s ease-in-out; }
.lock-now { width:100%;margin-top:8px; }
@keyframes lock-open { to { opacity:0;transform:translateY(-12px); } }
@keyframes pin-shake { 20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)} }
@media (min-width:641px) { .phone-lock .lock-face { min-height:min(870px,100dvh);height:min(870px,100dvh);box-shadow:0 20px 80px rgba(78,60,75,.10); } }
@media (max-height:690px) { .lock-clock{margin-top:15px}.lock-clock time{font-size:61px}.lock-pets{margin:10px 0 7px}.lock-pets > span{width:38px;height:35px}.lock-pets > span:nth-child(2){width:42px;height:39px}.pin-input-label{margin-top:12px}.phone-lock .lock-footer{padding-top:12px}.phone-lock .pin-key{width:56px;height:56px}.pin-keypad{gap:8px 24px} }

.gift-splash { position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;color:#6d5869;background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.95),rgba(247,234,243,.80) 58%,rgba(234,227,237,.9)),#efe8ed; }
.gift-splash::before { content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.68) 2px,transparent 2.5px) 0 0 / 27px 27px; }
.gift-content { position:relative;display:flex;flex-direction:column;align-items:center;transform:translateY(-20px);width:min(340px,94vw); }
.gift-eyebrow { font-size:8px;letter-spacing:.3em;color:#b299af; }
.gift-scene { position:relative;width:100%;height:270px; }
.gift-floor { position:absolute;left:6%;right:6%;bottom:28px;height:15px;border-radius:50%;background:radial-gradient(ellipse,rgba(161,131,154,.18),transparent 70%); }
.gift-pet { position:absolute;width:88px;height:80px;bottom:30px;transform-origin:50% 88%;filter:drop-shadow(0 5px 2px rgba(153,120,145,.1)); }
.gift-pet .critter { width:100%;height:100%; }
.gift-xia { left:12%;z-index:6; }
.gift-venn { left:5%;z-index:2;opacity:0; }
.gift-fox { left:68%;z-index:3;opacity:0; }
.gift-box { position:absolute;left:40%;bottom:38px;width:89px;height:88px;z-index:4;transform-origin:50% 100%; }
.gift-box-base { position:absolute;inset:16px 3px 0;background:#dabccf;clip-path:polygon(0 0,100% 0,100% 94%,94% 94%,94% 100%,6% 100%,6% 94%,0 94%);box-shadow:inset -8px -8px 0 rgba(169,130,154,.17),inset 5px 0 0 rgba(255,255,255,.2); }
.gift-box-base span { display:block;width:16px;height:100%;margin:auto;background:#f4e7ef;box-shadow:3px 0 0 rgba(255,255,255,.35); }
.gift-lid { position:absolute;left:-4px;right:-4px;top:7px;height:21px;background:#e4cbdc;border-bottom:5px solid #bc99b2;box-shadow:inset 0 4px 0 #f3e5ef;transform-origin:70% 50%; }
.gift-lid b { position:absolute;left:40px;top:0;width:17px;height:100%;background:#f8eef4; }
.gift-lid i { position:absolute;width:26px;height:22px;top:-19px;border:7px solid #c69bb8;box-shadow:inset 0 2px 0 rgba(255,255,255,.5); }
.ribbon-left { left:24px;transform:skewY(25deg); }
.ribbon-right { right:20px;transform:skewY(-25deg); }
.gift-confetti { position:absolute;left:53%;top:64%;z-index:5;pointer-events:none; }
.gift-confetti i { position:absolute;width:7px;height:9px;background:#d2abc4;opacity:0; }
.gift-confetti i:nth-child(3n){background:#bdb5ce;width:6px;height:6px}
.gift-confetti i:nth-child(3n+1){background:#e7c09d;clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%)}
.gift-spark { position:absolute;left:40%;top:58%;z-index:7;font-size:26px;color:#fff;opacity:0; }
.gift-caption { text-align:center;opacity:0; }
.gift-caption h1 { margin:0 0 10px;padding-left:.4em;font:400 30px/1.4 var(--font-serif);letter-spacing:.4em;color:#6d5c69; }
.gift-caption p { margin:0;color:#a08a9b;font-size:12px;letter-spacing:.16em; }
.gift-caption small { display:block;margin-top:16px;font-size:10px;letter-spacing:.07em;color:#b2a0ad; }
.gift-skip { position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:10px 18px;color:#a794a4;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.6);border-radius:99px;font-size:11px;letter-spacing:.1em; }
.playing .gift-xia { animation:xia-gift 4s cubic-bezier(.3,.65,.3,1) both; }
.playing .gift-xia .character { animation:none; }
.playing .gift-xia .paw-right { animation:xia-tap 1.05s .75s ease-in-out both; }
.playing .gift-box { animation:box-jiggle 1.2s 1.22s both,box-away .7s 3s both; }
.playing .gift-lid { animation:lid-pop 1.3s 1.8s cubic-bezier(.1,.65,.35,1) both; }
.playing .gift-venn { animation:otter-pop 2.15s 1.85s both; }
.playing .gift-fox { animation:fox-pop 2.05s 1.95s both; }
.playing .gift-venn .character,.playing .gift-fox .character { animation:none; }
.playing .gift-fox .tail { animation:critter-tail .42s 3.7s ease-in-out infinite alternate; }
.playing .gift-venn .paw-right { animation:critter-wave .26s 3.8s 4 alternate; }
.playing .gift-confetti i { animation:gift-confetti 1.6s calc(1.85s + var(--delay)) cubic-bezier(.1,.6,.3,1) both; }
.playing .gift-spark { animation:tap-spark .55s 1.3s both; }
.playing .gift-caption { animation:gift-caption .7s 3.3s both; }
@keyframes xia-gift { 0%{transform:translateX(-35px) scale(.9);opacity:0}12%{opacity:1;transform:translate(-5px,-8px) rotate(-5deg)}22%{transform:translate(12px,0) scale(1.04,.95)}34%{transform:translate(17px,0) rotate(7deg)}43%{transform:translate(8px,-4px) rotate(-9deg)}54%{transform:translate(-10px,0) scale(1.1,.9)}73%{transform:translate(40px,-14px) rotate(5deg)}88%{transform:translate(63px,0) scale(1.07,.9)}100%{transform:translate(63px,0)} }
@keyframes xia-tap { 0%,100%{transform:none}40%,60%{transform:translate(11px,-11px) rotate(-40deg)} }
@keyframes box-jiggle { 0%,100%{transform:none}16%{transform:scale(1.08,.9) rotate(4deg)}32%{transform:rotate(-6deg)}48%{transform:rotate(5deg)}64%{transform:scale(.92,1.1) rotate(-3deg)}80%{transform:scale(1.08,.92)} }
@keyframes lid-pop { 0%{transform:none;opacity:1}55%{transform:translate(32px,-105px) rotate(30deg);opacity:1}100%{transform:translate(95px,-60px) rotate(70deg);opacity:0} }
@keyframes box-away { to{transform:translateY(17px) scale(.65);opacity:0} }
@keyframes otter-pop { 0%{opacity:0;transform:translate(113px,5px) scale(.2)}12%{opacity:1}43%{transform:translate(38px,-138px) scale(1.1) rotate(-19deg)}72%{transform:translate(0,0) scale(1.15,.8) rotate(0)}84%{transform:translate(0,-14px) scale(.96,1.04)}100%{opacity:1;transform:none} }
@keyframes fox-pop { 0%{opacity:0;transform:translate(-100px,8px) scale(.2)}12%{opacity:1}40%{transform:translate(-22px,-153px) scale(1.05) rotate(22deg)}70%{transform:translate(0,0) scale(1.15,.8)}83%{transform:translate(0,-17px) scale(.96,1.04) rotate(-4deg)}100%{opacity:1;transform:none} }
@keyframes gift-confetti { 0%{transform:scale(.1);opacity:0}8%{opacity:1}65%{opacity:.85}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--turn));opacity:0} }
@keyframes tap-spark { 0%{opacity:0;transform:scale(.2)}40%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.3)} }
@keyframes gift-caption { from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce) {
  .gift-pet,.gift-caption{opacity:1}.gift-xia{transform:translateX(63px)}.gift-box,.gift-confetti,.gift-spark{display:none}
}
/* 收紧纵向节奏，手机屏幕内完整显示四排键盘。 */
.lock-clock { margin-top:clamp(18px,3dvh,28px); }
.lock-clock time { font-size:clamp(60px,9dvh,78px); }
.lock-pets { margin:clamp(12px,2dvh,18px) 0 10px; }
.lock-pets > span { width:44px;height:40px; }
.lock-pets > span:nth-child(2) { width:50px;height:46px; }
.pin-input-label { margin-top:12px; }
.phone-lock .pin-key { width:clamp(56px,7.6dvh,67px);height:clamp(56px,7.6dvh,67px); }
.pin-keypad { gap:10px 22px; }
.playing .gift-box { animation:box-jiggle 1.2s 1.22s both,box-away .7s 3s forwards; }
@media (max-height:740px) {
  .phone-lock .lock-face{padding-top:16px;padding-bottom:16px}
  .lock-clock{margin-top:14px}.lock-clock time{font-size:57px}
  .lock-pets{margin:10px 0 6px}.lock-pets>span{width:35px;height:32px}.lock-pets>span:nth-child(2){width:39px;height:36px}
  .phone-lock .pin-key{width:54px;height:54px}.pin-keypad{gap:8px 24px}
  .phone-lock .lock-footer{padding:16px 0 13px}
}
@media (max-height:610px) {
  .lock-clock{margin-top:10px}.lock-clock time{font-size:43px}
  .lock-pets{display:none}.lock-entry{margin-top:15px}.phone-lock .lock-footer{padding:12px 0}
}