/* =====================================================================
   我的世界 · 视觉增强层 (effects.css)
   非破坏性叠加层：与原 React 应用解耦，移除 <link>/<script> 即可还原
   配色：深海军蓝 #000e1c / 天蓝 #CAE9F5 / 霓虹粉 #ff4da6 / 青光 #5ee7ff
   ===================================================================== */

:root {
  --fx-sky:   #cae9f5;
  --fx-cyan:  #5ee7ff;
  --fx-pink:  #ff4da6;
  --fx-violet:#9b8cff;
  --fx-navy:  #000e1c;
  --fx-glow:  0 0 24px rgba(94, 231, 255, .55), 0 0 48px rgba(155, 140, 255, .35);
}

/* ---------- 全局基底：让背景层透出 ---------- */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(155,140,255,.18), transparent 60%),
    radial-gradient(1000px 700px at -10% 20%, rgba(94,231,255,.14), transparent 55%),
    #000e1c;
  background-attachment: fixed;
  cursor: none;                       /* 自定义光标接管 */
}
#root {
  position: relative;
  z-index: 2;
  background: transparent !important; /* 让底层极光/星空透出 */
}

/* ---------- 背景画布（星空 + 极光） ---------- */
#fx-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}

/* ---------- 顶部滚动进度条 ---------- */
#fx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-pink), var(--fx-violet));
  box-shadow: 0 0 12px var(--fx-cyan), 0 0 20px var(--fx-pink);
  transition: width .08s linear;
}

/* ---------- 自定义光标 ---------- */
#fx-cursor,
#fx-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: transform, width, height;
}
#fx-cursor {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(94, 231, 255, .8);
  box-shadow: 0 0 18px rgba(94, 231, 255, .6), inset 0 0 12px rgba(155,140,255,.4);
  transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease;
}
#fx-cursor-dot {
  width: 6px; height: 6px;
  background: var(--fx-pink);
  box-shadow: 0 0 10px var(--fx-pink);
}
/* 光标在可交互元素上放大并变粉 */
#fx-cursor.is-active {
  width: 56px; height: 56px;
  border-color: rgba(255, 77, 166, .9);
  background: rgba(255, 77, 166, .08);
  box-shadow: 0 0 28px rgba(255, 77, 166, .55);
}
/* 隐藏触摸设备上的自定义光标 */
@media (hover: none) {
  body { cursor: auto; }
  #fx-cursor, #fx-cursor-dot { display: none; }
}

/* ---------- 漂浮爱心层 ---------- */
#fx-hearts {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.fx-heart {
  position: absolute;
  bottom: -40px;
  color: var(--fx-pink);
  text-shadow: 0 0 12px rgba(255, 77, 166, .8);
  opacity: 0;
  animation: fx-heart-rise linear forwards;
  will-change: transform, opacity;
}
@keyframes fx-heart-rise {
  0%   { transform: translateY(0) rotate(0deg) scale(.6); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .7; }
  100% { transform: translateY(-110vh) rotate(360deg) scale(1.1); opacity: 0; }
}

/* ---------- 通用：图片与卡片的玻璃霓虹增强 ---------- */
#root img {
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              filter .5s ease, box-shadow .5s ease;
}
#root img:hover {
  transform: scale(1.035);
  filter: saturate(1.15) brightness(1.05);
  box-shadow: 0 10px 40px rgba(94,231,255,.25), 0 0 0 1px rgba(202,233,245,.3);
}

/* 通用卡片：玻璃拟态 + 微辉光描边 */
#root .fans-card,
#root [class*="card"]:not([class*="card-foreground"]) {
  position: relative;
  background: rgba(255, 255, 255, .04) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(202, 233, 245, .14) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
}
#root .fans-card:hover,
#root [class*="card"]:hover {
  transform: translateY(-6px);
  border-color: rgba(94, 231, 255, .45) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.5),
              0 0 28px rgba(94, 231, 255, .25),
              inset 0 1px 0 rgba(255,255,255,.08);
}
/* 卡片悬浮时的扫光 */
#root .fans-card::before,
#root [class*="card"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(202,233,245,.12) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s ease;
  pointer-events: none;
}
#root .fans-card:hover::before,
#root [class*="card"]:hover::before {
  transform: translateX(120%);
}

