/* 联机界面：猫爬架大厅、敲门卡片、我的房间（js/mp_lobby.js）。美术 v2：硬边像素、低饱和，选中用朱红细框，不用绿色/金色 */
.mpl { position: fixed; inset: 0; z-index: 30; overflow: hidden; background: #1c1814; font-family: "猫田楷", var(--serif, serif); color: #3a2e24; user-select: none; -webkit-user-select: none; touch-action: none; }
.mpl-bg { display: none; }
.mpl-stage { position: absolute; left: 0; top: 0; width: 1024px; height: 640px; transform-origin: 0 0; box-shadow: 0 0 0 2px #3a2e24; }
.mpl-stage img, .mpl-stage canvas { image-rendering: pixelated; pointer-events: none; }
.mpl-world { position: absolute; left: 0; top: 0; width: 1024px; height: 640px; }
.mpl-hall { position: absolute; left: 0; top: 0; width: 1024px; height: 640px; }
.mpl-deco { position: absolute; width: 32px; height: 32px; z-index: 120; }
.mpl-tree { position: absolute; left: 416px; top: 150px; width: 192px; height: 256px; z-index: 398; transition: filter .15s; }
.mpl-tree.near { filter: brightness(1.08) drop-shadow(0 0 0 #a8473a) drop-shadow(1px 0 0 #a8473a) drop-shadow(-1px 0 0 #a8473a); }
.mpl-cat { position: absolute; width: 40px; height: 48px; transform-origin: 50% 90%; }
.mpl-hole, .mpl-own { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 200; -webkit-tap-highlight-color: transparent; }
.mpl-hole .mpl-h { position: absolute; left: 0; top: 0; width: 64px; height: 64px; transform-origin: 50% 100%; transition: transform .15s; }
.mpl-hole.side { z-index: 300; }
.mpl-hole.empty .mpl-h { filter: saturate(.6) brightness(.9); animation: mplSway 4.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes mplSway { 0%, 100% { transform: none; } 50% { transform: skewX(.8deg); } }
.mpl-hole.near .mpl-h, .mpl-own.near .mpl-own-h { transform: scale(1.06); filter: drop-shadow(1px 0 0 #a8473a) drop-shadow(-1px 0 0 #a8473a) drop-shadow(0 1px 0 #a8473a) drop-shadow(0 -1px 0 #a8473a); }
.mpl-hav { position: absolute; left: 22px; top: 28px; width: 20px; height: 20px; animation: mplPeek 3.2s steps(1) infinite; animation-delay: var(--d); clip-path: inset(0 0 10% 0); }
@keyframes mplPeek { 0%, 60%, 100% { transform: translateY(0); } 62%, 88% { transform: translateY(-3px); } 90% { transform: translateY(-1px); } }
.mpl-plate { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); transform-origin: 50% 0; width: 96px; height: 36px; padding: 10px 6px 0; box-sizing: border-box; background: url(../assets/mp/nameplate.png) center / 96px 36px no-repeat; image-rendering: pixelated; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mpl-plate b { font-size: 11px; max-width: 84px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #3a2e24; }
.mpl-hole.empty .mpl-plate b { color: #8a8070; }
.mpl-hole.near .mpl-plate, .mpl-own.near .mpl-plate { animation: mplSwing .7s ease-out; }
@keyframes mplSwing { 0% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-50%) rotate(5deg); } 50% { transform: translateX(-50%) rotate(-3deg); } 75% { transform: translateX(-50%) rotate(1.5deg); } 100% { transform: translateX(-50%) rotate(0); } }
.mpl-paws { display: inline-flex; gap: 2px; vertical-align: middle; }
.mpl-paws img { width: 10px; height: 10px; image-rendering: pixelated; }
.mpl-paws img.na { opacity: .3; }
.mpl-plate .mpl-paws { margin-top: 2px; }
.mpl-hole.near .mpl-paws img { animation: mplHop .4s ease-out both; }
.mpl-hole.near .mpl-paws img:nth-child(2) { animation-delay: .06s; } .mpl-hole.near .mpl-paws img:nth-child(3) { animation-delay: .12s; }
@keyframes mplHop { 40% { transform: translateY(-3px); } }
.mpl-lock { position: absolute; right: 2px; top: 32px; width: 16px; height: 16px; }
.mpl-full { position: absolute; left: -6px; top: 16px; width: 24px; height: 40px; }
.mpl-full img { width: 24px; height: 40px; }
.mpl-full i { position: absolute; left: 0; top: 7px; width: 24px; font-style: normal; font-size: 11px; line-height: 1.05; color: #e6d8b4; text-align: center; writing-mode: vertical-rl; }
.mpl-hole.nope { animation: mpcShake .3s; }
.mpl-hole.lit .mpl-h { animation: mplLit 2.6s steps(2) 1; }
@keyframes mplLit { 0%, 30%, 60% { filter: brightness(1.25) drop-shadow(1px 0 0 #a8473a) drop-shadow(-1px 0 0 #a8473a); } 15%, 45%, 100% { filter: none; } }
.mpl-hole.opening .mpl-h { animation: mplOpen .5s ease-out forwards; }
@keyframes mplOpen { 40% { transform: scale(1.08, .94); } 100% { transform: scale(1.03); filter: brightness(1.1); } }
.mpl-own { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
.mpl-own-h { position: absolute; left: 0; top: 0; width: 80px; height: 80px; transform-origin: 50% 100%; transition: transform .15s; }
.mpl-own-av { position: absolute; left: 29px; top: 35px; width: 22px; height: 22px; animation: mplPeek 4s steps(1) infinite; }
.mpl-plate.own { top: auto; bottom: -30px; }
.mpl-plate.own small { font-size: 9px; color: #a8473a; margin-top: 1px; }
.mpl-prompt[hidden] { display: none; }
.mpl-prompt { position: absolute; z-index: 900; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; background: #e6d8b4; border: 2px solid #3a2e24; box-shadow: 0 2px 0 #3a2e24; white-space: nowrap; font-size: 13px; pointer-events: none; }
.mpl-prompt::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -4px; border: 4px solid transparent; border-top-color: #3a2e24; border-bottom: 0; }
.mpl-prompt i { font-style: normal; font-size: 11px; width: 16px; height: 16px; line-height: 16px; text-align: center; color: #e6d8b4; background: #a8473a; }
.mpl-prompt.pop { animation: mplPop .22s cubic-bezier(.3,1.6,.6,1); }
@keyframes mplPop { from { transform: translate(-50%, -80%) scale(.6); opacity: 0; } }
.mpl-act { position: absolute; z-index: 5; }
.mpl-act[hidden] { display: none; }
.mpl-act:active { transform: scale(.92); }
.mpl-stick { position: fixed; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; border: 2px solid rgba(230,216,180,.35); background: rgba(28,24,20,.35); z-index: 6; pointer-events: none; }
.mpl-stick div { position: absolute; left: 26px; top: 26px; width: 40px; height: 40px; border-radius: 50%; background: rgba(230,216,180,.55); }
.mpl-holes { position: absolute; inset: 0; }
.mpl-holes.out-down { transition: transform .38s ease-in, opacity .38s; transform: translateY(90px); opacity: 0; }
.mpl-holes.out-up { transition: transform .38s ease-in, opacity .38s; transform: translateY(-90px); opacity: 0; }
.mpl-holes.in-from-up { animation: mplInUp .42s ease-out; }
.mpl-holes.in-from-down { animation: mplInDown .42s ease-out; }
@keyframes mplInUp { from { transform: translateY(-90px); opacity: 0; } }
@keyframes mplInDown { from { transform: translateY(90px); opacity: 0; } }
.mpl-iris { position: fixed; width: 0; height: 0; border-radius: 50%; z-index: 95; pointer-events: none; box-shadow: 0 0 0 0 #1c1814; transition: box-shadow .6s ease-in; }
.mpl-iris.shut { box-shadow: 0 0 0 300vmax #1c1814; }
.mpl-iris { width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; transition: width .6s ease-in, height .6s ease-in, margin .6s ease-in; box-shadow: 0 0 0 300vmax #1c1814; }
.mpl-iris.shut { width: 0; height: 0; margin: 0; }
.mpl-iris.open { width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; transition-timing-function: ease-out; }
.mpl-hd { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 10px; display: flex; gap: 8px; align-items: center; padding: 4px 12px 4px 6px; z-index: 2; max-width: 46vw; }
.mpl-hd b { display: block; font-size: 17px; }
.mpl-hd small { display: block; font-size: 11px; color: #6b4e36; }
.mpl-nav { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 10px; display: flex; gap: 6px; z-index: 2; }
.mpl-tip { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); margin: 0; padding: 3px 12px; font-size: 12px; color: #e6d8b4; background: rgba(28,24,20,.72); white-space: nowrap; z-index: 2; }
#panel.mpl-over { z-index: 45; }

/* ---- 卡片 ---- */
.mpl-modal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(20,14,10,.55); z-index: 10; }
.mpl-modal.on { display: flex; }
.mpl-floatwrap { background: none; pointer-events: none; z-index: 60; }
.mpl-floatwrap .mpl-modal { pointer-events: auto; }
.mpc { position: relative; display: flex; gap: 14px; max-width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box; padding: 16px 18px; background: #f0e5c7; border: 3px solid #6b4a2e; border-radius: 10px; box-shadow: inset 0 0 0 2px #e2cf9f, 0 10px 30px rgba(0,0,0,.5); animation: mpcIn .18s ease-out; }
.mpc.small { width: 340px; }
.mpc.mid { width: 440px; }
.mpc.wide { width: 600px; }
@keyframes mpcIn { from { transform: scale(.94); opacity: 0; } }
.mpc.shake { animation: mpcShake .3s; }
@keyframes mpcShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mpc img { image-rendering: pixelated; }
.mpc-x { position: absolute; right: 6px; top: 4px; border: 0; background: none; font-size: 22px; line-height: 1; color: #6b4a2e; cursor: pointer; }
.mpc h4 { margin: 0 0 4px; font-size: 18px; }
.mpc h4 .ic { width: 16px; vertical-align: -2px; }
.mpc h5 { margin: 10px 0 4px; font-size: 13px; color: #8a4a2a; }
.mpc-sub { margin: 0; font-size: 12px; color: #6b5a44; }
.mpc-intro { margin: 8px 0 0; padding: 6px 8px; font-size: 13px; background: rgba(255,255,255,.35); border-radius: 6px; }
.mpc-nt { margin: 8px 0 0; font-size: 11px; color: #6b5a44; }
.mpc-l { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mpc-art { width: 150px; height: auto; border-radius: 8px; }
.mpc-who { display: flex; flex-direction: column; align-items: center; }
.mpc-who b { font-size: 14px; }
.mpc-who small { font-size: 10px; color: #fff; background: #b23a2b; padding: 1px 6px; border-radius: 3px; }
.mpc-r { flex: 1; min-width: 0; }
.mpc-c { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mpc-big { width: 40px; margin-bottom: 6px; }
.mpc-inv { width: 120px; margin-bottom: 6px; }
.mpc-letter { width: 150px; margin-bottom: 4px; }
.mpc-av { position: relative; display: inline-block; width: 64px; height: 64px; }
.mpc-av img { position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; object-fit: cover; object-position: top; border-radius: 50%; }
.mpc-av img.fr { left: 0; top: 0; width: 64px; height: 64px; border-radius: 0; object-fit: contain; }
.mpc-av.big { width: 96px; height: 96px; }
.mpc-av.big img { left: 15px; top: 15px; width: 66px; height: 66px; }
.mpc-av.big img.fr { left: 0; top: 0; width: 96px; height: 96px; }
.mpc-av.sm, .mpc-av.xs { width: 40px; height: 40px; }
.mpc-av.sm img, .mpc-av.xs img { left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: #e8d6a8; }
.mpc-av.xs { width: 30px; height: 30px; } .mpc-av.xs img { width: 30px; height: 30px; }
.mpc-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 12px; }
.mpc-rules li { display: flex; align-items: center; gap: 4px; }
.mpc-rules li img { width: 14px; height: 14px; }
.mpc-rules li.no { color: #8a7a62; }
.mpc-rules li.hv { grid-column: 1 / -1; }
.mpc-rules li.hv img { width: 24px; height: auto; }
.mpc-in { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 7px 10px; font: inherit; font-size: 15px; text-align: center; border: 2px solid #a88a5e; border-radius: 6px; background: #fffaf0; color: #3a2a1c; }
.mpc-err { min-height: 16px; margin: 4px 0 0; font-size: 12px; color: #b23a2b; }
.mpc-btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.mpc-r .mpc-btns { justify-content: flex-end; }
.mpc-slots { display: flex; gap: 8px; margin-top: 10px; width: 100%; }
.mpc-slot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border: 2px solid #a88a5e; border-radius: 8px; background: #fffaf0; font: inherit; color: inherit; cursor: pointer; }
.mpc-slot:hover { border-color: #b23a2b; background: #fff3dc; }
.mpc-slot b { font-size: 14px; } .mpc-slot small { font-size: 10px; color: #6b5a44; }
.mpc-slot.empty { opacity: .5; cursor: default; }

/* ---- 我的房间 ---- */
.mprbox .k29-bd { overflow: auto; }
.mpr { display: flex; gap: 16px; padding: 4px 6px 0; flex-wrap: wrap; font-size: 13px; color: #3a2a1c; }
.mpr img { image-rendering: pixelated; }
.mpr .ic { width: 14px; vertical-align: -2px; }
.mpr-l { flex: 0 0 170px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mpr-r { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mpr h5 { margin: 4px 0 2px; font-size: 13px; color: #8a4a2a; }
.mpr-note { margin: 0; font-size: 12px; color: #6b5a44; line-height: 1.5; }
.mpr-code { position: relative; width: 150px; height: 88px; }
.mpr-code img { width: 150px; height: 88px; }
.mpr-code span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mpr-code small { font-size: 11px; color: #8a4a2a; } .mpr-code b { font-size: 24px; letter-spacing: 2px; color: #3a2a1c; }
.mpr-guest { font-size: 12px; color: #5f7d3a; display: flex; gap: 4px; align-items: center; }
.mpr-guest img { width: 12px; }
.mpr-f { display: flex; align-items: center; gap: 8px; }
.mpr-f > small { flex: 0 0 74px; font-size: 12px; color: #6b5a44; }
.mpr-f input, .mpr-pw input { flex: 1; min-width: 0; padding: 5px 8px; font: inherit; border: 2px solid #a88a5e; border-radius: 6px; background: #fffaf0; color: #3a2a1c; }
.mpr-pw input:disabled { opacity: .5; }
.mpr-pw { flex: 1; display: flex; gap: 8px; align-items: center; }
.mpr-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mpr-seg button { padding: 4px 10px; font: inherit; font-size: 12px; border: 2px solid #a88a5e; border-radius: 14px; background: #fffaf0; color: #3a2a1c; cursor: pointer; }
.mpr-seg button.on { background: #5f7d3a; border-color: #4a6230; color: #fff; }
.mpr-seg button.off { opacity: .55; }
.mpr-seg button em { font-style: normal; font-size: 10px; margin-left: 4px; }
.mpr-sw { flex: 0 0 auto; position: relative; width: 44px; height: 24px; border-radius: 12px; border: 2px solid #a88a5e; background: #d9c9a3; cursor: pointer; padding: 0; }
.mpr-sw i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fffaf0; transition: left .15s; }
.mpr-sw.on { background: #5f7d3a; border-color: #4a6230; }
.mpr-sw.on i { left: 22px; }
.mpr-fr > small { display: block; font-size: 12px; color: #6b5a44; margin-bottom: 4px; }
.mpr-frl { display: flex; flex-direction: column; gap: 4px; }
.mpr-frow { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 10px; }
.mpr-frow .bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.mpr-frow b { font-size: 13px; } .mpr-frow small { flex: 1; font-size: 11px; color: #5f7d3a; }
.mpr-frow .k29-btn { min-width: 0; padding: 3px 10px; }
.mpr-pm { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: rgba(255,255,255,.35); border-radius: 8px; }
.mpr-pm img { width: 32px; height: 32px; object-fit: contain; }
.mpr-pm span { flex: 1; display: flex; flex-direction: column; } .mpr-pm small { font-size: 11px; color: #6b5a44; }
.mpr-l.rules { flex-basis: 230px; align-items: stretch; text-align: left; padding: 8px; background: rgba(255,255,255,.3); border: 1px dashed #a88a5e; border-radius: 8px; }
.mpr-art { width: 100%; max-width: 220px; align-self: center; }
.mpr-art.sm { width: 40px; }
.mpr-l.rules .mpc-rules { grid-template-columns: 1fr; }
.mpr-hv { display: flex; gap: 6px; }
.mpr-hv button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font: inherit; color: inherit; border: 2px solid #a88a5e; border-radius: 8px; background: #fffaf0; cursor: pointer; }
.mpr-hv button img { width: 48px; height: 38px; object-fit: contain; }
.mpr-hv button b { font-size: 13px; } .mpr-hv button small { font-size: 10px; color: #6b5a44; }
.mpr-hv button.on { border-color: #b23a2b; background: #fff0d6; box-shadow: 0 0 0 2px rgba(178,58,43,.25); }
.mpr-l.gift { flex-basis: 220px; }
.mpr-gi { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.mpr-gi button { padding: 3px 8px; font: inherit; font-size: 12px; border: 2px solid #a88a5e; border-radius: 6px; background: #fffaf0; color: #3a2a1c; cursor: pointer; }
.mpr-gi button small { margin-left: 2px; color: #6b5a44; }
.mpr-gi button.on { border-color: #b23a2b; background: #fff0d6; }
.mpr-gn { display: flex; align-items: center; gap: 8px; }
.mpr-gn button { width: 28px; height: 28px; font-size: 16px; border: 2px solid #a88a5e; border-radius: 6px; background: #fffaf0; cursor: pointer; }
.mpr-gn b { min-width: 24px; font-size: 16px; } .mpr-gn small { font-size: 11px; color: #6b5a44; }
.mpr-ft { position: sticky; bottom: -2px; z-index: 3; background: #f0e5c7; flex-basis: 100%; display: flex; justify-content: flex-end; gap: 8px; padding: 6px 0 4px; border-top: 1px dashed #c4ab7e; }
@media (max-height: 420px) { .mpr-l { flex-basis: 140px; } .mpr-code, .mpr-code img { width: 120px; height: 70px; } .mpc { padding: 10px 14px; } .mpc-art { width: 110px; } .mpc-l { flex-basis: 110px; } }

.mpl-nav .paper { height: 34px; padding: 0 12px; font: inherit; font-size: 15px; line-height: 30px; color: var(--ink, #3a2e24); cursor: pointer; }
.mpl-nav .k29-btn:hover { background: #fff3d6; }
.mpl-nav .k29-btn.warn { background: #b23a2b; border-color: #7e271c; color: #fff; }
.mpl-hd { max-width: 40vw; }
.mpl-hd small { max-width: 34vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }