/* ===================================
   レスポンシブ対応スタイル (responsive.css)
   各種画面サイズへの対応とモバイル最適化
   =================================== */

/* ===== モバイルデバイス対応 (480px以下) ===== */
/* スマートフォンでの基本的な表示調整 */

@media (max-width: 480px) {
    /* ページ全体の調整 */
    body {
        padding: 5px; /* デスクトップの10pxから縮小 */
        align-items: flex-start; /* 上端に配置 */
    }
    
    /* ゲームコンテナのモバイル調整 */
    .game-container {
        padding: 10px; /* デスクトップの15pxから縮小 */
        margin: 10px 0; /* デスクトップの20pxから縮小 */
        border-radius: 15px; /* デスクトップの20pxから縮小 */
        max-width: 100%; /* 画面幅いっぱいに */
    }
    
    /* ヘッダータイトルの調整 */
    .game-header h1 {
        font-size: 1.6em; /* デスクトップの2emから縮小 */
        margin-bottom: 5px;
    }
    
    /* 一時停止ボタンの調整 */
    .pause-btn {
        width: 30px; /* デスクトップの40pxから縮小 */
        height: 30px;
    }
    
    .pause-icon {
        font-size: 14px; /* デスクトップの18pxから縮小 */
    }
    
    /* ゲームレイアウトの調整 */
    .game-layout {
        gap: 8px; /* デスクトップの15pxから縮小 */
        margin-bottom: 10px;
    }
    
    /* スコア表示エリアとネクストブロックエリアの調整 */
    .score-info, 
    .next-block-container {
        min-width: 55px; /* デスクトップの70pxから縮小 */
        padding: 8px 6px; /* デスクトップの15px 10pxから縮小 */
        font-size: 0.85em; /* フォントサイズを縮小 */
    }
    
    .score-info h3, 
    .next-block-container h3 {
        font-size: 0.8em; /* デスクトップの0.9emから縮小 */
        margin-bottom: 4px; /* デスクトップの8pxから縮小 */
    }
    
    .score-info .value {
        font-size: 1.1em; /* デスクトップの1.5emから縮小 */
    }
    
    /* ネクストブロックプレビューの調整 */
    .next-block-preview {
        width: 45px; /* デスクトップの60pxから縮小 */
        height: 45px;
    }
    
    .next-block-preview .mini-block {
        width: 9px; /* デスクトップの12pxから縮小 */
        height: 9px;
    }
    
    /* ゲームボードのモバイル調整 */
    .game-board {
        width: 180px; /* デスクトップの240pxから縮小 */
        height: 360px; /* デスクトップの480pxから縮小 */
        background-size: 18px 18px; /* デスクトップの24px 24pxから縮小 */
    }
    
    /* ブロックサイズの調整 */
    .block, 
    .grid-highlight {
        width: 18px; /* デスクトップの24pxから縮小 */
        height: 18px;
        border-radius: 4px; /* デスクトップの6pxから縮小 */
    }
    
    /* 危険ラインの調整 */
    .danger-line {
        top: 45px; /* デスクトップの60pxから縮小 */
    }
    
    .danger-line::before {
        font-size: 7px; /* デスクトップの8pxから縮小 */
        right: 3px; /* デスクトップの5pxから縮小 */
        top: -8px; /* デスクトップの-10pxから調整 */
    }
    
    /* ボタンのモバイル調整 */
    .btn {
        padding: 8px 12px; /* デスクトップの12px 24pxから縮小 */
        font-size: 0.85em; /* デスクトップの1.1emから縮小 */
        margin: 0 2px; /* デスクトップの0 5pxから縮小 */
    }
    
    /* コントロールエリアの調整 */
    .controls {
        margin-top: 10px; /* デスクトップの15pxから縮小 */
        margin-bottom: 5px;
        display: flex; /* フレックスボックスレイアウトに変更 */
        flex-wrap: wrap; /* 必要に応じて改行 */
        justify-content: center; /* 中央揃え */
        gap: 8px; /* ボタン間の間隔を統一 */
        padding: 0 10px; /* 左右にパディング追加 */
    }
    
    /* コントロールボタンの個別調整 */
    .controls .btn {
        padding: 12px 16px; /* 押しやすいサイズに調整 */
        font-size: 0.9em; /* 読みやすいサイズに調整 */
        margin: 0; /* marginを削除（gapで管理） */
        min-width: 60px; /* 最小幅を少し大きく */
        flex: 0 0 auto; /* フレックスアイテムのサイズを固定 */
        border-radius: 8px; /* 角丸を少し小さく */
    }
    
    /* 2行レイアウト用の特別調整（必要に応じて） */
    @media (max-width: 360px) {
        .controls {
            gap: 6px; /* より小さな間隔 */
        }
        
        .controls .btn {
            padding: 10px 12px; /* 少し大きめに調整 */
            font-size: 0.8em; /* 読みやすいサイズに調整 */
            min-width: 50px; /* 最小幅を適切に調整 */
        }
    }
    
    /* 一時停止画面のモバイル調整 */
    .pause-screen {
        padding: 30px; /* 元のサイズに戻す */
        max-width: 90vw; /* 元のサイズに戻す */
        max-height: none; /* 高さ制限を削除 */
        margin: 0; /* マージンを削除 */
    }
    
    .pause-screen h2 {
        font-size: 1.5em; /* デスクトップの2emから縮小 */
        margin-bottom: 15px; /* デスクトップの20pxから縮小 */
    }
    
    .pause-screen p {
        font-size: 0.9em; /* 文字サイズを縮小 */
        margin-bottom: 15px; /* 余白を調整 */
        line-height: 1.4; /* 行間を適切に調整 */
    }
    
    /* ゲームオーバー画面のモバイル調整 */
    .game-over {
        padding: 30px; /* 元のサイズに戻す */
        max-width: 90vw; /* 元のサイズに戻す */
        max-height: none; /* 高さ制限を削除 */
        margin: 0; /* マージンを削除 */
    }
    
    .game-over h2 {
        font-size: 1.5em; /* デスクトップの2emから縮小 */
        margin-bottom: 15px; /* デスクトップの20pxから縮小 */
    }
    
    .game-over p {
        font-size: 0.9em; /* 文字サイズを縮小 */
        margin-bottom: 15px; /* 余白を調整 */
    }
    
    /* 認証画面のモバイル対応 */
    .auth-container {
        padding: 20px; /* デスクトップの30pxから縮小 */
        max-width: 95%; /* さらに狭い画面に対応 */
        margin: 10px;
    }
    
    .auth-tab {
        padding: 10px 15px; /* デスクトップの12px 20pxから縮小 */
        font-size: 14px; /* デスクトップの16pxから縮小 */
    }
    
    .auth-form h3 {
        font-size: 20px; /* デスクトップの24pxから縮小 */
        margin-bottom: 20px;
    }
    
    .auth-form input {
        padding: 12px; /* デスクトップの15pxから縮小 */
        font-size: 14px; /* デスクトップの16pxから縮小 */
    }
    
    .auth-btn {
        padding: 12px; /* デスクトップの15pxから縮小 */
        font-size: 14px; /* デスクトップの16pxから縮小 */
    }
    
    .auth-status {
        padding: 12px; /* デスクトップの15pxから縮小 */
        margin-bottom: 15px;
    }
    
    .auth-login-btn {
        padding: 10px 10px; /* デスクトップの12px 25pxから縮小 */
        font-size: 14px; /* デスクトップの16pxから縮小 */
        margin-right: 10px;
    }
    
    .auth-guest-btn {
        padding: 8px 15px; /* デスクトップの10px 20pxから縮小 */
        font-size: 12px; /* デスクトップの14pxから縮小 */
    }
    
    .auth-guest-text {
        font-size: 12px; /* デスクトップの14pxから縮小 */
        margin: 0 5px;
    }
    
    .auth-user-info {
        font-size: 14px; /* デスクトップの16pxから縮小 */
    }
    
    .auth-logout-btn {
        padding: 6px 12px; /* デスクトップの8px 15pxから縮小 */
        font-size: 12px; /* デスクトップの14pxから縮小 */
        margin-left: 10px;
    }
    
    /* モバイルでのヘッダー認証状態表示 */
    .header-auth-status {
        left: 8px; /* デスクトップの15pxから縮小 */
        top: 45%;
    }
    
    .header-auth-user {
        padding: 4px 8px; /* デスクトップの6px 12pxから縮小 */
        border-radius: 15px; /* デスクトップの20pxから縮小 */
    }
    
    .header-username {
        font-size: 0.8em; /* デスクトップの0.9emから縮小 */
        max-width: 80px; /* デスクトップの120pxから縮小 */
    }
    
    .header-auth-btn {
        font-size: 0.7em; /* デスクトップの0.8emから縮小 */
        padding: 1px 3px;
    }
    
    .header-auth-guest {
        padding: 4px 8px; /* デスクトップの6px 12pxから縮小 */
        border-radius: 15px; /* デスクトップの20pxから縮小 */
    }
    
    .header-login-btn {
        font-size: 0.75em; /* デスクトップの0.85emから縮小 */
        padding: 4px 8px; /* デスクトップの6px 12pxから縮小 */
        border-radius: 12px; /* デスクトップの15pxから縮小 */
    }
    
    /* モバイルでの認証メニュー */
    .auth-menu {
        left: 8px; /* デスクトップの15pxから縮小 */
        top: 40px; /* デスクトップの50pxから縮小 */
        min-width: 150px; /* デスクトップの180pxから縮小 */
        border-radius: 8px; /* デスクトップの10pxから縮小 */
    }
    
    .auth-menu-item {
        padding: 8px 12px; /* デスクトップの10px 15pxから縮小 */
        font-size: 0.85em; /* デスクトップの0.9emから縮小 */
    }
    
    .auth-menu-icon {
        font-size: 1em; /* デスクトップの1.1emから縮小 */
        width: 18px; /* デスクトップの20pxから縮小 */
    }
    
    /* メニューボタンエリア */
    .menu-buttons {
        margin: 15px 0; /* デスクトップの20px 0から縮小 */
        gap: 8px; /* デスクトップの10pxから縮小 */
    }
    
    .auth-only-buttons {
        flex-direction: column; /* モバイルでは縦並び */
        gap: 8px; /* デスクトップの15pxから縮小 */
        width: 100%;
    }
    
    .my-score-btn, .achievements-btn {
        width: 100%; /* モバイルでは幅いっぱい */
        font-size: 0.9em; /* デスクトップの1emから縮小 */
        padding: 8px 16px; /* デスクトップの10px 20pxから縮小 */
    }
    
    .ranking-btn {
        font-size: 1em; /* デスクトップの1.1emから縮小 */
        padding: 10px 20px; /* デスクトップの12px 24pxから縮小 */
        width: 100%; /* モバイルでは幅いっぱい */
        max-width: 250px; /* 最大幅を制限 */
    }
}

