/**
 * ECHO 铸造流程 - 移动端适配样式
 * Mobile Adapter for ECHO Minting Flow
 * 
 * 东方美学风格移动端适配
 * 断点设计：XL(1440px+) / LG(1024px) / MD(768px) / SM(480px) / XS(360px)
 */

/* ============================================
   0. CSS 变量定义
   ============================================ */
:root {
    /* 罗盘尺寸变量 */
    --compass-size-xl: 480px;
    --compass-size-lg: 400px;
    --compass-size-md: 320px;
    --compass-size-sm: 280px;
    --compass-size-xs: 260px;
    
    /* 印章尺寸变量 */
    --seal-size-xl: 72px;
    --seal-size-lg: 64px;
    --seal-size-md: 56px;
    --seal-size-sm: 48px;
    --seal-size-xs: 44px;
    
    /* 颜色变量 - 东方美学 */
    --color-primary: #8B4513;
    --color-secondary: #D4AF37;
    --color-bg-dark: #1a1a1a;
    --color-bg-panel: rgba(30, 30, 30, 0.95);
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #b0b0b0;
    --color-border: rgba(212, 175, 55, 0.3);
    
    /* 动画变量 */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   1. 基础移动端适配
   ============================================ */

/* 确保触摸区域不小于 44px */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* 禁止文本选择，提升触摸体验 */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* 平滑滚动 */
.smooth-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ============================================
   2. 罗盘移动端适配
   ============================================ */

/* 默认大屏 (1440px+) */
.compass-container {
    width: var(--compass-size-xl);
    height: var(--compass-size-xl);
    position: relative;
    margin: 0 auto;
    transition: var(--transition-smooth);
}

.seal {
    width: var(--seal-size-xl);
    height: var(--seal-size-xl);
    position: absolute;
    transition: var(--transition-smooth);
    cursor: pointer;
    /* 确保触控区域 */
    min-width: 44px;
    min-height: 44px;
}

.seal-symbol {
    font-size: 24px;
    transition: var(--transition-smooth);
}

.seal-name {
    font-size: 14px;
    transition: var(--transition-smooth);
}

.seal-trigram {
    font-size: 18px;
    transition: var(--transition-smooth);
}

/* LG 断点 (1024px) */
@media (max-width: 1440px) {
    .compass-container {
        width: var(--compass-size-lg);
        height: var(--compass-size-lg);
    }
    
    .seal {
        width: var(--seal-size-lg);
        height: var(--seal-size-lg);
    }
    
    .seal-symbol { font-size: 22px; }
    .seal-name { font-size: 12px; }
    .seal-trigram { font-size: 16px; }
}

/* MD 断点 (768px) - 平板端 */
@media (max-width: 1024px) {
    .compass-container {
        width: var(--compass-size-md);
        height: var(--compass-size-md);
    }
    
    .seal {
        width: var(--seal-size-md);
        height: var(--seal-size-md);
    }
    
    .seal-symbol { font-size: 20px; }
    .seal-name { font-size: 11px; }
    .seal-trigram { font-size: 14px; }
}

/* SM 断点 (480px) - 手机端 */
@media (max-width: 768px) {
    .compass-container {
        width: var(--compass-size-sm);
        height: var(--compass-size-sm);
    }
    
    .seal {
        width: var(--seal-size-sm);
        height: var(--seal-size-sm);
    }
    
    .seal-symbol { font-size: 18px; }
    .seal-name { font-size: 10px; }
    .seal-trigram { font-size: 12px; }
}

/* XS 断点 (360px) - 超小屏 */
@media (max-width: 480px) {
    .compass-container {
        width: var(--compass-size-xs);
        height: var(--compass-size-xs);
    }
    
    .seal {
        width: var(--seal-size-xs);
        height: var(--seal-size-xs);
    }
    
    .seal-symbol { font-size: 16px; }
    
    /* 隐藏次要文字，只显示符号 */
    .seal-name,
    .seal-trigram {
        display: none;
    }
}

/* ============================================
   3. 配置面板移动端适配
   ============================================ */

/* 桌面端配置面板 */
.config-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    transition: var(--transition-smooth);
}

