/* ============================================
 * 格子系统样式
 * 装备格/技能格/按钮格/卡片格 + 角标/红点/CD + 等级底标/名称外显
 * ============================================ */

/* ---- 格子基础 ---- */
.g-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.g-slot:hover {
  border-color: var(--border-primary);
}

.g-slot:active {
  border-color: var(--primary);
}

/* ---- 格子尺寸（全部正方形） ---- */
.g-slot-equip  { width: 72px; height: 72px; border-radius: var(--radius-md); }
.g-slot-skill  { width: 56px; height: 56px; }
.g-slot-btn    { width: 48px; height: 48px; }
.g-slot-card   { width: 80px; height: 80px; border-radius: var(--radius-md); }
.g-slot-bar    { width: 56px; height: 56px; }

/* ---- 格子图标（绝对垂直水平居中） ---- */
.g-slot-icon {
  position: absolute;
  width: 60%;
  height: 60%;
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask: var(--gi-src) no-repeat center / contain;
  mask: var(--gi-src) no-repeat center / contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---- 等级底标（底部，无背景色） ---- */
.g-slot-level {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 4px rgba(200,155,60,0.4);
}

/* ---- 格子包裹容器（格子+名称外显） ---- */
.g-slot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ---- 名称外显（格子下方） ---- */
.g-slot-name {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 品质边框 + 品质色变量（神器动效继承） ---- */
.g-slot.q-common    { --q-color: var(--q-common);    border-color: var(--q-common); }
.g-slot.q-magic     { --q-color: var(--q-magic);     border-color: var(--q-magic); }
.g-slot.q-rare      { --q-color: var(--q-rare);      border-color: var(--q-rare); box-shadow: inset 0 0 8px rgba(155,111,212,0.15), var(--glow-purple); }
.g-slot.q-legendary { --q-color: var(--q-legendary);  border-color: var(--q-legendary); box-shadow: inset 0 0 8px rgba(196,75,75,0.2), var(--glow-red); }
.g-slot.q-unique    { --q-color: var(--q-unique);     border-color: var(--q-unique); box-shadow: inset 0 0 8px rgba(200,155,60,0.2), var(--glow-primary); }
.g-slot.q-set       { --q-color: var(--q-set);        border-color: var(--q-set); box-shadow: inset 0 0 8px rgba(74,196,32,0.2), var(--glow-green); }

/* 品质色图标 */
.g-slot.q-common .g-slot-icon    { color: var(--q-common); }
.g-slot.q-magic .g-slot-icon     { color: var(--q-magic); }
.g-slot.q-rare .g-slot-icon      { color: var(--q-rare); }
.g-slot.q-legendary .g-slot-icon { color: var(--q-legendary); }
.g-slot.q-unique .g-slot-icon    { color: var(--q-unique); }
.g-slot.q-set .g-slot-icon       { color: var(--q-set); }

/* ---- 空格/锁定 ---- */
.g-slot-empty .g-slot-icon {
  color: var(--text-dim);
  opacity: 0.4;
}

.g-slot-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  border-radius: inherit;
}

.g-slot-locked .g-slot-icon {
  opacity: 0.3;
}

.g-slot-lock {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 11px;
  z-index: 2;
}

/* ---- 选中态 ---- */
.g-slot-selected {
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px rgba(200,155,60,0.3);
}

/* ---- 底标 ---- */
.g-slot-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1px 4px;
  background: rgba(0,0,0,0.7);
  font-size: 9px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 角标（右下方，无底色，金色字体） ---- */
.g-slot-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  line-height: 1;
  letter-spacing: 0.3px;
}

/* 装备强化等级（与弹窗效果一致） */
.g-slot-enhance {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  z-index: 2;
}

/* ---- 红点 ---- */
.g-slot-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(196,75,75,0.6);
}

/* ---- CD倒计时 ---- */
.g-slot-cd {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  border-radius: inherit;
  pointer-events: none;
}

.g-slot-cd-text {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

/* CD扇形遮罩（用conic-gradient模拟） */
.g-slot-cd-fan {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    rgba(0,0,0,0.6) 0deg,
    rgba(0,0,0,0.6) 270deg,
    transparent 270deg
  );
  pointer-events: none;
}

/* ---- 快捷键标注 ---- */
.g-slot-key {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1;
}