/* ===== 超小型モバイル対応 (320px以下) ===== */
/* 古いスマートフォンや非常に小さな画面への対応 */

@media (max-width: 320px) {
    .start-screen {
        padding: 10px; /* より小さなパディング */
        max-height: 90vh;
    }
    
    .start-screen h2 {
        font-size: 1.5em; /* タイトルをさらに縮小 */
        margin-bottom: 10px;
    }
    
    .game-description {
        font-size: 0.9em; /* 説明文をさらに縮小 */
        margin-bottom: 10px;
    }
    
    .difficulty-btn {
        font-size: 0.9em; /* ボタンテキストをさらに縮小 */
        padding: 8px 12px;
        min-width: 100px;
        width: 100px;
    }
    
    /* 一時停止画面の極小画面対応 */
    .pause-screen {
        padding: 25px; /* 少し小さくするが、あまり縮小しない */
        max-width: 90vw; /* 元のサイズを維持 */
    }
    
    .pause-screen h2 {
        font-size: 1.3em; /* さらに縮小 */
        margin-bottom: 10px;
    }
    
    .pause-screen p {
        font-size: 0.8em; /* さらに縮小 */
        margin-bottom: 12px;
    }
    
    .pause-screen .btn,
    .game-over .btn {
        padding: 10px 15px; /* さらに縮小 */
        font-size: 0.9em;
        margin: 3px;
        min-width: 70px;
    }
    
    /* コントロールボタンの極小画面対応 */
    .controls {
        gap: 4px; /* より小さな間隔 */
        padding: 0 5px;
    }
    
    .controls .btn {
        padding: 8px 10px; /* 押しやすさを考慮したサイズ */
        font-size: 0.75em; /* 読みやすいサイズ */
        min-width: 45px; /* 適切な最小幅 */
    }
}