/* ---------- 滚动揭示动画 ---------- */
.fx-reveal {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(6px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1), filter .8s ease;
  will-change: opacity, transform;
}
.fx-reveal.fx-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------- 标题霓虹流光 ---------- */
#root h1, #root h2, #root .font-space-mono {
  text-shadow: 0 0 1px rgba(202,233,245,.4);
}
#root h1 {
  background: linear-gradient(90deg, #fff 0%, var(--fx-sky) 35%, var(--fx-cyan) 55%, var(--fx-pink) 80%, #fff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fx-shimmer 6s linear infinite;
  filter: drop-shadow(0 0 14px rgba(94,231,255,.35));
}
@keyframes fx-shimmer {
  to { background-position: 220% center; }
}

/* ---------- 选区与滚动条 ---------- */
::selection { background: rgba(255, 77, 166, .35); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #00101f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--fx-cyan), var(--fx-violet));
  border-radius: 10px;
  border: 2px solid #00101f;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--fx-pink), var(--fx-violet)); }

/* ---------- 加载屏 ---------- */
#fx-loader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: radial-gradient(circle at 50% 50%, #001a33 0%, #000e1c 70%);
  transition: opacity .8s ease, visibility .8s ease;
}
#fx-loader.fx-hidden {
  opacity: 0;
  visibility: hidden;
}
.fx-loader-title {
  font-family: "Space Mono", monospace;
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: .2em;
  color: #fff;
  position: relative;
  animation: fx-flicker 2.4s infinite;
}
@keyframes fx-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; text-shadow: 0 0 12px var(--fx-cyan), 0 0 28px var(--fx-violet); }
  20%, 24%, 55% { opacity: .55; text-shadow: none; }
}
.fx-loader-bar {
  width: min(260px, 60vw);
  height: 2px;
  background: rgba(202,233,245,.15);
  border-radius: 2px;
  overflow: hidden;
}
.fx-loader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-pink));
  box-shadow: 0 0 12px var(--fx-cyan);
  animation: fx-load-fill 1.4s ease forwards;
}
@keyframes fx-load-fill { to { width: 100%; } }
.fx-loader-tip {
  font-family: "Space Mono", monospace;
  font-size: .8rem;
  color: rgba(202,233,245,.55);
  letter-spacing: .1em;
}

/* ---------- 交互元素磁吸高亮 ---------- */
#root a, #root button {
  transition: transform .25s ease, color .25s ease, text-shadow .25s ease;
}
#root a:hover, #root button:hover {
  text-shadow: 0 0 10px rgba(94,231,255,.6);
}

/* ---------- 性能/无障碍：尊重减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fx-reveal { opacity: 1; transform: none; filter: none; }
  #fx-bg-canvas { display: none; }
}

/* =====================================================================
   BUG 修复：组合/成员照片填充与居中（覆盖内联样式）
   ===================================================================== */
/* 组合卡图片：统一比例 + 填满 + 居中（去掉 500px 上限造成的留白） */
#root .fans-card > img {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* 成员卡图片：撑满单元格（去掉 180px 上限的两侧留白）+ 人脸居中 */
#root .member-item img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center 18% !important;
}
/* 成员卡图片悬浮：在自身圆角框内缩放，不被外层 overflow 裁切 */
#root .member-item img:hover,
#root .fans-card > img:hover {
  transform: scale(1.06) !important;
  filter: saturate(1.2) brightness(1.06) !important;
  box-shadow: 0 0 0 1px rgba(94,231,255,.5), 0 0 24px rgba(94,231,255,.3) !important;
}

/* =====================================================================
   BUG 修复：成员展开面板间距
   面板被移入 newjeans 卡片下方后，折叠态(height:0)的内联 marginTop:2rem
   会在 newjeans 与 nmixx 间多出一段空隙，这里归零，靠网格 gap 控制间距。
   ===================================================================== */
