body {
            font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
            text-align: center;
            background-color: #f0f8ff;
            margin: 0;
            padding: 0;
            min-height: 100vh; /* heightからmin-heightに変更してコンテンツが多い場合に対応 */
            display: flex;
            flex-direction: column;
        }
        .container {
            width: 80%;
            max-width: 800px;
            margin: 20px auto 40px auto; /* 上マージンを20pxに、下マージンは40pxを維持 */
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            flex-grow: 1; /* コンテンツが少ない場合でもフッターを押し下げる */
        }
        /* PC表示時のコンテナ幅固定 */
        @media (min-width: 768px) { /* スマホレイアウトに切り替わるブレークポイントより大きい場合 */
            .container {
                width: 800px; /* PC表示では幅を800pxに固定 (現在のmax-widthに合わせる) */
            }
        }
        .screen {
            display: none;
        }
        #title-screen h2 { /* キャッチコピーのスタイル調整 */
            font-size: 1.5rem; color: #555; margin-bottom: 10px;
        }
        #title-screen {
            display: flex; /* block から flex に変更 */
            flex-direction: column; /* 子要素を縦方向に並べる */
            align-items: center; /* 子要素を中央揃えにする */
        }
        .title-image { /* 新しいタイトル画像用のスタイル */
            max-width: 80%; /* 画像の最大幅をコンテナの80%に */
            height: auto;   /* 高さは自動調整 */
            margin-top: 5px; /* 上部のマージンを少し縮小 */
            margin-bottom: 25px; /* 下部のマージン、元のh1のmargin-bottom:30pxに近い値 */
            display: block; /* align-items:centerで中央揃えされる */
        }
        .genre-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }
        .genre-btn {
            background-color: #5dade2; /* 少し明るい青 */
            color: white;
            border: none;
            padding: 15px 25px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
            display: inline-flex; /* アイコンとテキストを中央揃え */
            align-items: center;
            gap: 8px; /* アイコンとテキストの間隔 */
        }
        /* 「犬種当てに挑戦」ボタンの背景色を赤色に変更 */
        .genre-btn[data-genre="dogs"] {
            background-color: #e74c3c; /* 赤系 */
        }
        .genre-btn[data-genre="dogs"]:hover {
            background-color: #c0392b; /* 少し暗い赤系 */
        }

        .genre-btn:hover {
            background-color: #4a90e2;
            transform: translateY(-2px);
        }
        .game-info {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 18px;
            position: relative; /* z-indexを有効にするため、flexコンテナにも必要 */
            z-index: 5;         /* エフェクトレイヤーより手前に */

        }
        .game-high-score {
            font-size: 16px;
            color: #b8860b;
            font-weight: bold;
            align-self: center;
        }
        .title-high-score-container {
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #DAA520; /* より明るいゴールド */
            padding: 8px 15px;
            background-color: #fff3cd;
            border-radius: 8px;
            display: inline-block;
            border: 1px solid #ffeeba;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .master-badge {
            display: block;
            margin: 15px auto 25px; /* 上下のマージンを少し調整 */
            font-size: 1.8rem;
            padding: 10px 20px;
            background: #fffacd; /* 背景を淡い黄色に変更 (ボタンのグラデーションと差別化) */
            color: #b8860b; /* 文字色を濃いめのゴールドに */
            border-radius: 8px;
            /* text-shadow: 1px 1px 2px rgba(0,0,0,0.3); */ /* テキストシャドウをなしに */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* シャドウを控えめに */
            display: inline-block;
            cursor: default; /* マウスカーソルを標準に */
            border: 1px solid #ffe066; /* ゴールド系の薄い枠線 */
        }
        .image-container {
            width: 300px;
            height: 300px;
            margin: 0 auto 20px;
            border: 2px solid #ddd;
            position: relative;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden; /* スタンプがはみ出さないように */
            /* Advanced Rare Effect Base Styles */
            perspective: 1000px;
            transition: transform 0.1s linear; /* For mouse leave reset */
        }
        /* This class activates the advanced rare effect */
        .image-container.advanced-rare-active,
        .modal-content.advanced-rare-active { /* Modal content also needs to be a 3D space */
            transform-style: preserve-3d;
            will-change: transform; /* 頻繁なtransform変更をブラウザに通知 */
            /* overflow: visible; */ /* May be needed if effects extend beyond bounds, but be careful with layout */
        }

        .advanced-rare-layer { /* Base class for all new layers */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Layers should not interfere with mouse events on the container */
            border-radius: inherit; /* Inherit border-radius from parent container */
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
            z-index: 1; /* Base image is implicitly z-index 0 or auto */
        }
        .image-container.advanced-rare-active .base-image-itself { /* Style for the actual <img> tag if needed */
            /* transform: translateZ(10px); */ /* Example: slightly lift the image */
        }

        /* Pattern Layer (Holofoil Example) */
        .image-container.advanced-rare-active .pattern-layer,
        .modal-content.advanced-rare-active .pattern-layer {
            /* Base background can be transparent or a very subtle default if no variant is applied */
            /* background: transparent; */
            /* The specific pattern will be applied by a variant class */
            /*
                NOTE: The original diagonal lines pattern is now moved to .pattern-variant-5
            */
            background-size: 200% 200%; /* Make pattern larger to allow for shimmer movement */
            mix-blend-mode: color-dodge; /* Blend mode for holo effect */
            opacity: 0.6; /* Adjust opacity as needed */
            animation-name: holoShimmer;
            animation-duration: 8s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: paused; /* Initially paused */
            z-index: 2;
        }
        /* Play animation when container is actively being moved */
        .image-container.advanced-rare-active.is-moving .pattern-layer,
        .modal-content.advanced-rare-active.is-moving .pattern-layer {
            animation-play-state: running; /* Play on interaction */
        }
        @keyframes holoShimmer {
            0% {
                background-position: 0% 0%;
            }
            100% {
                background-position: 100% 100%;
            }
        }

        /* Color Layer (Dynamic with mouse) */
        .image-container.advanced-rare-active .color-layer,
        .modal-content.advanced-rare-active .color-layer {
            /* VStar.css color layer styles */
            mix-blend-mode: color-dodge; /* Base blend mode from VStar */
            display: grid; /* For ::after pseudo-element */
            opacity: 1; /* VStar seems to use full opacity for the effect container */
            z-index: 3;
            /* Ensure these are applied when the parent is active (hover/interaction) */
            /* These styles are from .card-wrapper:hover > .color in VStar.css, image path changed */
            background-image: url("images/bgi_a.png"),
                              repeating-linear-gradient(0deg, rgb(255, 119, 115) 5%, rgba(255,237,95,1) 10%, rgba(168,255,95,1) 15%, rgba(131,255,247,1) 20%, rgba(120,148,255,1) 25%, rgb(216, 117, 255) 30%,rgb(255, 119, 115) 35%),
                              repeating-linear-gradient(133deg, #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%),
                              radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, .1) 12%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .25) 120%);
            background-blend-mode: soft-light, hue, hard-light;
            background-size: 18% 15%, 100% 300%, 400% 150%, 200% 200%; /* 3番目のグラデーションの垂直サイズを調整 */
            background-position: center, 0% var(--posy),var(--posx) var(--posy), var(--posx) var(--posy);
            filter: brightness(calc((var(--hyp) * .5) + 0.5)) contrast(2) saturate(.75);
        }

        .image-container.advanced-rare-active .color-layer::after,
        .modal-content.advanced-rare-active .color-layer::after {
            /* VStar.css .color::after styles */
            content: "";
            position: absolute; /* Required for ::after to fill parent if parent is grid/relative */
            top: 0; left: 0; width: 100%; height: 100%;
            border-radius: inherit; /* Inherit border-radius */
            background-size: 18% 15%, 200% 150%, 100% 100%, 400% 400%; /* 3番目のグラデーションの垂直サイズを調整 */
            background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy);
            filter: brightness(calc((var(--hyp) * .5) + 0.8)) contrast(1.5) saturate(1.75);
            mix-blend-mode: exclusion;
            background-image: url("images/bgi_a.png"),
                              repeating-linear-gradient( 0deg, rgb(255, 119, 115) 5%, rgba(255,237,95,1) 10%, rgba(168,255,95,1) 15%, rgba(131,255,247,1) 20%, rgba(120,148,255,1) 25%, rgb(216, 117, 255) 30%,rgb(255, 119, 115) 35%),
                              repeating-linear-gradient( 133deg, #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%),
                              radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, .1) 12%, rgba(0, 0, 0, .15) 20%, rgba(0, 0, 0, .25) 120%);
            background-blend-mode: soft-light, hue, hard-light;
            pointer-events: none; /* Ensure ::after doesn't block interactions */
        }

        /* Highlight Layer (Brightens on hover of container) */
        .image-container.advanced-rare-active:hover .highlight-layer,
        .modal-content.advanced-rare-active:hover .highlight-layer {
            background: white;
            mix-blend-mode: overlay; /* Or soft-light */
            /* VStar highlight layer style */
            background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.6) 10%, rgba(255,255,255,.45) 20%, rgba(0,0,0,.5) 90%); /* Alpha values reduced */
            mix-blend-mode: overlay;
            opacity: 0.8; /* Opacity slightly reduced */
            filter: brightness(1.05); /* Brightness slightly reduced */
            z-index: 4;
        }



        /* Remove old particle effect styles if they were here */
        /* .particle-host, .sparkle-particle, @keyframes sparkleBurstEffect */

        #collected-stamp { /* コレクション済みスタンプのスタイル - IDセレクタに変更 */
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: rgba(46, 204, 113, 0.8); /* 正解マークと似た緑色、少し透明 */
            color: white;
            padding: 4px 8px;
            font-size: 0.75rem; /* 小さめの文字 */
            border-radius: 3px;
            z-index: 6; /* 自動ヒント(5)や新しいレイヤー(1-4)より手前、フィードバックマーク(15)より後ろ */
            white-space: nowrap; /* 文字が折り返さないようにして横書きを保証 */
        }
        .image-container img,
        #modal-image { /* Ensure modal image is also targeted for base image styling if needed */
            max-width: 100%;
            max-height: 100%;
            display: block; /* Helps with layout inside flex/grid */
            position: relative; /* To allow z-indexing with layers if needed, or transform */
            z-index: 0; /* Base image */
        }
        #collected-stamp { /* コレクション済みスタンプのスタイル - IDセレクタに変更 */
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: rgba(46, 204, 113, 0.8); /* 正解マークと似た緑色、少し透明 */
            color: white;
            padding: 4px 8px;
            font-size: 0.75rem; /* 小さめの文字 */
            border-radius: 3px;
            z-index: 6; /* 自動ヒント(5)より手前、フィードバックマーク(15)より後ろ */
            white-space: nowrap; /* 文字が折り返さないようにして横書きを保証 */
        }
        .image-container img {
            max-width: 100%;
            max-height: 100%;
        }
        /* 自動ヒント吹き出しスタイル */
        .auto-hint-bubble {
            position: absolute;
            bottom: 15px; /* 画像下からの位置に戻す */
            right: 15px;  /* 画像右からの位置に戻す */
            /* top, left, transform は削除 */
            background-color: white;
            border: 2px solid #3498db;
            border-radius: 10px;
            padding: 10px 15px;
            font-size: 15px;
            color: #2c3e50;
            max-width: 80%; /* 画像コンテナの幅の80%まで */
            box-shadow: 3px 3px 8px rgba(0,0,0,0.25);
            display: none; /* 初期非表示 */
            z-index: 5; /* フィードバックマーク(15)やオーバーレイメッセージ(10)より後ろ */
            line-height: 1.4;
            text-align: center;
        }
        .auto-hint-bubble::after { /* 吹き出しのしっぽ */
            content: "";
            position: absolute;
            bottom: 100%; /* 吹き出し本体の上端に配置 */
            left: 50%;    /* 吹き出し本体の幅に対して中央 */
            transform: translateX(-50%); /* 中央揃えのための調整 */
            width: 0;
            height: 0;
            border-left: 10px solid transparent;  /* 左の透明な枠 */
            border-right: 10px solid transparent; /* 右の透明な枠 */
            border-bottom: 10px solid #3498db; /* 下辺に色を付けて上向きの三角形を作成 */
        }
        .image-overlay-message {
            position: absolute;
            bottom: 10%;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            transform: translateY(20px);
            background-color: rgba(0, 0, 0, 0.75);
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            z-index: 10;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s 0.3s;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        .image-overlay-message.show {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s 0s;
        }
        .feedback-mark {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.5);
            font-size: 160px;
            font-weight: bold;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s 0.3s;
            z-index: 15;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
        }
        .feedback-mark.show {
            opacity: 0.85;
            transform: translate(-50%, -50%) scale(1);
            visibility: visible;
            transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s 0s;
        }
        .feedback-mark.correct { color: #2ecc71; }
        .feedback-mark.incorrect { color: #e74c3c; }

        .answer-input {
            padding: 10px;
            font-size: 18px;
            width: 60%;
            margin: 0 auto 20px;
            display: block;
            border: 2px solid #3498db;
            border-radius: 5px;
        }
        .timer {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
        }
        .results {
            font-size: 18px;
            margin-bottom: 20px;
        }
        .score-display {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin: 20px 0;
        }
        .btn {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
        }
        .btn:hover {
            background-color: #27ae60;
            transform: translateY(-2px);
        }
        .question-number {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px; /* game-infoでalign-items:centerしたので不要かも */
        }
        .progress-container {
            width: 100%;
            background-color: #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .progress-bar {
            width: 10%;
            height: 10px;
            background-color: #3498db;
            border-radius: 5px;
            transition: width 0.5s;
        }
        .hint-container {
            margin-bottom: 15px;
            position: relative; /* z-indexを有効にするため */
            z-index: 5;         /* エフェクトレイヤーより手前に */
        }
        .manual-hint-buttons {
            margin: 10px 0;
            position: relative; /* z-indexを有効にするため */
            z-index: 5;         /* エフェクトレイヤーより手前に */
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .hint-btn { /* 自動ヒント用だったが、手動ヒントボタンのベースにも使える */
            background-color: #e67e22;
            color: white;
            border: none;
            padding: 8px 15px;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .hint-btn:hover {
            background-color: #d35400;
            transform: translateY(-1px);
        }
        .manual-hint-btn {
            background-color: #e67e22;
            padding: 8px 12px;
        }
        .hint-text {
            color: #e67e22;
            font-size: 16px;
            margin-top: 10px;
            font-style: italic;
            position: relative; /* z-indexを有効にするため */
            z-index: 5;         /* エフェクトレイヤーより手前に */
        }
        .hint-penalty {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
        }
        /* Collection Screen Specific Title Styles */
        #collection-screen > h1 {
            font-size: 1.6rem; /* Reduced from default H1 size */
            margin-bottom: 15px; /* Adjust spacing */
        }
        #collection-screen > h2 { /* The direct subtitle */
            font-size: 1.1rem; /* Reduced from default H2 size */
            margin-bottom: 20px; /* Adjust spacing */
        }
        .collection-genre-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background-color: #fdfdfd;
        }
        .collection-genre-section h2 {
            margin-top: 0;
            color: #333;
            /* border-bottom: 2px solid #3498db; */ /* 新しいデザインでは直接の罫線はなし */
            padding-bottom: 10px;
            font-size: 18px;
            position: relative; /* z-indexを有効にするため */
            z-index: 5;         /* エフェクトレイヤーより手前に */
            display: flex; /* タイトルと進捗を横並びにするため */
            flex-direction: column; /* 全体は縦だが、タイトルと進捗エリアを分ける */
            align-items: center; /* 中央揃え */
            margin-bottom: 15px; /* サムネイルとの間隔 */
        }
        .genre-title-main {
            font-size: 1.3em; /* ジャンル名を少し小さく */
            color: #2c3e50;
            margin-bottom: 15px; /* 進捗エリアとの間隔 */
            padding: 5px 15px;
            background-color: #e9ecef;
            border-radius: 6px; /* z-indexを有効にするため */
            position: relative;
            z-index: 5;
            white-space: nowrap; /* テキストが改行しないように */
        }
        /* 新しいプログレスバーのラッパー */
        .genre-progress-bars-wrapper {
            width: 100%;
            /* flex-wrap: wrap; */ /* flex: 1; と min-width で制御するため不要 */
            box-sizing: border-box; /* paddingを幅に含める */
            /* PC版では横並び */
            display: flex;
            gap: 15px; /* 横並び時のアイテム間隔 */
            max-width: 500px; /* 進捗表示エリアの最大幅 */
            margin: 0 auto;
        }
        .progress-section {
            display: flex;
            flex-direction: column; /* ラベル＋テキストとバーを縦に積み重ねる */
            align-items: flex-start; /* アイテムを左揃え */
            /* margin-bottom: 8px; */ /* wrapperのgapで間隔を制御 */
            font-size: 0.95em;
            background-color: #f8f9fa;
            padding: 8px 12px; /* セクション内のパディング */
            border-radius: 4px;
            /* PC版での横並び時のフレックス設定 */
            flex: 1; /* 利用可能なスペースを均等に分割 */
            min-width: 220px; /* PC版での最小幅を調整して改行を防ぐ */
            box-sizing: border-box; /* paddingを幅に含める */
        }
        /* ラベルとテキストを囲む新しいラッパー */
        .progress-label-text {
            display: flex;
            align-items: flex-start; /* テキストが改行してもバーと揃うように */
            background-color: #f8f9fa;
            /* padding: 8px 12px; */ /* progress-sectionのpaddingで制御するため削除 */
            border-radius: 4px;
            align-items: center; /* 垂直方向中央揃え */
            margin-bottom: 8px; /* バーとの間隔 */
        }
        .progress-label { /* ラベルは常に左揃え */
            text-align: left;
            /* width: 70px; */ /* 固定幅を削除 */
            font-weight: normal; /* ラベルの太字を解除 */
            color: #495057; /* ラベルの色 */
            flex-shrink: 0; /* 縮小しない */
            margin-right: 8px; /* テキストとの間隔 */
        }
        .progress-bar-container {
            height: 12px;
            background-color: #e9ecef; /* バーの背景色 */
            width: 100%; /* 親要素 (.progress-section) の幅いっぱいに */
            border-radius: 6px;
            overflow: hidden;
        }
        .progress-bar-fill {
            display: block;
            height: 100%;
            background-color: #28a745; /* ノーマル用: 緑 */
            border-radius: 6px;
            transition: width 0.5s ease-in-out;
        }
        .progress-bar-fill.rare-fill {
            background-color: #ffc107; /* レア用: 黄色 */
        }
        .progress-bar-container {
            position: relative; /* For positioning the complete text */
        }
        .progress-bar-complete-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px; /* Adjusted for 12px bar height */
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.5); /* Slight shadow for readability */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
            pointer-events: none; /* Non-interactive */
            z-index: 1; /* Above the fill */
        }
        .progress-bar-complete-text.show-complete-text {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s ease-in-out, visibility 0s 0s;
        }
        .progress-text {
            /* width: 90px; */ /* 固定幅を削除 */
            text-align: left; /* 右揃えを解除 */
            color: #495057;
            white-space: nowrap; /* 改行を防ぐ */
            flex-shrink: 1; /* 必要に応じて縮小を許可 (ただしnowrapなのではみ出る可能性) */
            min-width: 0; /* flexアイテムが縮むためのおまじない */
            margin-left: 0; /* autoマージンを削除 */
            margin-right: 0; /* バッジがなくなったため不要 */
        }
        .completion-badge {
            /* margin-left: 10px; */ /* progress-textのmargin-rightで制御するため0に */
            margin-left: 0;
            font-size: 1.1em;
            flex-shrink: 0; /* バッジは縮まない */
        }
        .normal-complete-badge { color: #28a745; }
        .rare-complete-badge { color: #ffc107; }

        /* スマホなど狭い画面向けの進捗表示調整 */
        @media (max-width: 480px) { /* スマホ向け */
            .collection-genre-section h2 {
                 margin-bottom: 10px;
            }
            .genre-progress-bars-wrapper {
                flex-direction: column; /* スマホでは縦並び */
                gap: 8px; /* 縦並び時のアイテム間隔 */
            }
            .progress-section {
                flex: none; /* スマホではflexアイテムの伸縮を無効化 */
                min-width: 0; /* スマホでは最小幅制限を解除 */

            }
            .genre-title-main {
                font-size: 1.2em; /* さらに小さく */
                margin-bottom: 10px;
            }
            .progress-section {
                flex-direction: column; /* 縦並びに変更 */
                align-items: flex-start;
                padding: 8px 10px; /* パディング調整 */
            }
            .progress-label-text {
                margin-bottom: 5px; /* ラベル＋テキストとバーの間隔 */
            }
            .progress-label, .progress-text, .completion-badge { font-size: 0.9em; } /* スマホではフォントを少し小さく */
            .progress-label { margin-right: 6px; }
            .progress-text {
                margin-right: 6px; /* スマホでのバッジとの間隔 */
                /* text-align: right; margin-left: auto; は解除済み */
            }
            .progress-bar-container { width: 100%; margin: 0; } /* バーは横幅いっぱい */
        }
        /* Collection Thumbnails (Grid Layout) */
        .collection-thumbnails {
            display: grid;
            /* PCではアイテム幅100pxを基準に自動で列数を調整 */
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 15px;
            /* justify-content: flex-start; はGridでは通常不要 */
        }
        .thumbnail-item {
            /* width: 100px; */ /* Gridが幅を管理するため、固定幅は不要になることが多い */
            /* height: 100px; */
            border: 3px solid #ccc;
            aspect-ratio: 1 / 1; /* 正方形を維持 */
            border-radius: 5px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f0f0;
            transition: transform 0.2s ease-in-out, border-color 0.2s;
            position: relative; /* Rマークを絶対配置するための基準 */
        }
        .thumbnail-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }
        .thumbnail-item.collected {
            border-color: #2ecc71;
            cursor: pointer;
        }
        .thumbnail-item.collected:hover {
            transform: scale(1.05);
            border-color: #27ae60;
        }
        /* レアアイテムのコレクション済みサムネイル枠線 */
        .thumbnail-item.collected-rare {
            border-color: #FFD700; /* ゴールド */
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); /* ゴールドの光彩 */
        }
        .thumbnail-item.collected-rare:hover {
            border-color: #FFA500; /* ホバー時は少し濃いオレンジゴールド */
            box-shadow: 0 0 12px rgba(255, 165, 0, 0.8); /* ホバー時はより強い光彩 */
        }
        /* 通常・レア両方取得時の特別な枠線 */
