/* =========================================================
   檔案：css/components.css
   功能：Wusper 終極液態玻璃、果凍 UI 與通知系統完整版
   ========================================================= */

/* =========================================================
   檔案：css/components.css
   1. 🧊 核心：VisionOS 空間運算級液態玻璃 (炫技版)
   ========================================================= */

/* 所有需要玻璃效果的容器統一使用這套 */
.glass-panel, 
.login-gate-wrapper, 
.card-center, 
.sidebar, 
.chat-area, 
.modal-window,
.fluid-card,
.br-card {
    position: relative;
    background: var(--glass-bg);
    --glass-blur: 40px;
    backdrop-filter: blur(var(--glass-blur)) saturate(200%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(200%);
    border-radius: 24px; 
    box-shadow: 
        var(--glass-inner-glow),
        0 12px 36px rgba(0, 0, 0, 0.28);
    border: none;
    z-index: 1;
}

/* ✨ 炫技 3：Houdini 動態流光邊框 (Dynamic Gradient Border) */
.glass-panel::before, 
.login-gate-wrapper::before, 
.card-center::before,
.sidebar::before,
.chat-area::before,
.modal-window::before {
    content: "";
    position: absolute;
    inset: 0; /* 完美貼合父元素 */
    border-radius: inherit; /* 繼承 24px 圓角 */
    padding: 1px; /* 邊框厚度 */
    
    /* 使用 conic-gradient 搭配 CSS Houdini 變數做旋轉漸變 */
    background: conic-gradient(
        from var(--glass-angle), 
        var(--glass-border-dark) 0%, 
        var(--glass-border-light) 30%, 
        var(--glass-border-dark) 50%, 
        var(--glass-border-light) 80%, 
        var(--glass-border-dark) 100%
    );
    
    /* 核心魔法：挖空內部，只保留 padding 區域的邊框 */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none;
    z-index: -1;
    transition: --glass-angle 0.12s linear;
    /* 動態折射角度由 JS 根據相對風景中心位置設定，不再無限旋轉以省性能 */
}

/* 保留 keyframes 以便未來需要，但預設不啟動 */
@keyframes borderRotate {
    0% { --glass-angle: 0deg; }
    100% { --glass-angle: 360deg; }
}

/* ✨ 動態流光文字 (修正：增加發光感) */
.glass-panel h1, 
.glass-panel h2, 
.glass-panel h3, 
.cyber-title {
    background: var(--vibrant-text-grad);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 8s ease-in-out infinite alternate;
    font-weight: 700;
    filter: drop-shadow(0px 1px 2px rgba(255,255,255,0.06));
}


/* ---------------------------------------------------------
   2. 🧽 果凍彈簧按鈕 (Spring Buttons)
   --------------------------------------------------------- */
.btn { 
    background: var(--primary); 
    color: #000; 
    border: none; 
    padding: 14px 24px; 
    font-size: 15px; 
    border-radius: 18px; 
    font-weight: 700; 
    cursor: pointer; 
    margin: 4px; 
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.22);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.15), box-shadow 0.3s ease, filter 0.3s; 
}
.btn:hover { 
    transform: scale(1.03); 
    box-shadow: 0 6px 18px rgba(10, 132, 255, 0.28); 
    filter: brightness(1.06); 
}
.btn:active { 
    transform: scale(0.94); 
    box-shadow: 0 2px 10px rgba(0, 240, 255, 0.2); 
    filter: brightness(0.9); 
}
.btn:disabled { 
    background: var(--bg-input) !important; 
    color: var(--text-muted) !important; 
    box-shadow: none !important; 
    transform: scale(1) !important; 
    cursor: not-allowed; 
}

/* Lobby mode entry cards */
.hub-menu-btn {
    --hv-accent: var(--primary, #00ff9d);
    --hv-accent-bg: rgba(255, 255, 255, 0.1);
    background: var(--hv-accent-bg);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 55%);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--hv-accent);
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 18px;
    cursor: pointer;
    margin: 5px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.22),
        inset 0 -2px 4px rgba(0,0,0,0.12);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hub-menu-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 55%);
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.35);
    border-left-color: var(--hv-accent);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),
        inset 0 -2px 5px rgba(0,0,0,0.1),
        0 8px 20px rgba(0,0,0,0.18);
}
.hub-menu-btn:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.22);
}
.hub-menu-btn .hv-mode-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 12px rgba(255,255,255,0.06);
}
.hub-menu-btn .hv-mode-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hub-menu-btn .hv-mode-arrow {
    flex: 0 0 auto;
    opacity: 0.75;
    color: var(--hv-accent);
}

/* ⚙️ 懸浮小按鈕 —— 常態直接用「按下」液態玻璃質感 */
.sys-btn { 
    background: rgba(255, 255, 255, 0.16); 
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border); 
    border-top: 1px solid var(--glass-highlight);
    color: var(--text-main); 
    padding: 8px 16px; 
    border-radius: 24px; 
    font-size: 13px; 
    font-weight: 600; 
    cursor: pointer; 
    box-shadow: 
        0 6px 18px rgba(0,0,0,0.18),
        inset 0 1px 1px rgba(255,255,255,0.35),
        inset 0 -2px 4px rgba(0,0,0,0.15);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2), background 0.3s, box-shadow 0.3s;
}
.sys-btn:hover { 
    transform: scale(1.08); 
    background: rgba(255, 255, 255, 0.26); 
    box-shadow: 
        0 8px 24px rgba(0,0,0,0.22),
        inset 0 1px 2px rgba(255,255,255,0.5),
        inset 0 -2px 5px rgba(0,0,0,0.12);
}
.sys-btn:active { 
    transform: scale(0.92); 
    background: rgba(255, 255, 255, 0.32); 
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.2),
        inset 0 3px 6px rgba(0,0,0,0.2),
        inset 0 -1px 2px rgba(255,255,255,0.2);
}

/* 👤 圓形懸浮按鈕 —— 常態按下質感 */
.circle-btn { 
    position: fixed; 
    top: 15px; 
    width: 48px; 
    height: 48px; 
    background: rgba(255, 255, 255, 0.14); 
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-radius: 50%; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
    cursor: pointer; 
    z-index: 9999; 
    border: 1px solid var(--glass-border);
    box-shadow: 
        0 10px 26px rgba(0,0,0,0.25), 
        inset 0 1px 1px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.2);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2), background 0.3s, box-shadow 0.3s;
}
.circle-btn:hover { 
    transform: scale(1.12) rotate(6deg); 
    background: rgba(255,255,255,0.24); 
    box-shadow: 
        0 12px 30px rgba(0,0,0,0.28), 
        inset 0 1px 2px rgba(255,255,255,0.55),
        inset 0 -2px 5px rgba(0,0,0,0.15);
}
.circle-btn:active { 
    transform: scale(0.9) rotate(-6deg); 
    background: rgba(255,255,255,0.3); 
}

/* 修正左上右上的懸浮按鈕位置 */
#circle-login-btn { left: 20px; padding: 0; overflow: hidden; }
#circle-login-btn .circle-login-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
}
#circle-login-btn .circle-login-avatar.hidden { display: none !important; }
#circle-login-btn .circle-login-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
#circle-login-btn .circle-login-fallback.hidden { display: none !important; }
#circle-login-btn.has-avatar {
  background: rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.35);
}

#friend-circle-btn { right: 20px; }
#shop-circle-btn { display: none !important; }

/* ---------------------------------------------------------
   3. ⌨️ 輸入框與關閉按鈕細節
   --------------------------------------------------------- */
.login-gate-wrapper input, 
.modal-window input, 
.card-center input { 
    background: rgba(255, 255, 255, 0.08); 
    color: var(--text-main); 
    border: 1px solid var(--glass-border); 
    padding: 14px 16px; 
    margin: 8px 0; 
    width: 100%; 
    border-radius: 16px; 
    text-align: center; 
    font-size: 15px; 
    font-weight: 500; 
    outline: none; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 
        inset 0 2px 6px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.15);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.login-gate-wrapper input:focus, 
.modal-window input:focus, 
.card-center input:focus {
    border-color: var(--primary); 
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 
        inset 0 2px 6px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 0 18px rgba(10, 132, 255, 0.25);
}

.close-btn { 
    position: absolute; 
    top: 18px; 
    right: 22px; 
    font-size: 26px; 
    line-height: 1; 
    background: transparent; 
    border: none; 
    color: var(--text-muted); 
    cursor: pointer; 
    transition: color 0.2s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}
.close-btn:hover { 
    color: #ff3b30; 
    transform: scale(1.25) rotate(90deg); 
}

/* ---------------------------------------------------------
   4. 🔔 靈動島通知系統 (Liquid Toast) 與 Modal 遮罩
   --------------------------------------------------------- */
.modal-overlay { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    background: rgba(0,0,0,0.5); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    display: none; 
    align-items: center; 
    justify-content: center; 
    z-index: 100000; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}
.modal-overlay.show { 
    display: flex; 
    opacity: 1; 
    animation: overlayFadeIn 0.3s ease-out forwards; 
}

/* ==========================================
   🔔 靈動島通知系統 (正宗水晶液態版)
   ========================================== */
.toast-notification { 
    position: fixed; 
    top: 40px; 
    left: 50%; 
    transform: translate(-50%, -100px); 
    
    /* ✨ 捨棄所有 !important，完美使用剛調校好的高級玻璃變數 */
    background: var(--glass-bg); 
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--glass-border); 
    border-top: 1px solid var(--glass-highlight);
    border-left: 1px solid var(--glass-highlight);
    box-shadow: 0 16px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); 
    
    padding: 16px 32px; 
    border-radius: 40px; 
    z-index: 1000000; 
    opacity: 0; 
    
    /* ✨ 讓玻璃顏色切換、浮現動畫都能完美絲滑過渡 */
    transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.2), opacity 0.4s ease;
    
    display: flex; 
    align-items: center; 
    gap: 16px;
    
    /* 使用專屬的文字顏色，保證在白霧或黑霧玻璃上都極度清晰 */
    color: var(--toast-text);
    font-size: 15px; 
    font-weight: 700; 
}

.toast-notification.show { 
    transform: translate(-50%, 0); 
    opacity: 1; 
}

.toast-badge {
    background: var(--primary);
    color: #000;
    font-size: 11px; 
    font-weight: bold;
    padding: 2px 8px; 
    border-radius: 12px;
}

.toast-close-btn {
    cursor: pointer; 
    font-size: 18px; 
    color: var(--text-muted);
    transition: color 0.2s, transform 0.2s;
}
.toast-close-btn:hover { 
    color: #ff3b30; 
    transform: scale(1.2); 
}

