/**
 * 移动端专用样式表 - 竖屏优化版
 * 为手机用户提供优化的UI布局
 * 不会影响桌面端用户
 */

/* ==================== 基础设置 ==================== */

/* 移动端根元素字体大小调整 - 使用vw单位实现响应式 */
.mobile-device {
    font-size: calc(11px + 0.4vw);
}

/* 移动端禁用双击缩放，但允许pinch缩放 */
.mobile-device * {
    touch-action: manipulation;
}

/* 移动端滚动优化 */
.mobile-device {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

/* ==================== 视口适配 ==================== */

/* 竖屏模式 - 主要优化目标 */
.orientation-portrait.mobile-device {
    --header-height: 55px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 横屏模式（手机横屏） */
.orientation-landscape.mobile-device {
    --header-height: 45px;
}

/* ==================== 横屏提示 - 已禁用 ==================== */
/* 默认隐藏横屏提示，不再强制用户旋转 */
.landscape-hint {
    display: none !important;
}

/* ==================== 顶部导航栏 - 移动端适配 ==================== */

.mobile-device .lobby-header-redesign {
    height: auto;
    min-height: 50px;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.mobile-device .lobby-header-redesign .avatar-wrapper {
    width: 40px;
    height: 40px;
}

.mobile-device .lobby-header-redesign .avatar-wrapper img {
    width: 40px;
    height: 40px;
}

.mobile-device .lobby-header-redesign .nickname-display {
    font-size: 13px;
    max-width: 100px;
}

.mobile-device .lobby-header-redesign .nickname-display #player-nickname-text {
    font-size: 13px;
}

.mobile-device .lobby-header-redesign .settings-button-wrapper button {
    font-size: 18px;
    padding: 4px;
}

/* 思脉显示 - 移动端缩小 */
.mobile-device .lobby-header-redesign .simai-display {
    padding: 3px 8px;
    gap: 4px;
}

.mobile-device .lobby-header-redesign .simai-display .simai-icon {
    width: 18px;
    height: 18px;
}

.mobile-device .lobby-header-redesign .simai-display .simai-amount {
    font-size: 13px;
    min-width: 35px;
}

.mobile-device .lobby-header-redesign .simai-display .simai-name {
    font-size: 10px;
}

/* 特别鸣谢按钮 - 移动端缩小 */
.mobile-device .lobby-header-redesign .sponsors-button-wrapper button {
    font-size: 11px;
    padding: 4px 8px;
}

/* ==================== 主内容区域 - 移动端适配 ==================== */

.mobile-device .lobby-content {
    padding: 8px;
    gap: 10px;
}

/* ==================== 调色板卡片 - 竖屏优化 ==================== */

/* 竖屏模式 - 单列紧凑布局 */
.mobile-device.orientation-portrait .palette-container {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
    width: 100%;
}

.mobile-device.orientation-portrait .palette-card {
    width: 92%;
    max-width: 320px;
    margin-bottom: 5px;
}

.mobile-device.orientation-portrait .palette-card .container {
    margin-top: 5px !important;
    transform: scale(0.75);
}

.mobile-device.orientation-portrait .palette-card .redemption-content {
    padding: 10px 15px;
}

.mobile-device.orientation-portrait .palette-card .redemption-text {
    font-size: 14px !important;
}

.mobile-device.orientation-portrait .palette-card .redemption-arrow {
    font-size: 10px !important;
}

/* 横屏模式 - 缩小但保持横向 */
.mobile-device.orientation-landscape .palette-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 5px;
}

.mobile-device.orientation-landscape .palette-card {
    width: 30%;
    min-width: 120px;
}

.mobile-device.orientation-landscape .palette-card .container {
    transform: scale(0.65);
}

.mobile-device.orientation-landscape .palette-card .redemption-text {
    font-size: 13px !important;
}

/* ==================== 3D堆叠按钮 - 移动端适配 ==================== */

/* 移动端按钮不使用fixed定位，避免覆盖其他内容 */
.mobile-device .stacked-buttons-container {
    position: relative;
    width: 100%;
    margin: 15px 0;
    z-index: 10;
}

/* 竖屏模式 - 按钮放在救赎之路上方 */
.mobile-device.orientation-portrait .stacked-buttons-container {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 20px auto 25px auto;
    width: 95%;
    order: -1;
}

/* 调整lobby-content的flex布局，确保按钮在救赎之路上方 */
.mobile-device.orientation-portrait .lobby-content {
    display: flex;
    flex-direction: column;
}

/* 让按钮容器在palette-container之前 */
.mobile-device.orientation-portrait .lobby-content .stacked-buttons-container {
    order: -2;
}

.mobile-device.orientation-portrait .lobby-content .palette-container {
    order: -1;
}

/* 按钮容器 - 增大间距防止重叠 */
.mobile-device .stackedForm .wrapper {
    flex-direction: row;
    gap: 12px !important; /* 增大间距 */
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 5px;
}

/* 单个按钮样式 - 取消3D堆叠效果 */
.mobile-device .stackedForm .wrapper button {
    --i: 0 !important;
    --base-transform: none !important;
    transform: none !important;
    margin: 5px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    min-height: 36px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 竖屏模式按钮 */
.mobile-device.orientation-portrait .stackedForm .wrapper button {
    padding: 8px 12px !important;
    font-size: 11px !important;
    margin: 6px !important;
}

/* 竖屏模式按钮更大更易点击 */
.mobile-device.orientation-portrait .stackedForm .wrapper button {
    padding: 14px 20px !important;
    font-size: 13px !important;
    min-height: 48px !important;
    min-width: 90px !important;
    margin: 6px !important;
}

/* 取消所有3D堆叠效果 */
.mobile-device .stackedForm button::before,
.mobile-device .stackedForm button::after {
    display: none !important;
}

/* 按钮悬停效果简化 */
.mobile-device .stackedForm button:hover,
.mobile-device .stackedForm button:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
}

.mobile-device.orientation-portrait .stackedForm .wrapper button {
    padding: 8px 12px;
    font-size: 11px;
}

/* ==================== 模态框 - 移动端适配 ==================== */

.mobile-device .modal-content {
    width: 92%;
    max-width: 100%;
    max-height: 80vh;
    padding: 12px;
    margin: 8px;
    border-radius: 8px;
}

.mobile-device .modal-content h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

.mobile-device .close {
    font-size: 20px;
}

/* ==================== 按钮 - 移动端触摸优化 ==================== */

.mobile-device .btn-primary,
.mobile-device .btn-secondary {
    padding: 10px 16px;
    font-size: 12px;
    min-height: 40px;
    min-width: 40px;
}

.mobile-device .btn-large {
    padding: 10px 24px;
    font-size: 13px;
}

.mobile-device .btn-small {
    padding: 6px 12px;
    font-size: 11px;
}

/* ==================== 房间列表 - 移动端适配 ==================== */

.mobile-device .room-list-container {
    max-height: 55vh;
    overflow-y: auto;
}

.mobile-device .room-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-device .room-item {
    padding: 10px;
    flex-direction: column;
    gap: 6px;
    border-radius: 6px;
}

.mobile-device .room-item .room-info {
    width: 100%;
}

.mobile-device .room-item .room-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
}

