/* 首页专属适配；公共导航与其他页面保持原样。 */
:root {
  /* 主色调 — 阳光橙 */
  --orange-deep:  #e65100;
  --orange-main:  #ff6b00;
  --orange-bright:#ff8c00;
  --orange-light: #ffb74d;
  --orange-pale:  #ffcc80;
  --orange-warm:  #ffe0b2;
  --orange-bg:    #fff5e6;

  /* 辅助色 — 树洞棕 */
  --brown-dark:   #6B4226;
  --brown-main:   #8B7355;
  --brown-light:  #c9b896;
  --brown-pale:   #f5e8d0;

  /* 功能色 */
  --green-ok:     #4caf50;
  --red-err:      #e74c3c;
  --white:        #ffffff;
  --text-primary: #333333;
  --text-secondary: #6d6d6d;  /* WCAG AA 4.58:1 on #fff5e6 — fixes #16 */
  --text-muted:   #888888;

  /* 阴影系统 — 3级海拔 (#6) */
  --shadow-1: 0 2px 8px  rgba(0,0,0,0.04);  /* 微浮：卡片常态、hover浅层 */
  --shadow-2: 0 4px 18px rgba(0,0,0,0.07);  /* 中层：卡片、表单、面板 */
  --shadow-3: 0 12px 35px rgba(0,0,0,0.12); /* 高层：模态、下拉菜单、Toast */

  /* 圆角系统 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* 间距 */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 35px;
  --space-xl: 50px;

  /* 过渡 */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --trans-fast: 0.2s;
  --trans-normal: 0.3s;
  --trans-slow: 0.5s;
}

.user-dropdown {
  position: relative; display: inline-flex;
}
/* 触发按钮 — 圆角 pill */
.user-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 24px; border: none;
  background: var(--orange-bg); color: var(--orange-main);
  font-size: 0.88rem; font-family: inherit; cursor: pointer;
  font-weight: 600; transition: all var(--trans-normal); white-space: nowrap;
  position: relative;
}
.user-dropdown-trigger:hover { background: var(--orange-warm); }
.nav-avatar-img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.nav-avatar-initial {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-bright), var(--orange-main));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.user-dropdown-trigger .fa-caret-down {
  font-size: 0.65rem; margin-left: 2px; transition: transform 0.2s;
}
.user-dropdown.open .user-dropdown-trigger .fa-caret-down { transform: rotate(180deg); }
/* 未读消息红点角标 */
.user-dropdown-trigger .unread-dot {
  position: absolute; top: 2px; right: 6px;
  min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 9px; background: var(--red-err); color: #fff;
  font-size: 0.65rem; font-weight: 700; padding: 0 5px;
  display: none;
}
.user-dropdown-trigger .unread-dot.show { display: block; }
/* 下拉面板 */
.user-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  min-width: 165px; padding: 6px 0; z-index: 110;
  border: 1px solid #f0e8d0;
}
.user-dropdown.open .user-dropdown-menu { display: block; }
/* 面板头部 — 用户信息 */
.user-dropdown-header {
  padding: 10px 16px 8px; border-bottom: 1px solid #f5ece4;
  display: flex; align-items: center; gap: 8px;
}
.user-dropdown-header .user-name {
  font-weight: 600; color: var(--text-primary); font-size: 0.9rem;
}
.user-dropdown-header .user-id {
  color: var(--text-muted); font-size: 0.72rem;
}
/* 菜单项 */
.user-dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; font-size: 0.88rem; color: var(--text-secondary);
  text-decoration: none; transition: all 0.15s;
}
.user-dropdown-menu a:hover { background: var(--orange-bg); color: var(--orange-deep); }
.user-dropdown-menu a .menu-icon { width: 18px; text-align: center; font-size: 0.9rem; }
.user-dropdown-menu .logout-item { color: var(--text-muted); }
.user-dropdown-menu .logout-item:hover { color: var(--red-err); background: #fff5f5; }
/* 分割线 */
.dropdown-divider { height: 1px; background: #f0e8d0; margin: 4px 0; }
/* 未读消息数角标(菜单项内) */
.user-dropdown-menu .menu-badge {
  margin-left: auto; background: var(--red-err); color: #fff;
  font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 10px;
  display: none;
}
.user-dropdown-menu .menu-badge.show { display: inline-block; }
/* 移动端 */
@media (max-width: 768px) {
  .user-dropdown-menu { right: -8px; min-width: 155px; }
  .user-dropdown-trigger { padding: 5px 10px; font-size: 0.82rem; }
}

/* 导航下拉菜单 */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  min-width: 140px; padding: 6px 0; z-index: 100;
  border: 1px solid #f0e8d0;
}
/* hover 下拉仅对鼠标设备生效（触屏不触发，防止 iOS sticky hover bug） */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown > a .fa-caret-down { font-size: 0.7rem; transition: transform 0.2s; }
  .nav-dropdown:hover > a .fa-caret-down { transform: rotate(180deg); }
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}
/* 触屏设备：点击展开下拉 */
.nav-dropdown.open > a .fa-caret-down { transform: rotate(180deg); }
.nav-dropdown.open .nav-dropdown-menu { display: block; }
/* 移动端下拉菜单样式 */
@media (max-width: 768px) {
  .nav-dropdown { flex-direction: column; width: 100%; }
  .nav-dropdown > a { width: 100%; }
  .nav-dropdown-menu {
    position: static !important; transform: none !important;
    box-shadow: none; border: none; border-radius: 0;
    background: transparent; padding: 0 0 0 24px; min-width: auto;
  }
  .nav-dropdown-menu a { padding: 8px 14px; font-size: 0.85rem; }
  .nav-dropdown.open .nav-dropdown-menu { display: block !important; }
}
.nav-dropdown-menu a {
  display: block; padding: 8px 18px; font-size: 0.88rem; color: var(--text-secondary);
  text-decoration: none; white-space: nowrap; transition: all 0.15s;
}
.nav-dropdown-menu a:hover { background: var(--orange-bg); color: var(--orange-deep); }


