/* ============================================================================
   Project: NOVA · 四大留存·荣誉声望·低保滴灌·画质中枢 4 皮肤样式 (css/retention-hub.css)
   全部为非阻塞悬浮窗与紧凑单行荣誉铭牌，1:1 适配四大旗舰皮肤（含千里江山羊脂白玉内板）
   ============================================================================ */

/* 顶栏学者荣誉与补给中心胶囊按钮（嵌入 .topbar 第一行快捷区，零额外行高） */
.nova-ret-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 27px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1.5px solid var(--nv-skin-border-bright, #fde68a);
  background: var(--nv-skin-btn-jpg-alt, linear-gradient(135deg, rgba(14, 22, 46, 0.92), rgba(32, 24, 12, 0.88))) center / 100% 100% no-repeat;
  color: #fffbeb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
  flex-shrink: 0;
}

.nova-ret-top-btn img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.nova-ret-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10f5a0;
  box-shadow: 0 0 8px #10f5a0;
  display: none;
  flex-shrink: 0;
}

.nova-ret-top-btn.has-claim .nova-ret-dot {
  display: inline-block;
}

/* 近地轨道低保滴灌浮动反应堆（仅在净资产 < 300.00 星币时浮现于左下角安全区，不挡操作） */
.nova-drip-widget {
  position: fixed;
  left: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  z-index: 8800;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(6, 28, 24, 0.95), rgba(10, 18, 38, 0.95));
  border: 1.5px solid rgba(52, 211, 153, 0.72);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.78), 0 0 16px rgba(16, 245, 160, 0.28);
  cursor: pointer;
  max-width: 260px;
}

.nova-drip-widget.active {
  display: inline-flex;
}

.nova-drip-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  animation: novaDripSpin 8s linear infinite;
  flex-shrink: 0;
}

@keyframes novaDripSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.nova-drip-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.nova-drip-title {
  font-size: 11px;
  font-weight: 900;
  color: #a7f3d0;
  white-space: nowrap;
}

.nova-drip-sub {
  font-size: 10px;
  font-family: var(--mono, monospace);
  color: #fde68a;
  white-space: nowrap;
}

/* 古陆挖宝房主名画典藏展映铭牌 */
.nova-dig-host-plaque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 8px;
  margin: 2px 0;
  border-radius: 8px;
  background: var(--nv-skin-surface);
  border: 1px solid var(--nv-skin-border);
  font-size: 11px;
  color: var(--nv-skin-ink);
  flex-shrink: 0;
}

body[data-nova-skin="qianli"] .nova-dig-host-plaque {
  background: linear-gradient(90deg, #fffdf7, #efe6d0) !important;
  border-color: #c59b27 !important;
  color: #103029 !important;
}

.nova-dig-host-left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nova-dig-like-btn {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(246, 200, 95, 0.65);
  background: rgba(246, 200, 95, 0.18);
  color: #fde68a;
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

body[data-nova-skin="qianli"] .nova-dig-like-btn {
  background: #134e48 !important;
  border-color: #d4af37 !important;
  color: #fef08a !important;
}

.nova-dig-like-btn.liked {
  background: rgba(16, 185, 129, 0.25);
  border-color: #34d399;
  color: #a7f3d0;
}

/* 学者圣殿与四大留存中枢弹窗（4 皮肤 3D 镶板 + 千里江山白玉内页） */
.nova-ret-modal-card {
  width: min(94vw, 456px);
  max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(var(--app-vh, 100vh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background-color: var(--nv-skin-bg, #090d1a);
  background-image:
    linear-gradient(180deg, rgba(8, 12, 22, 0.86), rgba(8, 12, 22, 0.93)),
    var(--nv-skin-panel-img);
  background-size: 100% 100%;
  border: 2px solid var(--nv-skin-border-bright, #fde68a);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.88);
  padding: 13px 13px 14px;
  color: #f8fafc;
  overflow: hidden;
}

body[data-nova-skin="qianli"] .nova-ret-modal-card {
  background-image:
    linear-gradient(180deg, rgba(8, 40, 36, 0.86), rgba(5, 24, 22, 0.93)),
    var(--nv-skin-panel-img) !important;
}
body[data-nova-skin="royal"] .nova-ret-modal-card {
  background-image:
    linear-gradient(180deg, rgba(44, 6, 14, 0.87), rgba(22, 3, 7, 0.94)),
    var(--nv-skin-panel-img) !important;
}
body[data-nova-skin="starry"] .nova-ret-modal-card {
  background-image:
    linear-gradient(180deg, rgba(10, 24, 62, 0.87), rgba(5, 12, 32, 0.94)),
    var(--nv-skin-panel-img) !important;
}

#novaRetModalTitle {
  font-size: 14.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.nova-ret-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0 9px;
  flex-shrink: 0;
}

.nova-ret-tab {
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--nv-skin-border-soft);
  background: var(--nv-skin-surface);
  color: var(--nv-skin-ink-dim);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.nova-ret-tab.active {
  background: var(--nv-skin-btn-jpg-main) center / 100% 100% no-repeat !important;
  border: 1.5px solid var(--nv-skin-border-bright) !important;
  color: #fffbeb !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.nova-ret-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-right: 2px;
  padding-bottom: 12px;
}

.nova-ret-section {
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(10, 16, 30, 0.72);
  border: 1px solid var(--nv-skin-border-soft);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body[data-nova-skin="qianli"] .nova-ret-section {
  background: linear-gradient(180deg, #fffdf7 0%, #f1e9d5 100%) !important;
  border: 1.5px solid #c59b27 !important;
  color: #103029 !important;
}

body[data-nova-skin="qianli"] .nova-ret-section div,
body[data-nova-skin="qianli"] .nova-ret-section span {
  color: #103029 !important;
}

body[data-nova-skin="qianli"] .nova-ret-section b {
  color: #991b1b !important;
}

.nova-ret-hero-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nova-ret-hero-art {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
}

.nova-ret-cta {
  height: 35px;
  padding: 0 9px;
  border-radius: 9px;
  border: 1.5px solid var(--nv-skin-border-bright);
  background: var(--nv-skin-btn-jpg-main) center / 100% 100% no-repeat;
  color: #fffbeb !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.nova-ret-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(100, 116, 139, 0.3) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #94a3b8 !important;
  text-shadow: none;
}

body[data-nova-skin="qianli"] .nova-ret-cta:disabled,
body[data-nova-skin="qianli"] .nova-ret-section button:disabled {
  opacity: 0.9 !important;
  background: rgba(16, 48, 41, 0.12) !important;
  border-color: rgba(197, 155, 39, 0.45) !important;
  color: #365950 !important;
  text-shadow: none !important;
}

.nova-pilgrim-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.nova-pilgrim-step {
  padding: 7px 6px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  font-size: 11px;
}

body[data-nova-skin="qianli"] .nova-pilgrim-step:not(.done) {
  background: #ffffff !important;
  border-color: #c59b27 !important;
  color: #103029 !important;
}

.nova-pilgrim-step.done {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.22) !important;
  color: #065f46 !important;
}

body:not([data-nova-skin="qianli"]) .nova-pilgrim-step.done {
  color: #a7f3d0 !important;
}