.mobile-device .room-item .room-actions button {
    padding: 6px 12px;
    font-size: 11px;
    min-height: 36px;
}

/* ==================== 游戏界面 - 竖屏优化 ==================== */

/* 游戏头部 */
.mobile-device .game-header {
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.mobile-device .game-header .team-info {
    width: 100%;
    justify-content: center;
    font-size: 12px;
}

.mobile-device .game-header .turn-info {
    text-align: center;
}

.mobile-device .game-header .turn-info p {
    font-size: 11px !important;
    margin: 3px 0;
}

/* 游戏面板 - 竖屏模式单列紧凑布局 */
.mobile-device.orientation-portrait .game-board {
    flex-direction: column;
    gap: 8px;
    padding: 5px;
}

.mobile-device.orientation-portrait .game-board .team-panel {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    gap: 5px;
}

.mobile-device.orientation-portrait .game-board .team-panel.red-team,
.mobile-device.orientation-portrait .game-board .team-panel.blue-team {
    padding: 5px;
}

.mobile-device.orientation-portrait .game-board .game-center {
    order: -1;
    width: 100%;
    padding: 5px;
}

/* 游戏面板 - 横屏模式 */
.mobile-device.orientation-landscape .game-board {
    flex-direction: row;
    gap: 5px;
}

.mobile-device.orientation-landscape .game-board .team-panel {
    width: 22%;
    flex-direction: column;
}

.mobile-device.orientation-landscape .game-board .game-center {
    width: 56%;
}

/* 玩家卡片 */
.mobile-device .player-card {
    transform: scale(0.7);
    max-width: 90%;
}

.mobile-device.orientation-portrait .player-card {
    transform: scale(0.6);
}

/* 游戏中心区域 */
.mobile-device .game-center .event-log {
    height: 60px;
    font-size: 10px;
    padding: 5px;
}

.mobile-device.orientation-portrait .game-center .event-log {
    height: 50px;
    font-size: 9px;
}

/* 游戏操作按钮 */
.mobile-device .game-actions {
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    padding: 5px;
}

.mobile-device .game-actions button {
    flex: 0 0 auto;
    min-width: 70px;
    max-width: 100px;
    padding: 8px 10px;
    font-size: 10px;
}

/* 手牌区域 */
.mobile-device .hand-area {
    padding: 8px;
}

.mobile-device .hand-area h3 {
    font-size: 12px;
    margin-bottom: 6px;
}

.mobile-device .card-container {
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.mobile-device .card-container .card {
    min-width: 50px;
    max-width: 65px;
    transform: scale(0.75);
}

.mobile-device.orientation-portrait .card-container .card {
    min-width: 45px;
    max-width: 55px;
    transform: scale(0.65);
}

/* ==================== 房间界面 - 移动端适配 ==================== */

.mobile-device .room-header {
    padding: 12px;
}

.mobile-device .room-header h2 {
    font-size: 16px;
}

/* 玩家槽位 - 竖屏改为2x2紧凑网格 */
.mobile-device.orientation-portrait .player-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 5px;
}

.mobile-device.orientation-portrait .player-slot {
    aspect-ratio: 1;
    padding: 8px;
}

/* 横屏保持横向排列 */
.mobile-device.orientation-landscape .player-slots {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.mobile-device.orientation-landscape .player-slot {
    width: 45%;
}

/* ==================== 商店界面 - 全面移动端适配 ==================== */

/* 商店头部 - 确保在最上层 */
.mobile-device .shop-header {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 15px;
    position: relative;
    z-index: 150;
    background: rgba(10, 10, 10, 0.95);
}

.mobile-device .shop-header .back-button {
    order: 1;
}

.mobile-device .shop-header .shop-title {
    order: 2;
    flex: 1;
    text-align: center;
}

.mobile-device .shop-header .shop-title h1 {
    font-size: 14px;
    margin: 0;
}

.mobile-device .shop-header .shop-title .shop-subtitle {
    font-size: 10px;
    margin: 2px 0 0 0;
}

.mobile-device .shop-header .shop-currency {
    order: 3;
    padding: 4px 10px;
    gap: 4px;
}

.mobile-device .shop-header .shop-currency .currency-amount {
    font-size: 14px;
}

.mobile-device .shop-header .inventory-button {
    order: 4;
}

/* 商店视图 - 确保正确布局 */
.mobile-device #shop-view {
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 100vh;
}

/* 商店3D场景 - 调整高度 */
.mobile-device #shop-scene-container {
    height: 45vh !important;
    max-height: 300px !important;
    position: relative;
    z-index: 1;
}