@keyframes overlayFadeIn { 
    0% { opacity: 0; transform: scale(0.95); } 
    100% { opacity: 1; transform: scale(1); } 
}

/* ==========================================
   🚨 最高權重：暗黑沉浸模式絕對護盾
   ========================================== */
body.force-dark-canvas {
    background: #020104 !important; /* 整個網頁底色強制拉黑，徹底消滅邊緣白光 */
}

body.force-dark-canvas .hub-area,
body.force-dark-canvas .chat-area,
body.force-dark-canvas .sidebar,
body.force-dark-canvas .glass-panel {
    background: #050308 !important; /* 蓋掉所有的白玉冰塊玻璃 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9) !important;
}

body.force-dark-canvas .hub-area *,
body.force-dark-canvas .chat-area *,
body.force-dark-canvas .sidebar * {
    color: #ffffff !important; /* shell text: force pure white */
    text-shadow: 0 1px 3px #000000 !important;
}
/* ==========================================
   🔌 性能模式 (終極一鍵關閉所有特效)
   ========================================== */

/* 1. 🛑 徹底關閉 body 背景的動態漸變與動畫 */
body.no-glass {
    background-image: none !important;
    animation: none !important;
    background-color: var(--solid-bg, #1c1c1e) !important;
    transition: background-color 0.3s ease !important;
}

/* 2. 🛑 暴力關閉所有面板的毛玻璃，替換為極簡實色 */
body.no-glass .glass-panel,
body.no-glass .login-gate-wrapper,
body.no-glass .card-center,
body.no-glass .sidebar,
body.no-glass .chat-area,
body.no-glass .modal-window,
body.no-glass .fluid-card,
body.no-glass .br-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--solid-bg, #1c1c1e) !important;
    background-image: none !important;
    box-shadow: none !important; 
    border: 1px solid var(--solid-border, #333336) !important; 
}

/* Performance mode: kill remaining GPU-heavy UI chrome */
body.no-glass #bg-layer-1,
body.no-glass #bg-layer-2,
body.no-glass #unsplash-attr {
    display: none !important;
    opacity: 0 !important;
}
body.no-glass .circle-btn,
body.no-glass .sys-btn,
body.no-glass .toast-notification,
body.no-glass .privacy-modal,
body.no-glass .login-gate-wrapper,
body.no-glass .sidebar,
body.no-glass .chat-area {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}
body.no-glass .glass-panel::before,
body.no-glass .glass-panel::after {
    display: none !important;
    animation: none !important;
    content: none !important;
}
body.no-glass * {
    text-shadow: none !important;
}
body.no-glass .glass-panel,
body.no-glass .card-center,
body.no-glass .fluid-card {
    animation: none !important;
}

/* ==========================================
   性能模式 · 更極端優化（Galaxy A31 30fps 目標）
   不影響有獨立畫質設定的遊戲模式內部
   ========================================== */
body.no-glass,
body.no-glass * {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.no-glass * {
    will-change: auto !important;
    transform: none !important;
    perspective: none !important;
}
body.no-glass img,
body.no-glass video,
body.no-glass canvas {
    image-rendering: optimizeSpeed !important;
    image-rendering: -webkit-optimize-contrast !important;
}
body.no-glass .particle,
body.no-glass .fx,
body.no-glass [class*="glow"],
body.no-glass [class*="shine"],
body.no-glass [class*="ripple"],
body.no-glass [class*="liquid"] {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}
/* 減少合成層與重繪 */
body.no-glass .hub-area,
body.no-glass .chat-area,
body.no-glass .sidebar,
body.no-glass .modal-window {
    contain: layout style paint !important;
}
/* debug bar must stay visible even in extreme perf mode */
#gh-debug-topbar,
body.no-glass #gh-debug-topbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/* —— Profile open morph (from #circle-login-btn) —— */
/* GPU circle expand: transform scale only. Kill parallel overlayFadeIn. */
#prof-open-morph {
  position: fixed;
  z-index: 100001;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  border-radius: 50%;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  box-shadow: none;
  border: none;
  /* no contain:paint/strict — scaled circle must paint outside the 48px box */
}
#prof-open-morph.is-active {
  opacity: 1;
  visibility: visible;
}
/* While morphing / content reveal: solid theme fill; content opacity driven by --prof-open-content-opacity (JS progress). */
#profile-modal.modal-overlay.prof-opening,
#profile-modal.modal-overlay.prof-open-reveal {
  background: #000;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}
[data-theme="light"] #profile-modal.modal-overlay.prof-opening,
[data-theme="light"] #profile-modal.modal-overlay.prof-open-reveal {
  background: #f2f2f7;
}
/* Content+text stay invisible until progress fade; no CSS transition fight. */
#profile-modal.prof-opening .modal-window.prof-settings-window,
#profile-modal.prof-opening .prof-settings-window,
#profile-modal.prof-open-reveal .modal-window.prof-settings-window,
#profile-modal.prof-open-reveal .prof-settings-window {
  opacity: var(--prof-open-content-opacity, 0);
  transition: none !important;
}
html.gh-reduce-motion #prof-open-morph {
  display: none !important;
}

/* ==========================================
   個人中心 — iOS 黑白平面全螢幕（Settings）
   Desktop: 左 ~30% 欄目 / 右 ~70% 設定
   Mobile: 全頁欄目 → 詳情右入；返回右出
   ========================================== */
#profile-modal.modal-overlay {
  align-items: stretch;
  justify-content: stretch;
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Never run generic overlayFadeIn — fights open morph / looks like old fade */
  animation: none !important;
  padding: 0;
  /* Bound viewport so inner panes can scroll (body may be overflow:hidden) */
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
#profile-modal .modal-window.prof-settings-window,
#profile-modal .prof-settings-window {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: #000;
  color: #f5f5f7;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Override body.no-glass contain:paint which can clip inner scrollports */
  contain: none !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#profile-modal .prof-settings-window::before,
#profile-modal .prof-settings-window::after {
  display: none !important;
  content: none !important;
}

.prof-shell {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: #000;
  min-height: 0;
  min-width: 0;
}

/* —— Menu / Sidebar —— */
.prof-pane-menu {
  display: flex;
  flex-direction: column;
  background: #000;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.prof-menu-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  min-height: 52px;
  border-bottom: 1px solid #1c1c1e;
  flex-shrink: 0;
}
.prof-menu-top h3 {
  margin: 0;
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f5f5f7;
}
.prof-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.prof-close-btn:active { background: #2c2c2e; }

.prof-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 12px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  flex: 1 1 auto;
  min-height: 0;
}

.prof-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #f5f5f7;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  transition: background 0.15s ease;
  margin: 1px 0;
}
.prof-row:hover { background: #141414; }
.prof-row:active { background: #1c1c1e; }
.prof-row.active {
  background: #1c1c1e;
}
a.prof-row { text-decoration: none; color: inherit; box-sizing: border-box; }
.prof-row-static {
  cursor: default;
  background: #111;
  border: 1px solid #1c1c1e;
  border-radius: 12px;
  margin: 6px 0;
  padding: 14px;
}
.prof-row-static:hover { background: #111; }

.prof-row-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f5f5f7;
}
.prof-ico { display: block; }
.prof-row-label { flex: 1; font-weight: 560; letter-spacing: -0.01em; }
.prof-row-chevron {
  color: #636366;
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
}
.prof-row-help {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8e8e93;
  line-height: 1.45;
  font-weight: 400;
}

/* —— Detail pane —— */
.prof-pane-detail {
  display: flex;
  flex-direction: column;
  background: #000;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}
.prof-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
  min-height: 52px;
  border-bottom: 1px solid #1c1c1e;
  flex-shrink: 0;
}
.prof-nav h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #f5f5f7;
  text-align: center;
}
.prof-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #1c1c1e;
  color: #f5f5f7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.prof-back-btn.hidden,
.prof-page.hidden,
.hidden { display: none !important; }
.prof-close-detail { margin-left: 0; }

/* Detail panes reuse .prof-menu-list as a stack — do NOT nest a second scrollport */
.prof-detail-scroll .prof-menu-list {
  flex: none;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  overscroll-behavior: auto;
  touch-action: pan-y;
  padding: 0;
}
.prof-detail-scroll .prof-page {
  min-height: 0;
  touch-action: pan-y;
}
#prof-page-hub,
#prof-page-appearance,
#prof-page-privacy,
#prof-page-account,
#prof-page-stats,
#prof-page-overview,
#prof-page-wallet,
#prof-page-bind,
#prof-page-language,
#prof-page-about,
#prof-page-feedback,
#prof-page-gm,
#prof-page-updates,
#prof-page-terms,
#prof-page-devices,
#prof-page-notifications,
#prof-page-friends,
#prof-page-points,
#prof-page-audio,
#prof-page-accessibility,
#prof-page-storage,
#prof-page-advanced {
  touch-action: pan-y;
}

.prof-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.prof-section { margin: 0 0 22px 0; }
.prof-section-title {
  margin: 0 0 10px 0;
  color: #8e8e93;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
}

