/* ========================================
   DREAM Exchange - モバイル最適化CSS
   スマートフォン・タブレット完全対応
   ======================================== */

/* ========================================
   グローバル - モバイル最適化
   ======================================== */

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
}

/* ========================================
   ナビゲーション - モバイル
   ======================================== */

@media (max-width: 968px) {
    .nav-links {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 280px;
        height: calc(100vh - 80px);
        background: rgba(10, 14, 39, 0.98);
        backdrop-filter: blur(20px);
        border-right: 1px solid var(--dark-border);
        flex-direction: column;
        padding: var(--spacing-lg);
        transition: left 0.3s ease;
        z-index: 999;
        overflow-y: auto;
    }
    
    .nav-links.active {
        left: 0;
    }
    
    .nav-link {
        width: 100%;
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-xs);
        border-radius: var(--radius-md);
    }
    
    .nav-link::before {
        display: none;
    }
    
    .nav-link.active,
    .nav-link:hover {
        background: var(--primary-blue-100);
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
}

@media (max-width: 768px) {
    .navbar {
        height: 70px;
    }
    
    .nav-content {
        height: 70px;
    }
    
    .logo-text {
        font-size: 20px;
    }
    
    .logo-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .nav-actions .btn {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .language-switcher {
        margin-right: 0;
    }
    
    .lang-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .nav-actions .btn-outline {
        display: none;
    }
    
    .nav-actions .btn-primary {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .language-switcher {
        display: none;
    }
}

/* ========================================
   ヒーローセクション - モバイル
   ======================================== */

@media (max-width: 968px) {
    .hero {
        min-height: auto;
        padding: 100px 0 var(--spacing-2xl);
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-description {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .hero-badge {
        font-size: 12px;
        padding: 6px var(--spacing-sm);
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-description {
        font-size: 15px;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }
    
    .stat-divider {
        display: none;
    }
    
    .stat-item {
        width: 100%;
        text-align: center;
    }
    
    .scroll-indicator {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 24px;
    }
    
    .hero-description br {
        display: none;
    }
    
    .btn-large {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ========================================
   カウントダウン - モバイル
   ======================================== */

@media (max-width: 768px) {
    .launch-countdown {
        gap: var(--spacing-sm);
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .countdown-item {
        min-width: calc(50% - 8px);
        padding: var(--spacing-md);
    }
    
    .countdown-value {
        font-size: 36px;
    }
    
    .countdown-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .countdown-item {
        padding: var(--spacing-sm);
    }
    
    .countdown-value {
        font-size: 28px;
    }
}

/* ========================================
   セクション - モバイル
   ======================================== */

@media (max-width: 768px) {
    section {
        padding: var(--spacing-xl) 0;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-description {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    section {
        padding: var(--spacing-lg) 0;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .section-description {
        font-size: 15px;
    }
}

/* ========================================
   グリッドレイアウト - モバイル
   ======================================== */

@media (max-width: 968px) {
    .about-content,
    .merger-content,
    .pre-register-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .token-content {
        grid-template-columns: 1fr;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .steps-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .dashboard-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   テーブル - モバイル
   ======================================== */

@media (max-width: 968px) {
    .market-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .market-table {
        min-width: 800px;
    }
    
    .market-table th,
    .market-table td {
        padding: var(--spacing-sm);
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .market-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-sm);
    }
    
    .filter-btn {
        flex-shrink: 0;
        padding: 6px var(--spacing-md);
        font-size: 12px;
    }
}

/* ========================================
   カード - モバイル
   ======================================== */

@media (max-width: 768px) {
    .feature-card,
    .dashboard-card,
    .step-card {
        padding: var(--spacing-lg);
    }
    
    .feature-icon,
    .step-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }
    
    .feature-title,
    .step-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .feature-card,
    .dashboard-card,
    .step-card {
        padding: var(--spacing-md);
    }
}

/* ========================================
   フォーム - モバイル
   ======================================== */

@media (max-width: 768px) {
    .pre-register-form-container,
    .auth-card {
        padding: var(--spacing-lg);
    }
    
    .form-input {
        font-size: 16px; /* iOS zoom prevention */
    }
}

@media (max-width: 480px) {
    .pre-register-form-container,
    .auth-card {
        padding: var(--spacing-md);
    }
    
    .form-title,
    .auth-card-title {
        font-size: 20px;
    }
}

/* ========================================
   モーダル - モバイル
   ======================================== */

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 90vh;
        margin: var(--spacing-md);
    }
    
    .modal-header {
        padding: var(--spacing-md);
    }
    
    .modal-body,
    .settings-content {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 100%;
        max-height: 95vh;
        border-radius: var(--radius-lg);
        margin: var(--spacing-sm);
    }
}

/* ========================================
   チャート - モバイル
   ======================================== */

@media (max-width: 768px) {
    .chart-wrapper {
        height: 300px;
    }
    
    .chart-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .chart-timeframes {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .timeframe-btn {
        padding: 4px 10px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .chart-wrapper {
        height: 250px;
    }
    
    .price-value {
        font-size: 24px;
    }
}

/* ========================================
   トレードページ - モバイル
   ======================================== */

@media (max-width: 1200px) {
    .trade-grid {
        grid-template-columns: 1fr 350px;
    }
    
    .market-data-section {
        display: none;
    }
}

@media (max-width: 968px) {
    .trade-grid {
        grid-template-columns: 1fr;
    }
    
    .trade-panel {
        order: -1;
    }
}

@media (max-width: 768px) {
    .trade-main {
        padding-top: 70px;
    }
    
    .pair-selector {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .pair-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    .trade-form {
        padding: var(--spacing-sm);
    }
    
    .wallet-info {
        display: none;
    }
}

/* ========================================
   ダッシュボード - モバイル
   ======================================== */

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
        align-items: center;
    }
    
    .user-profile {
        flex-direction: column;
        align-items: center;
    }
    
    .user-avatar {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
    
    .dashboard-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .dashboard-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .balance-value {
        font-size: 28px;
    }
    
    .portfolio-list {
        font-size: 13px;
    }
    
    .transactions-list {
        font-size: 13px;
    }
}

/* ========================================
   認証ページ - モバイル
   ======================================== */

@media (max-width: 968px) {
    .auth-container {
        grid-template-columns: 1fr;
    }
    
    .auth-info {
        order: 2;
        padding: var(--spacing-md) 0;
    }
    
    .auth-form-container {
        order: 1;
    }
}

@media (max-width: 768px) {
    .auth-section {
        min-height: auto;
        padding: 100px 0 var(--spacing-xl);
    }
    
    .wallet-btn {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .wallet-icon {
        width: 40px;
        height: 40px;
    }
    
    .wallet-name {
        font-size: 14px;
    }
    
    .wallet-desc {
        font-size: 12px;
    }
}

/* ========================================
   フッター - モバイル
   ======================================== */

@media (max-width: 968px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .footer-section:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .footer-badges {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========================================
   ユーティリティ - モバイル
   ======================================== */

/* タッチ操作用のタップエリア拡大 */
@media (hover: none) {
    .btn,
    .wallet-btn,
    .filter-btn,
    .nav-link,
    .trade-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* iOS Safari対策 */
@supports (-webkit-touch-callout: none) {
    .hero {
        min-height: -webkit-fill-available;
    }
    
    .auth-section {
        min-height: -webkit-fill-available;
    }
}

/* スクロールバーのカスタマイズ（モバイル） */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* モバイル用アニメーション軽減 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ランドスケープモード対応 */
@media (max-width: 968px) and (orientation: landscape) {
    .hero {
        padding: var(--spacing-xl) 0;
    }
    
    .hero-content {
        padding: var(--spacing-lg) 0;
    }
    
    .launch-countdown {
        margin: var(--spacing-md) 0;
    }
}

/* 横向き小型デバイス（スマートフォン） */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar {
        height: 60px;
    }
    
    .nav-content {
        height: 60px;
    }
    
    .hero,
    .auth-section {
        min-height: auto;
    }
}

/* 超小型デバイス */
@media (max-width: 360px) {
    html {
        font-size: 13px;
    }
    
    .hero-title {
        font-size: 22px;
    }
    
    .section-title {
        font-size: 22px;
    }
    
    .btn-large {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .countdown-item {
        padding: var(--spacing-xs);
    }
    
    .countdown-value {
        font-size: 24px;
    }
}

/* タブレット専用調整 */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding: 0 var(--spacing-lg);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .steps-container {
        grid-template-columns: 1fr;
    }
}

/* 大画面タブレット・小型デスクトップ */
@media (min-width: 1025px) and (max-width: 1280px) {
    .container {
        max-width: 1024px;
    }
}