#root .fans-card + div:not([class]) {
  margin-top: 0 !important;
}

/* =====================================================================
   美化：成员卡片玻璃霓虹 + 悬浮辉光（不使用 translate，避免被面板 overflow 裁切）
   ===================================================================== */
#root .member-item {
  position: relative;
  background: rgba(202, 233, 245, .05) !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(202, 233, 245, .18) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .4s ease, box-shadow .4s ease, background .4s ease !important;
  overflow: hidden;
}
#root .member-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fx-cyan), var(--fx-pink), var(--fx-violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
#root .member-item:hover {
  border-color: rgba(255, 77, 166, .55) !important;
  background: rgba(202, 233, 245, .09) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.45), 0 0 28px rgba(255,77,166,.22),
              inset 0 1px 0 rgba(255,255,255,.08);
}
#root .member-item:hover::after { transform: scaleX(1); }
#root .member-item:hover h3 {
  text-shadow: 0 0 12px rgba(255,77,166,.7), 0 0 24px rgba(94,231,255,.4);
}

/* =====================================================================
   美化：可展开的 newjeans 卡片 —— 流光描边提示可交互
   ===================================================================== */
#root .fans-card {
  position: relative;
}
#root .fans-card img[src*="newjeans"] ~ p,
#root .fans-card:has(img[src*="newjeans"]) {
  border-color: rgba(94, 231, 255, .35) !important;
}
#root .fans-card:has(img[src*="newjeans"])::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(120deg, var(--fx-cyan), var(--fx-pink), var(--fx-violet), var(--fx-cyan));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: fx-border-flow 4s linear infinite;
  pointer-events: none;
  opacity: .8;
}
@keyframes fx-border-flow {
  to { background-position: 300% 0; }
}
/* 成员区标题“✦ NewJeans Members ✦” 霓虹 */
#root .fans-card + div:not([class]) .font-space-mono:first-child {
  background: linear-gradient(90deg, var(--fx-sky), var(--fx-cyan), var(--fx-pink), var(--fx-sky));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-shimmer 5s linear infinite;
  filter: drop-shadow(0 0 10px rgba(94,231,255,.4));
}

/* =====================================================================
   NMIXX / RESCENE 成员展开面板（注入层，结构对齐 React 的 newjeans 面板）
   ===================================================================== */
.fx-mem-panel {
  width: 100%;
  margin-top: 2rem;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height .55s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.fx-mem-panel.is-open { opacity: 1; }
.fx-mem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
/* 面板标题霓虹（与 newjeans 一致） */
.fx-mem-panel .fx-mem-title {
  font-family: "Space Mono", monospace;
  font-size: .7rem;
  color: rgba(202, 233, 245, .5);
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-align: center;
  margin-bottom: 2rem;
  background: linear-gradient(90deg, var(--fx-sky), var(--fx-cyan), var(--fx-pink), var(--fx-sky));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-shimmer 5s linear infinite;
  filter: drop-shadow(0 0 10px rgba(94,231,255,.4));
}
/* 展开时成员卡淡入上浮 */
.fx-mem-panel.is-open .member-item {
  animation: fx-mem-in .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fx-mem-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   Superstar 板块（GROUP 下方，喜欢的个人）
   ===================================================================== */
.fx-superstar {
  width: 100%;
  margin-top: 3rem;
  padding: 2rem 1.25rem;
  border: 1px solid rgba(202, 233, 245, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.fx-superstar-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.fx-star {
  font-size: 1.6rem;
  color: var(--fx-cyan);
  text-shadow: 0 0 14px rgba(94, 231, 255, .8), 0 0 28px rgba(155, 140, 255, .5);
  animation: fx-star-pulse 2.4s ease-in-out infinite;
}
@keyframes fx-star-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.18); }
}
.fx-superstar-title {
  margin: 0;
  font-family: "Space Mono", monospace;
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: .12em;
  text-transform: lowercase;
  background: linear-gradient(90deg, var(--fx-sky), var(--fx-cyan), var(--fx-pink), var(--fx-sky));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-shimmer 5s linear infinite;
  filter: drop-shadow(0 0 12px rgba(94, 231, 255, .4));
}
.fx-superstar-sub {
  text-align: center;
  margin: .5rem 0 1.5rem;
  font-family: "Space Mono", monospace;
  font-size: .7rem;
  color: rgba(202, 233, 245, .5);
  letter-spacing: .1em;
}
.fx-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.fx-sub-block { margin-top: 1.5rem; }
.fx-sub-title {
  font-family: "Space Mono", monospace;
  font-size: .85rem;
  color: var(--fx-pink);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 77, 166, .5);
}
.fx-chip {
  display: inline-block;
  padding: .4rem .85rem;
  border-radius: 100px;
  border: 1px solid rgba(202, 233, 245, .2);
  background: rgba(202, 233, 245, .05);
  font-family: "Space Mono", monospace;
  font-size: .78rem;
  color: rgba(255, 255, 255, .78);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.fx-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 231, 255, .5);
  background: rgba(94, 231, 255, .1);
  box-shadow: 0 0 16px rgba(94, 231, 255, .25);
}
.fx-chip--link {
  cursor: pointer;
  color: #fff;
  border-color: rgba(255, 77, 166, .4);
  background: rgba(255, 77, 166, .08);
  font: inherit;
}
.fx-chip--link:hover {
  border-color: rgba(255, 77, 166, .8);
  background: rgba(255, 77, 166, .18);
  box-shadow: 0 0 18px rgba(255, 77, 166, .4);
}

