/* ticker */
.mp-tk{padding:4px 8px!important;border-radius:10px;background:var(--surface-panel-2,#1c1c1c);font-size:11px;margin:4px 0}
.mp-tk-row{display:flex;align-items:center;gap:6px;cursor:pointer;min-height:20px}
.mp-tk-row>b{color:#a78bfa;display:grid}.mp-tk-row>b .gi-svg{width:12px;height:12px}
.mp-tk-cur{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary,#eee);font-weight:600}
.mp-tk-cur.new{animation:mpTkIn .45s ease-out}
.mp-tk-row>i{font-style:normal;font-size:9px;color:var(--text-dim,#888);min-width:10px}
.mp-tk-list{display:none;border-top:1px solid var(--border-soft,#2c2c2c);margin-top:4px;padding-top:3px}
.mp-tk.mp-open .mp-tk-list{display:block}.mp-tk.mp-open .mp-tk-cur{white-space:normal}
.mp-tk-old{color:var(--text-dim,#888);padding:1px 0 1px 18px;font-size:10.5px}
@keyframes mpTkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* focus */
.cpop-unit.mp-focus{outline:2px solid #f87171;outline-offset:2px}
.cpop-unit.mp-focus::after{content:'鎖';position:absolute;top:-9px;right:-6px;font:700 10px serif;color:#fff;background:#b91c1c;border-radius:50%;width:16px;height:16px;display:grid;place-items:center}
/* chatter */
.cpop-lunge{position:relative}
.mp-say{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;font-size:10px;padding:3px 8px;border-radius:10px;background:#f5efe0;color:#2a2116;box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:5;pointer-events:none;animation:mpSay 2.6s ease forwards}
.mp-say::after{content:'';position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:#f5efe0}
@keyframes mpSay{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}10%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-6px)}}
/* view mode */
.mp-vm-btn{position:absolute;right:6px;top:6px;z-index:40;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-soft,#2c2c2c);background:rgba(0,0,0,.45);color:#e9bb61;display:grid;place-items:center;padding:0}
.mp-vm-btn .gi-svg{width:15px;height:15px}
#mp-vm-sky{position:fixed;inset:0;z-index:900;background:radial-gradient(ellipse at 50% 20%,#1e1b3a,#07060d 70%);overflow:hidden;pointer-events:none}
#mp-vm-sky .mp-vm-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 110%,rgba(233,187,97,.18),transparent 60%);animation:mpGlow 6s ease-in-out infinite}
#mp-vm-sky i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#e9d5a0;box-shadow:0 0 6px #e9bb61;opacity:0;animation:mpDust var(--t) linear var(--d) infinite}
@keyframes mpDust{0%{opacity:0;transform:translateY(0)}15%{opacity:.8}100%{opacity:0;transform:translateY(-100vh)}}
@keyframes mpGlow{50%{opacity:.5}}
.mp-vm-x{pointer-events:auto;position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:8px 18px;border-radius:99px;border:1px solid rgba(233,187,97,.5);background:rgba(0,0,0,.5);color:#e9bb61;font-size:12px}
.mp-vm-hud{position:absolute;top:calc(12px + env(safe-area-inset-top));left:0;right:0;display:flex;justify-content:center;gap:18px;font-size:12px;color:#cbd5e1;letter-spacing:.05em}
.mp-vm-hud b{color:#fde68a}
body.mp-vm .bt-stage.mp-vm-stage{position:fixed!important;left:50%;right:auto;width:min(100vw,560px)!important;box-sizing:border-box;top:50%;transform:translate(-50%,-50%) scale(1.08);z-index:910;background:transparent!important;border:none!important;padding:0 14px!important;margin:0!important}
body.mp-vm .bt-stage.mp-vm-stage .mp-vm-btn{display:none}
body.mp-vm{overflow:hidden}
.mp-vm-stage.mp-shk{animation:mpShk .35s ease}
@keyframes mpShk{0%,100%{translate:0 0}20%{translate:-5px 3px}40%{translate:5px -3px}60%{translate:-3px 2px}80%{translate:2px -1px}}
@media (prefers-reduced-motion:reduce){#mp-vm-sky i,.mp-vm-glow,.mp-vm-stage.mp-shk{animation:none}}
/* landscape view mode on a portrait phone: rotate the backdrop and the stage together */
body.mp-vm.mp-land #mp-vm-sky{left:50%;top:50%;right:auto;bottom:auto;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}
body.mp-vm.mp-land .bt-stage.mp-vm-stage{width:min(calc(100vh - 150px),760px)!important;transform:translate(-50%,-50%) rotate(90deg) scale(1.15)}
body.mp-vm.mp-land .mp-vm-hud{top:10px}
body.mp-vm.mp-land .mp-vm-x{bottom:10px}
/* desktop / tablet: the stage grows with the screen */
@media (min-width:900px){body.mp-vm .bt-stage.mp-vm-stage{width:min(76vw,860px)!important;transform:translate(-50%,-50%) scale(1.1)}}