.mobile-device #shop-canvas {
    max-height: 300px !important;
}

/* 商品详情面板 - 移动端优化 */
.mobile-device .product-detail-panel {
    z-index: 400 !important; /* 确保在最上层 */
}

.mobile-device .product-detail-panel .panel-content {
    width: 95%;
    max-height: 70vh;
    overflow-y: auto;
    padding: 15px;
    gap: 10px;
    border-radius: 12px;
}

.mobile-device.orientation-portrait .product-detail-panel .panel-content {
    width: 95%;
    max-height: 75vh;
    padding: 12px;
}

/* 商品预览图 */
.mobile-device .product-detail-panel .product-preview {
    max-width: 100px;
    margin: 0 auto;
}

.mobile-device.orientation-portrait .product-detail-panel .product-preview {
    max-width: 80px;
}

/* 商品信息 */
.mobile-device .product-detail-panel .product-info {
    gap: 8px;
}

.mobile-device .product-detail-panel .product-name {
    font-size: 14px;
    margin: 0;
}

.mobile-device .product-detail-panel .product-category {
    font-size: 11px;
}

.mobile-device .product-detail-panel .product-description {
    font-size: 10px;
    line-height: 1.4;
    max-height: 60px;
    overflow-y: auto;
}

/* 商品价格 */
.mobile-device .product-detail-panel .product-price {
    gap: 5px;
}