/* 角色照片卡（点击照片展开简介） */
.fx-superstar-wrap { width: 100%; }
.fx-star-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
}
.fx-star-card {
  flex: 1 1 175px;
  max-width: 220px;
  min-width: 140px;
  background: rgba(202, 233, 245, .05);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(202, 233, 245, .16);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.fx-star-card:hover {
  border-color: rgba(94, 231, 255, .5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 22px rgba(94, 231, 255, .2);
  transform: translateY(-3px);
}
.fx-star-card.is-open {
  border-color: rgba(255, 77, 166, .6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 77, 166, .25);
}
.fx-star-photo-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.fx-star-photo {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
}
.fx-star-photo-btn:hover .fx-star-photo {
  transform: scale(1.05);
  filter: saturate(1.15) brightness(1.06);
}
.fx-star-name {
  display: block;
  text-align: center;
  padding: .5rem .4rem .1rem;
  font-family: "Space Mono", monospace;
  font-size: .8rem;
  color: #fff;
  letter-spacing: .04em;
}
.fx-star-hint {
  display: block;
  text-align: center;
  padding: 0 .4rem .6rem;
  font-family: "Space Mono", monospace;
  font-size: .6rem;
  color: rgba(202, 233, 245, .5);
  letter-spacing: .08em;
}
.fx-star-card.is-open .fx-star-hint { color: rgba(255, 77, 166, .85); }
.fx-star-intro {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}
.fx-star-card.is-open .fx-star-intro { opacity: 1; }
.fx-star-intro p {
  margin: 0;
  padding: .7rem .8rem 1rem;
  font-family: "Space Mono", monospace;
  font-size: .74rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  border-top: 1px solid rgba(202, 233, 245, .12);
}

/* 雷点板块（炸弹图标 + 仅名称，不配图） */
.fx-landmine {
  width: 100%;
  margin-top: 2.5rem;
  padding: 1.6rem 1.25rem;
  border: 1px solid rgba(255, 77, 166, .22);
  border-radius: 14px;
  background: rgba(255, 77, 166, .05);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.fx-landmine-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-bottom: 1.2rem;
}
.fx-bomb {
  font-size: 1.6rem;
  display: inline-block;
  animation: fx-bomb-shake 2.4s ease-in-out infinite;
}
@keyframes fx-bomb-shake {
  0%, 80%, 100% { transform: rotate(0); }
  85%           { transform: rotate(-12deg); }
  90%           { transform: rotate(10deg); }
  95%           { transform: rotate(-6deg); }
}
.fx-landmine-title {
  margin: 0;
  font-family: "Space Mono", monospace;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 77, 166, .7), 0 0 24px rgba(255, 77, 166, .4);
}
.fx-chip--mine {
  border-color: rgba(255, 77, 166, .4);
  background: rgba(255, 77, 166, .08);
  color: #fff;
}
.fx-chip--mine:hover {
  border-color: rgba(255, 77, 166, .8);
  background: rgba(255, 77, 166, .18);
  box-shadow: 0 0 16px rgba(255, 77, 166, .35);
}

/* 雷点条目（名称 + 理由，不配图） */
.fx-mine-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.fx-mine-item {
  flex: 1 1 240px;
  max-width: 360px;
  min-width: 200px;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 77, 166, .25);
  background: rgba(255, 77, 166, .06);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.fx-mine-item:hover {
  border-color: rgba(255, 77, 166, .6);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4), 0 0 18px rgba(255, 77, 166, .25);
  transform: translateY(-2px);
}
.fx-mine-name {
  font-family: "Space Mono", monospace;
  font-size: .85rem;
  color: #fff;
  margin-bottom: .3rem;
  text-shadow: 0 0 8px rgba(255, 77, 166, .5);
}
.fx-mine-reason {
  font-family: "Space Mono", monospace;
  font-size: .72rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}