/* 平板端（768px-1024px）- 配置面板显示在罗盘下方 */
@media (max-width: 1024px) and (min-width: 768px) {
    .config-panel {
        max-width: 100%;
        width: calc(100% - 48px);
        margin: 24px auto 0;
    }
    
    .config-panel__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* 手机端（<768px）- 底部抽屉式 */
@media (max-width: 768px) {
    .config-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-width: none;
        height: 60vh;
        min-height: 400px;
        border-radius: 16px 16px 0 0;
        border: none;
        border-top: 1px solid var(--color-border);
        padding: 20px 16px;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        
        /* iPhone 安全区域支持 */
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    
    .config-panel.is-visible {
        transform: translateY(0);
    }
    
    /* 抽屉把手 */
    .config-panel__handle {
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        margin: 0 auto 16px;
        cursor: grab;
    }
    
    .config-panel__handle:active {
        cursor: grabbing;
    }
    
    /* 遮罩层 */
    .config-panel__overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
    }
    
    .config-panel__overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }
    
    /* 配置面板内容滚动 */
    .config-panel__content {
        height: calc(100% - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   4. FAB 移动端适配
   ============================================ */

.fab-mint {
    position: fixed;
    width: 56px;
    height: 56px;
    right: 4vw;
    bottom: calc(4vh + env(safe-area-inset-bottom));
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--color-secondary);
    color: var(--color-text-primary);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: var(--transition-smooth);
    z-index: 100;
    
    /* 确保触控区域 */
    min-width: 44px;
    min-height: 44px;
}

.fab-mint:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.fab-mint:active {
    transform: scale(0.95);
}

/* 大屏 FAB */
@media (min-width: 768px) {
    .fab-mint {
        width: 64px;
        height: 64px;
        right: 5vw;
        bottom: 5vh;
        font-size: 28px;
    }
}

/* ============================================
   5. 全屏弹窗移动端适配
   ============================================ */

.mint-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mint-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.mint-modal__container {
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mint-modal.is-open .mint-modal__container {
    transform: scale(1);
}

/* 小屏优化 */
@media (max-width: 768px) {
    .mint-modal__container {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        border: none;
    }
    
    .realm__title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .realm__subtitle {
        font-size: 0.875rem;
    }
    
    .realm__content {
        padding: 16px;
    }
    
    /* 四境切换指示器 */
    .realm__indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .realm__indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: var(--transition-smooth);
    }
    
    .realm__indicator.is-active {
        background: var(--color-secondary);
        transform: scale(1.2);
    }
}

/* ============================================
   6. 四境切换区域移动端优化
   ============================================ */

.realm-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.realm-slider {
    display: flex;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.realm-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

/* 滑动提示 */
.swipe-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    color: var(--color-text-secondary);
    font-size: 12px;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .swipe-hint {
        display: flex;
    }
    
    .swipe-hint__icon {
        animation: swipeHint 1.5s ease-in-out infinite;
    }
}

@keyframes swipeHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

/* ============================================
   7. 按钮和表单元素移动端适配
   ============================================ */

/* 按钮基础样式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    
    /* 确保触控区域 */
    min-height: 44px;
    min-width: 44px;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-secondary);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

/* 移动端按钮 */
@media (max-width: 768px) {
    .btn {
        padding: 14px 28px;
        font-size: 15px;
    }
    
    .btn-full {
        width: 100%;
    }
}

/* 表单输入 */
.input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--color-text-primary);
    font-size: 16px; /* 防止 iOS 缩放 */
    transition: var(--transition-smooth);
    
    /* 确保触控区域 */
    min-height: 44px;
}

.input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* ============================================
   8. iPhone 安全区域支持
   ============================================ */

@supports (padding: max(0px)) {
    .safe-area-top {
        padding-top: max(16px, env(safe-area-inset-top));
    }
    
    .safe-area-bottom {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    
    .safe-area-left {
        padding-left: max(16px, env(safe-area-inset-left));
    }
    
    .safe-area-right {
        padding-right: max(16px, env(safe-area-inset-right));
    }
    
    /* 底部固定元素 */
    .fixed-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================
   9. 动画性能优化
   ============================================ */

/* 启用 GPU 加速 */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* 60fps 动画 */
.smooth-animation {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 减少动画（尊重用户偏好） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   10. 横屏模式适配
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .compass-container {
        width: 200px;
        height: 200px;
    }
    
    .seal {
        width: 40px;
        height: 40px;
    }
    
    .seal-symbol { font-size: 14px; }
    .seal-name { display: none; }
    .seal-trigram { font-size: 10px; }
    
    .config-panel {
        height: 80vh;
    }
}

/* ============================================
   11. 东方美学细节优化
   ============================================ */

/* 印章效果 */
.seal {
    background: radial-gradient(circle, rgba(139, 69, 19, 0.9) 0%, rgba(101, 42, 14, 0.95) 100%);
    border: 2px solid var(--color-secondary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

.seal::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 6px;
    pointer-events: none;
}

/* 罗盘外圈 */
.compass-container::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    opacity: 0.5;
}

/* 内圈装饰 */
.compass-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 20%;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    opacity: 0.3;
}