/* ==========================================================
 * 平台详情页（/consoles/:code）专用样式
 *
 * 1) 游戏网格 + 游戏卡样式已统一在 series.css 中维护
 *    （.series-results + .game-grid + .game-result），通过 1:1
 *    复刻 zaixianwan.app 的 2/3/4/5 列响应式网格与卡片布局。
 *
 * 2) 本文件仅保留页面级骨架：标题区、工具条、面包屑等。
 *
 * 3) 顶部 navbar 是 position:fixed（site.css 第 145 行），
 *    这里用 --header-height 给详情区留出顶部呼吸距离，
 *    避免面包屑被 fixed navbar 遮住。
 * ========================================================== */
.console-detail {
    padding-top: 25px;
}

/* 标题区：icon + 名称 */
.console-detail .console-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    color: var(--ui-foreground-strong);
    font-weight: var(--ui-font-weight-strong);
}
.console-icon-container {
    width: 48px;
    height: 48px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.console-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.console-img--placeholder {
    background: var(--ui-hover);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--ui-foreground-muted);
}

/* 工具条：筛选按钮 + 总数（参考 zaixianwan.app /consoles/:code：
 *   外层 flex-wrap 行，column-gap 12 / row-gap 8，与计数在一行内 justify-between） */
.console-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    margin: 4px 0 16px;
    color: var(--ui-foreground);
    font-size: var(--ui-font-size);
}

/* 筛选按钮组：对应参考站 ResultsFilterOptions（tw-flex tw-flex-wrap tw-gap-x-3 tw-gap-y-2）。
 *   内部 .multi-select-filter 自身是 inline-flex + relative，下拉浮层靠自身定位；这里
 *   只负责"按钮彼此之间的间距"。 */
.console-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
}

/* "共计 X 款游戏"右栏：参考 GameCount i18n-t 外层 vertical-align:-0.2em */
.console-toolbar__count {
    vertical-align: -0.2em;
    color: var(--ui-foreground);
}

/* filter trigger 按钮：对应参考站 ui-button--variant-text + multi-select-filter__trigger
 *   参考站 .ui-button--variant-text：
 *     width:auto; height:30px; padding:0 2px;
 *     border-color:transparent; background:transparent; color:var(--ui-foreground)
 *   hover 仅改色（var(--ui-primary-hover)），不加背景 */
.ui-button--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: auto;
    height: 30px;
    padding: 0 2px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--ui-foreground);
    font: inherit;
    font-size: var(--ui-font-size);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.ui-button--text:hover {
    color: var(--ui-primary-hover);
}
.ui-button--text:active {
    color: var(--ui-primary-pressed);
}
.ui-button--text:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
    border-radius: var(--ui-radius);
}

/* 总数：参考 zaixianwan.app GameCount（i18n-t 包一层 span，vertical-align:-0.2em；
 *   ui-number-animation 是 UiNumberAnimation 组件渲染的 count-up span）。
 *   CSS 侧只负责 tabular-nums 防抖动；颜色/字重/CSS 动画都由"是普通数字在原地
 *   跳动"之特性决定，不加额外视觉修饰。 */
.console-toolbar .ui-number-animation {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* /games/:id 详情 */
.game-iframe-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: var(--ui-radius);
    overflow: hidden;
    margin: 16px 0;
}
.game-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 800px) {
    .detail { grid-template-columns: 1fr; }
}

/* ==========================================================
 * 移动端：.main-container 在 ≤992px 被清零 padding（site.css 第 658 行），
 *   导致 .console-detail 内容直接贴边；这里为详情区单独补回左右内边距，
 *   不影响顶部导航 / 页脚等其他共享容器。
 * ========================================================== */
@media (max-width: 768px) {
    .console-detail {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 380px) {
    .console-detail {
        padding-left: 10px;
        padding-right: 10px;
    }
}