/* 游戏视图（design/components.md 第 17 节）：只在游戏视图页加载（inc/template-game-view.php）。
   - bar：PC 页头菜单区，「首页」之后；
   - strip：手机与平板页头下面、随页面滚动的情境条；
   - sheet：侧滑菜单顶部。
   状态标识沿用搜索提示条 .zb-search-hint 的软底配方，退出按钮沿用收藏页的次要按钮配方（--zb-muted 底加细边框，
   一眼看得出能点）；两者并排、各一层，互不嵌套。动效只动 transform 和 opacity，减少动效时不播放。 */

.zbui.zb-game-view {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--zb-space-xs);
  background: transparent;
}

/* —— 状态标识：只是文字，表示「你在游戏视图里」；去游戏库首页走「发现游戏」和面包屑 —— */
.zbui .zb-game-view__badge {
  position: relative;
  display: inline-flex;
  min-width: 0;
  height: var(--zb-control-h-sm);
  align-items: center;
  gap: var(--zb-space-xs);
  border: 1px solid var(--zb-primary-soft-border-faint);
  border-radius: var(--zb-radius-sm);
  background: var(--zb-primary-soft);
  color: var(--zb-primary-soft-text);
  font-size: var(--zb-text-sm);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-tight);
  padding: 0 var(--zb-space-sm) 0 var(--zb-space-xs);
  white-space: nowrap;
}
.zbui .zb-game-view__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  color: var(--zb-link);
}
.zbui .zb-game-view__icon svg {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
}
.zbui .zb-game-view__label {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

/* —— 退出按钮 —— */
.zbui .zb-game-view__exit {
  position: relative;
  display: inline-flex;
  flex: none;
  height: var(--zb-control-h-sm);
  align-items: center;
  justify-content: center;
  gap: var(--zb-space-2xs);
  border: 1px solid var(--zb-chip-border);
  border-radius: var(--zb-radius-sm);
  background: var(--zb-muted);
  color: var(--zb-text);
  font-size: var(--zb-text-sm);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-tight);
  padding: 0 var(--zb-space-sm) 0 var(--zb-space-xs);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--zb-duration-fast) var(--zb-ease);
}
.zbui .zb-game-view__exit-icon {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
  flex: none;
}

@media (hover: hover) {
  .zbui .zb-game-view__exit:hover {
    border-color: var(--zb-primary-soft-border-strong);
    color: var(--zb-text);
  }
}
.zbui .zb-game-view__exit:focus-visible {
  outline: none;
  box-shadow: var(--zb-focus-ring);
}

/* 触屏：视觉高度不变，用 ::before 把可点区域补到 44px。 */
@media (any-pointer: coarse) {
  .zbui .zb-game-view__exit::before {
    position: absolute;
    inset: calc((var(--zb-control-h-sm) - var(--zb-control-h)) / 2) 0;
    content: "";
  }
}

/* —— 页头菜单区：和旁边 16px 的菜单项放在一起，退出按钮字号用 14px，比工具条里的 13px 大一档 —— */
.zb-game-view--bar .zb-game-view__exit {
  font-size: var(--zb-text-base);
}
/* 状态标识是标签，不是按钮（PC 页头和侧滑菜单，2026-11-07）：无边框、24px 高、13px 字、小图标，
   和旁边 36px（侧滑菜单里 44px）带边框的「退出游戏视图」一眼分得开。情境条不变。 */
