/**
 * モバイル版キャラクターページ改善CSS + 最適化
 * 
 * @package サンダイルの世界
 */

/* ハードウェアアクセラレーションの最適化（一時的に無効化） */
/*
.character-image,
.image-container,
.character-detail,
.mobile-character-overlay {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
*/

/* モバイル版でのキャラクターページ横幅拡大 */
@media (max-width: 768px) {
  /* キャラクター紹介ページ（page-character.php）の調整 */
  .content-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    padding: 0 0.5rem !important;
  }

  /* サイドバーをモバイルでは非表示（固定ボタンに置き換え） */
  .content-container .sidebar {
    display: none;
  }

  /* メインコンテンツの横幅を最大限活用 */
  .content-container .main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* キャラクター詳細部分の横幅拡大 */
  .character-detail {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 0.5rem !important;
    margin: 0 !important;
  }

  /* キャラクターヘッダー部分 */
  .character-header {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    gap: 1rem;
  }

  /* キャラクター画像部分 - より確実な設定 + 最適化 */
  .character-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .image-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 350px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background-color: #f0f0f0;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    /* 最適化を一時的に無効化 */
    /* contain: layout style paint; */
    /* isolation: isolate; */
    /* transform: translate3d(0, 0, 0); */
    /* aspect-ratio: 8 / 7; */
    /* モバイル向けローディングアニメーション */
    background-image: 
      linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent),
      linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    animation: loading-shimmer 1.5s linear infinite;
  }

  /* ローディングアニメーション */
  @keyframes loading-shimmer {
    0% { background-position: -30px 0, -15px 15px; }
    100% { background-position: 30px 0, 45px 15px; }
  }

  /* 画像が読み込まれたらアニメーションを停止 */
  .image-container.loaded {
    animation: none;
    background-image: none;
  }

  .character-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    min-width: 100% !important;
    min-height: 100% !important;
    /* 最適化を一時的に無効化 */
    /* image-rendering: -webkit-optimize-contrast; */
    /* image-rendering: crisp-edges; */
    /* contain: paint; */
    /* loading: lazy; */
    /* decoding: async; */
  }

  .character-image.active {
    opacity: 1 !important;
    z-index: 2 !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  .character-image:not(.active) {
    opacity: 0 !important;
    z-index: 1 !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* 画像がない場合のスタイル */
  .no-image {
    width: 100% !important;
    height: 350px !important;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    font-size: 1.2rem !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* キャラクター情報部分 */
  .character-main-info {
    width: 100% !important;
    padding: 0 !important;
  }

  .character-name {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.8rem !important;
    text-align: center;
  }

  .character-alias {
    text-align: center;
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
    color: var(--color-light-text);
  }

  /* 名言セクション */
  .quotes-section {
    width: 100% !important;
    margin-top: 1.5rem;
  }

  .quote-container {
    background: var(--color-background);
    padding: 1.5rem !important;
    border-radius: 8px;
    border-left: 4px solid var(--color-accent);
  }

  .quote-text {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    font-style: italic;
    transition: opacity 1.5s ease-in-out;
  }

  /* 説明セクション */
  .description-section {
    width: 100% !important;
    margin-top: 2rem;
  }

  .character-description {
    font-size: 1rem !important;
    line-height: 1.8 !important;
  }

  /* タイムラインセクション */
  .timeline-section {
    width: 100% !important;
    margin-top: 2rem;
  }

  .section-title {
    font-size: 1.4rem !important;
    margin-bottom: 1.2rem !important;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
  }

  .timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .timeline-item {
    background: white;
    padding: 1rem !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid var(--color-primary);
  }

  .timeline-year {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .timeline-event {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* ストーリータブの調整 */
  .story-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  .story-tab {
    flex: 1;
    padding: 0.8rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 6px;
    border: 2px solid var(--color-primary);
    background: white;
    color: var(--color-primary);
    transition: all 0.3s ease;
  }

  .story-tab.active {
    background: var(--color-primary);
    color: white;
  }

  /* ページヘッダーの調整 */
  .page-header {
    text-align: center;
    padding: 2rem 0.5rem 1.5rem !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    margin-bottom: 1.5rem;
  }

  .page-title {
    font-size: 1.8rem !important;
    margin-bottom: 0.5rem !important;
  }

  .page-subtitle {
    font-size: 1rem !important;
    opacity: 0.9;
  }

  /* アーカイブページ（archive-character.php）の調整 */
  .archive-character .container {
    padding: 0 0.5rem !important;
  }

  .characters-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
  }

  .character-card {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .character-image {
    height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .character-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
  }

  .character-info {
    padding: 1.5rem !important;
  }

  .character-name {
    font-size: 1.4rem !important;
  }

  .character-content {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }
}

  /* モバイル向け追加最適化（一時的に全体を無効化） */
  /*
  @media (max-width: 768px) {
    // タッチ操作の最適化
    .character-btn,
    .mobile-character-item,
    .story-tab {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
    }
    
    // スクロール性能の最適化
    .content-container {
      contain: layout style;
      // iOS Safari のスクロール最適化
      -webkit-overflow-scrolling: touch;
      // Android Chrome の最適化
      overscroll-behavior: contain;
    }
    
    // 画像コンテナのモバイル最適化
    .image-container {
      // より短いトランジション
      transition: transform 0.3s ease-out;
      // レイアウトの安定化
      min-height: 280px;
      max-height: 350px;
      // メモリ使用量削減
      contain: strict;
    }
    
    // 画像の高速切り替え
    .character-image {
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      // モバイル向け画像レンダリング
      image-rendering: -webkit-optimize-contrast;
    }
    
    // メモリ使用量削減（一時的に無効化）
    .character-image:not(.active) {
      // 非表示画像の最適化
      // content-visibility: hidden;
    }
    
    // 低電力モード対応
    @media (prefers-reduced-motion: reduce) {
      .character-image,
      .image-container,
      .character-detail {
        transition: none !important;
        animation: none !important;
        transform: none !important;
      }
      
      .image-container:not(.loaded) {
        background: #f0f0f0;
        animation: none;
      }
    }
  }
  */
@media (max-width: 480px) {
  .content-container {
    padding: 0 0.25rem !important;
  }

  .character-detail {
    padding: 0.75rem 0.25rem !important;
  }

  .character-name {
    font-size: 1.6rem !important;
  }

  .image-container {
    height: 280px;
  }

  .no-image {
    height: 280px;
    font-size: 1.1rem;
  }

  .quote-container {
    padding: 1rem !important;
  }

  .timeline-item {
    padding: 0.8rem !important;
  }

  .page-header {
    padding: 1.5rem 0.25rem 1rem !important;
  }

  .page-title {
    font-size: 1.6rem !important;
  }

  .story-tab {
    padding: 0.7rem 0.8rem !important;
    font-size: 0.9rem !important;
  }

  /* アーカイブページの画像調整 */
  .archive-character .character-image {
    height: 220px !important;
  }
}