/* ---- 顶部栏 ---- */
.g-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-dim);
}

.g-topbar-avatar {
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--primary);
  flex-shrink: 0;
  background-color: var(--text-primary);
  -webkit-mask: var(--gi-src) no-repeat center / contain;
  mask: var(--gi-src) no-repeat center / contain;
}

.g-topbar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.g-topbar-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.g-topbar-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.g-topbar-vip {
  font-family: var(--font-num);
  font-size: 9px;
  font-weight: 700;
  color: var(--primary);
  background: linear-gradient(135deg, rgba(200,155,60,0.25), rgba(200,155,60,0.08));
  border: 1px solid rgba(200,155,60,0.4);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 14px;
  text-shadow: 0 0 4px rgba(200,155,60,0.4);
}

.g-topbar-level {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
}

/* 资源条 */
.g-bar {
  position: relative;
  height: 8px;
  background: var(--bg-surface);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

.g-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--transition-normal);
}

.g-bar-hp .g-bar-fill  { background: var(--green); }
.g-bar-mp .g-bar-fill  { background: var(--blue); }
.g-bar-exp .g-bar-fill { background: var(--primary); }

.g-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* 货币 */
.g-topbar-currency {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.g-currency {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
}

.g-currency-icon {
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask: var(--gi-src) no-repeat center / contain;
  mask: var(--gi-src) no-repeat center / contain;
}

/* ---- 底部栏 ---- */
.g-bottombar {
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  border-top: 1px solid var(--border-dim);
}

/* 经验条（位于底部导航栏上方） */
.g-bottombar-exp {
  width: 100%;
  height: 4px;
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
  order: 2;
}

.g-bottombar-exp-fill {
  height: 100%;
  border-radius: 0 2px 2px 0;
  transition: width 0.6s ease, background 0.6s ease;
  background: var(--primary);
}

/* 经验条进度变色 */
.g-bottombar-exp-fill[data-pct="low"] {
  background: linear-gradient(90deg, #C44B4B, #E05555);
  box-shadow: 0 0 4px rgba(196,75,75,0.5);
}

.g-bottombar-exp-fill[data-pct="mid"] {
  background: linear-gradient(90deg, #E05555, #C89B3C);
  box-shadow: 0 0 4px rgba(200,155,60,0.5);
}

.g-bottombar-exp-fill[data-pct="high"] {
  background: linear-gradient(90deg, #C89B3C, #4CAF50);
  box-shadow: 0 0 4px rgba(76,175,80,0.5);
}

.g-bottombar-exp-fill[data-pct="full"] {
  background: linear-gradient(90deg, #4CAF50, #4A8FD4);
  box-shadow: 0 0 6px rgba(74,143,212,0.6);
}

/* 技能/物品栏 */
.g-bottombar-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  order: 1;
}

/* 经验条变色演示 */
.g-bottombar-exp-demo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 120px;
}

.g-bottombar-exp-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}


/* ---- 底部导航栏（固定底部操作栏） ---- */
.g-nav-bottom {
  display: flex;
  justify-content: space-around;
  padding: 6px 0 8px;
  background: var(--bg-dark);
  border-top: 1px solid var(--border-dim);
  order: 3;
}

.g-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 16px;
  transition: color var(--transition-fast);
}

.g-nav-tab-icon {
  width: 24px;
  height: 24px;
  background-color: var(--text-dim);
  -webkit-mask: var(--gi-src) no-repeat center / contain;
  mask: var(--gi-src) no-repeat center / contain;
  transition: background-color var(--transition-fast);
}

.g-nav-tab-text {
  font-size: 10px;
  color: var(--text-dim);
  transition: color var(--transition-fast);
}

/* 悬停态 */
.g-nav-tab:hover .g-nav-tab-icon {
  background-color: var(--text-primary);
}

.g-nav-tab:hover .g-nav-tab-text {
  color: var(--text-primary);
}

/* 激活态 */
.g-nav-tab.active .g-nav-tab-icon {
  background-color: var(--primary);
}

.g-nav-tab.active .g-nav-tab-text {
  color: var(--primary);
  font-weight: 700;
}

.g-nav-tab.active:hover .g-nav-tab-icon {
  background-color: var(--primary);
}

.g-nav-tab.active:hover .g-nav-tab-text {
  color: var(--primary);
}

/* ---- 装备面板布局 ---- */
.g-equip-layout {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  grid-template-rows: repeat(3, 76px);
  gap: 4px;
  justify-content: center;
  padding: 16px;
  background: var(--bg-main);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
}

.g-equip-layout .g-slot {
  width: 76px;
  height: 76px;
}

/* ---- 背包格子网格 ---- */
.g-bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 84px);
  gap: 4px;
  padding: 12px;
  background: var(--bg-main);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
}

