/* ============================================================
   给她的生日盲盒 · 样式
   风格：暖纸质感 + 玫瑰红 + 金箔，手作情书的感觉
   ============================================================ */

:root {
  --paper: #f7efe2;
  --card: #fffaf1;
  --ink: #43352e;
  --ink-soft: #8a7663;
  --rose: #b8395a;
  --rose-deep: #96284a;
  --rose-soft: #eec7cf;
  --rose-tint: #f9eae6;
  --gold: #b98b2f;
  --gold-soft: #e3c98f;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #ece0cb; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* 纸张颗粒质感 */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* 桌面端：居中成一个手机宽度的纸卷 */
@media (min-width: 700px) {
  body { max-width: 430px; margin: 0 auto; box-shadow: 0 0 70px rgba(90, 60, 30, .25); }
}

.hidden { display: none !important; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }

#confetti {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 999; pointer-events: none;
}

.mute-btn {
  position: fixed; top: calc(env(safe-area-inset-top) + 12px); right: 14px; z-index: 500;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 250, 241, .85); border: 1px solid #e2d2b6;
  font-size: 1rem;
  box-shadow: 0 3px 8px rgba(96, 64, 38, .15);
}

/* ============ 屏幕通用 ============ */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 2;
}

/* ============ 封面 ============ */
.screen-cover {
  justify-content: center; text-align: center;
  padding: 24px;
  transition: opacity .5s ease, transform .5s ease;
}
.screen-cover.leaving { opacity: 0; transform: translateY(-24px); }

.cover-eyebrow {
  font-size: .68rem; letter-spacing: .5em; text-indent: .5em;
  color: var(--gold); margin-bottom: 18px;
  animation: riseIn .8s both;
}
.cover-title {
  font-size: 2rem; letter-spacing: .12em; line-height: 1.35;
  margin-bottom: 14px;
  animation: riseIn .8s .15s both;
}
.cover-sub {
  font-size: .85rem; color: var(--ink-soft);
  line-height: 2; letter-spacing: .08em;
  animation: riseIn .8s .3s both;
}
.cover-hint {
  margin-top: 28px; font-size: .78rem;
  letter-spacing: .3em; text-indent: .3em;
  color: var(--rose);
  animation: pulse 2s ease-in-out infinite;
}

/* 飘落的花瓣 */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.petals i {
  position: absolute; top: -24px;
  width: 12px; height: 12px;
  background: var(--rose-soft);
  border-radius: 70% 0 70% 0;
  opacity: .8;
  animation: fall linear infinite;
}
.petals i:nth-child(1) { left: 8%;  animation-duration: 9s; }
.petals i:nth-child(2) { left: 26%; animation-duration: 12s;  animation-delay: 2s; width: 9px; height: 9px; }
.petals i:nth-child(3) { left: 47%; animation-duration: 10s;  animation-delay: 4s; }
.petals i:nth-child(4) { left: 64%; animation-duration: 13s;  animation-delay: 1s; opacity: .5; }
.petals i:nth-child(5) { left: 78%; animation-duration: 9.5s; animation-delay: 3s; }
.petals i:nth-child(6) { left: 90%; animation-duration: 11s;  animation-delay: 5s; width: 8px; height: 8px; }
/* 第 7~9 片是金粉尘 */
.petals i:nth-child(7),
.petals i:nth-child(8),
.petals i:nth-child(9) {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 6px rgba(227, 201, 143, .8);
}
.petals i:nth-child(7) { left: 18%; animation-duration: 14s; animation-delay: 2.5s; }
.petals i:nth-child(8) { left: 55%; animation-duration: 12s; animation-delay: 6s; }
.petals i:nth-child(9) { left: 84%; animation-duration: 15s; animation-delay: 4.5s; }