.prof-overview-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #1c1c1e;
  background: #111;
  margin-bottom: 14px;
}
.prof-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #2c2c2e;
  background: #1c1c1e;
  cursor: pointer;
  flex-shrink: 0;
}
.prof-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prof-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e8e93;
}
.prof-avatar-placeholder .prof-row-icon { width: 36px; height: 36px; }
.prof-avatar-placeholder .prof-ico { width: 36px; height: 36px; }
.prof-avatar-img.hidden,
.prof-avatar-placeholder.hidden { display: none !important; }
.prof-avatar-edit {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 10px;
  text-align: center;
  padding: 3px 0;
}
.prof-overview-meta { flex: 1; min-width: 0; }
.prof-username {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  word-break: break-all;
  color: #f5f5f7;
}
.prof-points-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2c2c2e;
  background: #1c1c1e;
  color: #f5f5f7;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 650;
}
.prof-points-val { color: #fff; }
.prof-link-btn {
  display: block;
  margin-top: 8px;
  background: transparent;
  border: none;
  color: #8e8e93;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.prof-points-hint {
  font-size: 12px;
  color: #8e8e93;
  line-height: 1.55;
  margin: 4px 2px 0;
}

/* Form controls inside profile: flat B/W */
#profile-modal .prof-settings-window input[type="text"],
#profile-modal .prof-settings-window input[type="password"],
#profile-modal .prof-settings-window input[type="number"],
#profile-modal .prof-detail-scroll input[type="text"],
#profile-modal .prof-detail-scroll input[type="password"],
#profile-modal .prof-detail-scroll input[type="number"] {
  background: #111 !important;
  border: 1px solid #2c2c2e !important;
  color: #f5f5f7 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
/* Profile / feedback: neutralize global .btn iOS-blue (--primary #0a84ff) */
#profile-modal .btn,
#feedback-inbox-modal .btn {
  border-radius: 10px;
  background: #3a3a3c !important;
  border: 1px solid #636366 !important;
  color: #f5f5f7 !important;
  box-shadow: none !important;
  filter: none !important;
}
#profile-modal .btn:hover,
#feedback-inbox-modal .btn:hover {
  background: #48484a !important;
  border-color: #8e8e93 !important;
  box-shadow: none !important;
  filter: brightness(1.05) !important;
}
#profile-modal .btn:active,
#feedback-inbox-modal .btn:active {
  background: #2c2c2e !important;
  box-shadow: none !important;
  filter: brightness(0.96) !important;
}
#profile-modal .btn:disabled,
#feedback-inbox-modal .btn:disabled {
  background: #1c1c1e !important;
  border-color: #2c2c2e !important;
  color: #636366 !important;
  box-shadow: none !important;
  filter: none !important;
}
[data-theme="light"] #profile-modal .btn,
[data-theme="light"] #feedback-inbox-modal .btn {
  background: #2c2c2e !important;
  border-color: #1d1d1f !important;
  color: #f5f5f7 !important;
}
[data-theme="light"] #profile-modal .btn:hover,
[data-theme="light"] #feedback-inbox-modal .btn:hover {
  background: #3a3a3c !important;
  border-color: #1d1d1f !important;
}
[data-theme="light"] #profile-modal .btn:active,
[data-theme="light"] #feedback-inbox-modal .btn:active {
  background: #1c1c1e !important;
}
/* Keep danger / muted logout accents (terracotta) over the stone fill */
#profile-modal #lan-logout-btn,
#profile-modal #prof-withdraw-consent-btn,
#profile-modal button[onclick="executeDeleteAccount()"] {
  background: rgba(138, 112, 96, 0.16) !important;
  border: 1px solid #8a7060 !important;
  color: #c4a090 !important;
}
[data-theme="light"] #profile-modal #lan-logout-btn,
[data-theme="light"] #profile-modal #prof-withdraw-consent-btn,
[data-theme="light"] #profile-modal button[onclick="executeDeleteAccount()"] {
  background: rgba(154, 107, 92, 0.12) !important;
  border-color: #a87868 !important;
  color: #7a5648 !important;
}

/* Hide legacy absolute close if any leftover */
#profile-modal > .modal-window > .close-btn { display: none !important; }

/* —— Mobile: push / pop from the right —— */
@media (max-width: 899px) {
  .prof-shell { display: block; }
  .prof-pane-menu,
  .prof-pane-detail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .prof-pane-menu {
    transform: translateX(0);
  }
  .prof-pane-detail {
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }
  #profile-modal.prof-detail-open .prof-pane-detail {
    transform: translateX(0);
  }
  .prof-close-detail { display: none !important; }
  .prof-nav h3 { text-align: left; }
}

/* —— Large screens: ~30% / ~70% split —— */
@media (min-width: 900px) {
  .prof-pane-menu {
    width: 30%;
    max-width: 360px;
    flex: 0 0 30%;
    border-right: 1px solid #1c1c1e;
    height: 100%;
  }
  .prof-pane-detail {
    flex: 1 1 70%;
    width: 70%;
    height: 100%;
    transform: none !important;
  }
  .prof-back-btn { display: none !important; }
  .prof-nav h3 { text-align: left; padding-left: 4px; }
  .prof-close-detail { display: none !important; } /* menu has close */
  .prof-row-chevron { display: none; } /* desktop sidebar: no chevron */
  .prof-avatar-wrap { width: 96px; height: 96px; }
}

@media (min-width: 1280px) {
  .prof-pane-menu { max-width: 400px; }
  .prof-avatar-wrap { width: 112px; height: 112px; }
}


/* —— Profile light mode (明亮模式) —— */
[data-theme="light"] #profile-modal.modal-overlay {
  background: #f2f2f7;
}
[data-theme="light"] #profile-modal .modal-window.prof-settings-window,
[data-theme="light"] #profile-modal .prof-settings-window {
  background: #f2f2f7;
  color: #1d1d1f;
}
[data-theme="light"] .prof-shell,
[data-theme="light"] .prof-pane-menu,
[data-theme="light"] .prof-pane-detail {
  background: #f2f2f7;
}
[data-theme="light"] .prof-menu-top,
[data-theme="light"] .prof-nav {
  border-bottom-color: #d1d1d6;
}
[data-theme="light"] .prof-menu-top h3,
[data-theme="light"] .prof-nav h3,
[data-theme="light"] .prof-row,
[data-theme="light"] .prof-username,
[data-theme="light"] .prof-row-label,
[data-theme="light"] .prof-row-icon,
[data-theme="light"] .prof-points-btn,
[data-theme="light"] .prof-points-val {
  color: #1d1d1f;
}
[data-theme="light"] .prof-close-btn,
[data-theme="light"] .prof-back-btn {
  background: #e5e5ea;
  color: #1d1d1f;
}
[data-theme="light"] .prof-close-btn:active,
[data-theme="light"] .prof-back-btn:active { background: #d1d1d6; }
[data-theme="light"] .prof-row:hover { background: #e8e8ed; }
[data-theme="light"] .prof-row:active,
[data-theme="light"] .prof-row.active { background: #e5e5ea; }
[data-theme="light"] .prof-row-static {
  background: #ffffff;
  border-color: #d1d1d6;
}
[data-theme="light"] .prof-row-static:hover { background: #ffffff; }
[data-theme="light"] .prof-row-chevron { color: #8e8e93; }
[data-theme="light"] .prof-row-help,
[data-theme="light"] .prof-section-title,
[data-theme="light"] .prof-points-hint,
[data-theme="light"] .prof-link-btn {
  color: #6e6e73;
}
[data-theme="light"] .prof-overview-card {
  background: #ffffff;
  border-color: #d1d1d6;
}
[data-theme="light"] .prof-avatar-wrap {
  background: #e5e5ea;
  border-color: #c7c7cc;
}
[data-theme="light"] .prof-avatar-placeholder { color: #8e8e93; }
[data-theme="light"] .prof-avatar-edit {
  background: rgba(255,255,255,0.85);
  color: #1d1d1f;
}
[data-theme="light"] .prof-points-btn {
  background: #e5e5ea;
  border-color: #c7c7cc;
  color: #1d1d1f;
}
[data-theme="light"] #profile-modal .prof-settings-window input[type="text"],
[data-theme="light"] #profile-modal .prof-settings-window input[type="password"],
[data-theme="light"] #profile-modal .prof-settings-window input[type="number"],
[data-theme="light"] #profile-modal .prof-detail-scroll input[type="text"],
[data-theme="light"] #profile-modal .prof-detail-scroll input[type="password"],
[data-theme="light"] #profile-modal .prof-detail-scroll input[type="number"] {
  background: #ffffff !important;
  border: 1px solid #c7c7cc !important;
  color: #1d1d1f !important;
}
@media (min-width: 900px) {
  [data-theme="light"] .prof-pane-menu {
    border-right-color: #d1d1d6;
  }
}

.prof-empty-state {
  padding: 28px 16px;
  border-radius: 14px;
  border: 1px solid #1c1c1e;
  background: #111;
  text-align: center;
}
.prof-empty-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #f5f5f7;
}
.prof-empty-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #8e8e93;
}
[data-theme="light"] .prof-empty-state {
  background: #ffffff;
  border-color: #d1d1d6;
}
[data-theme="light"] .prof-empty-title { color: #1d1d1f; }
[data-theme="light"] .prof-empty-body { color: #6e6e73; }


.player-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.35);
  vertical-align: middle;
  flex-shrink: 0;
  background: rgba(0,0,0,0.2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.player-avatar.sm { width: 26px; height: 26px; }
.player-avatar.lg { width: 48px; height: 48px; }
.player-avatar.xl { width: 64px; height: 64px; border-width: 2px; }

.lobby-welcome-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lobby-welcome-row .player-avatar {
  width: 36px; height: 36px;
}
.host-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 6px 4px;
}
.host-player-row .host-player-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 650;
}
.host-player-row .host-player-left .player-avatar {
  width: 36px; height: 36px;
}

@media (min-width: 900px) {
  .player-avatar { width: 40px; height: 40px; }
  .player-avatar.sm { width: 32px; height: 32px; }
  .player-avatar.lg { width: 56px; height: 56px; }
  .player-avatar.xl { width: 80px; height: 80px; }
  .lobby-welcome-row .player-avatar,
  .host-player-row .host-player-left .player-avatar { width: 48px; height: 48px; }
  .friend-dm-avatar { width: 44px !important; height: 44px !important; }
  .prof-avatar-wrap { width: 96px; height: 96px; }
  .prof-avatar-placeholder { font-size: 42px; }
  #circle-login-btn.has-avatar,
  #circle-login-btn {
    width: 64px;
    height: 64px;
  }
  #friend-circle-btn { width: 64px; height: 64px; font-size: 24px; }
  #cm-scoreboard .player-avatar { width: 36px; height: 36px; }
}

@media (min-width: 1280px) {
  .player-avatar { width: 46px; height: 46px; }
  .player-avatar.sm { width: 36px; height: 36px; }
  .player-avatar.lg { width: 64px; height: 64px; }
  .player-avatar.xl { width: 96px; height: 96px; }
  .lobby-welcome-row .player-avatar,
  .host-player-row .host-player-left .player-avatar { width: 56px; height: 56px; }
  .prof-avatar-wrap { width: 112px; height: 112px; }
  #circle-login-btn.has-avatar,
  #circle-login-btn,
  #friend-circle-btn {
    width: 72px;
    height: 72px;
  }
}

.friend-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--glass-border);
}
.friend-item:last-child { border-bottom: none; }
.friend-item-main { flex: 1; min-width: 0; }
.friend-item-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.friend-name { font-weight: 700; font-size: 14px; }
.friend-status {
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
}
.friend-status.online {
  color: #34c759; border-color: rgba(52,199,89,0.4);
  background: rgba(52,199,89,0.08);
}
.friend-status.offline { opacity: 0.7; }
.friend-snippet {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.friend-actions {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.friend-chip {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1.2;
}
.friend-chip.danger { color: #ff3b30; border-color: rgba(255,59,48,0.45); }
.friend-unread {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: #ff3b30; color: #fff;
  font-size: 10px; font-weight: 700;
}
/* legacy header hooks kept as aliases — real layout below in friend-dm shell */
.friend-dm-header {
  display: flex; align-items: center; gap: 10px;
}
.friend-dm-title-wrap {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.friend-dm-avatar { width: 36px !important; height: 36px !important; border-radius: 50%; }
.friend-dm-compose { display: flex; gap: 8px; align-items: center; }
.friend-dm-compose input { margin: 0; }
.friend-req-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 8px; border-bottom: 1px solid var(--glass-border);
}
.lobby-welcome-row {
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: center; flex-wrap: wrap;
}


.prof-points-balance { font-size: 14px; margin: 0 0 4px; color: var(--text-muted); }
.prof-history-list {
  max-height: min(50vh, 320px);
  overflow-y: auto;
  padding: 4px 0;
  border-radius: 10px;
}
.prof-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  font-size: 13px;
}
.prof-history-msg { text-align: left; color: var(--text-main, #fff); flex: 1; }
.prof-history-chg { font-weight: 700; font-variant-numeric: tabular-nums; }
.prof-history-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.prof-update-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.prof-update-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.prof-update-deploy {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #00ff9d);
  font-size: 12px;
  line-height: 1.35;
}
.prof-update-commit {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.9;
}
.prof-update-note {
  color: var(--text-main, #fff);
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}


/* ---- Avatar crop overlay ---- */
.avatar-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000100;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.avatar-crop-panel {
  width: min(360px, 100%);
  background: rgba(22, 24, 32, 0.96);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  color: #fff;
}
.avatar-crop-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}
.avatar-crop-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a0c;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.avatar-crop-viewport:active { cursor: grabbing; }
.avatar-crop-img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform-origin: center center;
  pointer-events: none;
  will-change: transform;
}
.avatar-crop-frame {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(245, 245, 247, 0.55);
  pointer-events: none;
}
.avatar-crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 14px;
  font-size: 13px;
  opacity: 0.9;
}
.avatar-crop-zoom-row input[type="range"] {
  flex: 1;
  accent-color: #8e8e93;
}
.avatar-crop-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.avatar-crop-btn {
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.avatar-crop-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.avatar-crop-btn.ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.avatar-crop-btn.primary {
  background: #3a3a3c;
  color: #f5f5f7;
  border-color: #636366;
}


/* Cloud prefs toggle (綁定帳號) */
.prof-row-cloud-prefs {
  align-items: flex-start;
  gap: 14px;
}
.prof-row-cloud-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prof-row-help {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted, #9a9a9a);
  font-weight: 400;
}
.gh-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.gh-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.gh-switch-slider {
  position: absolute;
  inset: 0;
  background: #2c2c2e;
  border: 1.5px solid #8e8e93;
  border-radius: 999px;
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s;
}
.gh-switch-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 50%;
  margin-top: -10px;
  border-radius: 50%;
  background: #f5f5f7;
  border: 1.5px solid #aeaeb2;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.gh-switch input:checked + .gh-switch-slider {
  background: #3a3a3c;
  border-color: #d1d1d6;
}
.gh-switch input:checked + .gh-switch-slider::before {
  transform: translateX(18px);
  background: #f5f5f7;
  border-color: #f5f5f7;
}
body.no-glass .gh-switch-slider {
  background: #2a2a2a;
  border: 1.5px solid #8e8e93;
}


/* Lobby mode menu layout (order + columns + sections) */
.hv-mode-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}
.hv-mode-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
}
.hv-mode-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    padding: 4px 4px 0;
    opacity: 0.9;
}
.hv-mode-section-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#hv-main.hv-menu-cols-2 .hv-mode-section-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}
#hv-main.hv-menu-cols-2 .hv-mode-section-grid .hub-menu-btn {
    width: calc(50% - 4px);
    margin: 0;
    box-sizing: border-box;
    font-size: 13px;
    padding: 11px 10px;
}
#hv-main.hv-menu-cols-2 .hv-mode-section-grid .hub-menu-btn .hv-mode-ico {
    width: 36px;
    height: 36px;
    font-size: 20px;
    border-radius: 12px;
}
#hv-main.hv-menu-cols-2 .hv-mode-section-grid .hub-menu-btn:hover {
    transform: translateY(-2px);
}
.lobby-layout-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.08);
}
.lobby-layout-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.lobby-layout-item .btn {
    margin: 0;
    padding: 4px 10px;
    min-width: 36px;
}
.lobby-cols-btn.is-active {
    border-color: #00ff9d !important;
    color: #00ff9d !important;
    background: rgba(0,255,157,0.12) !important;
}



