/* ============ 我的家园 / 出门探索：JRPG（P3 风格）冷蓝斜切 UI ============ */
.p3, .p3m { --p3-deep: #0a0a0a; --p3-blue: #111111; --p3-mid: #e60012; --p3-cyan: #e60012; --p3-white: #ffffff; --p3-ink: #000000; --p5-red: #e60012; --p5-dark: #8a0010; }
.screen.p3 { background: var(--p3-deep); color: var(--p3-white); overflow: hidden; }
.p3 .hm-3d, .p3 .ex-3d, .p3 .ex-bg, .p3 .ex-fg { position: absolute; inset: 0; width: 100%; height: 100%; }
.p3 .hm-3d canvas, .p3 .ex-3d canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.p3 .ex-fg { pointer-events: none; z-index: 3; }
.p3 .ex-3d { z-index: 2; pointer-events: none; }
.p3 .hm-labels, .p3 .hm-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* 屏幕边缘的斜条纹暗角 */
.screen.p3::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%); }
.screen.p3.darkhour::after { background: radial-gradient(ellipse at 50% 40%, rgba(60,255,120,.05) 40%, rgba(0,30,10,.6) 100%); }

/* 顶部标题（斜体大字 + 青色斜条） */
.p3-top { position: absolute; left: 0; top: 0; z-index: 10; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; pointer-events: none; }
.p3-top > * { pointer-events: auto; }
.p3-back { width: 52px; height: 52px; display: grid; place-items: center; background: var(--p3-white); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); box-shadow: 0 4px 0 var(--p3-cyan); transition: transform .15s; }
.p3-back .emo { width: 28px; height: 28px; }
.p3-back:hover { transform: translateX(-3px) skewX(-6deg); }
.p3-title { position: relative; transform: skewX(-10deg); padding: 2px 24px 6px 14px; }
.p3-title::before { content: ''; position: absolute; left: -6px; right: -20px; bottom: 6px; height: 16px; background: var(--p3-cyan); z-index: -1; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); opacity: .9; }
.p3-title b { display: block; font: 700 italic 40px/1 'Fredoka', sans-serif; letter-spacing: .02em; color: #fff; text-shadow: 3px 3px 0 var(--p3-blue), 6px 6px 0 rgba(0,0,0,.35); }
.p3-title span { display: block; font-size: 15px; font-weight: 700; letter-spacing: .3em; color: var(--p3-white); margin-top: 2px; }

/* 右上日期 + 月相 */
.p3-date { position: absolute; right: 14px; top: 10px; z-index: 10; display: flex; align-items: center; gap: 10px; transform: skewX(-8deg); pointer-events: none; }
.pdt-d { background: var(--p3-white); color: var(--p3-blue); padding: 4px 14px 2px; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); box-shadow: 4px 4px 0 var(--p3-cyan); }
.pdt-d b { font: 700 italic 32px/1 'Fredoka', sans-serif; }
.pdt-d i { font: 700 italic 16px 'Fredoka', sans-serif; margin-left: 6px; color: #e2405a; }
.pdt-m { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.pdt-m .emo { width: 38px; height: 38px; filter: drop-shadow(0 0 10px rgba(255,255,220,.7)); }

/* 右侧指令菜单 */
.p3-menu { position: absolute; right: 0; top: 92px; z-index: 10; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; max-height: calc(100% - 110px); overflow-y: auto; padding: 4px 0 8px 30px; scrollbar-width: none; }
.p3-item { position: relative; display: flex; align-items: center; gap: 8px; min-width: 168px; height: 42px; padding: 0 22px 0 18px; color: var(--p3-white); background: linear-gradient(90deg, rgba(40,0,6,.92), rgba(10,10,10,.92)); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); transform: translateX(calc(var(--i) * 3px)); transition: transform .18s, background .18s, color .18s; animation: p3in .45s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i) * 35ms); border-left: 4px solid var(--p3-cyan); }
.p3-item i { width: 30px; height: 30px; display: grid; place-items: center; font-style: normal; }
.p3-item i .emo { width: 26px; height: 26px; }
.p3-item b { font-size: 17px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.p3-item em { font: 700 italic 13px 'Fredoka', sans-serif; color: var(--p3-cyan); margin-left: auto; padding-left: 8px; }
.p3-item:hover, .p3-item:focus-visible { transform: translateX(-14px); background: var(--p3-white); color: var(--p3-blue); outline: none; }
.p3-item:hover em { color: #e2405a; }
.p3-item.dis { opacity: .4; filter: grayscale(.7); }
.p3-item > .kcap { left: auto; right: 6px; top: 50%; transform: translateY(-50%); }
body.kbm .p3-item { padding-right: 36px; }
@keyframes p3in { from { transform: translateX(120%); opacity: 0; } }

/* 左下宠物状态卡 */
.p3-status { position: absolute; left: 14px; bottom: 14px; z-index: 10; }
.ps-card { display: flex; gap: 10px; align-items: stretch; background: linear-gradient(115deg, rgba(255,255,255,.96), rgba(235,235,235,.93)); color: var(--p3-ink); padding: 10px 16px 10px 10px; clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%); box-shadow: 6px 6px 0 var(--p3-cyan); border-left: 6px solid var(--tc); min-width: 320px; }
.ps-por { width: 96px; height: 96px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--tc) 35%, #eeeeee)); display: grid; place-items: center; overflow: hidden; flex: none; }
.ps-por img { width: 100%; height: 100%; object-fit: contain; }
.ps-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ps-name { display: flex; align-items: center; gap: 6px; }
.ps-name b { font-size: 20px; font-weight: 800; }
.ps-ren { width: 24px; height: 24px; border-radius: 6px; background: rgba(40,0,6,.1); font-size: 14px; color: var(--p3-blue); }
.ps-sub { font-size: 13px; color: #444; }
.ps-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin-top: 2px; }
.ps-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.ps-bar span { width: 28px; flex: none; }
.ps-bar div { flex: 1; height: 8px; background: rgba(0,0,0,.15); border-radius: 4px; overflow: hidden; transform: skewX(-20deg); }
.ps-bar i { display: block; height: 100%; transition: width .5s; }
.ps-skill { font-size: 12px; color: #444; margin-top: 2px; } .ps-skill b { color: var(--p3-blue); }
.ps-empty { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.95); color: var(--p3-ink); padding: 12px 20px; clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%); box-shadow: 6px 6px 0 var(--p3-cyan); }
.ps-empty .emo { width: 42px; height: 42px; } .ps-empty small { color: #444; }
.tbadge { display: inline-block; font: 800 italic 12px/18px 'Fredoka', sans-serif; padding: 0 7px; color: #fff; background: var(--tc); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); text-shadow: 0 1px 2px rgba(0,0,0,.4); letter-spacing: .04em; }
.tbadge.t4 { background: linear-gradient(90deg, #ff5fa8, #ffc23d, #5fe0ff, #b77bff); background-size: 200%; animation: rainbow 2s linear infinite; }
.tbadge.t3 { background: linear-gradient(90deg, #ffb020, #ffe28a, #ffb020); }
@keyframes rainbow { to { background-position: 200% 0; } }
.pstars { color: #ffb020; font-size: 12px; letter-spacing: -1px; } .pstars em { color: rgba(0,0,0,.2); font-style: normal; }

/* 底部对话框（P3 式） */
.p3-dialog { position: absolute; left: 50%; bottom: 18px; z-index: 12; width: min(620px, 70vw); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: .25s; }
.p3-dialog.show { transform: translate(-50%, 0); opacity: 1; }
.pd-name { display: inline-block; margin-left: 24px; padding: 2px 18px; background: var(--p3-cyan); color: var(--p3-ink); font-weight: 800; font-size: 15px; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.pd-text { background: rgba(10,10,10,.92); border: 2px solid var(--p3-white); padding: 12px 20px; font-size: 19px; line-height: 1.5; min-height: 54px; clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%); box-shadow: inset 0 0 30px rgba(230,0,18,.15); }
@media (max-width: 760px) { .p3-dialog { bottom: auto; top: 70px; width: 86vw; } }
.hm-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 9; font-size: 13px; color: rgba(255,255,255,.8); background: rgba(10,10,10,.5); padding: 4px 14px; border-radius: 20px; pointer-events: none; animation: fadeout 1s 6s forwards; }
@keyframes fadeout { to { opacity: 0; } }

/* 头顶气泡 */
.hm-bub { position: absolute; left: 0; top: 0; background: #fff; color: var(--p3-ink); padding: 6px 12px; border-radius: 14px; font-size: 15px; font-weight: 700; white-space: nowrap; box-shadow: 3px 3px 0 var(--p3-cyan), 0 4px 12px rgba(0,0,0,.3); animation: bubIn .3s cubic-bezier(.2,1.6,.4,1); transition: opacity .3s; display: flex; align-items: center; gap: 4px; }
.hm-bub::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.hm-bub .emo { width: 22px; height: 22px; }
.hm-bub.out { opacity: 0; }
.hm-bub.zz { background: rgba(255,255,255,.85); box-shadow: none; }
.zzz { font: 700 italic 20px 'Fredoka', sans-serif; color: var(--p3-blue); } .zzz small { font-size: 14px; }
@keyframes bubIn { from { opacity: 0; scale: .5; } }
.hm-flat { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(#0a1c4a, #1f4fa8); } .hm-flat img { width: 220px; }
.flash { position: fixed; inset: 0; background: #fff; z-index: 5000; animation: flash .5s forwards; pointer-events: none; }
@keyframes flash { to { opacity: 0; } }

/* P3 弹窗 */
.modal.p3m { background: linear-gradient(160deg, rgba(25,0,4,.97), rgba(10,10,10,.98)) !important; color: var(--p3-white) !important; border: 2px solid rgba(255,255,255,.6) !important; border-radius: 4px; clip-path: polygon(0 0, 100% 0, 100% 96%, 97% 100%, 0 100%); box-shadow: 10px 10px 0 rgba(230,0,18,.35) !important; font-family: var(--font); }
.modal.p3m .dim { color: rgba(255,255,255,.7); }
.modal.p3m .mclose { color: var(--p3-white); }
.modal.p3m .mtitle { color: #fff; }
.modal.p3m .btn { background: var(--p3-white); color: var(--p3-blue); box-shadow: 4px 4px 0 var(--p3-cyan); border: none; border-radius: 0; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); padding-left: 26px; padding-right: 26px; font-weight: 800; }
.modal.p3m .btn.ghost { background: transparent; color: var(--p3-white); box-shadow: inset 0 0 0 2px var(--p3-white); }
.p3-mh { transform: skewX(-10deg); margin: -6px 0 14px 4px; position: relative; display: inline-block; padding-right: 30px; }
.p3-mh::before { content: ''; position: absolute; left: -10px; right: 0; bottom: 4px; height: 12px; background: var(--p3-cyan); z-index: 0; clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); }
.p3-mh b { position: relative; font: 700 italic 34px/1 'Fredoka', sans-serif; color: #fff; text-shadow: 3px 3px 0 var(--p3-blue); }
.p3-mh span { position: relative; margin-left: 10px; font-weight: 700; letter-spacing: .15em; font-size: 15px; }
.p3-sub { margin: 14px 0 8px; font-weight: 800; letter-spacing: .1em; display: flex; align-items: center; gap: 10px; } .p3-sub small { color: var(--p3-cyan); }
.p3m .feedgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.p3m .food-b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); color: var(--p3-white); transition: .15s; }
.p3m .food-b:hover { background: var(--p3-white); color: var(--p3-blue); }
.p3m .food-b .emo { width: 44px; height: 44px; } .p3m .food-b small { font-size: 12px; opacity: .8; }
.p3m .wardrobe .wd { background: rgba(255,255,255,.12); }
.polaroid { display: block; width: 100%; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transform: rotate(-1.5deg); }
.modal.p3m.wide { max-width: 820px; }

/* 装备卡 */
.gslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gbag { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 40vh; overflow: auto; padding: 4px; }
.gcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 8px 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 30%, #2a0006), #0a0a0a); border: 2px solid var(--tc); clip-path: polygon(0 0, 92% 0, 100% 10%, 100% 100%, 8% 100%, 0 90%); cursor: pointer; transition: transform .15s; min-height: 132px; }
.gcard:hover { transform: translateY(-3px); }
.gcard.on { box-shadow: inset 0 0 22px color-mix(in srgb, var(--tc) 60%, transparent); }
.gcard.on::after { content: '装备中'; position: absolute; right: 6px; bottom: 6px; font-size: 11px; font-weight: 800; color: var(--p3-ink); background: var(--p3-cyan); padding: 0 6px; }
.gcard.empty { border-style: dashed; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); color: rgba(255,255,255,.5); justify-content: center; cursor: default; }
.gcard .gc-ico { width: 46px; height: 46px; filter: drop-shadow(0 0 10px var(--tc)); }
.gcard b { font-size: 15px; } .gcard small { font-size: 12px; opacity: .85; line-height: 1.3; }
.gc-tier { position: absolute; left: 6px; top: 4px; font: 800 italic 13px 'Fredoka', sans-serif; color: var(--tc); font-style: italic; }
.gcard.t4 { border-image: linear-gradient(90deg, #ff5fa8, #ffc23d, #5fe0ff, #b77bff) 1; }
.gsum { margin: 12px 0 4px; padding: 8px 12px; background: rgba(230,0,18,.12); border-left: 4px solid var(--p3-cyan); font-size: 13px; line-height: 1.8; }
.gsum .emo { width: 18px; height: 18px; vertical-align: -3px; margin: 0 2px 0 8px; }
.ptable { margin-top: 12px; font-size: 13px; } .ptable summary { cursor: pointer; font-weight: 700; color: var(--p3-cyan); }
.ptable table { width: 100%; border-collapse: collapse; margin-top: 8px; } .ptable th, .ptable td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: center; }
.drop-toast { display: flex; align-items: center; gap: 10px; text-align: left; } .drop-toast .emo { width: 46px; height: 46px; filter: drop-shadow(0 0 8px var(--tc)); }
.drop-toast b { display: block; color: var(--tc); font-size: 17px; } .drop-toast small { display: block; font-size: 12px; opacity: .85; }

/* 图鉴 */
.hatchrate { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; margin-bottom: 10px; align-items: center; }
.dex-row { margin: 10px 0; } .dex-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 800; color: var(--tc); }
.dex-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.dex-c { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 35%, transparent), rgba(10,10,10,.6) 70%); border: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); clip-path: polygon(0 0, 90% 0, 100% 12%, 100% 100%, 10% 100%, 0 88%); color: var(--p3-white); }
.dex-c img { width: 84px; height: 84px; object-fit: contain; }
.dex-c b { font-size: 14px; } .dex-c.miss { opacity: .55; } .dex-q { width: 84px; height: 84px; display: grid; place-items: center; font: 700 44px 'Fredoka'; color: rgba(255,255,255,.4); }
.dex-g.swap .dex-c { cursor: pointer; transition: transform .15s; } .dex-g.swap .dex-c:hover { transform: translateY(-4px); }

/* 孵化演出 */
.modal.hatch-m { max-width: 460px; text-align: center; overflow: hidden; }
.hatch-stage { position: relative; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; --tc: #3fd0ff; }
.h-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 40%, transparent) 0 8deg, transparent 8deg 22deg); opacity: 0; transition: opacity .5s; animation: spin 8s linear infinite; z-index: 0; }
.hatch-stage.glow .h-rays, .h-rays.on { opacity: 1; }
.hatch-stage.t4 .h-rays { background: repeating-conic-gradient(#ff5fa855 0 8deg, transparent 8deg 16deg, #5fe0ff55 16deg 24deg, transparent 24deg 32deg, #ffc23d55 32deg 40deg, transparent 40deg 48deg); }
.h-egg { position: relative; z-index: 1; cursor: pointer; animation: wobble 1.2s ease-in-out infinite; }
.h-egg .emo { width: 150px; height: 150px; filter: drop-shadow(0 0 20px var(--tc)); }
.hatch-stage.glow .h-egg { animation: shake .12s linear infinite; filter: brightness(1.6) drop-shadow(0 0 40px var(--tc)); }
.h-egg.crack1 { transform: rotate(-8deg); } .h-egg.crack2 { transform: rotate(8deg) scale(1.05); }
.h-tip, .h-pity { position: relative; z-index: 1; } .h-pity { font-size: 12px; opacity: .7; }
.h-res { position: relative; z-index: 1; animation: popBig .6s cubic-bezier(.2,1.6,.4,1); } .h-res img { width: 220px; height: 220px; object-fit: contain; filter: drop-shadow(0 0 24px var(--tc)); }
.h-tier { position: relative; z-index: 1; font-size: 18px; } .h-tier .tbadge { font-size: 18px; line-height: 26px; padding: 0 12px; }
.hatch-stage .mtitle, .hatch-stage p, .hatch-stage .r-btns, .hatch-stage .pstars { position: relative; z-index: 1; }
@keyframes popBig { from { transform: scale(.2); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ 出门探索 ============ */
.ex-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ex-card { position: relative; display: flex; flex-direction: column; background: var(--p3-white); color: var(--p3-ink); clip-path: polygon(0 0, 94% 0, 100% 8%, 100% 100%, 6% 100%, 0 92%); text-align: left; transition: transform .18s; animation: p3in .45s both; animation-delay: calc(var(--i) * 60ms); box-shadow: 0 0 0 2px var(--p3-cyan); }
.ex-card:hover { transform: translateY(-4px) rotate(-.6deg); }
.ex-thumb { width: 100%; height: 110px; display: block; }
.ex-t { padding: 8px 12px 10px; } .ex-t b { font-size: 17px; display: flex; align-items: center; gap: 4px; } .ex-t b .emo { width: 22px; height: 22px; } .ex-t small { color: #444; font-size: 12px; }
.ex-card.lock { filter: grayscale(.8); opacity: .65; }
.s-explore .ex-bg { z-index: 1; }
.ex-marks { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.ex-mark { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: auto; cursor: pointer; transition: filter .2s; }
.ex-mark i { width: 44px; height: 44px; display: grid; place-items: center; background: var(--p3-white); transform: rotate(45deg); box-shadow: 3px 3px 0 var(--p3-cyan); animation: markBob 1.8s ease-in-out infinite; }
.ex-mark i .emo { width: 28px; height: 28px; transform: rotate(-45deg); }
.ex-mark b { margin-top: 8px; font-size: 13px; padding: 1px 10px; background: rgba(10,10,10,.85); color: #fff; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); white-space: nowrap; }
.ex-mark.done i { background: rgba(255,255,255,.55); box-shadow: 3px 3px 0 rgba(230,0,18,.4); }
.ex-mark.done b::after { content: ' ✓'; color: var(--p3-cyan); }
.ex-mark.near i { background: var(--p3-cyan); box-shadow: 0 0 0 4px #fff, 0 0 24px var(--p3-cyan); }
@keyframes markBob { 50% { translate: 0 -6px; } }
.ex-act { position: absolute; left: 50%; bottom: 26px; z-index: 11; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 8px; padding: 10px 28px; background: var(--p3-white); color: var(--p3-blue); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); box-shadow: 0 0 0 3px var(--p3-cyan); font-weight: 800; font-size: 18px; transition: transform .25s cubic-bezier(.2,1.4,.4,1); }
.ex-act.show { transform: translate(-50%, 0); animation: actPulse 1.4s ease-in-out infinite; }
.ex-act .emo { width: 30px; height: 30px; } .ex-act small { font-size: 13px; color: #e2405a; }
.ex-act > .kcap { position: static; display: none; margin-left: 6px; } body.kbm .ex-act > .kcap { display: inline-block; }
@keyframes actPulse { 50% { box-shadow: 0 0 0 3px var(--p3-cyan), 0 0 26px rgba(230,0,18,.8); } }
.ex-help { position: absolute; right: 14px; bottom: 14px; z-index: 9; font-size: 12px; color: rgba(255,255,255,.85); background: rgba(10,10,10,.6); padding: 6px 12px; border-radius: 6px; }
.ex-help kbd { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 4px; background: #eaf6ff; color: #0a3d91; font: 700 11px/16px 'Fredoka'; text-align: center; margin: 0 1px; }
.s-explore .p3-dialog { bottom: 96px; }
.npc-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .npc-h > .emo { width: 64px; height: 64px; background: var(--p3-white); border-radius: 50%; padding: 6px; box-shadow: 3px 3px 0 var(--p3-cyan); }
.npc-h b { font-size: 20px; display: block; } .npc-h small { color: var(--p3-cyan); }
.p3m .qpanel { background: rgba(255,255,255,.95); color: var(--p3-ink); }
.p3m .choice { color: var(--p3-ink); }

/* 3D 立绘图片 */
img.av3d { object-fit: contain; }
.hero .hero-img.av3d { image-rendering: auto; }
@media (max-width: 760px) {
  .p3-title b { font-size: 28px; } .p3-menu { top: 76px; } .p3-item { min-width: 128px; height: 36px; } .p3-item b { font-size: 14px; }
  .ps-card { min-width: 0; max-width: 62vw; } .ps-por { width: 64px; height: 64px; } .ps-bars { grid-template-columns: 1fr; }
  .pdt-d b { font-size: 22px; }
}

/* Boss 战里的实时 3D 主角 */
.f-body.has3d { position: relative; }
.f-body.has3d .av-stage { position: absolute; left: 50%; bottom: -8%; width: 260%; height: 200%; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.av-stage { display: block; }
.hero.h3d .hero-img, .hero.h3d .hero-emo { display: block; }
.modal.p3m .mclose { background: rgba(255,255,255,.15); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.4); }
.p3-item > .kcap { left: 4px; right: auto; top: 4px; transform: none; min-width: 16px; height: 16px; font-size: 10px; line-height: 14px; padding: 0 3px; }
body.kbm .p3-item { padding-right: 22px; }
.say > .kcap, .sayall > .kcap, .bigspeaker > .kcap { left: auto; right: -6px; top: -8px; }

/* 宠物环形快捷菜单 */
.pet-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 8; }
.pr-b { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--p3-white); color: var(--p3-blue); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-weight: 800; font-size: 11px;
  transform: rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))) scale(.2); opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.2,1.5,.4,1), opacity .2s, background .15s; transition-delay: calc(var(--i) * 30ms); }
.pr-b .emo { width: 24px; height: 24px; }
.pet-ring.show .pr-b { transform: rotate(var(--a)) translateX(96px) rotate(calc(-1 * var(--a))) scale(1); opacity: 1; pointer-events: auto; }
.pr-b:hover { background: var(--p3-cyan); color: var(--p3-ink); }
.pet-ring::before { content: ''; position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; border: 2px dashed rgba(230,0,18,.7); opacity: 0; transform: scale(.4); transition: .3s; animation: spin 10s linear infinite; }
.pet-ring.show::before { opacity: 1; transform: scale(1); }

/* 改名面板 */
.modal.pn-m { max-width: 600px; }
.pn-wrap { display: flex; gap: 18px; align-items: center; }
.pn-por { width: 180px; height: 200px; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tc) 45%, transparent), transparent 70%); clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%); border: 2px solid var(--tc); }
.pn-por img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); animation: rnFloat 2.6s ease-in-out infinite; }
@keyframes rnFloat { 50% { transform: translateY(-8px); } }
.pn-main { flex: 1; min-width: 0; }
.pn-field { display: flex; align-items: stretch; gap: 8px; }
.pn-in { flex: 1; min-width: 0; height: 54px; padding: 0 18px; font: 800 26px var(--font); color: var(--p3-ink); background: var(--p3-white); border: none; outline: none; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); box-shadow: inset 0 -4px 0 var(--p3-cyan); user-select: text; -webkit-user-select: text; letter-spacing: .06em; }
.pn-in:focus { box-shadow: inset 0 -4px 0 #ff5fa8; }
.pn-in.flash-in { animation: reading .4s; }
.pn-dice { width: 54px; flex: none; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.pn-dice .emo { width: 30px; height: 30px; transition: transform .3s; } .pn-dice:hover .emo { transform: rotate(180deg); }
.pn-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--p3-cyan); }
.pn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-chip { padding: 6px 16px; font-weight: 700; font-size: 16px; color: var(--p3-white); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); transition: .15s; }
.pn-chip:hover { background: var(--p3-white); color: var(--p3-blue); }
.pn-main .r-btns { justify-content: flex-end; }
@media (max-width: 600px) { .pn-wrap { flex-direction: column; } .pn-por { width: 140px; height: 150px; } }

/* P3 确认框 */
.modal.p3m.confirm-m .mtitle { font-size: 22px; line-height: 1.5; }
.modal.p3m.confirm-m .confirm-btns .btn { min-width: 130px; }
.pn-field { height: 54px; align-items: center; }
.pn-field .pn-in { display: block; height: 54px; border-radius: 0; }
.pn-field .pn-dice { height: 54px; display: flex; align-items: center; justify-content: center; }