/* 封面礼物盒（纯 CSS 绘制） */
.gift-box {
  position: relative; width: 132px; height: 116px;
  margin-top: 42px; cursor: pointer;
  animation: wobble 2.8s ease-in-out infinite;
}
/* 盒子下方的金色光晕 */
.gift-box::before {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 26px;
  background: radial-gradient(ellipse, rgba(201, 162, 75, .42), transparent 70%);
  filter: blur(4px);
  animation: pulse 2.8s ease-in-out infinite;
}
.gb-body {
  position: absolute; left: 12px; right: 12px; bottom: 0; height: 70px;
  background: linear-gradient(160deg, #c8496b, var(--rose-deep));
  border-radius: 7px;
  box-shadow: 0 10px 22px rgba(150, 40, 74, .28);
}
.gb-body::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 16px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  opacity: .9;
}
.gb-lid {
  position: absolute; left: 0; right: 0; top: 20px; height: 30px;
  background: linear-gradient(160deg, #b23a5d, #8c2242);
  border-radius: 5px; z-index: 2; overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
  transition: transform .55s ease, opacity .55s ease;
}
/* 盖上的高光扫过 */
.gb-lid::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 32%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .4), transparent);
  animation: lidShine 3.4s ease-in-out infinite;
}
@keyframes lidShine {
  0%, 55% { left: -40%; }
  80%, 100% { left: 112%; }
}
.gb-lid::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 16px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  opacity: .9;
}
.gb-bow {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 20px; z-index: 3;
  transition: transform .55s ease, opacity .55s ease;
}
.gb-bow::before, .gb-bow::after {
  content: ""; position: absolute; top: 0;
  width: 17px; height: 17px;
  border: 5px solid var(--gold);
}
.gb-bow::before { left: 2px;  border-radius: 50% 50% 6% 50%; transform: rotate(-42deg); }
.gb-bow::after  { right: 2px; border-radius: 50% 50% 50% 6%; transform: rotate(42deg); }

.gift-box.opening { animation: none; }
.gift-box.opening .gb-lid { transform: translateY(-52px) rotate(-13deg); opacity: 0; }
.gift-box.opening .gb-bow { transform: translateX(-50%) translateY(-64px) rotate(10deg); opacity: 0; }

/* ============ 九宫格 ============ */
.screen-grid {
  justify-content: flex-start;
  padding: calc(env(safe-area-inset-top) + 44px) 20px 44px;
}
.grid-head { text-align: center; }
.grid-eyebrow {
  font-size: .62rem; letter-spacing: .5em; text-indent: .5em;
  color: var(--gold); margin-bottom: 10px;
}
.grid-title { font-size: 1.55rem; letter-spacing: .22em; text-indent: .22em; }
.grid-progress { margin-top: 10px; font-size: .74rem; letter-spacing: .2em; color: var(--ink-soft); }
.grid-progress i { font-style: normal; font-size: .8rem; margin: 0 2px; color: var(--rose); }
.grid-progress i.off { color: #ddcab5; }
.grid-progress .ph-num { margin-left: 10px; font-size: .68rem; letter-spacing: .15em; }
.grid-foot { margin-top: 32px; font-size: .72rem; letter-spacing: .22em; color: #a68d6d; }

.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px;
  width: min(88vw, 372px); margin-top: 26px;
}

.cell {
  position: relative; aspect-ratio: 1;
  background: var(--card);
  border: 1px solid #e6d7bf; border-radius: 16px;
  box-shadow: 0 5px 14px rgba(96, 64, 38, .10);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transform: rotate(var(--tilt, 0deg));
  animation: cellIn .55s var(--d, 0s) both;
}
/* 包装纸圆点纹理 */
.cell::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: radial-gradient(circle at 30% 30%, rgba(185, 139, 47, .09) 1.6px, transparent 1.7px);
  background-size: 17px 17px;
  pointer-events: none;
}
/* 已拆开且有照片的盒子：圆形缩略图 */
.box-thumb {
  width: 46px; height: 46px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid var(--gold-soft);
  box-shadow: 0 2px 6px rgba(96, 64, 38, .25);
}
.box-q { font-size: 2.1rem; font-weight: 700; color: var(--gold); text-shadow: 0 1px 0 #fff; }
.box-num {
  position: absolute; top: 8px; left: 10px;
  font-size: .58rem; letter-spacing: .12em; color: #bda88a;
}
.box-icon { font-size: 1.8rem; line-height: 1; }
.box-short { font-size: .7rem; letter-spacing: .18em; text-indent: .18em; color: var(--ink-soft); }

.cell.open {
  background: var(--rose-tint);
  border-color: var(--rose-soft);
  box-shadow: inset 0 2px 8px rgba(150, 40, 74, .12);
}

/* 第九格：终章 */
.cell-finale { background: linear-gradient(160deg, var(--rose), var(--rose-deep)); border-color: var(--rose-deep); }
.cell-finale .box-short { color: #f3cdd6; }
.box-seal {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d4506f, var(--rose-deep) 72%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), inset 0 1px 2px rgba(255, 255, 255, .35);
  display: grid; place-items: center;
  color: var(--gold-soft); font-size: 1.15rem;
}
.cell-finale.locked { filter: saturate(.55) brightness(.9); }
.cell-finale.locked::after { content: "🔒"; position: absolute; top: 7px; right: 9px; font-size: .68rem; }
.cell-finale.open { background: var(--rose-tint); border-color: var(--rose-soft); }
.cell-finale.open .box-short { color: var(--ink-soft); }

.cell.bursting { animation: burst .38s ease-in both; }
.cell.shake { animation: shake .45s ease; }

/* ============ 弹层通用 ============ */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(64, 36, 32, .5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  opacity: 0; transition: opacity .3s ease;
}
.modal.show { opacity: 1; }
.modal.show .card, .modal.show .letter { animation: cardIn .45s ease both; }

.modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 250, 241, .92);
  border: 1px solid #e2d2b6;
  color: var(--ink-soft); font-size: 1.15rem; line-height: 1;
}