/* Mode how-to intro (between lobby entry and mode gate) */
#hv-mode-howto {
    display: none;
    flex-direction: column;
    width: 95%;
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    padding: 14px 14px 0;
    box-sizing: border-box;
    overflow: hidden;
    gap: 0;
}
#hv-mode-howto.active-view {
    display: flex !important;
}
.hv-howto-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
}
.hv-howto-back {
    align-self: flex-start;
    margin: 0;
    width: fit-content;
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 6px 12px;
    font-size: 13px;
}
.hv-howto-name {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}
.hv-howto-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    text-align: left;
    padding-bottom: 8px;
}
.hv-howto-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
    background:
        linear-gradient(145deg, var(--hv-accent-bg, rgba(255,255,255,0.1)), rgba(0,0,0,0.35)),
        #121820;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.hv-howto-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    touch-action: none;
    user-select: none;
}

.hv-howto-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}
/* Real mode embed inside howto stage — fill, mute input, hide chrome */
.hv-howto-stage .howto-preview-embed {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: inherit;
    overflow: hidden !important;
}
.hv-howto-stage .howto-preview-embed canvas {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
}
.hv-howto-stage .howto-preview-embed button,
.hv-howto-stage .howto-preview-embed input,
.hv-howto-stage .howto-preview-embed label,
.hv-howto-stage .howto-preview-embed #parkour-top,
.hv-howto-stage .howto-preview-embed #parkour-pad,
.hv-howto-stage .howto-preview-embed #parkour-over,
.hv-howto-stage .howto-preview-embed #parkour-board,
.hv-howto-stage .howto-preview-embed #parkour-skin-modal,
.hv-howto-stage .howto-preview-embed #merge-top,
.hv-howto-stage .howto-preview-embed #merge-over,
.hv-howto-stage .howto-preview-embed #merge-skin-modal,
.hv-howto-stage .howto-preview-embed #merge-save-ask,
.hv-howto-stage .howto-preview-embed #merge-toast,
.hv-howto-stage .howto-preview-embed #merge-lb,
.hv-howto-stage .howto-preview-embed #bricks-top,
.hv-howto-stage .howto-preview-embed #bricks-over,
.hv-howto-stage .howto-preview-embed #bricks-look-modal,
.hv-howto-stage .howto-preview-embed #bricks-save-ask,
.hv-howto-stage .howto-preview-embed #bricks-skip,
.hv-howto-stage .howto-preview-embed #bricks-toast,
.hv-howto-stage .howto-preview-embed #bricks-lb,
.hv-howto-stage .howto-preview-embed #pvz-bar,
.hv-howto-stage .howto-preview-embed #pvz-skin-modal,
.hv-howto-stage .howto-preview-embed #pvz-over,
.hv-howto-stage .howto-preview-embed #brb-skin-modal,
.hv-howto-stage .howto-preview-embed #brb-over,
.hv-howto-stage .howto-preview-embed #fc-planes,
.hv-howto-stage .howto-preview-embed #ab-top,
.hv-howto-stage .howto-preview-embed #ab-skin-modal,
.hv-howto-stage .howto-preview-embed #btn-bk-exit,
.hv-howto-stage .howto-preview-embed #btn-bk-reset-pref,
.hv-howto-stage .howto-preview-embed #bk-status-text,
.hv-howto-stage .howto-preview-embed #bk-leaderboard,
.hv-howto-stage .howto-preview-embed #bk-dpad,
.hv-howto-stage .howto-preview-embed #ft-status-text,
.hv-howto-stage .howto-preview-embed #ft-pad,
.hv-howto-stage .howto-preview-embed #oi-touch-layer,
.hv-howto-stage .howto-preview-embed #oi-touch-hint,
.hv-howto-stage .howto-preview-embed #oi-desktop-hint,
.hv-howto-stage .howto-preview-embed #oi-hotbar,
.hv-howto-stage .howto-preview-embed #oi-inv,
.hv-howto-stage .howto-preview-embed #oi-pos-badge,
.hv-howto-stage .howto-preview-embed #s_act,
.hv-howto-stage .howto-preview-embed #s_pad {
    display: none !important;
}
.hv-howto-static,
.hv-howto-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    pointer-events: none;
    overflow: hidden;
    background: #0c121a;
}
.hv-howto-capture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hv-howto-empty {
    color: rgba(255,255,255,0.55);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0,0,0,0.25);
}