/* ===== 高さ制限対応 (700px以下) ===== */
/* 縦方向のスペースが限られた画面への対応 */

@media (max-height: 700px) {
    .game-container {
        margin: 5px 0; /* 上下マージンを縮小 */
    }
    
    .game-header {
        margin-bottom: 8px; /* ヘッダー下余白を縮小 */
    }
    
    .game-layout {
        margin-bottom: 8px; /* レイアウト下余白を縮小 */
    }
    
    .controls {
        margin-top: 8px; /* コントロール上余白を縮小 */
    }
    
    .instructions {
        margin-top: 5px; /* 説明上余白を縮小 */
        font-size: 0.75em; /* フォントサイズを縮小 */
    }
}

/* ===== 極端な高さ制限対応 (600px以下) ===== */
/* 非常に高さが限られた画面への対応 */

@media (max-height: 600px) {
    .game-board {
        height: 300px !important; /* ゲームボードの高さを強制的に縮小 */
    }
    
    .danger-line {
        top: 37px !important; /* 危険ラインの位置を調整 */
    }
    
    .instructions {
        display: none; /* 操作説明を非表示にしてスペース確保 */
    }
}

/* ===== モバイル用開始画面の特別調整 ===== */
/* スマートフォンでの開始画面の最適化 */

@media (max-width: 480px) {
    /* 開始画面のモバイル専用調整 */
    .start-screen {
        padding: 15px; /* デスクトップの20pxから縮小 */
        max-width: 95vw; /* 画面幅の95%を使用 */
        max-height: 85vh; /* 画面高さの85%を使用 */
        width: 95vw;
    }
    
    .start-screen h2 {
        font-size: 1.8em; /* デスクトップの2.5emから縮小 */
        margin-bottom: 15px; /* デスクトップの20pxから縮小 */
    }
    
    .game-description {
        margin-bottom: 15px; /* デスクトップの25pxから縮小 */
        font-size: 0.95em; /* デスクトップの1.1emから縮小 */
        line-height: 1.4; /* 行間を調整 */
    }
    
    .game-description p {
        margin: 5px 0; /* 段落間の余白を縮小 */
    }
    
    .difficulty-selection {
        margin-bottom: 15px; /* デスクトップの25pxから縮小 */
    }
    
    .difficulty-selection h3 {
        margin-bottom: 10px; /* デスクトップの15pxから縮小 */
        font-size: 1.1em; /* デスクトップの1.3emから縮小 */
    }
    
    /* モバイルでは難易度ボタンを縦並びに */
    .difficulty-buttons {
        gap: 8px; /* デスクトップの15pxから縮小 */
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央揃え */
    }
    
    .difficulty-btn {
        padding: 8px 15px; /* デスクトップの12px 20pxから縮小 */
        font-size: 0.95em; /* デスクトップの1.1emから縮小 */
        min-width: 120px; /* 幅を統一 */
        width: 120px;
    }
    
    .difficulty-info {
        margin-top: 8px; /* デスクトップの10pxから縮小 */
        font-size: 0.85em; /* デスクトップの0.9emから縮小 */
    }
    
    .start-btn {
        padding: 12px 25px; /* デスクトップの15px 30pxから縮小 */
        font-size: 1.1em; /* デスクトップの1.3emから縮小 */
        margin-top: 10px;
    }
}

