/* ═══════════════════════════════════════════════
   juju.css — 聚聚模拟器特有样式层（叠加于 1.0 星梦紫框架）
   被记住度HUD / 口袋48粉丝版房间 / 手机App / 回忆册 / 公演打节奏条
   ═══════════════════════════════════════════════ */

/* ───────── 被记住度 HUD（主数值） ───────── */
.memo-meter{background:rgba(255,255,255,.045);border-radius:14px;padding:12px;margin-bottom:10px}
.mk-row{display:flex;align-items:center;gap:8px}
.mk-label{font-size:12px;color:var(--text-dim);flex:none}
.mk-bar{flex:1;height:10px;background:rgba(255,255,255,.09);border-radius:6px;overflow:hidden}
.mk-fill{height:100%;border-radius:6px;transition:width .5s}
.mk-tier{font-size:12.5px;font-weight:700;flex:none}
.mk-desc{font-size:10.5px;margin-top:5px;line-height:1.6}

/* ───────── 口袋48 房间 ───────── */
.p48-wrap{padding:4px 2px}
.p48-topbar{display:flex;align-items:center;gap:8px;padding:10px 4px;font-size:15px}
.p48-search{margin-left:auto;font-size:11px;color:var(--text-faint)}
.p48-plus{font-size:14px;color:var(--gold);padding:0 4px}
.p48-carousel{background:linear-gradient(90deg,rgba(139,92,246,.16),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12.5px;margin-bottom:10px;line-height:1.6}
.p48-sub{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid transparent;border-radius:14px;padding:10px;width:100%;text-align:left;margin-bottom:8px;color:var(--text)}
.p48-sub:hover{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.1)}
.p48-ava{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none;color:#0e0a24}
.p48-subinfo{flex:1;min-width:0}
.p48-name{font-size:14px;font-weight:700}
.p48-stats{font-size:10.5px;color:var(--text-faint);margin-top:2px}
.p48-subgo{font-size:18px;color:var(--text-faint)}
.p48-mood{font-size:10.5px;color:var(--text-dim);margin-top:2px}
.p48-tier{font-size:12px;padding:4px 10px;border-radius:12px;background:color-mix(in srgb,var(--tc,#7ee081) 18%,transparent);color:var(--tc,#7ee081);font-weight:700;border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);align-self:flex-start}
.p48-announce{font-size:11px;color:var(--gold);background:rgba(255,209,102,.07);border-radius:8px;padding:6px 10px;margin:6px 0}
.p48-flow{font-size:12px}
.p48-msg{display:flex;gap:8px;margin:7px 0;align-items:flex-start}
.p48-msg.her{font-weight:500}
.p48-msg.me{flex-direction:row-reverse}
.p48-msg-ava{width:28px;height:28px;border-radius:50%;background:#3a2f5e;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.p48-msg-body{flex:1;min-width:0}
.p48-msg-name{font-size:10.5px;color:var(--text-faint)}
.p48-msg-text{font-size:12.5px;line-height:1.6;margin-top:1px;word-break:break-word}
.p48-input-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.p48-input-row .cre-input{flex:1;min-width:140px}
.p48-tips{font-size:10.5px;color:var(--text-faint);margin-top:10px}
.p48-live{border-radius:16px;overflow:hidden;background:rgba(0,0,0,.25)}
.p48-live-top{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;color:var(--text-dim)}
.p48-live-dot{color:#ff4d4d}
.p48-live-stage{height:120px;display:flex;align-items:center;justify-content:center;font-size:44px;background:radial-gradient(ellipse at 50% 40%,rgba(139,92,246,.35),transparent);padding-top:8px}
.p48-live-danmaku{font-size:12px;padding:8px 12px}
.dmk{margin:4px 0;opacity:.9}
.dmk-n{color:#c9a7eb;font-weight:600}
.dmk.her{color:var(--gold)}
.p48-navrow{display:flex;gap:4px;margin-top:12px}
.p48-nv{flex:1;text-align:center;font-size:12px;padding:8px 0;background:transparent;border:none;color:var(--text-dim);border-bottom:2px solid transparent}
.p48-nv.on{color:var(--gold);border-bottom-color:var(--gold)}
.p48-trend{font-size:12px;color:var(--text);padding:8px 6px;border-bottom:1px dashed var(--line)}
.p48-mine .stat-chips{margin-top:6px}
.badge-purple{background:rgba(139,92,246,.25);color:#c9b6ff}
.badge-cyan{background:rgba(73,190,220,.2);color:#9adcf0}
.badge{font-size:10px;padding:1px 6px;border-radius:8px;font-weight:600}
.stat-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-flat{background:rgba(255,255,255,.06);color:var(--text-dim)}

/* ───────── 手机主屏 ───────── */
.phone-statusbar{font-size:11px;color:var(--text-faint);padding:8px 14px 0}
.phone-qnote{display:flex;gap:10px;align-items:center;background:rgba(139,92,246,.08);border:1px solid var(--line);border-radius:14px;margin:10px;padding:10px}
.pq-icon{font-size:24px}
.pq-body{flex:1;min-width:0}
.pq-name{font-size:12.5px;font-weight:700}
.pq-txt{font-size:11px;color:var(--text-dim);margin-top:2px}
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px}
.app-ic{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;background:rgba(255,255,255,.03);border:none;border-radius:14px;padding:12px 4px;color:var(--text);cursor:pointer}
.app-ic:active{transform:scale(.96)}
.ai-ic{font-size:24px}
.ai-n{font-size:10.5px;color:var(--text-dim)}
.ai-dot{position:absolute;top:8px;right:14px;min-width:14px;height:14px;border-radius:8px;background:#ff4d4d;color:#fff;font-size:9px;line-height:14px;text-align:center}
.phone-quickline{display:flex;gap:8px;padding:0 10px;flex-wrap:wrap}
.phone-quickline .btn{font-size:11px}
.phone-footer-btn{text-align:center;font-size:11px;color:var(--text-faint);padding:14px 0 20px;cursor:pointer}
.notif-pop{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:#241b3e;border:1px solid var(--line);color:var(--text);font-size:12.5px;border-radius:14px;padding:10px 14px;max-width:min(400px,86vw);z-index:999;box-shadow:0 8px 30px rgba(0,0,0,.45);animation:fadeIn .3s}

/* ───────── 公演演出层 ───────── */
.show-stage{max-width:760px;margin:6vh auto;width:94%;background:linear-gradient(180deg,#16112b,#0e0a24);border:1px solid var(--line);border-radius:18px;padding:16px 18px;min-height:52vh}
.show-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.show-title{font-weight:700;font-size:15px}
.show-note{font-size:11.5px;color:var(--text-faint);margin-bottom:10px}
.show-line{font-size:14px;line-height:1.9;margin:8px 0}
.show-line.big{font-size:17px;font-weight:700}
.show-line.small{font-size:12px;color:var(--text-dim)}
.show-q{font-size:12.5px;color:var(--gold);margin:10px 0 6px}
.call-wrap{text-align:center;padding:14px 4px}
.call-now{font-size:13px;color:var(--text-dim);margin-bottom:12px}
.call-track{position:relative;height:34px;background:rgba(255,255,255,.05);border-radius:18px;border:1px solid var(--line);overflow:visible;margin-bottom:6px}
.call-zone{position:absolute;left:42%;width:16%;top:-3px;bottom:-3px;background:rgba(126,224,129,.25);border-radius:18px;border:1px solid rgba(126,224,129,.6)}
.call-sweep{position:absolute;top:2px;bottom:2px;width:6px;border-radius:4px;background:#ffd166;box-shadow:0 0 10px #ffd166;left:0;animation:callSweep 1.3s linear infinite}
@keyframes callSweep{from{left:2%}to{left:94%}}
.call-btn{width:150px;margin:14px auto;font-size:16px;padding:12px;border-radius:24px;background:linear-gradient(135deg,#d63384,var(--purple));border:none;color:#fff;cursor:pointer;box-shadow:0 6px 24px rgba(214,51,132,.4)}
.call-btn:active{transform:scale(.96)}
.call-logs{display:flex;gap:8px;justify-content:center;min-height:16px}
.call-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.12);transition:background .2s}
.call-dot.hit{background:#7ee081;box-shadow:0 0 8px #7ee081}
.call-grade{font-size:16px}
.gS{color:#ffd166}.gA{color:#7ee081}.gB{color:var(--text-desat,#9adcf0)}.gC{color:var(--text-faint)}

/* ───────── 回忆册/图鉴 ───────── */
.scrap-page{display:flex;gap:10px;padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.sp-ic{font-size:18px;flex:none}
.sp-body{flex:1;min-width:0}
.sp-t{font-size:12.5px;font-weight:600}
.sp-d{font-size:10.5px;color:var(--text-faint);margin-top:1px;line-height:1.6}
.idiomp-grid{display:flex;flex-wrap:wrap;gap:6px}
.idiom-i{font-size:11px;padding:3px 9px;border-radius:12px;background:rgba(255,255,255,.05);color:var(--text-faint);cursor:help}
.idiom-i.got{background:rgba(255,209,102,.13);color:#ffd166}

/* ───────── 握手/榜单 ───────── */
.hs-bubble{margin:5px 0;padding:8px 11px;border-radius:14px;font-size:13px;max-width:88%;line-height:1.7}
.hs-bubble.me{background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(139,92,246,.15));align-self:flex-end;margin-left:auto}
.hs-bubble.fan{background:rgba(255,255,255,.07)}
.hs-rank{display:flex;gap:10px;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12.5px}
.hs-rank.pl{background:rgba(255,209,102,.07);border-radius:8px}
.hs-rk{width:22px;color:var(--text-faint);text-align:center}
.hs-nm{flex:1}
.hs-vt{color:var(--gold)}

/* 创建选项选中态 */
.cre-card.sel{border-color:var(--gold) !important;box-shadow:0 0 0 2px rgba(255,209,102,.25)}
.cre-step{font-size:11.5px;color:var(--text-faint);padding:4px 8px;border-radius:10px}
.cre-step.on{background:rgba(139,92,246,.3);color:#d9c9ff}
.btn-xs{font-size:11px;padding:3px 8px;border-radius:8px}
.gen-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn-ghost{background:transparent;position:absolute;right:12px;top:12px}

/* 输入/账户页微调 */
.mk-desc b{color:var(--gold)}

/* 夜间低性能（1.0 同款：静态化） */
@media (max-width:768px){
  .show-stage{margin:14px auto;border-radius:14px}
  .p48-msg-text{font-size:13px}
}

/* ───────── 日程栏折行修复 ───────── */
.slot-time,.slot-act{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-btn{flex:none}

/* ───────── V2.0 手机返回键导航 ───────── */
.ph-nav{display:flex;align-items:center;gap:10px;padding:10px 12px 6px;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#0c0a20f2,#0c0a20dd);backdrop-filter:blur(6px)}
.ph-back{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--text);border-radius:14px;font-size:13px;padding:6px 14px;cursor:pointer}
.ph-back:active{transform:scale(.96)}
.ph-title{font-size:14px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:768px){
  .ph-back{padding:8px 18px;font-size:15px;min-height:38px}
  .ph-nav{padding:12px 14px 8px}
}

/* ───────── V2.0 标签栏横向滚动（移动端8个页签不挤压） ───────── */
#main-tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#main-tabs::-webkit-scrollbar{display:none}
#main-tabs .tab{flex:0 0 auto;white-space:nowrap}

/* ───────── V2.0 移动端：底部导航安全边距（防遮内容末排） ───────── */
@media (max-width:768px){
  #screen-main #bottom-bar{display:none}
  #main-tabbody{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .col-left,.col-right{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* ═══════════ V2.0 移动端演出层真正全屏（#审查） ═══════════
   说明：mobile.css 的 .show-wrap 全屏规则（100vw/100dvh/safe-area）在 DOM 中无对应元素——
   演出容器实际是 .show-stage（showf.js 的 overlay），而 juju.css 的
   .show-stage{margin:6vh auto;min-height:52vh} 又在文件内后加载，覆盖了 mobile.css 的 min-height:0。
   效果：手机上演出是"迷你居中卡"，上下大片空白；此处显式补全（连同 .show-wrap 兜底）。
   竖屏与横屏都适用。 */
@media (max-width:768px){
  .show-wrap,.show-stage{
    width:100vw;height:100vh;height:100dvh;
    max-width:none;max-height:none;
    border-radius:0;border:none;box-shadow:none;
    margin:0 auto;padding-top:env(safe-area-inset-top);
  }
  .show-stage{min-height:0}
}