.hv-howto-heading {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}
.hv-howto-list {
    margin: 0;
    padding: 0 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.45;
}
.hv-howto-list li::marker {
    color: var(--hv-accent, var(--primary, #00ff9d));
}
.hv-howto-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    padding: 12px 0 16px;
    margin-top: 4px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04) 30%);
    border-top: 1px solid var(--glass-border);
    z-index: 2;
}
.hv-howto-enter {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 16px;
    border: 1px solid var(--hv-accent, var(--primary, #00ff9d));
    color: var(--hv-accent, var(--primary, #00ff9d));
    background: var(--hv-accent-bg, rgba(0, 255, 157, 0.15));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.hv-howto-enter:hover {
    filter: brightness(1.08);
}
.hv-howto-enter:active {
    transform: scale(0.98);
}
html[data-ui-surface="flat"] #hv-mode-howto .hv-howto-preview {
    border-color: var(--ui-flat-border-hair);
    box-shadow: none;
}
html[data-ui-surface="flat"] #hv-mode-howto .hv-howto-footer {
    background: var(--ui-flat-bg);
    border-top-color: var(--ui-flat-border-hair);
}

/* =========================================================
   ui_surface FLAT — premium B&W for glass-panel family
   Hook: html[data-ui-surface=flat|glass] (default glass; flat only when data-ui-surface=flat)
   Does NOT touch body.no-glass (performance) or login_gate.css
   ========================================================= */
:root {
  --ui-flat-bg: #fafafa;
  --ui-flat-fg: #111;
  --ui-flat-muted: #666;
  --ui-flat-hint: #888;
  --ui-flat-placeholder: #999;
  --ui-flat-border: #111;
  --ui-flat-border-soft: #ccc;
  --ui-flat-border-hair: #e5e5e5;
  --ui-flat-input-bg: #fff;
  --ui-flat-hover: #f0f0f0;
  --ui-flat-radius: 8px;
  --ui-flat-radius-sm: 6px;
  --ui-flat-overlay: rgba(0, 0, 0, 0.42);
}

html[data-ui-surface="flat"] .glass-panel,
html[data-ui-surface="flat"] .card-center,
html[data-ui-surface="flat"] .sidebar,
html[data-ui-surface="flat"] .chat-area,
html[data-ui-surface="flat"] .modal-window,
html[data-ui-surface="flat"] .fluid-card,
html[data-ui-surface="flat"] .br-card {
  background: var(--ui-flat-bg) !important;
  background-image: none !important;
  color: var(--ui-flat-fg);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ui-flat-border-hair) !important;
  border-radius: var(--ui-flat-radius) !important;
  box-shadow: none !important;
  animation: none !important;
}

html[data-ui-surface="flat"] .glass-panel::before,
html[data-ui-surface="flat"] .glass-panel::after,
html[data-ui-surface="flat"] .card-center::before,
html[data-ui-surface="flat"] .card-center::after,
html[data-ui-surface="flat"] .sidebar::before,
html[data-ui-surface="flat"] .sidebar::after,
html[data-ui-surface="flat"] .chat-area::before,
html[data-ui-surface="flat"] .chat-area::after,
html[data-ui-surface="flat"] .modal-window::before,
html[data-ui-surface="flat"] .modal-window::after,
html[data-ui-surface="flat"] .fluid-card::before,
html[data-ui-surface="flat"] .fluid-card::after,
html[data-ui-surface="flat"] .br-card::before,
html[data-ui-surface="flat"] .br-card::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

html[data-ui-surface="flat"] .glass-panel h1,
html[data-ui-surface="flat"] .glass-panel h2,
html[data-ui-surface="flat"] .glass-panel h3,
html[data-ui-surface="flat"] .cyber-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--ui-flat-fg) !important;
  color: var(--ui-flat-fg) !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* =========================================================
   觀賞模式 (View Mode) - 極簡純觀賞
   ========================================================= */
.view-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.view-mode-overlay[hidden] { display: none !important; }
.view-mode-overlay > * { pointer-events: auto; }

.vm-highlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.vm-highlight-marker {
  position: absolute;
  pointer-events: none;
  background: rgba(0, 200, 255, 0.18);
  border: 1px solid rgba(0, 200, 255, 0.7);
  border-radius: 10px;
  color: #00c8ff;
  font-size: 12px;
  padding: 4px 8px;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.35);
  transform: translate(-50%, -120%);
  text-shadow: 0 1px 2px #000;
}

.vm-back-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.4s ease, transform 0.3s;
}
.vm-back-btn.vm-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.vm-glass-obj {
  position: absolute;
  width: 180px;
  height: 180px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 18px;
  box-shadow: var(--glass-inner-glow), 0 8px 32px rgba(0,0,0,0.25);
  cursor: grab;
  touch-action: none;
  z-index: 5;
  transition: width 0.15s, height 0.15s, border-radius 0.2s, clip-path 0.2s, backdrop-filter 0.15s;
}
.vm-glass-obj:active { cursor: grabbing; }
.vm-glass-obj.shape-square { border-radius: 18px; clip-path: none; }
.vm-glass-obj.shape-circle { border-radius: 50%; clip-path: none; }
.vm-glass-obj.shape-star {
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.vm-glass-obj.shape-heart {
  border-radius: 0;
  clip-path: path("M50,30 C50,15 30,5 20,20 C10,35 25,50 50,75 C75,50 90,35 80,20 C70,5 50,15 50,30 Z");
  /* fallback approximate if path not supported */
  clip-path: polygon(50% 25%, 20% 10%, 5% 30%, 15% 55%, 50% 85%, 85% 55%, 95% 30%, 80% 10%);
}

.vm-adjust-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(20,20,24,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 8px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), opacity 0.3s;
}
.vm-adjust-bar.vm-collapsed {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.vm-bar-collapse {
  align-self: center;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 12px;
  padding: 4px 16px;
  font-size: 12px;
}
.vm-bar-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 13px;
  color: #eee;
}
.vm-bar-content label { display: flex; align-items: center; gap: 6px; }
.vm-bar-content input[type=range] { width: 90px; }
.vm-shapes { display: flex; gap: 6px; }
.vm-shape-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
}
.vm-shape-btn.active {
  background: rgba(0,200,255,0.3);
  border-color: #00c8ff;
  color: #00c8ff;
}

.vm-expand-btn {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 16px;
  padding: 6px 18px;
  font-size: 13px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.4s;
}
.vm-expand-btn.vm-hidden, .vm-expand-btn[hidden] {
  opacity: 0;
  pointer-events: none;
}


/* 觀賞模式：隱藏原有大廳 UI（須蓋過 .active-view { display:flex !important }） */
body.vm-active #portal-home,
body.vm-active #portal-home.portal-home,
body.vm-active #portal-home.portal-home.active-view,
body.vm-active #hv-main,
body.vm-active #hv-main.active-view,
body.vm-active #gate-view,
body.vm-active #gate-view.active-view,
body.vm-active #wusper-desktop,
body.vm-active .login-gate-wrapper,
body.vm-active .login-gate-wrapper.active-view,
body.vm-active #login-gate,
body.vm-active #login-gate.active-view,
body.vm-active #system-controls,
body.vm-active #circle-buttons,
body.vm-active .circle-btn,
body.vm-active .sidebar,
body.vm-active .chat-area,
body.vm-active .hv-mode-howto,
body.vm-active #hv-mode-howto,
body.vm-active #hv-mode-howto.active-view,
body.vm-active .card-center.active-view {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* overlay 本體不攔截風景；互動交給子元件 */
body.vm-active .view-mode-overlay {
  pointer-events: none;
}
body.vm-active .view-mode-overlay .vm-back-btn,
body.vm-active .view-mode-overlay .vm-glass-obj,
body.vm-active .view-mode-overlay .vm-adjust-bar,
body.vm-active .view-mode-overlay .vm-expand-btn {
  pointer-events: auto;
}


/* —— 意見回饋 / GM 反饋處理 —— */
.prof-fb-types {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 14px;
}
.prof-fb-type {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1c1c1e;
  border: 1px solid #2c2c2e;
  color: #f5f5f7;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}
.prof-fb-type:has(input:checked) {
  border-color: #f5f5f7;
  background: #2c2c2e;
}
.prof-fb-type input {
  accent-color: #f5f5f7;
  width: 18px;
  height: 18px;
  margin: 0;
}
.prof-fb-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 140px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2c2c2e;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 15px;
  line-height: 1.45;
  font-family: inherit;
}
.prof-fb-textarea:focus {
  outline: none;
  border-color: #8e8e93;
}
.prof-fb-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.prof-fb-count {
  font-size: 13px;
  color: #8e8e93;
}
.prof-fb-submit {
  min-width: 96px;
  margin: 0;
}
.prof-gm-fb-btn {
  position: relative;
  width: 100%;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
}
.prof-badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a87868;
  box-shadow: 0 0 0 2px #000;
  pointer-events: none;
}
.prof-badge-dot.hidden { display: none !important; }
#circle-login-btn {
  overflow: visible;
}
.circle-login-fb-dot {
  top: 2px;
  right: 2px;
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.55);
}

#feedback-inbox-modal.modal-overlay {
  align-items: stretch;
  justify-content: stretch;
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  z-index: 260000;
}
#feedback-inbox-modal.modal-overlay.show {
  display: flex !important;
  opacity: 1 !important;
}
/* Inbox is fullscreen (not split-pane): never hide its top-left back, even on ≥900px */
#feedback-inbox-modal .prof-back-btn,
#feedback-inbox-modal .fb-inbox-back {
  display: inline-flex !important;
  pointer-events: auto;
  z-index: 2;
  position: relative;
}

