@charset "utf-8";

:root { --pink: #ff4f9a; --pink-deep: #f51f86; --coral: #ff6868; --cyan: #2fc4bd; --ink: #233047; --muted: #7b8495; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: var(--ink); background: radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.38), transparent 26%), linear-gradient(135deg, rgb(139, 116, 207) 0%, rgb(191, 79, 138) 54%, rgb(239, 118, 118) 100%); }

.ambient { position: fixed; inset: 0px; pointer-events: none; overflow: hidden; }

.dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0.9; animation: 7s linear 0s infinite normal none running float-dot; }

.dot:nth-child(1) { left: 2%; top: 2%; background: rgb(255, 70, 162); animation-delay: -0.6s; }
.dot:nth-child(2) { left: 4%; top: 5%; background: rgb(245, 209, 79); animation-delay: -1.2s; }
.dot:nth-child(3) { left: 6%; top: 8%; background: rgb(255, 122, 89); animation-delay: -1.8s; }
.dot:nth-child(4) { left: 8%; top: 11%; background: rgb(235, 75, 103); animation-delay: -2.4s; }
.dot:nth-child(5) { left: 10%; top: 14%; background: rgb(217, 76, 138); animation-delay: -3s; }
.dot:nth-child(6) { left: 14%; top: 17%; background: rgb(255, 179, 211); animation-delay: -3.6s; }
.dot:nth-child(7) { left: 17%; top: 21%; background: rgb(255, 229, 166); animation-delay: -4.2s; }
.dot:nth-child(8) { left: 20%; top: 25%; background: rgb(255, 193, 219); animation-delay: -4.8s; }

@keyframes float-dot {
  0%, 100% { transform: translate3d(0px, 0px, 0px) scale(0.92); }
  50% { transform: translate3d(18px, -10px, 0px) scale(1.08); }
}

.gate, .result { position: fixed; inset: 0px; display: flex; align-items: center; justify-content: center; padding: 22px; }

.panel { width: min(420px, 100%); padding: 30px 24px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: rgba(58, 31, 83, 0.28) 0px 24px 70px; text-align: center; opacity: 0; }

.gate.ready .panel { animation: 0.36s ease 0s 1 normal both running pop-in; }

@keyframes pop-in {
  0% { opacity: 0; transform: translateY(12px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}

.gate-title { margin: 0px 0px 8px; font-size: 27px; line-height: 1.28; font-weight: 800; color: rgb(46, 43, 57); }

.gate-arrow { margin: 8px 0px 2px; color: var(--pink); font-size: 20px; font-weight: 700; }

.gate-tip { margin: 0px 0px 18px; color: var(--muted); font-size: 16px; line-height: 1.5; }

.unlock-input { width: 100%; height: 48px; border: 1px solid rgb(225, 230, 240); border-radius: 10px; padding: 0px 14px; font-size: 17px; color: var(--ink); outline: none; background: rgb(251, 252, 255); transition: border-color 0.2s, box-shadow 0.2s; }

.unlock-input:focus { border-color: var(--pink); box-shadow: rgba(255, 79, 154, 0.14) 0px 0px 0px 4px; }

.validation { display: none; margin: 12px 0px 0px; padding: 10px 12px; border-radius: 8px; color: rgb(183, 40, 72); background: rgb(255, 240, 243); font-size: 14px; }

.gate.error .validation { display: block; }

.gate.error .panel { animation: 0.28s ease 0s 1 normal both running shake; }

@keyframes shake {
  0%, 100% { transform: translateX(0px); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.unlock-btn { width: 100%; height: 48px; margin-top: 18px; border: 0px; border-radius: 24px; color: rgb(255, 255, 255); background: linear-gradient(90deg, var(--pink-deep), var(--coral)); box-shadow: rgba(244, 43, 128, 0.28) 0px 12px 28px; font-size: 17px; font-weight: 800; cursor: pointer; }

.result { display: none; padding: 0px; overflow-y: auto; align-items: flex-start; background: rgba(255, 255, 255, 0.92); }

.result.show { display: block; }

.result-inner { width: min(520px, 100%); min-height: 100vh; margin: 0px auto; padding: 36px 20px 42px; text-align: center; }

.top-text { display: block; margin: 4px 0px 14px; font-size: 20px; line-height: 1.45; font-weight: 800; }

.sub-text { display: block; margin-bottom: 20px; color: var(--pink-deep); font-size: 28px; line-height: 1.35; font-weight: 900; }

.media-box { width: 100%; border-radius: 16px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(40, 50, 75, 0.16) 0px 18px 48px; }

.media-box .big-heart { font-size: 88px; line-height: 1.4; padding: 12px 0px; animation: heartbeat 1.6s ease-in-out infinite; }

/* 加载中界面（原版样式） */
#loading { position: fixed; inset: 0px; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: rgb(221, 221, 221); background: rgb(17, 17, 17); font-size: 14px; letter-spacing: 2px; transition: opacity 0.35s; }

#loading .heart { color: rgb(255, 154, 158); font-size: 42px; animation: 1.15s ease-in-out 0s infinite normal none running heartbeat; }

@keyframes heartbeat {
  0% { opacity: 0.75; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 0.75; transform: scale(0.82); }
}

.content-lines { margin-top: 22px; color: rgb(61, 70, 90); font-size: 18px; line-height: 1.75; font-weight: 600; word-break: break-word; }

.content-lines p { margin: 0px 0px 8px; opacity: 0; transform: translateY(8px); transition: opacity 0.55s ease, transform 0.55s ease; }

.content-lines p.show { opacity: 1; transform: translateY(0px); }

.again-btn { width: 100%; height: 48px; margin-top: 26px; border: 0px; border-radius: 24px; color: rgb(255, 255, 255); background: linear-gradient(90deg, var(--pink-deep), var(--coral)); box-shadow: rgba(244, 43, 128, 0.28) 0px 12px 28px; font-size: 16px; font-weight: 800; cursor: pointer; }

.foot { margin-top: 18px; color: var(--muted); font-size: 13px; letter-spacing: 1px; }

.hide { display: none !important; }

.burst { position: fixed; z-index: 9; pointer-events: none; animation: burstFly 1.4s ease-out forwards; }

@keyframes burstFly {
  0% { transform: translate(0px, 0px) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.4) rotate(30deg); opacity: 0; }
}

@media (max-width: 420px) {
  .gate, .result-inner { padding-left: 16px; padding-right: 16px; }
  .panel { padding: 28px 18px 22px; }
  .gate-title { font-size: 24px; }
  .sub-text { font-size: 24px; }
}