.ip-card { background:#fff; border:1px solid #eee4e8; border-radius:12px; padding:14px; width:228px; max-width:calc(100% - 42px); text-align:center; box-shadow:0 2px 5px #30202b04; }
.ip-card-art { height:92px; display:grid; place-items:center; font-size:54px; }
.ip-card-art img { height:88px; width:88px; object-fit:contain; }
/* 猜拳、骰子揭晓后的卡片：对方在上、结果在中间、我在下，和揭晓动效同一个方向（2026-10-29 用户定） */
.ip-card-art.ip-stack { height:auto; display:flex; flex-direction:column; align-items:center; gap:4px; padding:2px 0 4px; }
.ip-stack .ip-side { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; color:#796c73; }
.ip-card .ip-stack .ip-result { margin:2px 0; }
.ip-card strong { display:block; font-size:15px; margin:3px 0 6px; }
/* 浅色小字 2026-10-21 按原色相调深到 ≥4.5:1：卡片说明 #92858c→#796c73、状态 #a1949a→#7a6b72、表单标签 #927e88→#816d77、生日弹窗的眉标 / 来自 / 落款；深色模式各有覆盖，不变 */
.ip-card p { color:#796c73; font-size:12px; margin:4px 0 10px; line-height:1.6; }
.ip-card .ip-action { display:block; width:100%; background:#fff0f5; border:1px solid #f4d5e2; color:#aa446b; font-size:13px!important; padding:9px; border-radius:8px; margin-top:8px; }
.ip-card .ip-action:hover { background:#fce1ec; }
.ip-card .ip-action.ip-primary { background:#068744; border-color:#068744; color:white; }   /* 原 #07a553 白字 3.2:1，同色相调深到 4.6:1 */
.ip-card .ip-state { font-size:11px; color:#7a6b72; padding-top:8px; border-top:1px solid #f2ebee; margin-top:12px; }
.ip-card .ip-state.done { color:#18834c; }
.ip-card textarea,.ip-card input { width:100%; max-width:100%; min-width:0; font:inherit; font-size:13px; border:1px solid #e7d9e0; border-radius:7px; padding:9px; background:#fffafc; color:#4b3741; }
.ip-card textarea { resize:vertical; min-height:78px; }
.ip-option-label { display:block; text-align:left; font-size:11px; color:#816d77; margin:10px 0; }
.ip-option-label input { display:block; margin-top:4px; }
.ip-card .ip-option-error { color:#aa446b; margin:4px 0; font-size:11px; }
.ip-option-error:empty { display:none; }
.ip-pair { display:flex; justify-content:center; align-items:center; gap:10px; font-size:35px; min-height:70px; }
.ip-pair img { width:74px; height:74px; }
.ip-result { color:#a64971!important; }
.ip-die { display:inline-grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); width:52px; height:52px; border:2px solid #caa6b7; border-radius:12px; padding:9px; gap:3px; background:#fff; box-shadow:3px 4px #eddde5; vertical-align:middle; }
.ip-die i { width:7px; height:7px; background:#a65377; border-radius:50%; align-self:center; justify-self:center; }
.ip-die i.off { visibility:hidden; }
.ip-die.ip-hand { grid-template:1fr/1fr; padding:7px; color:#a65377; }
.ip-hand svg { width:100%; height:100%; }
.ip-scene { position:fixed; inset:0; z-index:120000; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; background:radial-gradient(ellipse at center,#fff8fbf5,#ffe0eced); animation:ip-scene-in .25s ease-out; }
.ip-scene.night,.ip-scene.fireworks { background:linear-gradient(150deg,#262444f5,#65527aef); color:#fff4d7; }
.ip-scene h4 { font-size:21px; margin:20px 0 0; z-index:2; }
.ip-scene .ip-stars { position:absolute; inset:0; }
.ip-scene .ip-stars i { position:absolute; font-style:normal; font-size:var(--s); left:var(--x); top:var(--y); animation:ip-spark 1.8s var(--d) both; color:#eb90b0; }
.ip-scene.night .ip-stars i,.ip-scene.fireworks .ip-stars i { color:#ffe79c; }
.ip-dogs { display:flex; align-items:center; justify-content:center; width:240px; }
.ip-dog { position:relative; width:102px; height:124px; flex-shrink:0; }
.ip-dog img { position:relative; z-index:2; width:102px; height:102px; }
.ip-dog::after { content:''; position:absolute; left:26px; top:69px; width:52px; height:52px; border:2px solid #554945; background:#fffafa; border-radius:40% 40% 35% 35%; }
.ip-dog:first-child { animation:ip-hug-left 1s ease-in-out both; }
.ip-dog:last-child { animation:ip-hug-right 1s ease-in-out both; }
.ip-dog:last-child img { transform:scaleX(-1); }
.ip-scene.night .ip-dog { animation:ip-breathe 2s ease-in-out; }
.ip-scene.night .ip-dog::after { background:#e9e1fa; }
.ip-paws { display:flex; width:200px; justify-content:space-around; }
.ip-paw { display:block; width:82px; height:92px; animation:ip-hug-left .8s both; }
.ip-paw:last-child { animation-name:ip-hug-right; }
.ip-paw svg { width:100%; height:100%; }
.ip-dog .ip-arm { position:absolute; z-index:3; top:84px; right:4px; width:42px; height:18px; border:2px solid #554945; border-radius:50px; background:#fffafa; transform:rotate(25deg); }
.ip-dog:last-child .ip-arm { right:auto; left:4px; transform:rotate(-25deg); }
.ip-firework { position:relative; width:210px; height:155px; }
.ip-firework svg { position:absolute; width:150px; height:150px; left:30px; top:0; animation:ip-bloom 1.8s both; }
.ip-firework svg+svg { width:100px; height:100px; left:120px; top:35px; animation-delay:.35s; }
.ip-firework::before,.ip-firework::after { content:""; position:absolute; width:5px; height:30px; border-radius:10px; background:linear-gradient(#fff3bc,transparent); left:30px; bottom:0; animation:ip-launch .6s both; }
.ip-firework::after { left:auto; right:30px; }
@keyframes ip-launch { from { transform:translateY(80px); opacity:1; } to { transform:translateY(-50px); opacity:0; } }
@keyframes ip-bloom { 0%,25% { transform:scale(0); opacity:0; } 45% { opacity:1; } 100% { transform:scale(1.1); opacity:.3; } }
.ip-big { font-size:92px; animation:ip-pop 1s both; }
.ip-scene.heart .ip-big { animation:ip-heart 1.8s both; }
/* 拆信：中央信封出现、翻开封口，再展示可停留阅读的信纸。 */
.ip-paper-dialog { padding:0; border:0; background:transparent; color:#664e45; width:min(460px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow:visible; }
.ip-paper-dialog::backdrop { background:#30232b66; backdrop-filter:blur(3px); }
.ip-paper-shell { position:relative; display:grid; place-items:center; }
.ip-paper-close { position:absolute; right:8px; top:8px; z-index:8; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #dfcdc1; border-radius:50%; background:#fffaf1; color:#80675b; }
.ip-paper-close svg { width:16px; height:16px; }
.ip-envelope-stage { display:grid; justify-items:center; align-content:center; min-height:min(480px,calc(100dvh - 40px)); gap:35px; padding:70px 0 36px; }
.ip-envelope-stage p { font-size:13px; color:#fff8ed; letter-spacing:2px; text-shadow:0 1px 3px #30232b88; }
.ip-envelope { position:relative; width:240px; height:160px; perspective:800px; animation:ip-envelope-in .45s cubic-bezier(.2,.8,.3,1) both; }
.ip-envelope-back { position:absolute; inset:0; border-radius:7px; background:#deb29b; box-shadow:0 16px 36px #35202433; }
.ip-envelope-sheet { position:absolute; z-index:2; inset:12px 17px 8px; border-radius:4px; background:repeating-linear-gradient(#fff9ea 0 21px,#e5d9c5 21px 22px); animation:ip-envelope-letter .5s 1s both; }
.ip-envelope-front { position:absolute; inset:0; z-index:3; border-radius:6px; background:linear-gradient(32deg,#f4d3ba 49.6%,transparent 50%) bottom left / 51% 100% no-repeat,linear-gradient(-32deg,#f4d3ba 49.6%,transparent 50%) bottom right / 51% 100% no-repeat; }
.ip-envelope-front::after { content:''; position:absolute; inset:0; clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%); background:#f7ddc9; border-radius:6px; }
.ip-envelope-flap { position:absolute; inset:0; z-index:4; transform-origin:center top; clip-path:polygon(0 0,100% 0,50% 62%); background:#fce7d3; animation:ip-envelope-open .65s .45s ease-in-out forwards; backface-visibility:visible; }
.ip-envelope-seal { position:absolute; z-index:5; left:calc(50% - 16px); top:76px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff5e9; background:#bb6d79; box-shadow:0 2px 3px #693c4a25; animation:ip-seal-away .2s .4s forwards; }
.ip-letter-sheet { width:100%; max-height:calc(100dvh - 48px); overflow:auto; padding:46px 36px 30px; border:1px solid #eadbc5; border-radius:5px 18px 6px 6px; background-color:#fff9eb; background-image:radial-gradient(#a1875e10 .6px,transparent .8px); background-size:5px 5px; box-shadow:0 24px 80px #2d192b44; animation:ip-sheet-arrive .4s ease-out both; }
.ip-letter-sheet::before { content:''; display:block; width:34px; height:2px; background:#cba581; margin-bottom:22px; }
.ip-letter-from { font-size:12px; color:#aa8472; letter-spacing:1px; margin:0 0 20px; }
.ip-letter-text { margin:0; min-height:180px; padding:0 0 2px; font:17px/30px 'Kaiti SC','STKaiti','KaiTi',serif; white-space:pre-wrap; overflow-wrap:anywhere; color:#654d42; background:repeating-linear-gradient(transparent 0 29px,#cbb99b66 29px 30px); }
.ip-letter-sign { text-align:right; color:#b27d7f; font-size:13px; margin:24px 0 0; }
.ip-paper-dialog [hidden] { display:none!important; }
.ip-letter-sheet:focus { outline:none; }
@keyframes ip-envelope-in { from { opacity:0; transform:translateY(28px) scale(.72) rotate(-7deg); } to { opacity:1; transform:none; } }
@keyframes ip-envelope-open { 49% { z-index:4; } 50%,100% { z-index:1; } to { transform:rotateX(180deg); } }
@keyframes ip-envelope-letter { from { transform:none; } to { transform:translateY(-66px); } }
@keyframes ip-seal-away { to { opacity:0; transform:scale(.4); } }
@keyframes ip-sheet-arrive { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
@media(max-width:480px) { .ip-letter-sheet { padding:46px 25px 26px; } }
/* 拆开的信，信纸跟着两人共用的聊天主题换（P-049，2026-10-26 用户定）：C 简约质感用原来的横线信纸（深色外观仍是原来的深色信纸），
   B 软萌果冻用朱丝栏，A 玻璃清透用星夜，朱丝栏和星夜不分深浅色。三套都在纸面中间偏上铺一个淡淡的产品图标「双星」水印
   （与 push-icon.svg 同一组路径，颜色跟纸面走），叠在纸纹上、文字下。写信框和信箱也用 .ip-letter-sheet，所以只认 .ip-paper-reading 里的。 */
.ip-paper-reading .ip-letter-sheet { background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%222%202.5%2023%2020%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M7.2%2020.5c2.2-2.8%204.8-4.7%207.8-5.8%22%20fill%3D%22none%22%20stroke%3D%22%238a6f55%22%20stroke-opacity%3D%220.035%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m10.1%204%201.8%205.5%205.3%201.8-5.3%201.8-1.8%205.5-1.8-5.5L3%2011.3l5.3-1.8L10.1%204Z%22%20fill%3D%22%238a6f55%22%20fill-opacity%3D%220.07%22%20stroke%3D%22%238a6f55%22%20stroke-opacity%3D%220.07%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22m18.2%2011.5%201.5%204.2%204.1%201.5-4.1%201.4-1.5%204.2-1.4-4.2-4.2-1.4%204.2-1.5%201.4-4.2Z%22%20fill%3D%22%23c9a15c%22%20fill-opacity%3D%220.1%22%20stroke%3D%22%23c9a15c%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.1%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 46% / 62% auto,repeating-linear-gradient(#fffdf7 0 29px,#dfd5bd55 30px,#fffdf7 31px); }
html[data-theme=b] .ip-paper-reading .ip-letter-sheet { border-color:#e6cfc6; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%222%202.5%2023%2020%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M7.2%2020.5c2.2-2.8%204.8-4.7%207.8-5.8%22%20fill%3D%22none%22%20stroke%3D%22%23b0473f%22%20stroke-opacity%3D%220.03%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m10.1%204%201.8%205.5%205.3%201.8-5.3%201.8-1.8%205.5-1.8-5.5L3%2011.3l5.3-1.8L10.1%204Z%22%20fill%3D%22%23b0473f%22%20fill-opacity%3D%220.06%22%20stroke%3D%22%23b0473f%22%20stroke-opacity%3D%220.06%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22m18.2%2011.5%201.5%204.2%204.1%201.5-4.1%201.4-1.5%204.2-1.4-4.2-4.2-1.4%204.2-1.5%201.4-4.2Z%22%20fill%3D%22%23c9a15c%22%20fill-opacity%3D%220.1%22%20stroke%3D%22%23c9a15c%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.1%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 46% / 62% auto,linear-gradient(transparent 18px,#c2534a 18px 19px,transparent 19px 22px,#c2534a 22px 23px,transparent 23px) #fbf7ee; box-shadow:0 18px 40px #584c3420; }
html[data-theme=b] .ip-paper-reading .ip-letter-sheet::before { background:#c2534a; }
html[data-theme=b] .ip-paper-reading .ip-letter-from { color:#a3544c; }
html[data-theme=b] .ip-paper-reading .ip-letter-text { color:#3f3330; background:repeating-linear-gradient(transparent 0 29px,#c2534a40 29px 30px); }
html[data-theme=b] .ip-paper-reading .ip-letter-sign { color:#b04a42; }
html[data-theme=a] .ip-paper-reading .ip-letter-sheet { border-color:#2e4f45; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%222%202.5%2023%2020%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M7.2%2020.5c2.2-2.8%204.8-4.7%207.8-5.8%22%20fill%3D%22none%22%20stroke%3D%22%23f4ecd9%22%20stroke-opacity%3D%220.035%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m10.1%204%201.8%205.5%205.3%201.8-5.3%201.8-1.8%205.5-1.8-5.5L3%2011.3l5.3-1.8L10.1%204Z%22%20fill%3D%22%23f4ecd9%22%20fill-opacity%3D%220.07%22%20stroke%3D%22%23f4ecd9%22%20stroke-opacity%3D%220.07%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22m18.2%2011.5%201.5%204.2%204.1%201.5-4.1%201.4-1.5%204.2-1.4-4.2-4.2-1.4%204.2-1.5%201.4-4.2Z%22%20fill%3D%22%23e8c27a%22%20fill-opacity%3D%220.1%22%20stroke%3D%22%23e8c27a%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.1%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 46% / 62% auto,radial-gradient(#f4ecd918 .8px,transparent 1.2px) 0 0 / 23px 23px,radial-gradient(#e8c27a14 .7px,transparent 1.1px) 0 0 / 37px 37px #1f3a32; box-shadow:0 18px 40px #0c1a1550; }
html[data-theme=a] .ip-paper-reading .ip-letter-sheet::before { background:#e8c27a; }
html[data-theme=a] .ip-paper-reading .ip-letter-from { color:#cbb98f; }
html[data-theme=a] .ip-paper-reading .ip-letter-text { color:#efe6d2; background:repeating-linear-gradient(transparent 0 29px,#e8c27a33 29px 30px); }
html[data-theme=a] .ip-paper-reading .ip-letter-sign { color:#e8c27a; }

.ip-rolling { animation:ip-roll .18s linear 6; }
@keyframes ip-scene-in { from { opacity:0; } to { opacity:1; } }
@keyframes ip-hug-left { from { transform:translateX(-55px) rotate(-15deg); } 70%,100% { transform:translateX(10px) rotate(7deg); } }
@keyframes ip-hug-right { from { transform:translateX(55px) rotate(15deg); } 70%,100% { transform:translateX(-10px) rotate(-7deg); } }
@keyframes ip-breathe { 50% { transform:translateY(-4px); } }
@keyframes ip-pop { 0% { transform:scale(.2); opacity:0; } 65% { transform:scale(1.14); } 100% { transform:scale(1); opacity:1; } }
@keyframes ip-heart { 0% { transform:translateX(-100px) scale(.3); opacity:0; } 60% { transform:scale(1.1); opacity:1; } 100% { transform:translateX(80px) scale(.6); opacity:0; } }
@keyframes ip-roll { 50% { transform:rotate(18deg) translateY(-9px); } }
@keyframes ip-spark { 0% { transform:scale(.1) translateY(40px); opacity:0; } 35% { opacity:1; } 100% { transform:scale(1.2) translateY(-25px); opacity:0; } }

/* 与审核稿一致的卡片和画面；正式入口置于客户端表情面板。 */
.interaction-card { box-sizing:border-box; max-width:100%; width:228px; color:#3b343a; white-space:normal; }
.interaction-card *, .ip-paper-dialog *, .interaction-scene * { box-sizing:border-box; }
.interaction-card button,.ip-paper-dialog button { font:inherit; cursor:pointer; }
.interaction-card button:disabled,.ip-paper-dialog button:disabled { opacity:.55;cursor:default; }
.interaction-card button:focus-visible,.ip-paper-dialog button:focus-visible { outline:2px solid #07a553;outline-offset:2px; }
/* 拆信时信封阶段没有可聚焦的按钮，showModal 把焦点落在弹窗本身；信纸出来后脚本也会聚焦信纸。两者都不是可操作控件，
   不画浏览器默认的蓝色焦点框（2026-10-22 用户反馈 iPhone 打开纸条必现一个蓝框）；按钮的焦点框照旧 */
.ip-paper-dialog:focus,.ip-paper-dialog:focus-visible,.ip-letter-sheet:focus,.ip-letter-sheet:focus-visible { outline:none; }
.interaction-scene { font:15px/1.5 -apple-system,'PingFang SC',sans-serif;color:#3b343a; }
.ip-paper-dialog { font:15px/1.5 -apple-system,'PingFang SC',sans-serif; }
.interaction-compose { padding-top:40px; }
.interaction-compose h3 { margin:0 0 16px; }
.interaction-compose input,.interaction-compose textarea { box-sizing:border-box;width:100%;font:inherit;font-size:16px;border:1px solid #e0cbb9;border-radius:6px;background:#fffdf7;color:#654d42;padding:10px; }
.interaction-compose textarea { min-height:130px;resize:vertical; }
.interaction-compose .ip-action { width:100%;padding:10px;border:0;border-radius:7px;background:#068744;color:#fff;margin-top:12px; }
.interaction-tile { display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;font-size:11px!important; }
.interaction-tile .interaction-icon { display:grid;place-items:center;height:62px;font-size:32px; }
.interaction-tile .interaction-icon img { width:62px!important;height:62px!important; }
.interaction-tile > span:last-child { line-height:1.3; }
.interaction-scene .ip-pair img { width:100px;height:100px; }
@media(prefers-reduced-motion:reduce) { .interaction-scene *, .ip-paper-dialog * { animation:none!important;transition:none!important; } }

/* 已选花火大会：共用 Canvas 编排，结束或切后台时释放动画。 */
.interaction-fireworks { position:fixed;inset:0;z-index:120000;background:#060b16; }
.interaction-fireworks canvas { display:block;width:100%;height:100%; }
.interaction-fireworks-caption { position:absolute;left:18px;right:18px;bottom:max(48px,env(safe-area-inset-bottom));text-align:center;pointer-events:none;color:#fff0cf;text-shadow:0 2px 18px #000; }
.interaction-fireworks-caption small { display:block;font-size:10px;letter-spacing:5px;margin-bottom:10px;color:#cead77; }
.interaction-fireworks-caption strong { font:500 clamp(18px,2vw,26px)/1.6 -apple-system,'PingFang SC',sans-serif;letter-spacing:2px; }
.interaction-fireworks-close { position:absolute;right:18px;top:max(18px,env(safe-area-inset-top));display:grid;place-items:center;width:36px;height:36px;padding:8px;border:1px solid #ffffff30;border-radius:9px;color:#fff;background:#101a2ca6;cursor:pointer; }
.interaction-fireworks-close svg { width:20px;height:20px; }

/* 信箱：收到的 / 我写的分两个页签，各自按时间倒序，每张只是一只合着的信封，只看得到拆没拆和收发时间。 */
.ip-paper-box h3 { margin:0 0 10px; }
.ip-paper-tabs { display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 0 8px;padding:4px;border-radius:10px;background:#f3e6d3; }
.ip-paper-tabs button { padding:8px 0;border:0;border-radius:7px;background:transparent;color:#8a7266;font-size:14px;cursor:pointer; }
.ip-paper-tabs button.active { background:#fffdf7;color:#a4566a;font-weight:600;box-shadow:0 1px 4px #6b46321f; }
.ip-paper-box-tip { color:#9a7a67;font-size:12px;line-height:1.7; }
.ip-paper-list { display:grid;gap:10px;margin:20px 0; }
.ip-paper-entry { display:flex;align-items:center;gap:16px;width:100%;padding:16px 15px;text-align:left;background:#fffdf7;border:1px solid #e9d7bd;border-radius:8px;color:#654d42; }
.ip-paper-mini { position:relative;flex:none;width:50px;height:34px;border-radius:4px;background:#f4d3ba;box-shadow:0 3px 8px #35202422; }
.ip-paper-mini::before { content:'';position:absolute;inset:0;border-radius:4px;clip-path:polygon(0 0,100% 0,50% 62%);background:#fce7d3; }
.ip-paper-mini::after { content:'♥';position:absolute;left:calc(50% - 8px);top:12px;width:16px;height:16px;border-radius:50%;background:#bb6d79;color:#fff5e9;font-size:9px;line-height:16px;text-align:center; }
.ip-paper-entry.opened .ip-paper-mini { margin-top:12px;background:#ecdccd; }
.ip-paper-entry.opened .ip-paper-mini::before { inset:auto 0 100%;height:13px;border-radius:0;clip-path:polygon(0 100%,100% 100%,50% 0);background:#f6e8dc; }
.ip-paper-entry.opened .ip-paper-mini::after { content:none; }
.ip-paper-entry-info { display:grid;gap:4px;min-width:0; }
.ip-paper-entry-info strong { font-size:14px;font-weight:600;color:#a4566a; }
.ip-paper-entry.opened .ip-paper-entry-info strong { font-weight:500;color:#8a7266; }
.ip-paper-entry time { color:#9c8a7d;font-size:12px; }
.ip-paper-back { position:absolute;top:10px;left:18px;z-index:8;background:#fff9eb;border:0;padding:7px;color:#80675b;font-size:12px!important;border-radius:6px; }
/* 拆信时只露信封；信纸出来后，返回和关闭贴着信纸上沿浮出。 */
.ip-paper-reading > .ip-paper-close,.ip-paper-reading > .ip-paper-back { display:none; }
.ip-paper-reading.ip-paper-revealed > .ip-paper-close,.ip-paper-reading.ip-paper-revealed > .ip-paper-back { display:grid;place-items:center;animation:ip-paper-tools .3s .3s ease-out both; }
.ip-paper-reading > .ip-paper-close { top:-14px;right:-14px;box-shadow:0 4px 12px #2d192b2e; }
.ip-paper-reading > .ip-paper-back { top:-14px;left:22px;height:30px;padding:0 13px;border:1px solid #dfcdc1;border-radius:15px;background:#fffaf1;box-shadow:0 4px 12px #2d192b2e; }
@keyframes ip-paper-tools { from { opacity:0;transform:translateY(6px) scale(.85); } to { opacity:1;transform:none; } }
.ip-paper-box > .ip-action { width:100%;border:1px solid #e9d7bd;border-radius:8px;padding:9px;color:#80675b;background:#fffdf7; }

/* 生日祝福：已审核的蛋糕、烛光与彩带。 */
.ip-card.ip-birthday-card { background:linear-gradient(155deg,#fffdf6,#fff0f0); border-color:#eedac5; }
.ip-card .ip-birthday-note { white-space:pre-wrap; overflow-wrap:anywhere; color:#795449; text-align:left; }
.ip-card .ip-birthday-count { text-align:right; font-size:11px; margin:3px 0; }
.ip-birthday-dialog { font:15px/1.5 -apple-system,'PingFang SC',sans-serif; border:1px solid #f0d8b7; padding:0; border-radius:24px; width:min(480px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto; color:#674535; background:#fff8ea; box-shadow:0 30px 100px #35232340; }
.ip-birthday-dialog::backdrop { background:#33232699; backdrop-filter:blur(6px); }
.ip-birthday-sheet { position:relative; overflow:hidden; text-align:center; padding:44px 30px 26px; background:radial-gradient(ellipse at 50% 35%,#fffdf5 10%,#fff0dc 60%,#fbdedb); }
.ip-birthday-kicker { position:relative; font-size:10px; letter-spacing:4px; color:#8c6641; margin:4px 0 12px; }
.ip-birthday-sheet h3 { position:relative; margin:0; font-size:32px; letter-spacing:3px; font-weight:600; }
.ip-birthday-from { position:relative; color:#8a6653; font-size:12px; margin:10px 0 0; }
.ip-birthday-close { position:absolute; z-index:3; top:12px; right:12px; width:34px; height:34px; border:1px solid #dcc5ad; background:#fff9ed; color:#88634d; border-radius:50%; font-size:22px; line-height:1; }
.ip-birthday-cake { position:relative; width:220px; height:170px; margin:20px auto 16px; animation:ip-cake-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.ip-birthday-cake .plate { position:absolute; left:0; bottom:6px; width:220px; height:27px; border-radius:50%; background:#e0b992; box-shadow:0 10px 25px #aa71552b; }
.ip-birthday-cake .base { position:absolute; left:21px; bottom:19px; width:178px; height:81px; border-radius:50% / 21%; background:linear-gradient(#f9c3bc 0 41%,#fff0d6 42% 54%,#eca79b 55% 80%,#e99d93 81%); box-shadow:inset -13px 0 18px #bc6f6c1a; }
.ip-birthday-cake .icing { position:absolute; left:21px; top:53px; width:178px; height:37px; border-radius:50%; background:#fff8e9; box-shadow:0 8px #ffefd5; }
.ip-birthday-cake .icing::before,.ip-birthday-cake .icing::after { content:''; position:absolute; top:19px; width:15px; height:26px; background:#ffefd5; border-radius:0 0 12px 12px; left:22px; }
.ip-birthday-cake .icing::after { left:124px; height:21px; }
.ip-birthday-cake .candle { position:absolute; top:29px; left:104px; width:12px; height:42px; border-radius:4px; background:repeating-linear-gradient(135deg,#e99c83 0 6px,#fff2d6 6px 12px); }
.ip-birthday-cake .candle:nth-last-child(2) { left:66px; top:34px; height:32px; }
.ip-birthday-cake .candle:last-child { left:142px; top:34px; height:32px; }
.ip-birthday-cake .flame { position:absolute; width:12px; height:20px; top:-25px; left:0; border-radius:75% 25% 60% 40%; transform:rotate(-15deg); background:linear-gradient(#f6ae4b,#ffeab1); box-shadow:0 0 17px 7px #ffc05c50; animation:ip-candle-glow 1.4s ease-in-out 4 alternate; transform-origin:50% 100%; }
.ip-birthday-wish { position:relative; margin:0; padding:20px 18px; background:#fffcf4c9; border:1px solid #ecd9bd; border-radius:12px; font-size:16px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; animation:ip-cake-rise .7s .5s both; }
.ip-birthday-sign { position:relative; color:#8a664e; font-size:12px; margin:16px 0 20px; }
.ip-birthday-return { position:relative; width:100%; border:1px solid #bd8262; border-radius:10px; padding:12px; background:#85553e; color:#fff9ee; font-size:14px; }
.ip-birthday-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ip-birthday-confetti i { position:absolute; left:var(--x); top:-20px; width:7px; height:13px; border-radius:2px; background:var(--c); animation:ip-birthday-fall 3.8s var(--d) both; }
@keyframes ip-cake-rise { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes ip-candle-glow { to { transform:rotate(12deg) scale(.88,1.08); opacity:.8; } }
@keyframes ip-birthday-fall { 0% { transform:translateY(-20px) rotate(0); opacity:0; } 10% { opacity:.9; } 100% { transform:translateY(640px) rotate(280deg); opacity:0; } }
@media(max-width:420px) { .ip-birthday-sheet { padding:42px 22px 22px; } .ip-birthday-sheet h3 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { .ip-birthday-confetti { display:none; } }

.ip-birthday-dialog button { font:inherit; cursor:pointer; }
.ip-birthday-close { display:grid; place-items:center; padding:0; }
.ip-birthday-close svg { width:16px; height:16px; }
.ip-birthday-count { text-align:right; color:#927e88; font-size:12px; }
@media(prefers-reduced-motion:reduce) { .ip-birthday-dialog * { animation:none!important; transition:none!important; } }

/* 互动表情全量动画升级（2026-10-20 用户审核通过）：卡片入场、结果场景底色与层次，配合 interaction-motion.js 的 Web Animations。 */
.ip-card{border-radius:18px;border-color:#dddfd4;box-shadow:0 8px 25px #20391c0a;animation:ar-card-arrive .35s ease-out both}
.ip-action{transition:transform .18s,box-shadow .18s}
.ip-action:hover{transform:translateY(-2px);box-shadow:0 5px 12px #30442e18}
.ip-scene{overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#fffdf8f7,#f5e5e9f2);animation:ar-scene-show 3.9s both}
.ip-scene h4{font-size:19px;letter-spacing:.04em;animation:ar-caption 3.9s both}
.ip-scene.night{background:radial-gradient(ellipse at 50% 100%,#797a9af0,#24283df5 75%)}
.ip-scene.fireworks{background:radial-gradient(ellipse at 40% 90%,#403b60f5,#182337fa)}
.ip-scene.date{background:radial-gradient(ellipse at 50% 25%,#fffdf9,#eadfc6ee)}
.ip-scene.quiz{background:radial-gradient(ellipse at 50% 55%,#fdfaff,#e6def2ed)}
.ip-scene.dice,.ip-scene.rps{background:radial-gradient(ellipse at center,#fffdf6,#e4eddef2)}
.ip-scene .ip-stars i{animation:ar-star 3.2s var(--d) both}
.ip-scene .ip-dog,.ip-scene .ip-big,.ip-scene .ip-paw{animation:none}
.ip-scene .ip-dogs{position:relative;z-index:1}
.ip-scene.night .ip-dogs{transform:translateY(35px);margin-bottom:35px}   /* 下移只改画面不占位，补同样的下边距，否则「不说话也没关系，我在」压在狗妹身上（2026-10-22 用户反馈） */
.ip-scene .ar-prop{position:absolute;pointer-events:none;font-size:25px;line-height:1}
.ip-scene .ar-orbit{position:absolute;width:200px;height:100px;border:1px solid #e6c8a3aa;border-radius:50%;top:42%;left:calc(50% - 100px)}
.ip-birthday-sheet{background:radial-gradient(ellipse at 50% 35%,#fffdf6,#fbefdf);box-shadow:0 22px 80px #7b503133}
.ip-birthday-cake{filter:drop-shadow(0 12px 12px #c6965c24)}
.ip-birthday-wish{border-top:1px solid #d9c4a577;border-bottom:1px solid #d9c4a577;padding-block:16px}
.ip-envelope-stage{filter:drop-shadow(0 16px 16px #81645222)}
.ip-letter-sheet{background:repeating-linear-gradient(#fffdf7 0 29px,#dfd5bd55 30px,#fffdf7 31px);box-shadow:0 18px 40px #584c3420}
.ip-envelope-seal{box-shadow:0 3px 8px #8c596b30}
@keyframes ar-card-arrive{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ar-scene-show{0%{opacity:0}12%,86%{opacity:1}100%{opacity:0}}
@keyframes ar-caption{0%,35%{opacity:0;transform:translateY(9px)}50%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@keyframes ar-star{0%,8%{opacity:0;transform:translateY(16px) scale(.2)}38%{opacity:.7;transform:translateY(0) scale(1)}75%{opacity:.55}100%{opacity:0;transform:translateY(-30px) scale(.7)}}
@media (prefers-reduced-motion: reduce) { .ip-card, .ip-scene, .ip-scene * { animation: none !important; transition: none !important; } }

/* 信箱与纸条的深色（2026-10-21）：信纸变成暖调深色纸、字变浅，信封整体压暗一档，形状和动画不变；浅色外观不动 */
@media (prefers-color-scheme: dark) {
  .ip-paper-dialog { color:#eadbc8; }
  .ip-paper-dialog::backdrop { background:#00000080; }
  .ip-paper-close, .ip-paper-reading > .ip-paper-back { border-color:#4a3d36; background:#2c2420; color:#d9c4b4; }
  .ip-paper-back { background:#2a231e; color:#d9c4b4; }
  .ip-paper-reading > .ip-paper-close, .ip-paper-reading > .ip-paper-back { box-shadow:0 4px 12px #0007; }
  .ip-envelope-stage { filter:drop-shadow(0 16px 16px #0007); }
  .ip-envelope-back { background:#6e4f42; box-shadow:0 16px 36px #0009; }
  .ip-envelope-sheet { background:repeating-linear-gradient(#2e2722 0 21px,#4a3f35 21px 22px); }
  .ip-envelope-front { background:linear-gradient(32deg,#8a6552 49.6%,transparent 50%) bottom left / 51% 100% no-repeat,linear-gradient(-32deg,#8a6552 49.6%,transparent 50%) bottom right / 51% 100% no-repeat; }
  .ip-envelope-front::after { background:#96705c; }
  .ip-envelope-flap { background:#a47c66; }
  .ip-envelope-seal { color:#fbe9ec; background:#a65467; box-shadow:0 3px 8px #0006; }
  .ip-letter-sheet { border-color:#4a3e34; background:repeating-linear-gradient(#2a231e 0 29px,#4a3f3388 30px,#2a231e 31px); box-shadow:0 18px 40px #0009; }
  .ip-paper-reading .ip-letter-sheet { background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%222%202.5%2023%2020%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M7.2%2020.5c2.2-2.8%204.8-4.7%207.8-5.8%22%20fill%3D%22none%22%20stroke%3D%22%23f4ecd9%22%20stroke-opacity%3D%220.035%22%20stroke-width%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m10.1%204%201.8%205.5%205.3%201.8-5.3%201.8-1.8%205.5-1.8-5.5L3%2011.3l5.3-1.8L10.1%204Z%22%20fill%3D%22%23f4ecd9%22%20fill-opacity%3D%220.07%22%20stroke%3D%22%23f4ecd9%22%20stroke-opacity%3D%220.07%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22m18.2%2011.5%201.5%204.2%204.1%201.5-4.1%201.4-1.5%204.2-1.4-4.2-4.2-1.4%204.2-1.5%201.4-4.2Z%22%20fill%3D%22%23e8c27a%22%20fill-opacity%3D%220.1%22%20stroke%3D%22%23e8c27a%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%221.1%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 46% / 62% auto,repeating-linear-gradient(#2a231e 0 29px,#4a3f3388 30px,#2a231e 31px); }
  .ip-letter-sheet::before { background:#8a6e52; }
  .ip-letter-from { color:#c5a893; }
  .ip-letter-text { color:#eadbc8; background:repeating-linear-gradient(transparent 0 29px,#cbb99b2e 29px 30px); }
  .ip-letter-sign { color:#e0a3ac; }
  .interaction-compose input, .interaction-compose textarea { border-color:#4a3d36; background:#241e1a; color:#eadbc8; }
  .ip-paper-tabs { background:#3a302a; }
  .ip-paper-tabs button { color:#c7b2a3; }
  .ip-paper-tabs button.active { background:#2a231e; color:#f0a8bb; box-shadow:0 1px 4px #0006; }
  .ip-paper-box-tip { color:#bba393; }
  .ip-option-label { color:#c7b2a3; }
  .ip-paper-entry { background:#2f2722; border-color:#4a3d33; color:#eadbc8; }
  .ip-paper-mini { background:#8a6552; box-shadow:0 3px 8px #0006; }
  .ip-paper-mini::before { background:#a47c66; }
  .ip-paper-mini::after { background:#a65467; color:#fbe9ec; }
  .ip-paper-entry.opened .ip-paper-mini { background:#5e4c42; }
  .ip-paper-entry.opened .ip-paper-mini::before { background:#6e5a4f; }
  .ip-paper-entry-info strong { color:#f0a8bb; }
  .ip-paper-entry.opened .ip-paper-entry-info strong { color:#c7b2a3; }
  .ip-paper-entry time { color:#b39f92; }
  .ip-paper-box > .ip-action { border-color:#4a3d33; background:#2f2722; color:#d9c4b4; }
}

/* 聊天里的互动卡片和生日祝福弹窗的深色（2026-10-21）：浅色外观不变，只加深色覆盖；蛋糕是插画，保留原色。
   全屏互动场景（抱抱、星空、烟花等）自带整屏底色和配套文字色，不随系统深浅色变，不需要覆盖。 */
@media (prefers-color-scheme: dark) {
  .interaction-card { color:#efe4e8; }
  .ip-card { background:#2b2528; border-color:#463b40; box-shadow:0 8px 25px #0005; }
  .ip-card p { color:#c3b3ba; }
  .ip-stack .ip-side { color:#c3b3ba; }
  .ip-card .ip-action { background:#3a2a31; border-color:#5a3d4a; color:#f3b2c8; }
  .ip-card .ip-action:hover { background:#46323b; }
  .ip-card .ip-action.ip-primary { background:#068744; border-color:#068744; color:#fff; }
  .ip-card .ip-state { color:#c3b3ba; border-top-color:#463b40; }
  .ip-card .ip-state.done { color:#6fd8a2; }
  .ip-card textarea, .ip-card input { border-color:#5a4650; background:#231d20; color:#efe4e8; }
  .ip-card .ip-option-error { color:#ff9ab8; }
  .ip-result { color:#f39cbd!important; }
  .ip-die { background:#2f2629; border-color:#6a5560; box-shadow:3px 4px #1c1719; }
  .ip-die i { background:#f39cbd; }
  .ip-die.ip-hand { color:#f39cbd; }
  .ip-card.ip-birthday-card { background:linear-gradient(155deg,#33292a,#3a2a2f); border-color:#5a4636; }
  .ip-card .ip-birthday-note { color:#ecc9b9; }
  .ip-birthday-dialog { border-color:#5a4636; color:#f1e2cf; background:#2a221e; box-shadow:0 30px 100px #000a; }
  .ip-birthday-dialog::backdrop { background:#000a; }
  .ip-birthday-sheet { background:radial-gradient(ellipse at 50% 35%,#3a2e27,#2a221e); box-shadow:0 22px 80px #0008; }
  .ip-birthday-kicker { color:#ddb68f; }
  .ip-birthday-from { color:#d8b39e; }
  .ip-birthday-close { border-color:#5a4636; background:#2f2621; color:#e6c8b3; }
  .ip-birthday-cake { filter:drop-shadow(0 12px 12px #0006); }
  .ip-birthday-wish { background:#3a2f28cc; border-color:#5a4636; color:#f3e4d2; }
  .ip-birthday-sign { color:#ddb38f; }
  .ip-birthday-return { border-color:#a87458; background:#6e4632; color:#fff4e6; }
  .ip-birthday-count { color:#c7b2a3; }
}
/* 猜拳、摇骰子揭晓（2026-10-29 用户要求）：对方的出拳在上、我的在下，结果文字夹在中间，和入场方向一致（我的从下往上、对方的从上往下）。
   .ip-pair 里第一个是我的、第二个是对方的（interaction-motion.js 按这个顺序做入场），这里用 display:contents 让它们和 h4 一起按 order 排 */
.ip-scene.rps .ip-pair,.ip-scene.dice .ip-pair{display:contents}
.ip-scene.rps .ip-pair>:last-child,.ip-scene.dice .ip-pair>:last-child{order:1;margin-bottom:11vh}
.ip-scene.rps h4,.ip-scene.dice h4{order:2;margin:0}
.ip-scene.rps .ip-pair>:first-child,.ip-scene.dice .ip-pair>:first-child{order:3;margin-top:11vh}
/* 猜拳、骰子揭晓（审核稿 P-067，2026-10-30 用户定）：场景从 3.9s 拉长到 5.2s，胜负文字等定格（interactions.js 的 SPIN_END 2850ms）之后约 3s 才淡入，88% 起和场景一起淡出 */
.ip-scene.rps,.ip-scene.dice{animation-duration:5.2s}
.ip-scene.rps h4,.ip-scene.dice h4{animation:ip-caption-late 5.2s both}
@keyframes ip-caption-late{0%,57%{opacity:0;transform:translateY(9px)}66%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}