#feedback-inbox-modal .fb-inbox-window {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: #f5f5f7;
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: none;
}
.fb-inbox-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  border-bottom: 1px solid #1c1c1e;
  flex-shrink: 0;
}
.fb-inbox-nav h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  flex: 1;
}
.fb-inbox-counts {
  font-size: 13px;
  color: #8e8e93;
  white-space: nowrap;
}
.fb-inbox-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fb-card {
  background: #1c1c1e;
  border: 1px solid #2c2c2e;
  border-radius: 14px;
  padding: 14px;
  color: #f5f5f7;
}
.fb-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: #8e8e93;
}
.fb-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #3a3a3c;
  color: #f5f5f7;
  font-size: 12px;
}
.fb-card-body {
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 12px;
}
.fb-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fb-card-actions .btn {
  margin: 0;
  flex: 1 1 auto;
  min-width: 64px;
  padding: 8px 10px;
  font-size: 13px;
}
.fb-card-reply {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #2c2c2e;
  font-size: 13px;
  color: #aeaeb2;
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-inbox-empty {
  text-align: center;
  color: #8e8e93;
  padding: 48px 12px;
  font-size: 15px;
}
.fb-reply-sheet {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 3;
  padding: 16px;
}
.fb-reply-sheet.hidden { display: none !important; }
.fb-reply-sheet-inner {
  width: 100%;
  max-width: 560px;
  background: #1c1c1e;
  border: 1px solid #2c2c2e;
  border-radius: 16px;
  padding: 16px;
}
.fb-reply-sheet-inner h4 {
  margin: 0 0 8px;
  font-size: 17px;
}

[data-theme="light"] .prof-fb-type {
  background: #f2f2f7;
  border-color: #d1d1d6;
  color: #1d1d1f;
}
[data-theme="light"] .prof-fb-type:has(input:checked) {
  border-color: #1d1d1f;
  background: #e5e5ea;
}
[data-theme="light"] .prof-fb-textarea {
  background: #fff;
  border-color: #d1d1d6;
  color: #1d1d1f;
}
[data-theme="light"] .prof-fb-count,
[data-theme="light"] .fb-inbox-counts,
[data-theme="light"] .fb-inbox-empty { color: #6e6e73; }
[data-theme="light"] #feedback-inbox-modal.modal-overlay,
[data-theme="light"] #feedback-inbox-modal .fb-inbox-window { background: #f2f2f7; color: #1d1d1f; }
[data-theme="light"] .fb-inbox-nav { border-bottom-color: #d1d1d6; }
[data-theme="light"] .fb-card {
  background: #fff;
  border-color: #d1d1d6;
  color: #1d1d1f;
}
[data-theme="light"] .fb-card-tag { border-color: #c7c7cc; color: #1d1d1f; }
[data-theme="light"] .fb-card-reply { border-top-color: #e5e5ea; color: #6e6e73; }
[data-theme="light"] .fb-reply-sheet-inner {
  background: #fff;
  border-color: #d1d1d6;
}
[data-theme="light"] .prof-badge-dot { box-shadow: 0 0 0 2px #f2f2f7; }


/* —— 個人中心好友：橫向長方卡片 —— */
.prof-friend-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.prof-friend-add-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2c2c2e;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 15px;
  font-family: inherit;
}
.prof-friend-add-input:focus {
  outline: none;
  border-color: #8e8e93;
}
.prof-friend-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.prof-friend-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #1c1c1e;
  border: none;
  box-shadow: none;
  color: #f5f5f7;
}
.prof-friend-card .player-avatar,
.prof-friend-card img.player-avatar {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0;
  border-radius: 50%;
}
.prof-friend-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prof-friend-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prof-friend-card-name {
  font-weight: 650;
  font-size: 15px;
  color: #f5f5f7;
}
.prof-friend-card-snippet {
  font-size: 12px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-friend-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.prof-friend-card-actions .friend-chip,
.prof-friend-card-actions .btn {
  margin: 0;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #2c2c2e;
  border: 1px solid #3a3a3c;
  color: #f5f5f7;
  cursor: pointer;
}
.prof-friend-card-actions .friend-chip.danger {
  color: #c4a090;
  border-color: rgba(138,112,96,0.65);
}
.prof-friend-empty {
  padding: 18px 12px;
  text-align: center;
  color: #8e8e93;
  font-size: 14px;
  border-radius: 14px;
  border: none;
  background: transparent;
}
#prof-page-friends .friend-status {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #3a3a3c;
  color: #8e8e93;
}
#prof-page-friends .friend-status.online {
  color: #34c759;
  border-color: rgba(52,199,89,0.45);
  background: rgba(52,199,89,0.1);
}
[data-theme="light"] .prof-friend-add-input {
  background: #fff;
  border-color: #d1d1d6;
  color: #1d1d1f;
}
[data-theme="light"] .prof-friend-card {
  background: #fff;
  border: none;
  box-shadow: none;
  color: #1d1d1f;
}
[data-theme="light"] .prof-friend-card-name { color: #1d1d1f; }
[data-theme="light"] .prof-friend-card-snippet,
[data-theme="light"] .prof-friend-empty { color: #6e6e73; border: none; }
[data-theme="light"] .prof-friend-card-actions .friend-chip,
[data-theme="light"] .prof-friend-card-actions .btn {
  background: #f2f2f7;
  border-color: #d1d1d6;
  color: #1d1d1f;
}

/* Device & login cards — same flat horizontal style as friends */
.prof-device-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #3a3a3c;
  color: #8e8e93;
  flex-shrink: 0;
}
.prof-device-badge.current {
  color: #34c759;
  border-color: rgba(52,199,89,0.45);
  background: rgba(52,199,89,0.1);
}
.prof-device-meta {
  font-size: 12px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-device-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #2c2c2e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f5f5f7;
}
[data-theme="light"] .prof-device-badge {
  border-color: #d1d1d6;
  color: #6e6e73;
}
[data-theme="light"] .prof-device-badge.current {
  color: #248a3d;
  border-color: rgba(52,199,89,0.5);
  background: rgba(52,199,89,0.12);
}
[data-theme="light"] .prof-device-meta { color: #6e6e73; }
[data-theme="light"] .prof-device-ico {
  background: #f2f2f7;
  color: #1d1d1f;
}

/* —— 好友私訊：全螢幕 iOS 黑白扁平（對齊個人中心） —— */
#friend-modal.modal-overlay {
  align-items: stretch;
  justify-content: stretch;
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  /* Always layout height — never 100dvh (fights IME / visualViewport). */
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  z-index: 260000;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
  will-change: transform, opacity;
}
#friend-modal.modal-overlay.gh-kb-open .friend-dm-shell {
  transition: none !important;
  padding-bottom: var(--kb-inset, 0px);
}
/* Legacy native root pad only (html.wusper-native-ime / wusper-ime-resize):
   keep --kb-inset 0; do NOT double-pad. M139+ uses html.wusper-ime-webview + --kb-inset. */
html.wusper-native-ime #friend-modal.modal-overlay,
html.wusper-native-ime #friend-modal.modal-overlay.gh-kb-open,
html.wusper-ime-resize #friend-modal.modal-overlay,
html.wusper-ime-resize #friend-modal.modal-overlay.gh-kb-open {
  height: 100% !important;
  max-height: 100% !important;
}
html.wusper-native-ime #friend-modal .friend-dm-shell,
html.wusper-ime-resize #friend-modal .friend-dm-shell {
  padding-bottom: 0 !important;
  transition: none !important;
}
/* App M139+ WebView-owns (1.1.77/76): compositor lift via compose translate3d ONLY.
   Shell padding-bottom forced 0 — never layout thrash mid-IME. Browser keeps pad below.
   Later .friend-dm-compose rules must NOT override transform with padding fights. */
html.wusper-ime-webview #friend-modal.modal-overlay.gh-kb-open .friend-dm-shell,
html.wusper-ime-webview #friend-modal .friend-dm-shell {
  padding-bottom: 0 !important;
  transition: none !important;
}
html.wusper-ime-webview #friend-modal .friend-dm-compose,
html.wusper-ime-webview #friend-modal.gh-kb-open .friend-dm-compose,
html.wusper-ime-webview #friend-modal.modal-overlay .friend-dm-compose,
html.wusper-ime-webview #friend-modal.modal-overlay.gh-kb-open .friend-dm-compose {
  transform: translate3d(0, calc(-1 * var(--kb-inset, 0px)), 0) !important;
  will-change: transform;
  transition: none !important;
  /* Isolated compositor layer — avoid promoting height/padding. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style;
}
#friend-modal.modal-overlay.show {
  display: flex !important;
  opacity: 1 !important;
  transform: translateX(0);
}
#friend-modal.modal-overlay.show.gh-dm-exit {
  opacity: 0 !important;
  transform: translateX(100%);
  pointer-events: none;
}
#friend-modal .friend-dm-pane.gh-dm-pane-in {
  animation: ghDmPaneIn 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes ghDmPaneIn {
  from { transform: translateX(18%); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #friend-modal.modal-overlay {
    transition: none !important;
    transform: none !important;
    opacity: 1;
  }
  #friend-modal .friend-dm-pane.gh-dm-pane-in {
    animation: none !important;
  }
}
body.gh-dm-open #unsplash-attr,
body.gh-dm-open #lobby-privacy-link,
body:has(#friend-modal.show) #unsplash-attr,
body:has(#friend-modal.show) #lobby-privacy-link {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#friend-modal .prof-back-btn,
#friend-modal .friend-dm-close {
  display: inline-flex !important;
  pointer-events: auto;
  z-index: 2;
  position: relative;
}
#friend-modal .friend-dm-shell {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  padding: 0;
  /* Browser: --kb-inset / VK env(). App M139+ zeros this (compose translateY). Legacy native-ime forces 0. */
  padding-bottom: var(--kb-inset, 0px);
  padding-bottom: env(keyboard-inset-height, var(--kb-inset, 0px));
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
  color: #f5f5f7;
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: none;
  transition: none;
}
#friend-modal .friend-dm-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#friend-modal .friend-dm-pane.hidden { display: none !important; }
.friend-dm-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  border-bottom: 1px solid #1c1c1e;
  flex-shrink: 0;
}
.friend-dm-nav h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-dm-nav-link {
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #3a3a3c;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.friend-dm-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.friend-dm-title-text h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-dm-sub {
  font-size: 12px;
  color: #8e8e93;
}
.friend-dm-sub.is-online { color: #34c759; }

.friend-dm-conv-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.friend-dm-conv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 10px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.friend-dm-conv-row:active,
.friend-dm-conv-row:focus-visible {
  background: #1c1c1e;
  outline: none;
}
.friend-dm-conv-row .player-avatar,
.friend-dm-conv-row img.player-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  flex-shrink: 0;
}
.friend-dm-conv-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.friend-dm-conv-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.friend-dm-conv-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 650;
  color: #f5f5f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-dm-conv-time {
  flex-shrink: 0;
  font-size: 12px;
  color: #8e8e93;
}
.friend-dm-conv-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.friend-dm-conv-snippet {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-dm-conv-snippet.has-unread {
  color: #f5f5f7;
  font-weight: 600;
}
.friend-dm-empty {
  padding: 48px 20px;
  text-align: center;
  color: #8e8e93;
  font-size: 14px;
  line-height: 1.5;
}
.friend-dm-empty strong {
  display: block;
  color: #f5f5f7;
  font-size: 16px;
  font-weight: 650;
  margin-bottom: 8px;
}

.friend-dm-msgs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #000;
}
.friend-dm-day {
  align-self: center;
  margin: 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #1c1c1e;
  color: #8e8e93;
  font-size: 11px;
  font-weight: 600;
}
.friend-dm-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 82%;
  width: fit-content;
}
.friend-dm-bubble.mine { align-self: flex-end; align-items: flex-end; }
.friend-dm-bubble.theirs { align-self: flex-start; align-items: flex-start; }
.friend-dm-bubble-body {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  border: none;
}
.friend-dm-bubble.mine .friend-dm-bubble-body {
  background: #2c2c2e;
  color: #f5f5f7;
  border-bottom-right-radius: 6px;
}
.friend-dm-bubble.theirs .friend-dm-bubble-body {
  background: #1c1c1e;
  color: #f5f5f7;
  border-bottom-left-radius: 6px;
}
.friend-dm-bubble-time {
  font-size: 11px;
  color: #8e8e93;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.friend-dm-bubble-clock { font-size: 11px; }
.friend-dm-status-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 1em;
  height: 1em;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  color: #0a84ff; /* sent = blue */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.friend-dm-status-dot.is-pending,
.friend-dm-status-dot.is-failed { color: #ff3b30; }
.friend-dm-status-dot.is-sent { color: #0a84ff; }
.friend-dm-status-dot.is-read { color: #34c759; }
.friend-dm-status-tip {
  position: fixed;
  z-index: 400000;
  background: rgba(28, 28, 30, 0.94);
  color: #f5f5f7;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  white-space: nowrap;
}
[data-theme="light"] .friend-dm-status-tip {
  background: rgba(255,255,255,.96);
  color: #1d1d1f;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.friend-dm-msgs-empty {
  margin: auto;
  padding: 24px 16px;
  text-align: center;
  color: #8e8e93;
  font-size: 14px;
  line-height: 1.5;
}

.friend-dm-compose {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #1c1c1e;
  background: #000;
}
/* Browser: drop home-indicator pad while keyboard open (avoid gap above IME). */
#friend-modal.gh-kb-open .friend-dm-compose {
  padding-bottom: 10px;
}
#friend-modal.gh-kb-open .friend-dm-msgs {
  padding-bottom: 12px;
}
/* Legacy native root pad: compose padding fixed. M139+ uses shell --kb-inset instead. */
html.wusper-native-ime #friend-modal .friend-dm-compose,
html.wusper-ime-resize #friend-modal .friend-dm-compose {
  padding-bottom: 10px;
}
/* 1.1.77/76: re-assert App compose transform AFTER base .friend-dm-compose padding rules. */
html.wusper-ime-webview #friend-modal .friend-dm-compose,
html.wusper-ime-webview #friend-modal.gh-kb-open .friend-dm-compose {
  transform: translate3d(0, calc(-1 * var(--kb-inset, 0px)), 0) !important;
  will-change: transform;
  transition: none !important;
}
.friend-dm-compose input,
.friend-dm-compose #friend-dm-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid #2c2c2e;
  background: #1c1c1e;
  color: #f5f5f7;
  font-size: 15px;
  font-family: inherit;
}
.friend-dm-compose input:focus {
  outline: none;
  border-color: #8e8e93;
}
.friend-dm-send-btn,
#friend-dm-send-btn.friend-dm-send-btn {
  margin: 0;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #3a3a3c;
  background: #f5f5f7;
  color: #000;
  font-size: 14px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.friend-dm-send-btn:active { opacity: 0.85; }