.fx-landmine-closing {
  margin: 1.6rem auto 0;
  max-width: 640px;
  font-family: "Space Mono", monospace;
  font-size: .78rem;
  line-height: 1.9;
  color: rgba(202, 233, 245, .65);
  text-align: center;
}
.fx-sparkle-line {
  margin: 2rem 0 .5rem;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .08em;
  background: linear-gradient(90deg, var(--fx-sky), #fff, var(--fx-pink), var(--fx-cyan), var(--fx-sky));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(94, 231, 255, .55)) drop-shadow(0 0 22px rgba(255, 77, 166, .35));
  animation: fx-shimmer 4s linear infinite;
}
.fx-sparkle-line .fx-spark {
  font-size: .7em;
  -webkit-text-fill-color: var(--fx-cyan);
  display: inline-block;
  animation: fx-star-pulse 1.8s ease-in-out infinite;
}

/* 扩列传送门 */
.fx-portal {
  width: 100%;
  margin-top: 2.5rem;
  padding: 2rem 1.25rem;
  border: 1px solid rgba(202, 233, 245, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  text-align: center;
}
.fx-door-btn {
  font-size: 3.4rem;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: .2rem .6rem;
  border-radius: 14px;
  display: inline-block;
  filter: drop-shadow(0 0 16px rgba(94, 231, 255, .5));
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
  animation: fx-door-glow 3s ease-in-out infinite;
}
.fx-door-btn:hover {
  transform: scale(1.12) rotate(-4deg);
  filter: drop-shadow(0 0 24px rgba(255, 77, 166, .7));
}
@keyframes fx-door-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(94, 231, 255, .4)); }
  50%      { filter: drop-shadow(0 0 22px rgba(155, 140, 255, .6)); }
}
.fx-portal-title {
  margin: .8rem 0 .3rem;
  font-family: "Space Mono", monospace;
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 0 12px rgba(94, 231, 255, .6);
}
.fx-portal-sub {
  margin: 0;
  font-family: "Space Mono", monospace;
  font-size: .72rem;
  color: rgba(202, 233, 245, .5);
  letter-spacing: .08em;
}