.zb-game-view--bar .zb-game-view__badge,
.zb-game-view--sheet .zb-game-view__badge {
  height: var(--zb-space-xl);
  border-color: transparent;
  border-radius: var(--zb-radius-xs);
  gap: var(--zb-space-2xs);
  font-size: var(--zb-text-sm);
  padding: 0 var(--zb-space-xs);
}
.zb-game-view--bar .zb-game-view__icon svg,
.zb-game-view--sheet .zb-game-view__icon svg {
  width: var(--zb-icon-md);
  height: var(--zb-icon-md);
}
/* 992–1199px：「首页」「发现游戏」「全站 ▾」之后位置不够，状态标识（这里只是文字）只留手柄图标，文字留给读屏；
   退出按钮不变。 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .zb-game-view--bar .zb-game-view__badge {
    padding: 0 var(--zb-space-xs);
  }
  .zb-game-view--bar .zb-game-view__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* —— 情境条：页头下面一行，左边图标方块和说明，右边退出 —— */
.zbui.zb-game-view--strip {
  justify-content: space-between;
  gap: var(--zb-space-sm);
  padding: var(--zb-space-xs) 0;
}
.zb-game-view--strip .zb-game-view__badge {
  height: var(--zb-control-h-sm);
  border: 0;
  background: transparent;
  color: var(--zb-text);
  font-size: var(--zb-text-base);
  padding: 0;
}
.zb-game-view--strip .zb-game-view__icon {
  width: var(--zb-control-h-xs);
  height: var(--zb-control-h-xs);
  border: 1px solid var(--zb-primary-soft-border-faint);
  border-radius: var(--zb-radius-sm);
  background: var(--zb-primary-soft);
}

/* —— 侧滑菜单：说明一行，下面整行的退出按钮 —— */
.zbui.zb-game-view--sheet {
  flex-direction: column;
  align-items: stretch;
  gap: var(--zb-space-sm);
  border-bottom: 1px solid var(--zb-border);
  padding: 0 var(--zb-space-md) var(--zb-space-md);
}
/* 侧滑菜单里按它的尺度放大（下面是 44px 的整行按钮和菜单，24px 的标签显得又小又空）：32px 高、14px 字、16px 图标，
   仍是无边框软底标签，和 PC 页头同一个样子。 */
.zb-game-view--sheet .zb-game-view__badge {
  align-self: flex-start;
  height: var(--zb-control-h-compact);
  gap: var(--zb-space-xs);
  font-size: var(--zb-text-base);
  padding: 0 var(--zb-space-sm);
}
.zb-game-view--sheet .zb-game-view__icon svg {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
}
.zb-game-view--sheet .zb-game-view__exit {
  height: var(--zb-control-h);
  font-size: var(--zb-text-base);
}

/* —— 动效：从非游戏页进入时播放一次，退出时收起 —— */
@media (prefers-reduced-motion: no-preference) {
  [data-zb-game-view="enter"] .zb-game-view__badge {
    animation: zb-game-view-in var(--zb-duration-slow) var(--zb-ease-out) both;
  }
  [data-zb-game-view="enter"] .zb-game-view__icon svg {
    animation: zb-game-view-pop var(--zb-duration-base) var(--zb-ease-spring) calc(var(--zb-duration-fast) / 2) both;
  }
  [data-zb-game-view="enter"] .zb-game-view__exit {
    animation: zb-game-view-in var(--zb-duration-base) var(--zb-ease-out) var(--zb-duration-fast) both;
  }
  [data-zb-game-view="enter"] .zb-game-view--strip > * {
    animation: zb-game-view-drop var(--zb-duration-slow) var(--zb-ease-out) both;
  }
  .zb-game-view.is-leaving .zb-game-view__badge,
  .zb-game-view.is-leaving .zb-game-view__exit {
    animation: zb-game-view-out var(--zb-duration-base) var(--zb-ease-in) both;
  }
}
@keyframes zb-game-view-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
@keyframes zb-game-view-pop {
  from {
    transform: scale(0.6) rotate(-12deg);
  }
}
@keyframes zb-game-view-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes zb-game-view-out {
  to {
    opacity: 0;
    transform: translateX(-6px);
  }
}

@media (forced-colors: active) {
  .zbui .zb-game-view__badge,
  .zbui .zb-game-view__exit {
    border-color: ButtonText;
  }
}