[data-theme="light"] #friend-modal.modal-overlay,
[data-theme="light"] #friend-modal .friend-dm-shell,
[data-theme="light"] .friend-dm-msgs,
[data-theme="light"] .friend-dm-compose {
  background: #f2f2f7;
  color: #1d1d1f;
}
[data-theme="light"] .friend-dm-nav {
  border-bottom-color: #d1d1d6;
}
[data-theme="light"] .friend-dm-nav-link {
  background: #fff;
  border-color: #d1d1d6;
  color: #1d1d1f;
}
[data-theme="light"] .friend-dm-conv-name { color: #1d1d1f; }
[data-theme="light"] .friend-dm-conv-time,
[data-theme="light"] .friend-dm-conv-snippet,
[data-theme="light"] .friend-dm-sub,
[data-theme="light"] .friend-dm-empty,
[data-theme="light"] .friend-dm-msgs-empty,
[data-theme="light"] .friend-dm-bubble-time {
  color: #6e6e73;
}
[data-theme="light"] .friend-dm-empty strong { color: #1d1d1f; }
[data-theme="light"] .friend-dm-conv-snippet.has-unread { color: #1d1d1f; }
[data-theme="light"] .friend-dm-conv-row:active,
[data-theme="light"] .friend-dm-conv-row:focus-visible {
  background: #fff;
}
[data-theme="light"] .friend-dm-day {
  background: #e5e5ea;
  color: #6e6e73;
}
[data-theme="light"] .friend-dm-bubble.mine .friend-dm-bubble-body {
  background: #1d1d1f;
  color: #fff;
}
[data-theme="light"] .friend-dm-bubble.theirs .friend-dm-bubble-body {
  background: #fff;
  color: #1d1d1f;
}
[data-theme="light"] .friend-dm-compose {
  border-top-color: #d1d1d6;
}
[data-theme="light"] .friend-dm-compose input,
[data-theme="light"] .friend-dm-compose #friend-dm-input {
  background: #fff;
  border-color: #d1d1d6;
  color: #1d1d1f;
}
[data-theme="light"] .friend-dm-send-btn,
[data-theme="light"] #friend-dm-send-btn.friend-dm-send-btn {
  background: #1d1d1f;
  color: #fff;
  border-color: #1d1d1f;
}



/* —— 個人中心通知：橫向長方卡片 —— */
.prof-notif-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #1c1c1e;
  border: none;
  box-shadow: none;
  color: #f5f5f7;
}
.prof-notif-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #2c2c2e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f5f5f7;
}
.prof-notif-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prof-notif-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prof-notif-title {
  font-weight: 650;
  font-size: 15px;
  color: #f5f5f7;
}
.prof-notif-type {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #3a3a3c;
  color: #8e8e93;
  flex-shrink: 0;
}
.prof-notif-body {
  font-size: 13px;
  color: #aeaeb2;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.prof-notif-time {
  font-size: 12px;
  color: #8e8e93;
}
[data-theme="light"] .prof-notif-card {
  background: #fff;
  color: #1d1d1f;
}
[data-theme="light"] .prof-notif-ico {
  background: #f2f2f7;
  color: #1d1d1f;
}
[data-theme="light"] .prof-notif-title { color: #1d1d1f; }
[data-theme="light"] .prof-notif-type {
  border-color: #d1d1d6;
  color: #6e6e73;
}
[data-theme="light"] .prof-notif-body,
[data-theme="light"] .prof-notif-time { color: #6e6e73; }


/* Profile range / info polish */
#profile-modal .prof-range,
#profile-modal input.prof-range,
#profile-modal input[type="range"] {
  width: 100%;
  accent-color: #f5f5f7;
  height: 28px;
}
[data-theme="light"] #profile-modal .prof-range,
[data-theme="light"] #profile-modal input[type="range"] {
  accent-color: #1d1d1f;
}

/* Compact profile rows */
#profile-modal.prof-compact .prof-row,
#profile-modal.prof-compact .prof-row-static {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 3px;
  margin-bottom: 3px;
}
#profile-modal.prof-compact .prof-row-label { font-size: 15px; }
#profile-modal.prof-compact .prof-section { margin-bottom: 14px; }

/* Accessibility: site-wide (html.gh-* from personal center) */
html.gh-reduce-motion *,
html.gh-reduce-motion *::before,
html.gh-reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}
html.gh-reduce-motion #profile-modal .prof-pane-detail,
html.gh-reduce-motion #profile-modal * {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}
html.gh-reduce-motion #friend-modal.modal-overlay,
html.gh-reduce-motion #friend-modal .friend-dm-pane.gh-dm-pane-in,
html.gh-reduce-motion #cyber-toast,
html.gh-reduce-motion #prof-open-morph {
  transition: none !important;
  animation: none !important;
}

/* Larger text — lobby, profile, tools chrome, toasts */
html.gh-large-text {
  --gh-a11y-font-boost: 1.12;
  font-size: 112%;
}
html.gh-large-text #profile-modal .prof-row-label { font-size: 1.125rem; }
html.gh-large-text #profile-modal .prof-row-help { font-size: 0.875rem; }
html.gh-large-text #profile-modal .prof-section-title { font-size: 0.95rem; }
html.gh-large-text #profile-modal .prof-nav h3,
html.gh-large-text #profile-modal .prof-menu-top h3 { font-size: 1.2rem; }
html.gh-large-text #hv-main .hv-mode-section-title,
html.gh-large-text #hv-main .hv-mode-label,
html.gh-large-text .hub-menu-btn,
html.gh-large-text .btn,
html.gh-large-text #cyber-toast,
html.gh-large-text .system-controls,
html.gh-large-text .circle-btn { font-size: 1.08em; }

/* High contrast — borders / buttons / cards across shell */
html.gh-hi-contrast #profile-modal .prof-row-static,
html.gh-hi-contrast #profile-modal .prof-overview-card,
html.gh-hi-contrast #profile-modal .prof-empty-state,
html.gh-hi-contrast .hub-menu-btn,
html.gh-hi-contrast .btn,
html.gh-hi-contrast .modal-overlay .modal-card,
html.gh-hi-contrast #cyber-toast {
  border-color: #f5f5f7 !important;
  border-width: 2px !important;
  border-style: solid !important;
}
html.gh-hi-contrast[data-theme="light"] #profile-modal .prof-row-static,
html.gh-hi-contrast[data-theme="light"] #profile-modal .prof-overview-card,
html.gh-hi-contrast[data-theme="light"] #profile-modal .prof-empty-state,
html.gh-hi-contrast[data-theme="light"] .hub-menu-btn,
html.gh-hi-contrast[data-theme="light"] .btn,
html.gh-hi-contrast[data-theme="light"] .modal-overlay .modal-card {
  border-color: #1d1d1f !important;
}
html.gh-hi-contrast .hub-menu-btn,
html.gh-hi-contrast .btn,
html.gh-hi-contrast .gh-switch-slider {
  outline: 1px solid rgba(255,255,255,0.55);
}
html.gh-hi-contrast[data-theme="light"] .hub-menu-btn,
html.gh-hi-contrast[data-theme="light"] .btn {
  outline-color: rgba(0,0,0,0.55);
}
html.gh-hi-contrast {
  --text-muted: #c7c7cc;
}
html.gh-hi-contrast[data-theme="light"] {
  --text-muted: #3a3a3c;
}

/* Larger tap targets — profile + lobby + chrome */
html.gh-large-targets #profile-modal .prof-row,
html.gh-large-targets #profile-modal .prof-row-static {
  min-height: 52px;
  padding-top: 12px;
  padding-bottom: 12px;
}
html.gh-large-targets .hub-menu-btn,
html.gh-large-targets .btn,
html.gh-large-targets .circle-btn,
html.gh-large-targets .system-controls button {
  min-height: 44px;
  min-width: 44px;
  padding-left: 14px;
  padding-right: 14px;
}
html.gh-large-targets .gh-switch {
  transform: scale(1.12);
  transform-origin: right center;
}
html.gh-large-targets .hv-mode-label,
html.gh-large-targets [data-gate] {
  min-height: 44px;
}

/* Stronger focus ring — keyboard / AT */
html.gh-focus-ring *:focus-visible {
  outline: 3px solid #5ac8fa !important;
  outline-offset: 3px !important;
}
html.gh-focus-ring button:focus-visible,
html.gh-focus-ring a:focus-visible,
html.gh-focus-ring input:focus-visible,
html.gh-focus-ring select:focus-visible,
html.gh-focus-ring textarea:focus-visible,
html.gh-focus-ring [role="button"]:focus-visible,
html.gh-focus-ring .hub-menu-btn:focus-visible,
html.gh-focus-ring .gh-switch input:focus-visible + .gh-switch-slider {
  box-shadow: 0 0 0 3px rgba(90,200,250,0.45);
}
html.gh-focus-ring .gh-switch input:focus-visible + .gh-switch-slider {
  outline: 3px solid #5ac8fa;
  outline-offset: 2px;
}