/* ===== base.cssで定義されているボタンのモバイル上書き ===== */
/* base.cssのボタンスタイルをモバイル用に調整 */

@media (max-width: 480px) {
    /* 一般的なボタンのモバイル調整 */
    .btn {
        padding: 10px 16px; /* モバイル用に適度なサイズに調整 */
        font-size: 0.9em; /* より読みやすいサイズに調整 */
        margin: 0 4px; /* マージンを縮小 */
        min-width: 50px; /* 最小幅を適切に調整 */
        border-radius: 8px; /* 角丸を適切なサイズに */
    }
    
    /* 特定の画面やコンテキストでのボタン調整 */
    .pause-screen .btn,
    .game-over .btn {
        padding: 12px 20px; /* ポップアップ画面では少し大きめ */
        font-size: 1em;
        margin: 5px;
        min-width: 80px;
    }
    
    /* スタート画面のボタンは元のサイズを維持 */
    .start-btn {
        padding: 12px 25px !important; /* 元のスタイルを維持 */
        font-size: 1.1em !important;
        min-width: 120px !important;
    }
}

/* ===== タブレット向け調整 (481px〜768px) ===== */
/* タブレットサイズでの最適化 */

@media (min-width: 481px) and (max-width: 768px) {
    .game-container {
        max-width: 500px; /* タブレット用の幅 */
        padding: 20px; /* 少し大きめのパディング */
    }
    
    .game-board {
        width: 280px; /* タブレット用のボードサイズ */
        height: 560px;
        background-size: 28px 28px;
    }
    
    .block, 
    .grid-highlight {
        width: 28px; /* タブレット用のブロックサイズ */
        height: 28px;
    }
    
    .danger-line {
        top: 70px; /* タブレット用の危険ライン位置 */
    }
    
    /* タブレット用の一時停止画面調整 */
    .pause-screen {
        padding: 25px 20px; /* モバイルとデスクトップの中間 */
        max-width: 400px;
    }
    
    .pause-screen h2 {
        font-size: 1.7em; /* モバイルとデスクトップの中間 */
        margin-bottom: 18px;
    }
    
    .pause-screen p {
        font-size: 1em; /* 適切なサイズ */
        margin-bottom: 18px;
    }
    
    .pause-screen .btn,
    .game-over .btn {
        padding: 12px 22px; /* モバイルとデスクトップの中間 */
        font-size: 1em;
        margin: 5px;
        min-width: 90px;
    }
    
    /* タブレット用のコントロールボタン調整 */
    .controls {
        margin-top: 12px;
        gap: 10px;
    }
    
    .controls .btn {
        padding: 12px 18px; /* 少し大きめに調整 */
        font-size: 0.95em; /* 読みやすいサイズ */
        min-width: 65px; /* 適切な最小幅 */
    }
    
    /* 認証画面のタブレット対応 */
    .auth-container {
        padding: 25px; /* モバイルとデスクトップの中間 */
        max-width: 400px;
    }
    
    .auth-form input {
        padding: 14px; /* モバイルとデスクトップの中間 */
        font-size: 15px;
    }
    
    .auth-btn {
        padding: 14px; /* モバイルとデスクトップの中間 */
        font-size: 15px;
    }
    
    /* タブレットでのヘッダー認証状態表示 */
    .header-auth-status {
        left: 12px;
    }
    
    .header-username {
        max-width: 100px;
    }
    
    .auth-menu {
        left: 12px;
        min-width: 160px;
    }
}