/* 扩列板块二维码排版 */
.fx-qr-wrap {
  width: min(720px, 92vw);
  margin: 1.5rem auto 2rem;
  text-align: center;
}
.fx-qr-tip {
  margin: 0 0 1.4rem;
  font-family: "Space Mono", monospace;
  font-size: .82rem;
  color: rgba(202, 233, 245, .7);
  letter-spacing: .06em;
}
.fx-qr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
@media (max-width: 540px) {
  .fx-qr-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
}
.fx-qr-card {
  padding: 1rem .8rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(94, 231, 255, .22);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, box-shadow .35s ease;
}
.fx-qr-card:hover {
  transform: translateY(-4px);
  border-color: rgba(94, 231, 255, .55);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(94, 231, 255, .25);
}
.fx-qr-img {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 200 / 260;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  display: block;
  margin: 0 auto .7rem;
  box-sizing: border-box;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.fx-qr-card:hover .fx-qr-img { transform: scale(1.04); }
.fx-qr-name {
  font-family: "Space Mono", monospace;
  font-size: .85rem;
  color: #fff;
  letter-spacing: .1em;
  text-shadow: 0 0 10px rgba(94, 231, 255, .4);
}

/* 密码锁弹层 */
.fx-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 14, 28, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fx-fade-in .25s ease;
}
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
.fx-lock-box {
  width: min(340px, 88vw);
  padding: 1.8rem 1.6rem;
  border-radius: 16px;
  border: 1px solid rgba(94, 231, 255, .3);
  background: rgba(0, 14, 28, .92);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(94, 231, 255, .2);
  text-align: center;
}
.fx-lock-title {
  margin: 0 0 1.2rem;
  font-family: "Space Mono", monospace;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: .1em;
}
.fx-lock-input {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(202, 233, 245, .25);
  background: rgba(202, 233, 245, .06);
  color: #fff;
  font-family: "Space Mono", monospace;
  font-size: .9rem;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.fx-lock-input:focus {
  border-color: rgba(94, 231, 255, .7);
  box-shadow: 0 0 16px rgba(94, 231, 255, .25);
}
.fx-lock-err {
  min-height: 1.1rem;
  margin: .6rem 0;
  font-family: "Space Mono", monospace;
  font-size: .72rem;
  color: rgba(255, 77, 166, .9);
}
.fx-lock-btns { display: flex; gap: .6rem; justify-content: center; }
.fx-lock-ok, .fx-lock-cancel {
  flex: 1;
  padding: .6rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(202, 233, 245, .25);
  background: rgba(202, 233, 245, .06);
  color: #fff;
  font-family: "Space Mono", monospace;
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.fx-lock-ok { border-color: rgba(94, 231, 255, .5); background: rgba(94, 231, 255, .14); }
.fx-lock-ok:hover { box-shadow: 0 0 16px rgba(94, 231, 255, .35); }
.fx-lock-cancel:hover { border-color: rgba(255, 77, 166, .5); background: rgba(255, 77, 166, .1); }

/* 扩列板块（解锁后显示） */
.fx-expand {
  width: 100%;
  margin-top: 2rem;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(94, 231, 255, .3);
  border-radius: 16px;
  background: rgba(94, 231, 255, .05);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(94, 231, 255, .15);
  text-align: center;
}
.fx-expand[hidden] { display: none; }
.fx-expand.fx-unlocked { animation: fx-fade-in .5s ease; }
.fx-expand-title {
  margin: 0 0 .6rem;
  font-family: "Space Mono", monospace;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: #fff;
  text-shadow: 0 0 14px rgba(94, 231, 255, .6);
}
.fx-expand-tip {
  margin: 0 0 1.4rem;
  font-family: "Space Mono", monospace;
  font-size: .8rem;
  color: rgba(202, 233, 245, .7);
}
.fx-expand-list { display: flex; flex-direction: column; gap: .6rem; max-width: 420px; margin: 0 auto; }
.fx-expand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(202, 233, 245, .16);
  background: rgba(202, 233, 245, .05);
}
.fx-expand-k {
  font-family: "Space Mono", monospace;
  font-size: .8rem;
  color: var(--fx-cyan);
  letter-spacing: .08em;
}
.fx-expand-v {
  font-family: "Space Mono", monospace;
  font-size: .82rem;
  color: #fff;
}

/* 成员闪烁高亮（点击 superstar 名字后定位目标成员） */
#root .member-item.fx-flash {
  animation: fx-flash .45s ease-in-out 5 !important;
  z-index: 5;
  position: relative;
}
@keyframes fx-flash {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 77, 166, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 77, 166, .95),
                0 0 50px 10px rgba(255, 77, 166, .6),
                0 0 100px 14px rgba(94, 231, 255, .45);
    transform: scale(1.07);
  }
}