.mobile-device .product-detail-panel .product-price .price-amount {
    font-size: 16px;
}

/* 商品操作按钮 */
.mobile-device .product-detail-panel .product-actions {
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
}

.mobile-device .product-detail-panel .btn-purchase,
.mobile-device .product-detail-panel .btn-cancel {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    min-height: 40px;
}

/* 已拥有徽章 */
.mobile-device .product-detail-panel .product-owned-badge {
    font-size: 11px;
    padding: 4px 8px;
}

/* 商店分类选择器 - 位置调整 */
.mobile-device .shop-category-selector,
.mobile-device .dna-category-nav {
    position: relative;
    z-index: 120;
    padding: 8px;
    gap: 6px;
    background: rgba(10, 10, 10, 0.9);
    margin: 5px 0;
}

.mobile-device .category-btn,
.mobile-device .dna-nav-btn {
    padding: 6px 10px;
    font-size: 10px;
    min-height: 32px;
}

/* 商品导航栏 */
.mobile-device .product-nav-bar {
    padding: 8px 10px;
    gap: 10px;
}

.mobile-device .product-nav-btn {
    width: 32px;
    height: 32px;
}

.mobile-device .product-nav-text {
    font-size: 11px;
}

/* 返回按钮 */
.mobile-device .back-button {
    padding: 6px 10px;
    font-size: 11px;
}

.mobile-device .back-button .back-icon {
    font-size: 14px;
}

/* 背包按钮 */
.mobile-device .inventory-button {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.mobile-device .inventory-count {
    font-size: 9px;
    width: 14px;
    height: 14px;
}

/* 移动端加载提示 */
.mobile-device .shop-loading {
    padding: 15px;
}

.mobile-device .shop-loading .loading-text {
    font-size: 12px;
}

.mobile-device .shop-loading .loading-progress {
    width: 80%;
    height: 4px;
}

/* Toast提示 - 商店 */
.mobile-device .toast {
    z-index: 500 !important;
}

/* 禁用移动端横向滚动 */
.mobile-device {
    overflow-x: hidden;
}

/* 移动端输入框优化 */
.mobile-device input,
.mobile-device textarea {
    font-size: 16px; /* 防止iOS缩放 */
    padding: 8px;
}

/* 移动端选中文字样式 */
.mobile-device ::selection {
    background-color: rgba(212, 175, 55, 0.3);
    color: inherit;
}

/* 移动端滚动条样式 */
.mobile-device ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.mobile-device ::-webkit-scrollbar-thumb {
    border-radius: 2px;
}

/* iPhone X及以上机型安全区域适配 */
@supports (padding: max(0px)) {
    .mobile-device .lobby-header-redesign {
        padding-top: max(8px, env(safe-area-inset-top));
    }
    
    .mobile-device footer {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }
}

/* ==================== 响应式字体大小 ==================== */

@media screen and (max-width: 360px) {
    .mobile-device {
        font-size: calc(10px + 0.3vw);
    }
    
    .mobile-device .lobby-header-redesign {
        min-height: 45px;
    }
    
    .mobile-device.orientation-portrait .palette-card {
        width: 95%;
    }
    
    .mobile-device.orientation-portrait .palette-card .container {
        transform: scale(0.65);
    }
}

/* 横屏提示 - 已完全禁用 */
.landscape-hint,
.landscape-hint-icon,
.landscape-hint-text,
.landscape-hint-subtext {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 隐藏任何可能的横屏提示 */
#landscape-hint {
    display: none !important;
}