/* ============ 回忆卡片 ============ */
.card {
  position: relative; width: min(100%, 340px);
  max-height: 84dvh; overflow-y: auto;
  background: var(--card);
  border: 1px solid #eadcc4; border-radius: 20px;
  padding: 18px 18px 24px;
  box-shadow: 0 24px 60px rgba(60, 30, 20, .35);
}
/* 拍立得相框 */
.card-photo {
  position: relative;
  background: #fff;
  padding: 9px 9px 26px;
  border-radius: 4px;
  transform: rotate(-1.3deg);
  box-shadow: 0 6px 16px rgba(96, 64, 38, .22);
  margin: 6px 4px 2px;
}
.card-photo::before {
  content: ""; position: absolute; top: -11px; left: 50%; z-index: 2;
  transform: translateX(-50%) rotate(2deg);
  width: 78px; height: 22px;
  background: rgba(240, 225, 190, .8);
  box-shadow: 0 2px 4px rgba(96, 64, 38, .15);
}
.card-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  display: block; border-radius: 2px;
}
.card-photo.no-photo { aspect-ratio: 4 / 3; }
.photo-fallback {
  display: none; position: absolute; inset: 10px;
  border: 1.5px dashed var(--gold-soft); border-radius: 9px;
  align-items: center; justify-content: center; text-align: center;
  font-size: .78rem; line-height: 1.9; letter-spacing: .15em;
  color: #bfa77f;
}
.card-photo.no-photo img { display: none; }
.card-photo.no-photo .photo-fallback { display: flex; }