/* ===== 横向き表示対応 ===== */
/* スマートフォンを横向きにした場合の調整 */

@media (max-width: 768px) and (orientation: landscape) {
    .game-container {
        /* 横向きでは最小高さを設定してコンテンツに応じて調整 */
        min-height: 300px;
    }
    
    .game-layout {
        gap: 10px; /* 横向きでは少し余白を増やす */
    }
    
    .instructions {
        font-size: 0.7em; /* 横向きでは説明文をさらに縮小 */
        margin-top: 5px;
    }
    
    /* 横向きでのコントロールボタン調整 */
    .controls {
        margin-top: 8px;
        gap: 6px;
    }
    
    .controls .btn {
        padding: 10px 12px; /* 押しやすいサイズを維持 */
        font-size: 0.8em; /* 読みやすいサイズ */
        min-width: 50px; /* 適切な最小幅 */
    }
    
    /* 横向きでの一時停止画面調整 */
    .pause-screen {
        padding: 15px 20px;
        max-height: 85vh; /* 横向きでは高さをさらに制限 */
    }
    
    .pause-screen h2 {
        font-size: 1.4em;
        margin-bottom: 12px;
    }
    
    .pause-screen p {
        font-size: 0.85em;
        margin-bottom: 12px;
    }
    
    .pause-screen .btn,
    .game-over .btn {
        padding: 10px 18px;
        font-size: 0.9em;
    }
    
    /* 横向きでのヘッダー認証状態表示 */
    .header-auth-status {
        top: 40%;
    }
    
    .auth-menu {
        top: 35px;
    }
}

/* ===== マイスコア画面のレスポンシブ対応 ===== */