/* Colorblind-safe cues — icons/patterns, not color alone */
html.gh-colorblind .hv-mode-section-title[data-group="action"]::before,
html.gh-colorblind .hv-mode-section[data-group="action"] .hv-mode-section-title::before {
  content: "◆ ";
}
html.gh-colorblind .hv-mode-section[data-group="classic"] .hv-mode-section-title::before {
  content: "○ ";
}
html.gh-colorblind .hv-mode-section[data-group="casual"] .hv-mode-section-title::before,
html.gh-colorblind .hv-mode-section[data-group="versus"] .hv-mode-section-title::before {
  content: "△ ";
}
html.gh-colorblind .friend-chip.danger,
html.gh-colorblind .btn.danger,
html.gh-colorblind [data-danger="1"] {
  text-decoration: underline;
  text-decoration-style: wavy;
}
html.gh-colorblind .gh-switch input:checked + .gh-switch-slider::after {
  content: "✓";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #fff;
}
html.gh-colorblind .online-dot,
html.gh-colorblind .friend-online,
html.gh-colorblind [data-online="1"]::before {
  box-shadow: inset 0 0 0 2px currentColor;
}
html.gh-colorblind .online-dot::after,
html.gh-colorblind [data-online="1"]::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid currentColor;
  margin-left: 2px;
  vertical-align: middle;
}
html.gh-colorblind #cyber-toast.show {
  border-left: 4px solid #5ac8fa;
}

/* DM delivery status: glyph shapes, not color alone */
html.gh-colorblind .friend-dm-status-dot {
  font-size: 0;
  width: 1.1em;
  height: 1.1em;
}
html.gh-colorblind .friend-dm-status-dot::before {
  font-size: 12px;
  line-height: 1;
}
html.gh-colorblind .friend-dm-status-dot.is-pending::before,
html.gh-colorblind .friend-dm-status-dot.is-failed::before {
  content: "△";
}
html.gh-colorblind .friend-dm-status-dot.is-sent::before {
  content: "○";
}
html.gh-colorblind .friend-dm-status-dot.is-read::before {
  content: "●";
}
html.gh-colorblind .friend-dm-status-dot.is-pending,
html.gh-colorblind .friend-dm-status-dot.is-failed {
  text-decoration: underline wavy;
}
html.gh-colorblind #hub-timer {
  border-bottom: 2px dashed #5ac8fa;
  padding-bottom: 2px;
}
html.gh-colorblind #leave-hub-btn {
  border: 2px dashed currentColor;
  text-decoration: underline;
}
html.gh-colorblind .friend-chip:not(.danger)::after {
  content: "";
}
html.gh-hi-contrast .br-hud-text,
html.gh-hi-contrast #br-hud,
html.gh-hi-contrast #pl-status-text,
html.gh-hi-contrast #hub-timer,
html.gh-hi-contrast #leave-hub-btn {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #f5f5f7 !important;
}
html.gh-hi-contrast[data-theme="light"] .br-hud-text,
html.gh-hi-contrast[data-theme="light"] #br-hud,
html.gh-hi-contrast[data-theme="light"] #leave-hub-btn {
  border-color: #1d1d1f !important;
}


/* Readable spacing — letter/line spacing site-wide shell */
html.gh-readable-type #profile-modal,
html.gh-readable-type #hv-main,
html.gh-readable-type #portal-home,
html.gh-readable-type #login-gate,
html.gh-readable-type #cyber-toast,
html.gh-readable-type .modal-overlay {
  letter-spacing: 0.045em;
  line-height: 1.55;
  word-spacing: 0.06em;
}
html.gh-readable-type body {
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link (keyboard) when focus-ring a11y on */
html.gh-focus-ring #gh-skip-main {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 100000;
  padding: 8px 12px;
  background: #000;
  color: #fff;
  border-radius: 8px;
  transform: translateY(-120%);
  transition: transform 0.15s ease;
}
html.gh-focus-ring #gh-skip-main:focus {
  transform: translateY(0);
  outline: 3px solid #5ac8fa;
}

[data-theme="light"] #profile-modal .prof-range + .prof-row-help,
[data-theme="light"] #profile-modal #prof-bgm-vol-val,
[data-theme="light"] #profile-modal #prof-look-sens-val,
[data-theme="light"] #profile-modal #glass-blur-val {
  color: #6e6e73;
}


/* Profile: switches hug the far right; natural accents */
#profile-modal .prof-row-static {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
#profile-modal .prof-row-static > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
#profile-modal .prof-row-static > .gh-switch,
#profile-modal .prof-row-static > label.gh-switch,
#profile-modal .prof-row-static > .btn {
  margin-left: auto;
  flex-shrink: 0;
}
#profile-modal .gh-switch-slider {
  border: 1.5px solid #aeaeb2;
  background: #1c1c1e;
}
#profile-modal .gh-switch-slider::before {
  border: 1.5px solid #8e8e93;
}
#profile-modal .gh-switch input:checked + .gh-switch-slider {
  background: #48484a;
  border-color: #e5e5ea;
}
#profile-modal .gh-switch input:checked + .gh-switch-slider::before {
  border-color: #ffffff;
  background: #ffffff;
}
[data-theme="light"] #profile-modal .gh-switch-slider,
[data-theme="light"] .gh-switch-slider {
  background: #e5e5ea;
  border-color: #636366;
}
[data-theme="light"] #profile-modal .gh-switch-slider::before,
[data-theme="light"] .gh-switch-slider::before {
  background: #ffffff;
  border-color: #8e8e93;
}
[data-theme="light"] #profile-modal .gh-switch input:checked + .gh-switch-slider,
[data-theme="light"] .gh-switch input:checked + .gh-switch-slider {
  background: #3a3a3c;
  border-color: #1d1d1f;
}
[data-theme="light"] #profile-modal .gh-switch input:checked + .gh-switch-slider::before,
[data-theme="light"] .gh-switch input:checked + .gh-switch-slider::before {
  background: #f5f5f7;
  border-color: #f5f5f7;
}

/* Muted terracotta danger inside profile / inbox (not bright red) */
#profile-modal .friend-chip.danger,
#profile-modal .prof-friend-card-actions .friend-chip.danger,
#feedback-inbox-modal .friend-chip.danger {
  color: #c4a090 !important;
  border-color: rgba(138, 112, 96, 0.65) !important;
  background: rgba(138, 112, 96, 0.12) !important;
}
.prof-badge-dot {
  background: #a87868 !important;
}
[data-theme="light"] .prof-badge-dot {
  background: #9a6b5c !important;
  box-shadow: 0 0 0 2px #f2f2f7;
}
#profile-modal .prof-fb-submit,
#feedback-inbox-modal .prof-fb-submit,
#profile-modal .btn.prof-fb-submit {
  background: #3a3a3c !important;
  border: 1px solid #636366 !important;
  color: #f5f5f7 !important;
}
[data-theme="light"] #profile-modal .prof-fb-submit,
[data-theme="light"] #feedback-inbox-modal .prof-fb-submit {
  background: #2c2c2e !important;
  border-color: #1d1d1f !important;
  color: #f5f5f7 !important;
}
#feedback-inbox-modal .fb-card-actions .btn {
  background: #2c2c2e;
  border: 1px solid #3a3a3c;
  color: #f5f5f7;
}
[data-theme="light"] #feedback-inbox-modal .fb-card-actions .btn {
  background: #e5e5ea;
  border-color: #c7c7cc;
  color: #1d1d1f;
}
#profile-modal #bind-btn-microsoft {
  background: #1c1c1e !important;
  border: 1px solid #3a3a3c !important;
  color: #f5f5f7 !important;
}
[data-theme="light"] #profile-modal #lan-logout-btn,
[data-theme="light"] #profile-modal #prof-withdraw-consent-btn,
[data-theme="light"] #profile-modal button[onclick="executeDeleteAccount()"] {
  color: #7a5648 !important;
  border-color: #a87868 !important;
}


#profile-modal .friend-unread {
  background: #a87868;
  color: #f5f5f7;
}


/* Profile accent text: no leftover iOS blue from --primary */
#profile-modal .prof-accent,
#profile-modal h4.prof-accent,
#feedback-inbox-modal .prof-accent {
  color: #f5f5f7 !important;
}
[data-theme="light"] #profile-modal .prof-accent,
[data-theme="light"] #profile-modal h4.prof-accent,
[data-theme="light"] #feedback-inbox-modal .prof-accent {
  color: #1d1d1f !important;
}
#profile-modal .prof-gm-fb-btn {
  background: #3a3a3c !important;
  border: 1px solid #636366 !important;
  color: #f5f5f7 !important;
  box-shadow: none !important;
}
[data-theme="light"] #profile-modal .prof-gm-fb-btn {
  background: #2c2c2e !important;
  border-color: #1d1d1f !important;
  color: #f5f5f7 !important;
}
---

/* —— App shell bake update mask (Wusper-web) —— */
/* Full-screen opaque cover — no translucent peek of lobby/tools underneath. */
.gh-shell-bake-mask {
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 2147483645;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  margin: 0;
  background: #000;
  background-color: #000;
  opacity: 1;
  color: #f5f5f7;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  isolation: isolate;
}
.gh-shell-bake-mask.gh-shell-bake-exiting {
  /* Peel timed like native splash→lobby reveal (~spring family). */
  transition: opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
  opacity: 0;
  pointer-events: none;
}
html.gh-reduce-motion .gh-shell-bake-mask.gh-shell-bake-exiting,
.gh-shell-bake-mask.gh-shell-bake-reduced.gh-shell-bake-exiting {
  transition: none !important;
  opacity: 0;
}
html.gh-hi-contrast .gh-shell-bake-mask {
  background: #000;
  background-color: #000;
  color: #fff;
}
html.gh-large-text .gh-shell-bake-msg {
  font-size: 1.25rem;
}
html.gh-large-text .gh-shell-bake-pct {
  font-size: 1.1rem;
}
.gh-shell-bake-inner {
  max-width: 28rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gh-shell-bake-logo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: contain;
  background: #111;
}
.gh-shell-bake-msg {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.55;
  color: inherit;
}
.gh-shell-bake-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.gh-shell-bake-bar-fill {
  height: 100%;
  width: 0%;
  background: #00ff9d;
  border-radius: 999px;
  transition: width 0.2s ease-out;
}
html.gh-colorblind .gh-shell-bake-bar-fill,
html.gh-hi-contrast .gh-shell-bake-bar-fill {
  background: #fff;
  box-shadow: inset 0 0 0 1px #000;
}
.gh-shell-bake-mask.gh-shell-bake-reduced .gh-shell-bake-bar-fill,
html.gh-reduce-motion .gh-shell-bake-bar-fill {
  transition: none !important;
}
.gh-shell-bake-pct {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(245, 245, 247, 0.85);
  font-variant-numeric: tabular-nums;
}
html.gh-shell-baking {
  overflow: hidden;
}