.card-date { margin-top: 16px; font-size: .68rem; letter-spacing: .28em; color: var(--gold); }
.card-title { margin-top: 7px; font-size: 1.22rem; letter-spacing: .06em; line-height: 1.5; }
.card-text { margin-top: 10px; font-size: .88rem; line-height: 2; color: #5d4c40; white-space: pre-line; }
.card-audio {
  margin-top: 16px; padding: 9px 20px;
  border: 1px solid var(--rose-soft); border-radius: 999px;
  background: #fdf4f4; color: var(--rose);
  font-size: .8rem; letter-spacing: .12em;
}

/* ============ 终章：信 ============ */
.letter {
  position: relative; width: min(100%, 356px);
  max-height: 86dvh; overflow-y: auto;
  background-color: var(--card);
  background-image: repeating-linear-gradient(transparent, transparent 31px, rgba(185, 139, 47, .14) 32px);
  border: 1px solid #eadcc4; border-radius: 14px;
  padding: 86px 30px 30px;
  box-shadow: 0 24px 60px rgba(60, 30, 20, .35);
}
/* 内圈烫金细框 + 底部囍字水印 */
.letter::before {
  content: ""; position: absolute; inset: 9px;
  border: 1.5px solid rgba(185, 139, 47, .35);
  border-radius: 9px;
  pointer-events: none;
}
.letter::after {
  content: "囍"; position: absolute; right: 18px; bottom: 12px;
  font-size: 58px; line-height: 1;
  color: rgba(184, 57, 90, .07);
  pointer-events: none;
}
.wax-seal {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d4506f, var(--rose-deep) 72%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28), inset 0 1px 3px rgba(255, 255, 255, .4);
  display: grid; place-items: center;
  color: var(--gold-soft); font-size: 1.4rem;
}
.letter-title {
  text-align: center; font-size: 1.05rem;
  letter-spacing: .3em; text-indent: .3em;
  color: var(--rose-deep); margin-bottom: 14px;
}
.letter-body p {
  font-size: .88rem; line-height: 2.15; color: #55443a;
  margin-bottom: 10px; text-align: justify;
}
.letter-sign { margin-top: 18px; text-align: right; font-size: .9rem; letter-spacing: .1em; }
.fade-line { opacity: 0; animation: lineIn .8s ease both; }

.countdown {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px dashed var(--gold-soft);
  text-align: center;
}
.cd-line { font-size: .8rem; letter-spacing: .12em; color: var(--ink-soft); line-height: 2.4; }
.cd-line b { font-size: 1.5rem; color: var(--rose); margin: 0 4px; }

/* ============ 提示气泡 ============ */
.toast {
  position: fixed; left: 50%; bottom: 12%; z-index: 200;
  transform: translateX(-50%) translateY(8px);
  background: rgba(67, 53, 46, .92); color: #f7efe2;
  font-size: .78rem; letter-spacing: .15em;
  padding: 10px 22px; border-radius: 999px;
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 动画 ============ */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
}
@keyframes pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes fall {
  to { transform: translateY(115vh) rotate(340deg); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.5deg) translateY(-3px); }
}
@keyframes cellIn {
  from { opacity: 0; transform: translateY(16px) scale(.92) rotate(var(--tilt, 0deg)); }
}
@keyframes burst {
  40% { transform: scale(1.14) rotate(var(--tilt, 0deg)); }
  100% { transform: scale(1.04) rotate(var(--tilt, 0deg)); opacity: .85; }
}
@keyframes shake {
  20%, 60% { transform: translateX(-5px) rotate(var(--tilt, 0deg)); }
  40%, 80% { transform: translateX(5px) rotate(var(--tilt, 0deg)); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(34px) rotate(-1.5deg) scale(.97); }
}
@keyframes lineIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ 游戏封面 ============ */
.screen-gc {
  background: linear-gradient(#7db8de, #9fd0ea 70%, #b8e0f2);
  justify-content: center; text-align: center;
  overflow: hidden; position: relative;
}
.gc-cloud {
  position: absolute; height: 34px; width: 88px;
  background: #fff; border-radius: 40px;
  box-shadow: -24px 10px 0 -6px #fff, 26px 10px 0 -8px #fff;
  opacity: .95;
  animation: gcDrift 26s linear infinite;
}
.gc-cloud.c1 { top: 12%; left: -12%; }
.gc-cloud.c2 { top: 26%; left: -40%; animation-duration: 34s; transform: scale(.75); }
.gc-cloud.c3 { top: 7%; left: -70%; animation-duration: 42s; transform: scale(1.2); }
@keyframes gcDrift { to { transform: translateX(140vw); } }

.gc-logo {
  position: relative; z-index: 2;
  background: linear-gradient(160deg, #c8663f, #a3402a);
  border: 4px solid #6e2a18;
  border-radius: 10px;
  box-shadow: 0 6px 0 #6e2a18, 0 14px 30px rgba(40, 20, 10, .35), inset 0 3px 0 rgba(255, 255, 255, .25);
  padding: 26px 38px 22px;
  transform: rotate(-1.5deg);
  animation: riseIn .7s both;
}
.gc-super {
  font-size: .8rem; letter-spacing: .74em; text-indent: .74em;
  color: #f7e9b8; margin-bottom: 8px;
}
.gc-title {
  font-size: 2.6rem; letter-spacing: .1em; color: #fff;
  text-shadow: 3px 3px 0 #6e2a18;
}
.gc-sub {
  margin-top: 10px; font-size: .82rem; letter-spacing: .5em; text-indent: .5em;
  color: #f7e9b8;
}
.gc-start {
  position: relative; z-index: 2;
  margin-top: 44px;
  font-family: var(--serif);
  font-size: 1.05rem; letter-spacing: .3em; text-indent: .3em;
  color: #fff; background: rgba(110, 42, 24, .85);
  border: 3px solid #fff; border-radius: 8px;
  padding: 14px 34px;
  box-shadow: 0 4px 0 rgba(60, 20, 10, .5);
  animation: riseIn .7s .25s both, pulse 1.6s 1s ease-in-out infinite;
}
.gc-credit {
  position: relative; z-index: 2;
  margin-top: 30px; font-size: .68rem; letter-spacing: .3em;
  color: rgba(255, 255, 255, .85);
}
.gc-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 88px;
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(110, 42, 24, .55) 30px 32px),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(110, 42, 24, .55) 26px 28px),
    #c9764a;
  border-top: 4px solid #8a4b2f;
}