.thumbnail-item.collected-all-variants {
            border-color: #8A2BE2; /* 例: ブルーバイオレット */
            box-shadow: 0 0 12px rgba(138, 43, 226, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.5); /* 光彩と内側のハイライト */
            /* さらに豪華にするならグラデーションボーダーなども検討可能 */
}
        .thumbnail-item.not-collected img {
            filter: grayscale(80%) opacity(60%);
        }
        /* Rマークのスタイル */
        .rare-indicator {
            position: absolute;
            top: 4px; /* 少し内側に */
            right: 4px; /* 少し内側に */
            font-size: 10px;
            font-weight: bold;
            padding: 2px 5px; /* 少し横長に */
            border-radius: 3px;
            z-index: 1; /* 画像より手前に表示 */
            line-height: 1; /* 文字の上下中央揃えのため */
            box-shadow: 0 0 3px rgba(0,0,0,0.3); /* 軽い影 */
        }

        .rare-indicator.acquired {
            background-color: #e74c3c; /* 濃い赤 (取得済み) */
            color: white;
        }

        .rare-indicator.unacquired {
            background-color: rgba(128, 128, 128, 0.6); /* 半透明のグレー (未取得) */
            color: #e0e0e0; /* 薄い白 */
        }
        /* Cマークのスタイル (通常・レア両方取得済み) */
        .complete-indicator {
            /* 基本スタイルは .rare-indicator と共通部分が多いので継承しつつ上書き */
            background-color: #8A2BE2; /* .collected-all-variants の枠線色と合わせる */
            color: white;
        }
        /* Nマークのスタイル (通常カード未取得時に表示) */
        .normal-indicator {
            position: absolute;
            top: 4px;
            right: 4px; /* 右上に配置 */
            left: auto; /* leftプロパティをリセット */
            font-size: 10px;
            font-weight: bold;
            padding: 2px 5px;
            border-radius: 3px;
            z-index: 1;
            line-height: 1;
            box-shadow: 0 0 3px rgba(0,0,0,0.3);
            background-color: rgba(128, 128, 128, 0.6); /* 薄いグレー (薄いRマークと同じ背景色) */
            color: #e0e0e0; /* 薄い白 */
        }
        /* スマートフォンなど狭い画面向けのスタイル */
        @media (max-width: 600px) { /* 600px以下の画面幅で適用 */
            .collection-thumbnails {
                /* スマホでは3列固定 */
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); }
        .modal-content {
            background-color: #fff;
            margin: 5% auto; /* 上マージンを少し減らす */
            padding: 15px; /* パディングを少し減らしてカード感を出す */
            border-radius: 10px;
            width: 90%;
            max-width: 320px; /* layer.htmlのカード幅(300px)に近づける + 少しパディング分 */
            position: relative;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            text-align: left;
            /* overflow: hidden; */ /* 背景スクロール問題の切り分けと対策。エフェクトが見切れる可能性あり */
            perspective: 1000px; /* For 3D effect on modal */
            /* 高さを直接指定せず、内容とmax-heightで制御 */
        }
        .close-modal-btn { color: #aaa; float: right; font-size: 30px; font-weight: bold; line-height: 1; }
        .close-modal-btn:hover, .close-modal-btn:focus { color: #333; text-decoration: none; cursor: pointer; }
        /* モーダルの閉じるボタンをエフェクトレイヤーより手前に */
        .close-modal-btn {
            position: relative; /* z-indexを有効にするため */
            z-index: 10;      /* エフェクトレイヤー(z-index: 1-4)より手前に */
        }
        #modal-image {
            width: 100%; /* コンテナ幅いっぱいに */
            height: auto; /* アスペクト比を維持 */
            max-height: calc(300px / 0.714 * 0.9); /* layer.htmlのカードのアスペクト比を参考にしつつ、少し余裕を持たせる (約390px) */
            display: block; margin: 0 auto 15px; border-radius: 5px; border: 1px solid #ddd;
            object-fit: contain; /* 画像がコンテナに収まるように、アスペクト比を維持 */
        }
        #modal-description h3 { margin-top: 0; color: #2c3e50; font-size:20px; }
        #modal-description p { font-size: 16px; line-height: 1.7; color: #555;
            /* position: relative; z-index: 5; は前回適用済み */
        }
        /* Ensure modal text is above rare effect layers */
        #modal-description h3, #modal-description p {
            position: relative;
            z-index: 5; /* Higher than rare effect layers (max z-index 4) */
        }

        /* TCG Card Style for Image Modal */
        #image-modal .modal-content {
            background-color: #F5EFE0; /* Parchment-like card background */
            border: 5px solid #6D4C41; /* Dark brown, like a wooden frame */
            border-radius: 15px;       /* More rounded card corners */
            box-shadow: 0 8px 16px rgba(0,0,0,0.3), /* Outer shadow for depth */
                        inset 0 0 0 3px #A1887F; /* Inner border highlight */
            padding: 15px;             /* Overall padding within the card */
            max-width: 360px;          /* Adjusted max-width for new borders/padding */
            /* perspective: 1000px; is inherited from .modal-content for 3D effects */
        }

        /* Rare Card Modal Style Overrides */
        #image-modal .modal-content.rare-card-modal-style {
            border-color: #DAA520; /* Rare Outer border: Goldenrod */
            box-shadow: 0 8px 16px rgba(0,0,0,0.3),
                        inset 0 0 0 3px #FFD700; /* Rare Inner border: Gold (for thickness and contrast) */
        }

        #image-modal .modal-content.rare-card-modal-style #modal-image {
            border-color: #DAA520; /* Rare Image frame: Darker Gold */
        }
        #image-modal .modal-content.rare-card-modal-style #modal-description h3 {
            color: #B8860B; /* Rare Title color: Dark Gold */
            border-bottom-color: #DAA520; /* Rare Title separator color */
        }
        #image-modal #modal-image {
            border: 3px solid #8D6E63; /* Lighter brown frame for the image art */
            border-radius: 10px;       /* Rounded corners for the image frame */
            margin-bottom: 15px;       /* Space between image and description box */
            box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Slight shadow for the image art */
            /* width, height, max-height, display, object-fit are inherited or fine */
        }

        #image-modal #modal-description {
            background-color: #D7CCC8; /* Light stone/aged paper for text box */
            border: 2px solid #5D4037; /* Darker brown border for the text box */
            border-radius: 8px;
            padding: 10px 15px;
            margin-top: 0; /* Spacing handled by image margin-bottom */
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inner shadow for text box depth */
            /* z-index and position are inherited */
        }

        #image-modal #modal-description h3 {
            color: #3E2723;            /* Very dark brown for the name/title */
            font-family: 'Georgia', serif; /* A more classic/TCG feel font */
            font-size: 21px;           /* 少し小さく調整 */
            font-weight: bold;
            text-align: center;
            border-bottom: 2px solid #795548; /* Separator line below title */
            padding-bottom: 8px;
            margin-top: 0;             /* Reset margin */
            margin-bottom: 10px;       /* Space between title and description text */
        }

        #image-modal #modal-description p {
            color: #4E342E;            /* Dark brown, readable description text */
            font-family: 'Georgia', serif; /* Consistent font with title */
            font-size: 14px;           /* Slightly smaller for description to fit more */
            line-height: 1.5;          /* Adjust for readability */
            margin-bottom: 0;          /* Reset bottom margin for the paragraph */
        }
        /* TCG Card Illustrator Credit Style */
        #image-modal #modal-description .illustrator-credit {
            font-family: 'Georgia', serif; /* Consistent font */
            font-size: 10px;             /* Smaller font size */
            color: #795548;              /* Slightly lighter brown, like title separator */
            text-align: right;
            margin-top: 10px;            /* Space above the credit */
            font-style: italic;          /* Italicize for a common TCG look */
        }
        #image-modal #modal-description h3 .rare-style-marker {
            font-size: 0.8em;  /* 犬種名と同じフォントサイズに */
            font-weight: bold; /* 犬種名と同じフォントの太さに */
            color: white; /* 文字色を白色に */
            background-color: rgba(142, 68, 173, 0.7); /* 紫色 (Achievementsボタンの色 #8e44ad に透明度を追加) */
            padding: 2px 4px;   /* パディングを調整 */
            border-radius: 3px;
            margin-left: 4px;   /* 左マージンを調整 */
            vertical-align: middle; /* テキストの中央揃え　*/
        }
        /* End TCG Card Style for Image Modal */
        
        #high-score-display {
            background: linear-gradient(135deg, #FFDF00, #FFB000);
            -webkit-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            -moz-text-fill-color: transparent;
            text-fill-color: transparent;
            font-weight: bold;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
            display: inline-block;
        }
        .score-updated-animation {
            animation: highScoreUpdate 1.5s ease-out forwards;
        }
        @keyframes highScoreUpdate {
            0% { transform: scale(1); opacity: 1; }
            30% { transform: scale(1.4) rotate(-5deg); opacity: 0.8; color: #ff4500 !important; -webkit-text-fill-color: #ff4500 !important; }
            60% { transform: scale(1.1) rotate(3deg); opacity: 1; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        #countdown-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(44, 62, 80, 0.9);
            z-index: 2000; display: none;
            justify-content: center; align-items: center; flex-direction: column;
        }
        #countdown-text {
            font-size: 20vw; color: white; font-weight: bold;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5);
            opacity: 0; transform: scale(0.5);
        }
        .countdown-animate {
            animation: zoomAndAppear 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        @keyframes zoomAndAppear {
            0% { transform: scale(0.5); opacity: 0; }
            70% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        #celebration-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            z-index: 3000; display: none;
            justify-content: center; align-items: center; text-align: center;
            opacity: 0; transition: opacity 0.5s ease-in-out;
        }
        #celebration-overlay.show { display: flex; opacity: 1; }
        #celebration-content {
            background-color: #fff; padding: 40px; border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transform: scale(0.7); opacity: 0;
            animation: celebrationAppear 0.8s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            max-width: 600px; width: 90%; color: #333;
        } /* celebrationAppearアニメーションはJSで制御 */
        .celebration-icon { font-size: 5rem; display: block; margin-bottom: 20px; color: #ffc107; animation: iconShine 2s infinite; }
        #celebration-title { font-size: 2.5rem; color: #2c3e50; margin-bottom: 15px; font-weight: bold; }
        #celebration-message-text { font-size: 1.2rem; color: #555; line-height: 1.6; margin-bottom: 30px; }
        #close-celebration-btn { background-color: #3498db; padding: 12px 30px; font-size: 1.1rem; }
        #close-celebration-btn:hover { background-color: #2980b9; }
        @keyframes celebrationAppear { 0% { transform: scale(0.7) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
        @keyframes iconShine { 0%, 100% { text-shadow: 0 0 10px #fff, 0 0 20px #ffc107, 0 0 30px #ffc107; } 50% { text-shadow: 0 0 20px #fff, 0 0 30px #ffc107, 0 0 40px #ffc107; } }

        /* 遊び方モーダル用スタイル */
        #how-to-play-modal .modal-content { max-width: 500px; }
        #how-to-play-modal h3 { font-size: 1.8rem; color: #2c3e50; margin-bottom: 20px; text-align: center; }
        #how-to-play-modal ul { list-style: none; padding-left: 0; }
        #how-to-play-modal li {
            font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 12px;
            padding-left: 30px; position: relative;
        }
        #how-to-play-modal li::before {
            font-family: "Font Awesome 6 Free"; font-weight: 900;
            content: "\f005"; /* 星アイコン */
            color: #ffc107; position: absolute; left: 0; top: 2px;
        }

        /* モーダル下部の閉じるボタン（スマホ用） */
        /* スタイルを右上の×ボタンに近づけ、常に表示されるように変更し、中央配置 */
        .bottom-modal-close-btn {
            /* .close-modal-btn から基本的なスタイル (フォントサイズ、色、float:rightなど) を継承 */
            background: none; /* 背景なし */
            border: none;     /* 枠線なし */
            padding: 0;       /* パディングなし */

            display: block;   /* 中央揃えのためにブロック要素にする */
            margin-top: 15px; /* 上のコンテンツとの間隔 */
            margin-left: auto; /* 中央揃え */
            margin-right: auto; /* 中央揃え */
            cursor: pointer;
            float: none; /* float: right; を打ち消す */
        }
        .bottom-modal-close-btn:hover {
            /* ホバー時のスタイルは .close-modal-btn:hover から継承 */
            background: none; /* ホバー時も背景なしを保証 */
        }

        #how-to-play-btn:hover { background-color: #16a085; }

        /* 個別のボタンスタイル (背景色など) */
        #news-updates-btn { background-color: #5dade2; }
        #how-to-play-btn { background-color: #1abc9c; }
        #show-collection-btn { background-color: #f39c12; }
        #show-achievements-btn { background-color: #8e44ad; }
        #show-achievements-btn:hover { background-color: #7c3c98; } /* ホバー色追加 */
        /* 新しいトップページコンテンツボタングリッドのスタイル */
        #top-page-content-buttons-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 各列が利用可能なスペースを均等に占める */
            gap: 15px; /* ボタン間の隙間 */
            max-width: 380px; /* (ボタン幅目安 160px * 2) + gap 15px + 左右パディング等考慮 */
            margin: 25px auto 20px auto; /* 上下マージン、左右autoで中央揃え */
        }

        .content-grid-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%; /* グリッドセルいっぱいに広がる */
            height: 80px; /* 高さを指定して正方形に近づける */
            padding: 10px;
            box-sizing: border-box;
            text-align: center;
            font-size: 0.9rem; /* テキストのフォントサイズ */
            line-height: 1.3;
            border-radius: 8px; /* 角丸を少し調整 */
            /* .btn から継承: color, border, cursor, transition */
        }

        .content-grid-button i {
            font-size: 2rem; /* アイコンサイズを大きく */
            margin-bottom: 8px; /* アイコンとテキスト(改行後)の間のマージン */
            line-height: 1; /* アイコン自体の行間を詰める */
        }
        /* テストアンロックモーダル内の個別アイテムアンロック用スタイル */
        .item-unlock-entry {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .item-unlock-entry:last-child {
            border-bottom: none;
        }
        .item-unlock-entry span {
            flex-grow: 1;
            font-size: 0.9rem;
        }
        .item-unlock-entry button {
            margin-left: 8px; padding: 4px 10px; font-size: 0.85em; min-width: 100px;
        }
        /* お知らせ＆更新ボタンのスタイル */
        #news-updates-btn {
            background-color: #5dade2; /* やや明るい青、ジャンルボタンに寄せる */
        }
        #news-updates-btn:hover {
            background-color: #4a90e2;
        }

        /* お知らせ＆更新モーダル用スタイル */
        #news-updates-modal .modal-content {
            max-width: 650px; /* 少し広めに設定 */
            text-align: left;
        }
        #news-updates-modal h3 { /* モーダルタイトル */
            font-size: 1.8rem;
            color: #5dade2; /* ボタンの色と合わせる */
            margin-bottom: 25px;
            text-align: center;
            border-bottom: 2px solid #eee;
            padding-bottom: 15px;
        }
        .news-section { /* お知らせ、更新履歴の各セクション */
            margin-bottom: 25px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            border: 1px solid #e7e7e7;
        }
        .news-section:last-child {
            margin-bottom: 15px;
        }
        .news-section h4 { /* セクション内タイトル */
            font-size: 1.3rem;
            color: #2c3e50;
            margin-top: 0;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }
        .news-section h4 i {
            margin-right: 10px;
            color: #5dade2; /* アイコンの色 */
        }
        #author-message-section p {
            font-size: 1rem;
            line-height: 1.7;
            color: #555;
        }
        #update-history-list { list-style: none; padding-left: 0; }
        .update-item { padding: 15px 0; border-bottom: 1px dashed #ddd; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
        .update-item:last-child { border-bottom: none; }
        .update-date { font-weight: bold; color: #777; font-size: 0.9em; flex-shrink: 0; min-width: 90px; }
        .update-tag { font-size: 0.75em; font-weight: bold; padding: 4px 10px; border-radius: 12px; color: white; text-transform: uppercase; flex-shrink: 0; letter-spacing: 0.5px;}
        .update-tag-new { background-color: #2ecc71; /* Green */ }
        .update-tag-update { background-color: #3498db; /* Blue */ }
        .update-tag-feature { background-color: #9b59b6; /* Purple */ }
        .update-tag-fix { background-color: #f39c12; /* Orange for bugfix */ }
        .update-description { margin: 0; font-size: 0.95rem; color: #333; line-height: 1.6; flex-grow: 1; }
        /* サウンド設定エリアのスタイル */
        #sound-settings-area, #game-sound-settings-area { /* 共通スタイル */
            text-align: left; /* ラベルと要素を左揃えにするため */
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
            /* width: fit-content; を削除 */
            width: 90%; /* 親要素に対する幅 */
            max-width: 400px; /* 最大幅を設定して広がりすぎを防ぐ */
            margin-left: auto; /* 追加: 水平方向中央揃え */
            margin-right: auto; /* 追加: 水平方向中央揃え */
            box-sizing: border-box; /* paddingとborderをwidthに含める */
        }
        #sound-settings-area { /* タイトル画面用は少しマージンを調整 */
            margin-top: 25px;
            margin-bottom: 15px; /* フッターとの間隔 */
        }
        .sound-settings-accordion-toggle { /* IDからクラスに変更 */
            margin-top: 0;
            margin-bottom: 15px;
            text-align: center; /* 見出しは中央揃え */
            color: #333;
            font-size: 1.2rem; /* 少し小さく調整 */
            cursor: pointer;
            user-select: none; /* テキスト選択を防ぐ */
            position: relative; /* アイコンの位置調整用 */
        }
        .sound-settings-accordion-content > div { /* Corrected selector for accordion content rows */
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        .sound-settings-accordion-content label { /* IDからクラスに変更 */
            flex-grow: 0;     /* Prevent growing */
            flex-shrink: 0;   /* Prevent shrinking (already present but good to be explicit) */
            flex-basis: 60px; /* Set a fixed basis for the label width */
            font-size: 0.9rem; /* フォントサイズも少し小さく */
            color: #555; /* ラベルの色 */
            margin-right: 5px; /* ボタンとの間隔を少し確保 */
        }
        .sound-toggle-btn {
            background-color: #7f8c8d;
            color: white;
            border: none;
            padding: 6px 0; /* 左右パディングを0にし、widthで制御 */
            font-size: 1rem;
            font-size: 0.9rem; /* アイコンに合わせて少し小さく */
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
            width: 38px; /* ボタン幅をさらに調整 */
            text-align: center;
            margin-right: 8px; /* スライダーとの間隔を調整 */
            flex-shrink: 0; /* Add: Prevent shrinking */
        }
        .sound-toggle-btn:hover {
            background-color: #95a5a6;
        }
        .volume-slider {
            margin-right: 8px; /* パーセント表示との間隔を調整 */
            cursor: pointer;
            width: 90px;      /* スライダーの幅を90pxに固定 */
            min-width: 50px;  /* 非常に狭い場合に50pxより小さくならないようにする */
            /* flex: 1; と max-width: 90px; を削除 */
        }
        .sound-settings-accordion-content .volume-value { /* IDからクラスに変更 */
            width: 35px; /* パーセント表示の幅をさらに調整 */
            font-size: 0.85rem; /* フォントサイズも少し小さく */
            color: #333;
            text-align: right;
            flex-shrink: 0; /* Add: Prevent shrinking */
        }
        /* スライダーが無効な時のスタイル */
        .volume-slider:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        input[type=range]:disabled::-webkit-slider-thumb { background: #bdc3c7; }
        input[type=range]:disabled::-moz-range-thumb { background: #bdc3c7; }

        .sound-settings-accordion-content { /* IDからクラスに変更 */
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .sound-settings-accordion-content.no-transition {
            transition: none !important;
        }
        .sound-toggle-icon {
            margin-left: 8px;
            font-size: 0.85em; /* 少し小さく */
        }

        /* ゲーム画面用のサウンド設定エリアのスタイル */
        #game-sound-settings-area { /* 個別のスタイル調整 */
            padding: 10px; /* 少し小さく */
            margin-top: 15px; /* 上の要素との間隔 */
            margin-bottom: 10px; /* 下のボタンとの間隔 */
        }
        /* ゲーム画面のスマホ向けレイアウト調整 */
        @media (max-width: 767px) {
            #game-screen .game-info {
                display: flex;          /* Flexboxを有効に */
                flex-wrap: wrap;        /* 要素を折り返す */
                justify-content: space-between; /* 要素間に均等なスペースを配置 */
                gap: 5px 10px;          /* 縦方向の隙間 5px, 横方向の隙間 10px */
                margin-bottom: 10px;    /* 下のマージンを縮小 */
            }

            /* .game-info 直下の子要素のスタイル調整 */
            #game-screen .game-info > div {
                /* width: 100%; */  /* この行を削除します */
                text-align: center;     /* テキストを中央揃えに */
                margin-bottom: 0;       /* 個別の下マージンは親のgapで制御するためリセット */
            }

            #game-screen .question-number {
                font-size: 1rem; /* 少し縮小 */
            }
            #game-screen .timer { /* 「残り時間: X秒」全体を囲むdiv */
                font-size: 1.1rem;      /* 少し縮小 */
            }

            /* 問題数、タイマー、スコア、ハイスコアを横並びにするための調整 */
            #game-screen .question-number,
            #game-screen .timer,
            #game-screen #current-score-display,
            #game-screen .game-high-score {
                 width: calc(50% - 5px); /* 横方向の隙間を考慮して幅を調整 */
                 box-sizing: border-box;
            }

            #game-screen #current-score-display {
                font-size: 0.9rem;      /* 少し縮小 */
            }
            #game-screen .game-high-score {
                font-size: 0.8rem;      /* 少し縮小 */
                align-self: auto;  /* desktopで設定されている可能性のあるalign-selfをリセット */
            }

            #game-screen .progress-container {
                margin-bottom: 10px; /* 下マージンを縮小 */
            }
            #game-screen .progress-bar {
                height: 8px; /* 高さを低く */
            }

            #game-screen .image-container {
                width: 260px;  /* PC版(300px)より縮小 */
                height: 260px; /* PC版(300px)より縮小 */
                margin-bottom: 10px; /* 下マージンを縮小 */
            }

            #game-screen .hint-container {
                margin-bottom: 10px; /* 下マージンを縮小 */
            }
            #game-screen .manual-hint-buttons {
                gap: 8px; /* ボタン間の隙間を縮小 */
                margin: 8px 0; /* 上下マージンを縮小 */
            }
            #game-screen .manual-hint-btn { /* .hint-btn を継承している想定 */
                padding: 6px 10px; /* パディングを縮小 */
                font-size: 13px;   /* フォントサイズを縮小 */
            }
            #game-screen .hint-text { /* #hint-display-area に適用されるクラス */
                margin-top: 5px; /* 上マージンを縮小 */
                font-size: 15px; /* フォントサイズ調整 */
            }
            #game-screen .answer-input {
                margin-bottom: 10px; /* 下マージンを縮小 */
                padding: 8px;      /* パディングを少し縮小 */
                font-size: 17px;   /* フォントサイズを少し縮小 */
            }
        }
        /* フッター用のスタイル */
        footer {
            background-color: #333; /* ダークグレー背景 */
            color: white;
            text-align: center;
            padding: 20px 0;
            width: 100%;
            margin-top: auto; /* コンテンツが少ない場合にフッターを押し上げるのを防ぐ */
        }
        footer p {
            margin: 8px 0;
            font-size: 0.8rem; 
        }
        footer a {
            color: #87cefa; /* 明るい水色 */
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }

        /* アチーブメント通知トースト */
        .achievement-toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #2c3e50; /* ダークブルー */
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            z-index: 5000;
            display: none; /* 初期非表示 */
            align-items: center;
            gap: 15px;
            font-size: 1.1rem;
        }
        .achievement-toast i {
            font-size: 1.8rem;
            color: #f1c40f; /* ゴールド */
        }
        .achievement-toast-content p {
            margin: 8px 0;
            font-size: 0.9rem;
        }
        footer a {
            color: #87cefa; /* 明るい水色 */
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }
        .achievement-item {
            padding: 12px 10px; /* 少しパディング調整 */
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            transition: background-color 0.2s;
        }
        .achievement-item:last-child {
            border-bottom: none;
        }
        .achievement-item.not-achieved {
            opacity: 0.6;
        }
        .achievement-item.achieved:hover {
            background-color: #f9f9f9;
        }
        .achievement-item-icon {
            width: 1.5em; /* アイコンの幅を固定 (fa-2x を考慮) */
            text-align: center; /* アイコンをコンテナ内で中央揃え */
            margin-right: 15px;
            flex-shrink: 0; /* アイコンコンテナが縮まないように */
        }
        .achievement-item-icon.achieved {
            color: #f1c40f; /* ゴールド */
        }
        .achievement-item-icon.not-achieved {
            color: #bdc3c7; /* グレー */
        }
        .achievement-item-text h4 {
            margin: 0 0 5px 0;
            font-size: 1.1rem; /* 少し大きく */
        }
        .achievement-item-text p {
            margin: 0;
            font-size: 0.9em;
            color: #555;
        }
        .achievement-item-text .achievement-date {
            margin-top: 3px;
            font-size: 0.8em;
            color: #7f8c8d;
        }

        /* PC表示時のアチーブメント一覧 (2カラム) */
        @media (min-width: 768px) {
            #achievements-list-container {
                display: grid;
                grid-template-columns: repeat(2, 1fr); /* 2カラム */
                gap: 0px 15px; /* 縦のgapは0, 横のgapは15px */
            }
            .achievement-item {
                /* 2カラム時は各アイテムの下線を維持しつつ、gapで区切る */
                 border-bottom: 1px solid #eee; /* 左右のカラムアイテムにも下線がつくように */
            }
             /* gridで2列にした場合、交互に下線を消すのは複雑になるため、
                全てに下線をつけてgapで区切るか、
                もしくはアイテム数が奇数の場合に最後のアイテムが1列になった際のデザインを考慮する必要がある。
                今回はシンプルに全アイテムに下線をつけ、gapで区切る。
             */
        }

        /* 結果画面の新しいスタイル */
        #result-screen {
            text-align: center;
            background-image: url('images/gameresults.png');
            background-size: 100% auto; /* 横幅いっぱいに合わせ、縦は自動調整 */
            background-position: center top; /* 画像を水平中央、垂直上端に配置 */
            background-repeat: no-repeat; /* 画像の繰り返しを無効に */
            padding: 20px; /* コンテンツの周囲に余白を作り、背景画像が見えるように */
            box-sizing: border-box; /* paddingをwidth/heightに含める */
        }
        /* スマホ版: 背景画像を非表示 */
        @media (max-width: 767px) {
            #result-screen {
                background-image: none;
                background-color: #f0f8ff; /* 背景画像がない場合の背景色 */
            }
        }
        .result-summary-container {
            background-color: rgba(249, 249, 249, 0.85); /* 背景を少し透過させて下の画像が見えるように */
            /* スマホ版では上記背景色が適用される */
            padding: 25px;
            position: relative; /* 子要素の絶対配置の基準とする */
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            border-radius: 12px;
            margin-bottom: 30px; /* This will be active on mobile, PC has min-height */
        }
        @media (min-width: 768px) { /* PC版のスタイル */
            #result-screen h1,
            #result-screen .result-score-label {
                display: none; /* 「ゲーム結果」タイトルと「あなたのスコア」ラベルを非表示 */
            }

            .result-summary-container {
                background-color: transparent; /* PC版では背景を完全に透明に */
                position: relative; /* Ensure it's a positioning context */
                min-height: 400px;  /* Accommodate absolutely positioned children like score at top:320px */
                padding: 25px; /* Keep padding, absolute children are positioned from padding edge */
                margin-bottom: 30px; /* Maintain some space before achievements/details toggle */
            }

            .result-score-main {
                position: absolute;
                top: 287px;  /* 270px + 17px = 287px (下に17px移動) */
                left: 450px; /* 400px + 50px = 450px (右に50px移動) */
                text-align: left; /* Override parent's text-align: center */
                margin: 0;
            }

            .result-highscore-info {
                position: absolute;
                top: 400px; /* スコアの下、詳細ボタンの上に移動 */
                left: 50%;
                transform: translateX(-50%); /* 画面中央揃え */
                text-align: center; /* テキストも中央揃え */
                margin: 0;
                width: auto; /* 内容に応じて幅を自動調整 */
                max-width: 300px; /* 横幅の上限を現在の約2倍に設定 */
                box-sizing: border-box; /* paddingをwidthに含める */
                display: flex; /* 子要素を横並びにする */
                align-items: center; /* 子要素を垂直方向に中央揃え */
                justify-content: center; /* 子要素を水平方向に中央揃え (text-align:centerと重複するが、flex用) */
            }

            .result-stats { /* Container for accuracy and avg time */
                display: block; /* Override flex */
                padding-top: 0;   /* Remove original padding */
                margin-top: 0;    /* Remove original margin */
                height: 0; /* Container itself takes no space as children are absolute */
            }
            .result-stat-item {
                position: absolute;
                text-align: left; /* Override parent's text-align: center */
                margin: 0;
            }
        }
        .result-score-main {
            font-size: 3.5rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        .result-score-label {
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 20px;
        }
        .result-highscore-info {
            font-size: 1.3rem;
            color: #DAA520;
            font-weight: bold;
        }

        .result-highscore-info .new-record-badge {
            background-color: #e74c3c;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-left: 8px;
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        .result-stat-item {
            font-size: 1.1rem;
        }
        .result-stat-item strong { font-size: 1.5rem; display: block; color: #3498db; margin-bottom: 3px;}

        @media (min-width: 768px) { /* PC版のスタイル - continued */
            .result-stats .result-stat-item:nth-child(1) { /* Accuracy */
                top: 100px;
                left: 30px; /* 30px左に移動 */
            }
            .result-stats .result-stat-item:nth-child(2) { /* Average Time */
                top: 100px; left: 600px;
            }
            .result-stats .result-stat-item strong {
                display: block;
                text-align: center; /* 上下の要素を中央揃え */
                margin-bottom: 3px; /* 必要に応じて調整 */
            }
            .result-stats .result-stat-item { /* PC版の .result-stat-item 全体 */
                background-color: white; /* PC版でのみ背景設定 */
                padding: 8px 12px;       /* PC版でのみパディング設定 */
                border-radius: 8px;      /* PC版でのみ角丸設定 */
                width: 130px;            /* PC版でのみ幅設定 (5px広げる) */
                box-sizing: border-box;  /* PC版でのみbox-sizing設定 */
                text-align: center; /* 全体を中央揃え */
            }
            .result-highscore-info { /* PC版のハイスコア */
                background-color: white; /* PC版でのみ背景設定 */
                padding: 5px 10px;       /* PC版でのみパディング設定 */
                border-radius: 5px;      /* PC版でのみ角丸設定 */
                white-space: nowrap; /* 改行を防ぐ */
            }
        }
        /* スマホ版用の .result-stats と .result-stat-item のスタイル */
        @media (max-width: 767px) {
            .result-stats {
                display: flex;
                justify-content: space-around;
                margin-top: 20px;
                padding-top: 15px;
                /* border-top: 1px solid #eee; */ /* 区切り線が必要な場合はコメント解除 */
            }
            .result-stat-item {
                text-align: center;
                /* width は指定せず、flexアイテムとして自然な幅に */
            }
        }
            .result-details-toggle { /* 「詳細な結果を見る」ボタン */
                margin-top: calc(10px + 80px); /* 基準のmargin-topは維持 */
                transform: translateY;
            }
        /* New style for the overall section container for achievements */
        .result-achievements-section {
            margin: 20px 0; /* Vertical margin for the section */
            text-align: center; /* Center the title */
        }
        /* Style for the title within the new section container */
        .result-achievements-section > h4 {
            font-size: 1.3rem;
            color: #8e44ad; /* 文字色を維持 */
            margin-bottom: 10px;
            /* 背景画像によってはテキストシャドウで見やすくするなどの工夫も可能 */
            /* text-shadow: 0px 0px 5px rgba(255,255,255,0.7); */
        }
        /* This class is now on the div containing only the achievement items */
        .result-achievements-unlocked {
            display: flex; /* アイテムを横並びにする */
            flex-wrap: wrap; /* 画面幅に応じて折り返す */
            justify-content: center; /* 中央揃えにする */
            align-items: flex-start; /* アイテムの縦方向の引き伸ばしを防ぐ */
            gap: 10px; /* アイテム間の隙間 */
        }
        .result-achievement-item i { margin-right: 8px; }

        .result-details-toggle {
            margin: 20px 0;
        }
        #result-details-list-container {
            background-color: rgba(255, 255, 255, 0.92); /* 背景を少し透過 (他より若干濃く) */
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            text-align: left;
            max-height: 400px; /* スクロール可能に */
            overflow-y: auto;
        }
        /* .result-achievements-unlocked h4 is removed as h4 is no longer a direct child */
        .result-achievement-item {
            display: inline-flex;
            align-items: center;
            background-color: rgba(243, 229, 245, 0.85); /* 背景を少し透過 */
            border-radius: 20px; padding: 5px 12px;
            font-size: 0.9rem; color: #8e44ad;
        }
        .result-detail-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .result-detail-item:last-child { border-bottom: none; }
        .result-detail-item img { width: 50px; height: 50px; object-fit: cover; border-radius: 5px; margin-right: 15px; border: 1px solid #ddd;}
        .result-detail-info { flex-grow: 1; }
        .result-detail-info p { margin: 2px 0; font-size: 0.95rem; }
        .result-detail-score { font-weight: bold; font-size: 1rem; margin-left: 15px; white-space: nowrap; }
        .result-detail-correct { color: #2ecc71; }
        .result-detail-incorrect { color: #e74c3c; }

        .result-actions {
            margin-top: 5px; /* 25px上に移動 */
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        /* 結果画面のボタン個別スタイル調整 */
        #result-details-toggle-btn { /* 詳細な結果を見る */
            background-color: #f39c12; /* コレクションボタンと同じオレンジ系 */
        }
        #result-details-toggle-btn:hover {
            background-color: #e67e22;
        }
        #retry-genre-btn { /* もう一度挑戦 */
            background-color: #c0392b; /* リセットボタンと同じ赤系 */
        }
        #retry-genre-btn:hover {
            background-color: #a93226; /* リセットボタンのホバー時より少し暗い赤 */
        }
        /* SNS共有ボタン */
        .sns-share-buttons {
            margin: 25px 0; /* 上下のマージンを調整 */
            display: flex;
            justify-content: center;
            gap: 12px; /* ボタン間の隙間を少し広げる */
            flex-wrap: wrap;
        }
        .sns-share-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 18px; /* パディングを少し大きく */
            border-radius: 20px; /* 角をより丸く */
            color: white;
            text-decoration: none;
            font-size: 15px; /* フォントサイズを少し大きく */
            font-weight: bold;
            transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .sns-share-btn:hover {
            opacity: 0.85;
            transform: translateY(-2px);
        }
        .sns-share-btn i { margin-right: 10px; font-size: 1.3em; }
        .sns-share-btn.twitter { background-color: #1DA1F2; } /* X (Twitter) */
        .sns-share-btn.facebook { background-color: #1877F2; }
        .sns-share-btn.threads { background-color: #000000; } /* Threads official color is black */
        .sns-share-btn.instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); } /* Instagram Gradient */

    /* PC用モーダルナビゲーションボタン */
    .modal-pc-nav-btn {
        display: none; /* スマホでは非表示 */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 15px 10px;
        font-size: 24px;
        cursor: pointer;
        z-index: 1001; /* モーダルコンテンツより手前、閉じるボタンよりは奥など調整 */
        border-radius: 5px;
        transition: background-color 0.3s;
    }
    .modal-pc-nav-btn:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
    .modal-pc-nav-btn.prev {
        left: -50px; /* モーダルコンテンツの外側左に配置 */
    }
    .modal-pc-nav-btn.next {
        right: -50px; /* モーダルコンテンツの外側右に配置 */
    }

    @media (min-width: 768px) { /* PC表示のブレークポイント */
        .modal-pc-nav-btn {
            display: block;
        }
        /* モーダルコンテンツが狭い場合にボタンが重ならないように調整 */
        #image-modal .modal-content {
            /* 必要に応じて margin-left, margin-right を追加してボタン用のスペースを確保 */
            /* 例: margin: 5% auto 5% 60px; (左ボタン分) */
            /* ただし、ボタンをコンテンツの外側に配置するので、コンテンツ自体のマージンは不要かも */
        }
    }
    /* スワイプ操作のためにモーダル画像に触れやすくする */
    #modal-image {
        touch-action: pan-y; /* 縦スクロールは許可しつつ、横スワイプを検知しやすくする */
    }
    /* コレクションモーダル用レアリティ表示 */
    .modal-rarity-indicator {
        position: absolute;
        top: 25px; /* modal-contentのpaddingとborderを考慮した位置 */
        left: 25px; /* modal-contentのpaddingとborderを考慮した位置 */
        font-size: 1.6em; /* 星のサイズ */
        color: #FFD700; /* ゴールド */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.4); /* 視認性向上のための軽い影 */
        z-index: 6; /* 画像やエフェクトより手前、コントロール類より奥 */
        pointer-events: none; /* クリックイベントを妨げないように */
    }