/* Layout - 崩坏:星穹铁道 原生布局 (Authentic Layout) */

/* 全局设置 */
body {
    background: var(--bg-primary);
    color: var(--color-text);
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* 禁止滚动，全屏应用体验 */
    user-select: none;
    /* 禁止选中文本 */
}

/* Canvas 背景 */
#starry-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
}

/* 主容器 - 全屏 */
.app-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
}

/* 顶部栏 (Top Bar) */
.top-bar {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-xl);
    z-index: var(--z-ui);
}

.top-left {
    display: flex;
    gap: var(--spacing-md);
}

.top-right {
    display: flex;
    gap: var(--spacing-lg);
}

/* 资源显示 (Resource Badge) */
.resource-badge {
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-full);
    padding: 4px 16px 4px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.resource-icon {
    width: 24px;
    height: 24px;
    background: #ccc;
    /* 占位符 */
    border-radius: 50%;
}

.resource-amount {
    font-size: var(--font-sm);
    font-weight: 500;
}

/* 右侧导航栏 (Side Bar) */
.side-bar {
    position: absolute;
    right: var(--spacing-xl);
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: var(--z-ui);
}

.side-btn {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-base);
    color: var(--color-text);
    position: relative;
}

.side-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.side-btn-tooltip {
    position: absolute;
    right: 60px;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.side-btn:hover .side-btn-tooltip {
    opacity: 1;
}

/* 底部区域 (Bottom Area) */
.bottom-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    /* 预留给卡池选择和按钮 */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: var(--spacing-lg) var(--spacing-xl);
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: var(--z-ui);
}

/* 卡池选择栏 (Banner Selection) */
.banner-selection {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.banner-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition-base);
}

.banner-tab.active {
    opacity: 1;
}

.banner-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    margin-bottom: 4px;
    border: 2px solid transparent;
}

.banner-tab.active .banner-icon {
    background: #fff;
    border-color: var(--color-gold);
}

.banner-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
}

/* 操作区 (Action Area) */
.action-area {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-end;
    margin-bottom: var(--spacing-md);
}

/* 主内容展示区 (Main Stage) */
.main-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* 让点击穿透到背景 */
}

/* 页面切换容器 */
.page-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.page {
    display: none;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.page.active {
    display: block;
}

/* 历史记录/详情页模态框样式 */
.modal-page {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    padding: var(--spacing-2xl);
    overflow-y: auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .side-bar {
        top: 60px;
        right: var(--spacing-md);
    }

    .bottom-area {
        flex-direction: column-reverse;
        align-items: center;
        height: auto;
        gap: var(--spacing-md);
    }

    .action-area {
        width: 100%;
        justify-content: center;
    }

    .banner-selection {
        width: 100%;
        justify-content: center;
        overflow-x: auto;
    }
}