/* 背包网格中的包裹容器需要额外空间给名称 */
.g-bag-grid .g-slot-wrap {
  padding-bottom: 16px;
}

/* ---- 技能栏 ---- */
.g-skill-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-main);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
}

/* ============================================
 * 神器动效
 * 渐变流转边框 + 粒子火花，颜色跟随品质色（--q-color）
 * 神器属性可转移到同部位任意品质格子，动效颜色自动适配
 * 两种可叠加，每种代表一条激活的神器属性
 * ============================================ */

/* ---- 渐变流转边框（颜色跟随品质） ---- */
@property --flow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.g-slot-artifact-flow {
  position: relative;
  border-color: transparent;
}

/* 流转光带：conic-gradient顺时针旋转，颜色用--q-color */
.g-slot-artifact-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  --flow-angle: 0deg;
  background: conic-gradient(
    from var(--flow-angle),
    transparent 0%,
    transparent 5%,
    var(--q-color, var(--q-legendary)) 12%,
    color-mix(in srgb, var(--q-color, var(--q-legendary)) 90%, white) 18%,
    var(--q-color, var(--q-legendary)) 24%,
    transparent 32%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  animation: artifact-flow 2s linear infinite;
}

@keyframes artifact-flow {
  to { --flow-angle: 360deg; }
}

/* ---- 粒子火花（颜色跟随品质） ---- */
.g-slot-artifact-spark {
  animation: artifact-spark 2s ease-in-out infinite alternate;
}

@keyframes artifact-spark {
  0% {
    box-shadow:
      inset 0 0 6px color-mix(in srgb, var(--q-color, var(--q-unique)) 25%, transparent),
      0 0 4px 1px color-mix(in srgb, var(--q-color, var(--q-unique)) 35%, transparent),
      5px -10px 8px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 50%, transparent),
      -7px -5px 8px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 40%, transparent),
      9px 5px 8px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 35%, transparent),
      -5px 9px 8px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 45%, transparent);
  }
  33% {
    box-shadow:
      inset 0 0 10px color-mix(in srgb, var(--q-color, var(--q-unique)) 40%, transparent),
      0 0 6px 2px color-mix(in srgb, var(--q-color, var(--q-unique)) 50%, transparent),
      7px -14px 10px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 65%, transparent),
      -9px -7px 10px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 50%, transparent),
      12px 7px 10px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 40%, transparent),
      -7px 12px 10px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 60%, transparent);
  }
  66% {
    box-shadow:
      inset 0 0 8px color-mix(in srgb, var(--q-color, var(--q-unique)) 30%, transparent),
      0 0 5px 1px color-mix(in srgb, var(--q-color, var(--q-unique)) 40%, transparent),
      3px -8px 6px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 40%, transparent),
      -5px -3px 6px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 30%, transparent),
      7px 3px 6px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 25%, transparent),
      -3px 7px 6px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 40%, transparent);
  }
  100% {
    box-shadow:
      inset 0 0 12px color-mix(in srgb, var(--q-color, var(--q-unique)) 50%, transparent),
      0 0 8px 2px color-mix(in srgb, var(--q-color, var(--q-unique)) 60%, transparent),
      8px -12px 10px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 70%, transparent),
      -10px -8px 10px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 55%, transparent),
      14px 8px 10px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 45%, transparent),
      -8px 14px 10px -5px color-mix(in srgb, var(--q-color, var(--q-unique)) 65%, transparent);
  }
}

/* ---- 双神器叠加（流光+火花同时激活） ---- */
.g-slot-artifact-flow.g-slot-artifact-spark {
  animation: artifact-flow 2.5s linear infinite, artifact-spark 2s ease-in-out infinite alternate;
}

/* ---- 格子展示区 ---- */
.grid-demo-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.grid-demo-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid-demo-label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.grid-demo-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}