/* ============ 开场桥段 ============ */
.screen-intro {
  justify-content: center; padding: 26px; cursor: pointer;
  transition: opacity .4s ease, transform .4s ease;
}
.screen-intro.leaving { opacity: 0; transform: translateY(-20px); }
.intro-card {
  width: min(100%, 340px);
  background: var(--card);
  border: 1px solid #eadcc4; border-radius: 16px;
  padding: 18px 20px 22px;
  box-shadow: 0 10px 30px rgba(96, 64, 38, .12);
}
.intro-label { font-size: .68rem; letter-spacing: .2em; color: var(--ink-soft); margin-bottom: 12px; }
.intro-msg { font-size: 1rem; line-height: 2; color: var(--ink); min-height: 4em; }
.caret {
  display: inline-block; width: 2px; height: 1.1em;
  background: var(--rose); vertical-align: -0.18em; margin-left: 2px;
  animation: caretBlink .9s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.intro-lines { margin-top: 34px; text-align: center; min-height: 7em; }
.intro-lines p {
  font-size: .95rem; line-height: 2.4; letter-spacing: .12em; color: var(--ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.intro-lines p.show { opacity: 1; transform: translateY(0); }
.intro-lines p:last-child { color: var(--rose); }
.intro-btn {
  margin-top: 6px; padding: 12px 34px;
  border: 1px solid var(--rose); border-radius: 999px;
  color: #fff; background: linear-gradient(160deg, #c8496b, var(--rose-deep));
  font-size: .9rem; letter-spacing: .25em; text-indent: .25em;
  box-shadow: 0 8px 20px rgba(150, 40, 74, .3);
  animation: riseIn .6s both;
}

/* ============ 彩蛋按钮 ============ */
.egg-btn {
  margin-top: 22px; padding: 11px 26px;
  border: 1.5px dashed var(--gold); border-radius: 999px;
  color: var(--gold); background: rgba(255, 250, 241, .7);
  font-size: .82rem; letter-spacing: .18em;
  animation: riseIn .8s both, pulse 2.4s 1s ease-in-out infinite;
}

/* ============ 彩蛋关 ============ */
.game-screen {
  position: fixed; inset: 0; z-index: 150;
  background: var(--paper);
  display: flex; flex-direction: column;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.game-top {
  display: flex; align-items: center; justify-content: space-between;
  /* 右侧留出悬浮静音按钮的位置，避免标题被压住 */
  padding: calc(env(safe-area-inset-top) + 10px) 64px 8px 14px;
}
.game-title { font-size: .8rem; letter-spacing: .25em; color: var(--ink-soft); }
.game-top-btn {
  font-size: .74rem; letter-spacing: .08em; color: var(--rose);
  border: 1px solid var(--rose-soft); border-radius: 999px;
  padding: 7px 13px; background: #fdf4f4;
}
.game-top-btn.on { background: var(--rose); color: #fff; border-color: var(--rose); }
#game-root { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#game-root canvas { border-radius: 12px; box-shadow: 0 10px 32px rgba(96, 64, 38, .16); }

.game-ctls {
  display: flex; justify-content: flex-end; gap: 20px;
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 14px);
}
.game-ctls.twop { justify-content: space-between; }
/* 马里奥单人模式：左手方向、右手跳（标准双拇指布局） */
.game-ctls.mario-touch #ctl-her { width: 100%; }
.game-ctls.mario-touch #ctl-her .ctl { width: 64px; height: 64px; }
.game-ctls.mario-touch #ctl-her .ctl[data-act="left"] { order: 1; }
.game-ctls.mario-touch #ctl-her .ctl[data-act="right"] { order: 2; margin-right: auto; }
.game-ctls.mario-touch #ctl-her .ctl[data-act="jump"] { order: 3; }
.ctl-cluster { display: flex; gap: 10px; }
.ctl-cluster[hidden] { display: none; }
.ctl {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--card); border: 1px solid #e2d2b6;
  color: var(--ink); font-size: 1.3rem;
  box-shadow: 0 4px 10px rgba(96, 64, 38, .14);
  touch-action: none;
}
.ctl:active { background: var(--rose-tint); transform: scale(.94); }
.ctl-jump { background: linear-gradient(160deg, #c8496b, var(--rose-deep)); color: #fff; border-color: var(--rose-deep); }
#ctl-his .ctl-jump { background: linear-gradient(160deg, #4a7ba6, #35618a); border-color: #35618a; }

/* 爱心时刻弹窗 */
.moment {
  position: absolute; inset: 0; z-index: 9;
  background: rgba(40, 16, 22, .72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 26px;
  opacity: 0; transition: opacity .3s ease;
  cursor: pointer;
}
.moment.show { opacity: 1; }
.moment-card {
  width: min(100%, 330px);
  background: var(--card);
  border: 1px solid #eadcc4; border-radius: 18px;
  padding: 16px 16px 20px; text-align: center;
  box-shadow: 0 24px 60px rgba(30, 12, 16, .5);
}
.moment.show .moment-card { animation: cardIn .4s ease both; }
.moment-photo {
  background: #fff; padding: 8px 8px 22px;
  border-radius: 4px; transform: rotate(-1.2deg);
  box-shadow: 0 5px 14px rgba(96, 64, 38, .22);
  margin-bottom: 4px;
}
.moment-photo img {
  width: 100%; max-height: 44vh;
  object-fit: contain; display: block;
  border-radius: 2px; background: #f6efe4;
}
.moment-photo.hidden { display: none; }
.moment-date { margin-top: 12px; font-size: .7rem; letter-spacing: .3em; color: var(--gold); }
.moment-line { margin-top: 8px; font-size: 1rem; line-height: 2; color: var(--ink); letter-spacing: .06em; }
.moment-tap {
  margin-top: 14px; font-size: .68rem; letter-spacing: .3em;
  color: var(--rose); animation: pulse 1.6s ease-in-out infinite;
}

/* 通关终章：钻戒盒 */
.egg-win {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(40, 16, 22, .78);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity .5s ease;
}
.egg-win.show { opacity: 1; }

.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ring-hint {
  color: #f3dcc4; font-size: .85rem; letter-spacing: .3em; text-indent: .3em;
  animation: pulse 2s ease-in-out infinite;
}
.ring-box {
  position: relative; width: 150px; height: 150px;
  cursor: pointer; perspective: 520px;
  animation: wobble 2.4s ease-in-out infinite;
}
.ring-box.open { animation: none; }
.rb-body {
  position: absolute; bottom: 0; left: 10px; right: 10px; height: 72px;
  background: linear-gradient(160deg, #c8496b, #7c1f3d);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5), inset 0 2px 4px rgba(255, 255, 255, .18);
}
.rb-cushion {
  position: absolute; top: 7px; left: 7px; right: 7px; bottom: 7px;
  background: #641832; border-radius: 8px;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, .5);
}
.rb-cushion::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 26px; background: #4d1226; border-radius: 2px;
}
.rb-lid {
  position: absolute; bottom: 66px; left: 10px; right: 10px; height: 56px;
  background: linear-gradient(160deg, #d4506f, #96284a);
  border-radius: 14px 14px 6px 6px; z-index: 3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3), inset 0 2px 4px rgba(255, 255, 255, .22);
  transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.34, 1.3, .5, 1);
}
.rb-lid::after {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  transform: translateX(-50%);
  width: 26px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}
.ring-box.open .rb-lid { transform: rotateX(-112deg); }

.rb-ring {
  position: absolute; left: 50%; bottom: 22px; z-index: 2;
  transform: translateX(-50%) translateY(8px) scale(.35);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2, .9, .3, 1.15) .4s, opacity .5s ease .4s;
}
.ring-box.open .rb-ring {
  opacity: 1;
  transform: translateX(-50%) translateY(-66px) scale(1);
}
.rb-band {
  display: block; width: 52px; height: 52px;
  border: 6px solid #e3c98f; border-radius: 50%;
  box-shadow: 0 0 12px rgba(227, 201, 143, .65), inset 0 0 6px rgba(255, 255, 255, .5);
}
.rb-gem {
  position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 31px;
  background: linear-gradient(135deg, #ffffff, #cfe6ff 40%, #9fc8f0 68%, #eaf6ff);
  clip-path: polygon(50% 100%, 0 34%, 18% 6%, 82% 6%, 100% 34%);
  filter: drop-shadow(0 0 9px rgba(196, 228, 255, .95));
  animation: gemTwinkle 1.6s ease-in-out infinite;
}
@keyframes gemTwinkle {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(196, 228, 255, .7)); }
  50% { filter: drop-shadow(0 0 16px rgba(228, 244, 255, 1)); }
}
.rb-rays {
  position: absolute; left: 50%; top: 6px; z-index: 1;
  width: 240px; height: 240px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(240, 220, 160, .38) 0 9deg, transparent 9deg 28deg);
  -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  opacity: 0; transition: opacity .7s ease .55s;
  animation: raySpin 16s linear infinite;
  pointer-events: none;
}
.ring-box.open .rb-rays { opacity: .85; }
@keyframes raySpin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ring-line {
  font-size: 1.08rem; color: #fff7ec; letter-spacing: .18em;
  line-height: 1.9; text-align: center; max-width: 300px;
}
.ring-castle-pre {
  font-size: .78rem; color: #c9b8a8; letter-spacing: .1em;
  line-height: 2; text-align: center; max-width: 320px;
  white-space: pre-line;
}
.ring-castle-pre:empty { display: none; }
.ring-castle {
  font-size: 1.06rem; color: #f7e9b8; letter-spacing: .16em;
  line-height: 2.1; text-align: center; max-width: 320px;
  white-space: pre-line;
}
.ring-castle:empty { display: none; }
.ring-date { font-size: .8rem; color: #f3cdd6; letter-spacing: .2em; }
.fade-step { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.fade-step.show { opacity: 1; transform: none; }

.egg-win-btns { display: flex; gap: 12px; justify-content: center; }
.egg-win-btns button {
  padding: 10px 20px; border-radius: 999px; font-size: .8rem; letter-spacing: .1em;
}
#egg-again { border: 1px solid rgba(255, 247, 236, .4); color: #f3dcc4; background: transparent; }
#egg-back { background: linear-gradient(160deg, #c8496b, var(--rose-deep)); color: #fff; }