/* モバイルデバイス対応 (480px以下) */
@media (max-width: 480px) {
    .my-scores-modal {
        margin: 10px;
        max-height: calc(100vh - 20px);
        border-radius: 10px;
    }
    
    .my-scores-header {
        padding: 15px 20px;
    }
    
    .my-scores-header h2 {
        font-size: 1.4em;
    }
    
    .my-scores-content {
        padding: 15px 20px;
    }
    
    .my-scores-filters {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .filter-group {
        justify-content: space-between;
    }
    
    .filter-group label {
        flex-shrink: 0;
    }
    
    .filter-group select {
        flex: 1;
        margin-left: 10px;
    }
    
    .my-scores-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .stat-item {
        min-width: auto;
    }
    
    .my-scores-table th,
    .my-scores-table td {
        padding: 8px 4px;
        font-size: 0.9em;
    }
    
    .score-mode {
        font-size: 0.75em;
        padding: 1px 4px;
    }
}

/* タブレット対応 (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .my-scores-modal {
        max-width: 700px;
    }
    
    .my-scores-stats {
        gap: 15px;
    }
    
    .stat-item {
        min-width: 140px;
    }
    
    .my-scores-table th,
    .my-scores-table td {
        padding: 10px 6px;
    }
}

/* 横向きモバイル対応 */
@media (max-width: 768px) and (orientation: landscape) {
    .my-scores-overlay {
        padding: 10px;
    }
    
    .my-scores-modal {
        max-height: calc(100vh - 20px);
    }
    
    .my-scores-header {
        padding: 10px 20px;
    }
    
    .my-scores-content {
        padding: 10px 20px;
    }
    
    .my-scores-stats {
        flex-direction: row;
        gap: 10px;
    }
    
    .stat-item {
        min-width: 100px;
        padding: 8px 12px;
    }
    
    .stat-value {
        font-size: 1.2em;
    }
}

/* ===== 実績画面のレスポンシブ対応 ===== */

/* タブレット対応 (768px以下) */
@media (max-width: 768px) {
    .achievements-screen .close-btn {
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
    
    .achievements-screen h2 {
        font-size: 2em;
        margin: 15px 0;
    }
    
    .achievements-stats {
        gap: 20px;
        margin: 15px 0;
    }
    
    .achievements-stats .stat-item {
        min-width: 110px;
        padding: 12px 15px;
    }
    
    .achievements-filters {
        gap: 15px;
        margin: 15px 0;
    }
    
    .achievements-filters .filter-group {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    
    .achievements-filters select {
        min-width: 120px;
    }
}

/* スマートフォン対応 (480px以下) */
@media (max-width: 480px) {
    .achievements-screen {
        padding: 0; /* パディングは個別の要素で制御 */
    }
    
    .achievements-screen .close-btn {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
    
    .achievements-screen h2 {
        font-size: 1.6em;
        margin: 10px 0;
        padding: 0 10px; /* スマホでは左右10px */
    }
    
    .achievements-stats {
        gap: 10px;
        margin: 10px 0;
        padding: 0 10px; /* 統一されたパディング */
    }
    
    .achievements-stats .stat-item {
        min-width: 90px;
        padding: 10px 12px;
    }
    
    .achievements-stats .stat-value {
        font-size: 1.3em;
    }
    
    .achievements-filters {
        gap: 10px;
        margin: 10px 0;
        flex-direction: column;
        padding: 0 10px; /* 統一されたパディング */
    }
    
    .achievements-filters .filter-group {
        width: 100%;
        justify-content: center;
    }
    
    .achievements-filters select {
        width: 100%;
        max-width: 200px;
    }
    
    .achievements-list {
        padding: 0 10px 10px 10px; /* 明確に左右対称 */
    }
    
    .achievements-container {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0; /* コンテナ自体のパディングは不要 */
    }
    
    .achievement-item {
        padding: 12px;
    }
    
    .achievement-header {
        margin-bottom: 8px;
    }
    
    .achievement-icon {
        font-size: 1.3em;
        margin-right: 8px;
    }
    
    .achievement-title {
        font-size: 0.95em;
    }
    
    .achievement-description {
        font-size: 0.85em;
    }
    
    .achievement-category {
        font-size: 0.7em;
        padding: 1px 6px;
    }
    
    .achievements-screen .back-btn {
        margin: 15px auto 30px;
        padding: 10px 25px;
        font-size: 0.9em;
        width: calc(100% - 20px); /* スマホでは左右10pxずつのマージンを考慮 */
        max-width: none; /* スマホでは最大幅を無制限 */
    }
}

/* 極小画面対応 (320px以下) */
@media (max-width: 320px) {
    .achievements-stats .stat-item {
        min-width: 80px;
        padding: 8px 10px;
    }
    
    .achievements-stats .stat-value {
        font-size: 1.1em;
    }
    
    .achievements-stats .stat-label {
        font-size: 0.8em;
    }
    
    .achievement-item {
        padding: 10px;
    }
    
    .achievement-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .achievement-icon {
        font-size: 1.2em;
        margin-right: 0;
    }
    
    .achievement-title {
        font-size: 0.9em;
    }
    
    .achievement-description {
        font-size: 0.8em;
    }
}


/* ===== エンド ===== */