@font-face{font-family:ChengnuanBrandPixel;src:url('assets/brand-pixel.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
.topbar .brand .pixel-brand-icon{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.topbar .brand strong{font-family:ChengnuanBrandPixel,monospace;font-size:24px;font-weight:400;line-height:1;letter-spacing:0;color:#ee790d}
.pixel-brand-heart{color:#ee790d;shape-rendering:crispEdges;flex-shrink:0}
.topbar #quickLinks{min-width:0}.topbar .user-dropdown-menu{line-height:1.6}.topbar #adminLink:empty{display:none}
.topbar .user-dropdown-trigger>span:nth-child(2){max-width:110px;overflow:hidden;text-overflow:ellipsis}
.topbar .nav-dropdown-menu a{font-size:14px}.topbar .admin-btn{color:#e87d0e}
.home-icp{display:flex;flex-direction:column;gap:3px;font-size:9px;color:#927c58;white-space:nowrap;margin-left:auto}
.home-icp img,.home-legal img{display:inline-block;width:14px;height:15px;vertical-align:middle;margin-right:3px}
.home-legal{display:grid;gap:7px;font-size:10px;color:#947449;margin-top:16px}
.app-bottom-nav{display:flex;align-items:center;justify-content:space-around;z-index:40;background:#fffffff5;border-top:1px solid #eee0ce;padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -3px 18px #00000008;min-height:60px}
.app-bottom-nav a{display:flex;flex:1;flex-direction:column;align-items:center;gap:4px;min-width:0;position:relative;padding:5px 2px;color:#888;font-size:10px;min-height:50px}
.app-bottom-nav a i{font-size:20px}.app-bottom-nav a.active{color:#ff8c00;font-weight:700}
.app-nav-dot{display:none;position:absolute;top:1px;right:12%;background:#e74c3c;color:white;font-size:10px;padding:0 4px;border-radius:9px}.app-nav-dot.show{display:block}
body.mobile-app-shell #worldStage{height:calc(100vh - var(--bar) - var(--mobile-nav-height,60px))}
body.app-native{padding-top:env(safe-area-inset-top,0px)}body.app-native #worldStage{height:calc(100vh - var(--bar) - var(--mobile-nav-height,60px) - env(safe-area-inset-top,0px))}
@media(max-width:1280px){.topbar{gap:10px;padding:0 20px}.topbar nav a{padding:10px 10px}.has-member-nav .topbar .preview-label{display:none}.topbar .user-dropdown-trigger{padding:6px 10px}}
@media(max-width:1000px) and (min-width:769px){.topbar nav a{padding:10px 7px;font-size:13px}.topbar .brand{gap:5px}.topbar .brand strong{font-size:24px}.controls-help{display:none}}
@media(max-width:768px){.topbar .brand{gap:6px}.topbar .brand strong{font-size:24px}.topbar .brand .pixel-brand-icon{width:32px;height:32px}.topbar .preview-label{display:inline;margin-left:auto}.topbar .menu-button{flex-shrink:0}.topbar #quickLinks{max-height:calc(100vh - var(--bar) - var(--mobile-nav-height,60px));overflow-y:auto}.topbar .user-dropdown{display:block;width:100%}.topbar .user-dropdown-trigger{width:100%;justify-content:flex-start}.topbar .user-dropdown-menu{position:static;box-shadow:none;border:0}.home-icp{display:none}.topbar #quickLinks.is-open{align-items:stretch}}
@media(max-width:360px){.topbar .brand{gap:4px}.topbar .preview-label{letter-spacing:0;font-size:8px}.topbar{gap:6px;padding:0 10px}}

/* vh用于旧版手机浏览器，支持dvh时优先随地址栏变化调整。 */

/* 含var的未知单位可能在计算阶段失效，必须先检测再启用。 */
@supports (height:100dvh){
  #worldStage{height:calc(100dvh - var(--bar))}
  body.mobile-app-shell #worldStage{height:calc(100dvh - var(--bar) - var(--mobile-nav-height,60px))}
  body.app-native #worldStage{height:calc(100dvh - var(--bar) - var(--mobile-nav-height,60px) - env(safe-area-inset-top,0px))}
}

/* 猫咪标签与互动面板沿用地图纸卡，触屏保留足够点击面积。 */
.cat-labels{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.cat-labels button{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;background:#fff4db;border:2px solid #896342;box-shadow:2px 2px #64473155;font-size:10px;padding:4px 9px;min-height:30px;color:#644731;white-space:nowrap}
.cat-labels button:hover{background:#ffe4ad}.cat-dialog{text-align:center}.cat-dialog canvas{display:block;margin:10px auto 0;image-rendering:pixelated}.cat-dialog h2{font-size:20px}.cat-dialog #catMessage{min-height:52px}.cat-actions{display:flex;gap:12px;justify-content:center;margin-top:18px}.cat-actions button{position:static;min-height:44px;min-width:100px;font-size:14px}
.cat-labels button:before{content:'';position:absolute;left:-9px;top:50%;width:8px;height:2px;background:#896342}.cat-labels button.is-left:before{left:auto;right:-9px}
@media(max-height:520px){.cat-dialog{padding:18px}.cat-dialog canvas{width:72px;height:60px;margin:0 auto}.cat-dialog h2{font-size:17px;margin:5px 0}.cat-dialog #catMessage{min-height:0}.cat-dialog .dialog-note{display:none}}

/* 进度与预计时间分行，窄屏也能完整阅读。 */
#loadingEstimate{min-height:1.5em;margin:4px 20px 10px;color:#765735;font-size:12px;text-align:center;font-variant-numeric:tabular-nums;}
.loading .loading-fruit{flex:none;}
.loading:before{max-height:calc(100% - 16px);}
@media(max-height:480px) and (min-width:600px){
  .loading{padding:10px 20px;gap:3px;}
  .loading .eyebrow{margin-top:0;font-size:8px;}
  .loading strong{font-size:16px;margin:3px 0;}
  .loading p{min-height:22px;line-height:1.5;margin:2px 0;font-size:11px;}
  .loading .pixel-progress{height:18px;margin:4px 0;}
  .loading b{font-size:10px;}
  #loadingEstimate{font-size:11px;margin:1px 10px 3px;}
  .loading .pixel-button{margin-top:3px;min-height:28px;padding:3px 10px;font-size:11px;}
}