/* plugins-search.css */

/* --- デザインシステム & 変数 --- */
:root {
    --bg-app: #f8f8f8;
    /* ブログの背景色 */
    --bg-card: #ffffff;
    /* カード・パネルの背景色 */
    --bg-input: #ffffff;
    /* 入力フィールドの背景色 */
    --text-main: #333333;
    /* ブログの通常テキスト色 */
    --text-muted: #666666;
    /* ブログの薄いテキスト色 */

    /* テーマカラー (Twitterブルーに変更) */
    --theme-blue: rgb(117, 188, 229);
    --border-color-default: #d3d3d3;
    /* 標準の優しいグレーのフチ */

    --border-radius-card: 12px;
    /* ブログのカード角丸 */
    --border-radius-button: 999px;
    /* カプセルボタン */
    --border-radius-input: 999px;
    /* カプセルインプット */

    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.05);
    /* ブログのカードの影 */
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);

    --transition-smooth: all 0.2s ease;
}

/* --- 全体レイアウト --- */
/*
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, 'Inter', 'Noto Sans JP', sans-serif;
    background-color: var(--bg-app);
    color: var(--text-main);
    line-height: 1.6;
    padding: 40px 20px;
}
*/

/* アプリ内要素のみに box-sizing と余白リセットを適用 */
.app-container,
.app-container * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.app-container {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 30px;
}

/* --- ヘッダー --- */
.app-header {
    text-align: center;
    margin-bottom: 20px;
}

.app-title {
    font-family: Verdana, sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: #222222;
    /* ブログタイトルに合わせる */
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.app-subtitle {
    font-size: 1.0rem;
    color: var(--text-muted);
    font-weight: normal;
}

/* --- コントロールパネル (検索 & フィルター) --- */
.control-panel {
    background-color: var(--bg-card);
    border-radius: 16px;
    /* ブログの記事アコーディオンの角丸に合わせる */
    padding: 16px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 35px;
    border: 1px solid var(--border-color-default);
    position: relative;
    overflow: hidden;
    /* 背景画像が角丸からはみ出さないようにする */
}

/* 🎨 コントロールパネル（大枠）の背景にうっすら画像を重ねる設定 */
.control-panel::after {
    content: "";
    background-repeat: no-repeat;
    background-position: right -80px bottom -150px;
    /* 右下に配置。お好みで center center などに変更可能 */
    background-size: 320px auto;
    /* 画面の伸縮に関わらず画像の大きさを固定 */
    opacity: 1;
    /* 💡ここを変更してうっすら具合（透明度）を調整できます！ */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    /* 入力やボタンクリックの邪魔をしない */
    z-index: 2;
    /* 💡横線（z-index: 1）より手前に表示するため、2に上げます */
}

/* 🎮 COM3D2 表示時の背景画像設定 */
.game-com3d2 .control-panel::after {
    background-image: url('../images/tpcomw.png');
}

/* 🎮 CM3D2 表示時の背景画像設定（必要に応じて位置やサイズを個別に上書き調整もできます） */
.game-cm3d2 .control-panel::after {
    background-image: url('../images/tpcmw.png');
    background-position: right -85px bottom -172px;
}

/* 🎮 CRC 表示時の背景画像設定 */
.game-crc .control-panel::after {
    background-image: url('../images/tpcrcw.png');
}

/* コントロールパネルの中身（検索窓やボタン）を画像より手前に浮かせる設定 */
.control-panel>.search-row,
.control-panel>.category-panel {
    position: relative;
    z-index: 3;
    /* 💡画像（z-index: 2）より手前に表示するため、3に上げます */
}

/* 統計情報行の中身（文字やボタン）は、画像の手前に浮かせるため z-index: 3 に上げます */
.stats-row>* {
    position: relative;
    z-index: 3;
}

.search-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.search-box-wrapper {
    position: relative;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: 12px 20px 12px 46px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid var(--border-color-default);
    background-color: var(--bg-input);
    border-radius: var(--border-radius-input);
    color: var(--text-main);
    font-family: inherit;
    transition: var(--transition-smooth);
    outline: none;
}

.search-input:focus {
    border-color: var(--theme-blue);
}

.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.0rem;
    color: var(--text-muted);
    pointer-events: none;
}

.sort-box-wrapper {
    min-width: 200px;
}

.sort-select {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid var(--border-color-default);
    background-color: var(--bg-input);
    border-radius: var(--border-radius-input);
    color: var(--text-main);
    font-family: inherit;
    transition: var(--transition-smooth);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
}

.sort-select:focus {
    border-color: var(--theme-blue);
}

/* カテゴリ絞り込みエリア */
.category-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.category-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-muted);
}

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 丸っこいカテゴリトグルボタン */
.cat-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid var(--border-color-default);
    background-color: var(--bg-card);
    color: var(--text-main);
    border-radius: var(--border-radius-button);
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-smooth);
    outline: none;
    user-select: none;
}

.cat-btn:hover {
    background: #f3f3f3;
    border-color: var(--theme-blue);
    color: var(--theme-blue);
}

/* 複数選択時のアクティブ状態 (Twitterブルー単色) */
.cat-btn.active {
    background: var(--theme-blue);
    border-color: var(--theme-blue);
    color: white;
}

/* アップデート通知バナー（カテゴリ行の下） */
.update-notification-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    width: 100%;

    /* アコーディオンアニメーション用の設定 */
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        margin 0.4s ease;
}

.update-notification-container.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

.update-notification-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 2px solid #fbbf24;
    border-radius: var(--border-radius-button);
    background: linear-gradient(to right, #fffdf5 0%, #fff2cc 100%);
    color: #92400e;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
    transition: var(--transition-smooth);
    user-select: none;
    width: fit-content;
}

.update-notification-banner:hover {
    border-color: #f59e0b;
    background: linear-gradient(to right, #fef9c3 0%, #fde68a 100%);
}

.update-notification-banner.active {
    border-color: #d97706;
    background: linear-gradient(to right, #fef3c7 0%, #fde68a 100%);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

.update-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}

.update-text {
    flex: 1;
    min-width: 0;
}

.update-notification-actions {
    padding-left: 2px;
}

.update-all-done-link {
    font-size: 0.8125rem;
    font-weight: normal;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.update-all-done-link:hover {
    color: #b45309;
}

/* 統計情報とクリア */
.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color-default);
    padding-top: 18px;
    margin-top: 10px;
}

.result-stats {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-muted);
}

.reset-btn {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: underline;
    outline: none;
}

.reset-btn:hover {
    color: #ff3300;
    /* ブログのアクティブ時の色 */
}

/* --- プラグインカードリスト --- */
.plugins-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* プラグインカード (ブログの .gr 風ボーダー6px・角丸12px) */
.plugin-card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-card);
    padding: 16px 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-color-default);
    transition: var(--transition-smooth);
    position: relative;
}

.plugin-card.pinned-card {
    border: 1.5px solid #fcd34d !important;
}

/* カードヘッダー (名前、カテゴリ、ステータス) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    padding-right: 40px;
    /* 右上の絶対配置ピンと重ならないように広げます */
}

.card-title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.card-title-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.plugin-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(184, 53, 53, 0.971);
    letter-spacing: -0.3px;
    flex-shrink: 0;
}

/* 長いタイトルで日付が見えなくなる場合：タイトルを省略し日付は2行目へ */
.plugin-card.compact-title-layout .card-title-row .plugin-name {
    flex: 1 1 auto;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plugin-card.compact-title-layout .card-title-row .update-badge-container {
    flex-shrink: 0;
}


/* タグデザイン */
.tag-badge {
    padding: 3px 8px;
    font-size: 0.69rem;
    font-weight: bold;
    border-radius: 6px;
    background-color: #e1e8ed;
    color: #5e6c83;
    flex-shrink: 0;
    /* flex 内で縮まないよう固定（背景だけ切れるのを防ぐ） */
}

/* 登録日・更新日バッジ（ライトモード） */
.tag-badge-date {
    background-color: #f1f3f7 !important;
    color: var(--text-muted) !important;
}

/* 新規登録などのステータスバッジ */
.status-badge {
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 6px;
    background: #ffcc33;
    /* ブログカラー */
    color: #333333;
    box-shadow: none;
    border: 2px solid #333333;
}

/* プラグイン説明文 (太枠6pxの内側はシンプルに) */
.plugin-description {
    font-size: 0.85rem;
    color: var(--text-main);
    margin-bottom: 0;
    white-space: pre-wrap;
    background: none;
    padding: 0;
    border: none;
}

/* カードフッター (リンクボタン & 履歴ボタン) */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.links-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

a.btn-primary,
a.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: var(--border-radius-button);
    transition: var(--transition-smooth);
    font-family: inherit;
    cursor: pointer;
}

a.btn-primary {
    background: var(--theme-blue) !important;
    color: white !important;
    border: 2px solid var(--theme-blue) !important;
    padding-left: 9px !important;
    gap: 3px !important;
}

a.btn-primary:hover {
    opacity: 0.85 !important;
    background: var(--theme-blue) !important;
    color: white !important;
}

a.btn-secondary {
    background-color: #ffffff !important;
    color: var(--text-main) !important;
    border: 2px solid var(--border-color-default) !important;
}

a.btn-secondary:hover {
    background-color: #f3f3f3 !important;
    border-color: var(--theme-blue) !important;
    color: var(--theme-blue) !important;
}


.rocket-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20version%3D%271.1%27%20width%3D%27127px%27%20height%3D%27115px%27%20style%3D%27shape-rendering%3AgeometricPrecision%3B%20text-rendering%3AgeometricPrecision%3B%20image-rendering%3AoptimizeQuality%3B%20fill-rule%3Aevenodd%3B%20clip-rule%3Aevenodd%27%20xmlns%3Axlink%3D%27http%3A//www.w3.org/1999/xlink%27%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23161616%27%20d%3D%27M%2099.5%2C13.5%20C%20102.833%2C13.5%20106.167%2C13.5%20109.5%2C13.5C%20109.5%2C17.1667%20109.5%2C20.8333%20109.5%2C24.5C%20108.71%2C35.7093%20104.876%2C45.7093%2098%2C54.5C%2093.5739%2C59.7156%2088.9072%2C64.7156%2084%2C69.5C%2083.6667%2C75.1667%2083.3333%2C80.8333%2083%2C86.5C%2078.8333%2C90.6667%2074.6667%2C94.8333%2070.5%2C99C%2069.8333%2C99.6667%2069.1667%2C99.6667%2068.5%2C99C%2065.6195%2C95.7829%2062.4529%2C92.9495%2059%2C90.5C%2052.2768%2C92.9076%2045.7768%2C95.7409%2039.5%2C99C%2036.854%2C99.4974%2034.1873%2C99.6641%2031.5%2C99.5C%2028.8333%2C99.5%2026.1667%2C99.5%2023.5%2C99.5C%2023.5%2C96.5%2023.5%2C93.5%2023.5%2C90.5C%2023.3011%2C87.059%2023.8011%2C83.7256%2025%2C80.5C%2028.4424%2C75.4472%2030.9424%2C69.9472%2032.5%2C64C%2030.0505%2C60.5471%2027.2171%2C57.3805%2024%2C54.5C%2023.3083%2C53.5632%2023.475%2C52.8966%2024.5%2C52.5C%2029.2391%2C49.2692%2033.5724%2C45.4358%2037.5%2C41C%2043.0158%2C40.8267%2048.3491%2C40.3267%2053.5%2C39.5C%2054.5%2C38.8333%2055.5%2C38.1667%2056.5%2C37.5C%2059.5%2C35.1667%2062.1667%2C32.5%2064.5%2C29.5C%2073.9927%2C19.5896%2085.6594%2C14.2563%2099.5%2C13.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23b9b9b9%27%20d%3D%27M%2099.5%2C13.5%20C%20102.962%2C12.5184%20106.629%2C12.185%20110.5%2C12.5C%20110.817%2C16.7016%20110.483%2C20.7016%20109.5%2C24.5C%20109.5%2C20.8333%20109.5%2C17.1667%20109.5%2C13.5C%20106.167%2C13.5%20102.833%2C13.5%2099.5%2C13.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%238b0512%27%20d%3D%27M%2096.5%2C19.5%20C%2098.9479%2C18.5269%20101.615%2C18.1936%20104.5%2C18.5C%20104.806%2C21.3854%20104.473%2C24.0521%20103.5%2C26.5C%20103.5%2C24.1667%20103.5%2C21.8333%20103.5%2C19.5C%20101.167%2C19.5%2088.8333%2C19.5%2096.5%2C19.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23e21522%27%20d%3D%27M%2096.5%2C19.5%20C%2098.8333%2C19.5%20101.167%2C19.5%20103.5%2C19.5C%20103.5%2C21.8333%20103.5%2C24.1667%20103.5%2C26.5C%20102.788%2C31.3464%20101.455%2C36.013%2099.5%2C40.5C%2093.5%2C35.1667%2087.8333%2C29.5%2082.5%2C23.5C%2086.8769%2C21.2383%2091.5436%2C19.905%2096.5%2C19.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23f7f7f8%27%20d%3D%27M%2082.5%2C23.5%20C%2087.8333%2C29.5%2093.5%2C35.1667%2099.5%2C40.5C%2097.5599%2C44.2797%2095.3933%2C47.9464%2093%2C51.5C%2087.6303%2C56.702%2082.4636%2C62.0353%2077.5%2C67.5C%2071.8333%2C72.5%2066.5%2C77.8333%2061.5%2C83.5C%2061.1667%2C83.5%2060.8333%2C83.5%2060.5%2C83.5C%2057.1667%2079.8333%2053.8333%2076.1667%2050.5%2C72.5C%2046.8333%2C69.1667%2043.1667%2065.8333%2039.5%2C62.5C%2039.5%2C62.1667%2039.5%2C61.8333%2039.5%2C61.5C%2045.1667%2C56.5%2050.5%2C51.1667%2055.5%2C45.5C%2060.9647%2C40.5364%2066.298%2C35.3697%2071.5%2C30C%2075.0536%2C27.6067%2078.7203%2C25.4401%2082.5%2C23.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23767676%27%20d%3D%27M%2064.5%2C29.5%20C%2062.1667%2C32.5%2059.5%2C35.1667%2056.5%2C37.5C%2058.1667%2C33.8333%2060.8333%2C31.1667%2064.5%2C29.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23b1b1b1%27%20d%3D%27M%2074.5%2C37.5%20C%2081.8805%2C37.0502%2085.3805%2C40.3835%2085%2C47.5C%2083.8601%2C51.7353%2081.0268%2C53.7353%2076.5%2C53.5C%2070.7758%2C52.064%2068.6092%2C48.3974%2070%2C42.5C%2071.025%2C40.313%2072.525%2C38.6464%2074.5%2C37.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23797979%27%20d%3D%27M%2053.5%2C39.5%20C%2048.3491%2C40.3267%2043.0158%2C40.8267%2037.5%2C41C%2033.5724%2C45.4358%2029.2391%2C49.2692%2024.5%2C52.5C%2028.2964%2C48.2022%2032.2964%2C44.0356%2036.5%2C40C%2042.1569%2C39.5006%2047.8236%2C39.3339%2053.5%2C39.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%2301b5e6%27%20d%3D%27M%2055.5%2C45.5%20C%2050.5%2C51.1667%2045.1667%2C56.5%2039.5%2C61.5C%2036.7029%2C59.205%2034.0362%2C56.705%2031.5%2C54C%2034.1667%2C51.3333%2036.8333%2C48.6667%2039.5%2C46C%2044.8229%2C45.5006%2050.1563%2C45.334%2055.5%2C45.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%2343c4ee%27%20d%3D%27M%2050.5%2C72.5%20C%2054.7513%2C66.5782%2059.7513%2C61.2449%2065.5%2C56.5C%2066.5827%2C57.365%2066.7494%2C58.365%2066%2C59.5C%2061.8333%2C63.6667%2057.6667%2C67.8333%2053.5%2C72%20C%2052.552%2C72.4828%2051.552%2C72.6495%2050.5%2C72.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23455156%27%20d%3D%27M%2039.5%2C62.5%20C%2043.1667%2C65.8333%2046.8333%2C69.1667%2050.5%2C72.5C%2053.8333%2C76.1667%2057.1667%2C79.8333%2060.5%2C83.5C%2056.5786%2C85.0294%2052.5786%2C86.3627%2048.5%2C87.5C%2047.8333%2C86.1667%2046.8333%2C85.1667%2045.5%2C84.5C%2043.5%2C81.8333%2041.1667%2C79.5%2038.5%2C77.5C%2037.8333%2C76.1667%2036.8333%2C75.1667%2035.5%2C74.5C%2036.6373%2C70.4214%2037.9706%2C66.4214%2039.5%2C62.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%2307b8e9%27%20d%3D%27M%2077.5%2C67.5%20C%2077.666%2C72.8437%2077.4994%2C78.1771%2077%2C83.5C%2074.3333%2C86.1667%2071.6667%2C88.8333%2069%2C91.5C%2066.295%2C88.9638%2063.795%2C86.2971%2061.5%2C83.5C%2066.5%2C77.8333%2071.8333%2C72.5%2077.5%2C67.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23ed5d07%27%20d%3D%27M%2035.5%2C74.5%20C%2036.8333%2C75.1667%2037.8333%2C76.1667%2038.5%2C77.5C%2035.7689%2C80.6343%2034.4355%2C84.301%2034.5%2C88.5C%2038.6358%2C88.3447%2042.3025%2C87.0114%2045.5%2C84.5C%2046.8333%2C85.1667%2047.8333%2C86.1667%2048.5%2C87.5C%2045.0515%2C90.5576%2041.0515%2C92.5576%2036.5%2C93.5C%2034.1667%2C93.5%2031.8333%2C93.5%2029.5%2C93.5C%2029.5%2C91.5%2029.5%2C89.5%2029.5%2C87.5C%2030.1529%2C82.5285%2032.1529%2C78.1951%2035.5%2C74.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23f8c337%27%20d%3D%27M%2038.5%2C77.5%20C%2041.1667%2C79.5%2043.5%2C81.8333%2045.5%2C84.5C%2042.3025%2C87.0114%2038.6358%2C88.3447%2034.5%2C88.5C%2034.4355%2C84.301%2035.7689%2C80.6343%2038.5%2C77.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23853204%27%20d%3D%27M%2029.5%2C87.5%20C%2029.5%2C89.5%2029.5%2C91.5%2029.5%2C93.5C%2031.8333%2C93.5%2034.1667%2C93.5%2036.5%2C93.5C%2034.0521%2C94.4731%2031.3854%2C94.8064%2028.5%2C94.5C%2028.1984%2C91.9407%2028.5318%2C89.6074%2029.5%2C87.5%20Z%27/%3E%3C/g%3E%3Cg%3E%3Cpath%20style%3D%27opacity%3A1%27%20fill%3D%27%23dbdbdb%27%20d%3D%27M%2023.5%2C90.5%20C%2023.5%2C93.5%2023.5%2C96.5%2023.5%2C99.5C%2026.1667%2C99.5%2028.8333%2C99.5%2031.5%2C99.5C%2028.7131%2C100.477%2025.7131%2C100.81%2022.5%2C100.5C%2022.1872%2C96.9581%2022.5206%2C93.6248%2023.5%2C90.5%20Z%27/%3E%3C/g%3E%3C/svg%3E");
}

/* --- 関連ファイルアコーディオン --- */
.related-toggle-btn {
    font-size: 12px;
    font-weight: bold;
    color: #17a2b8;
    background: none;
    border: 2px solid #17a2b8;
    padding: 5px 12px;
    border-radius: var(--border-radius-button);
    cursor: pointer;
    transition: var(--transition-smooth);
    outline: none;
}

.related-toggle-btn:hover {
    background-color: #17a2b8;
    color: white;
}

.related-accordion {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    border-top: 0px solid #ececec;
    margin-top: 0;
    padding-top: 0;
}

.related-accordion.open {
    max-height: 2500px;
    opacity: 1;
    border-top: 1px dashed var(--border-color-default);
    margin-top: 16px;
    padding-top: 16px;
}

/* --- バージョン履歴アコーディオン --- */
.history-toggle-btn {
    font-size: 12px;
    font-weight: bold;
    color: var(--theme-blue);
    background: none;
    border: 2px solid var(--theme-blue);
    padding: 5px 12px;
    border-radius: var(--border-radius-button);
    cursor: pointer;
    transition: var(--transition-smooth);
    outline: none;
}

.history-toggle-btn:hover {
    background-color: var(--theme-blue);
    color: white;
}

/* アコーディオンのコンテナ */
.history-accordion {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    border-top: 0px solid #ececec;
    margin-top: 0;
    padding-top: 0;
}

/* アコーディオン展開状態 */
.history-accordion.open {
    max-height: 2500px;
    /* 1200px から 2500px に引き上げ */
    opacity: 1;
    border-top: 1px dashed var(--border-color-default);
    margin-top: 16px;
    padding-top: 16px;
}

/* もっと開くボタンクリック時の高さ制限解除 */
.history-accordion.expanded {
    max-height: none !important;
    /* 制限を完全になくす */
}

/* もっと開くボタンのデザイン */
.more-history-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: bold;
    color: var(--theme-blue);
    background-color: #f0f7fb;
    border: 1px dashed var(--theme-blue);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    outline: none;
    text-align: center;
}

.more-history-btn:hover {
    background-color: var(--theme-blue);
    color: white;
    border-style: solid;
}

.history-title {
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 12px;
    color: var(--text-main);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 履歴個別アイテム */
.history-item {
    background-color: #fafbfc;
    border-radius: 8px;
    padding: 12px 16px;
    border-left: 4px solid var(--theme-blue);
}

.history-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.history-desc {
    font-size: 0.85rem;
    color: #4a5568;
    white-space: pre-wrap;
    margin-bottom: 8px;
    word-break: break-word;
}

a.history-dl-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--theme-blue) !important;
    text-decoration: underline !important;
}

a.history-dl-link:hover {
    opacity: 0.8 !important;
    color: var(--theme-blue) !important;
}

/* --- ローディング & 空状態 --- */
.loading-state,
.empty-state {
    text-align: center;
    padding: 50px 20px;
    background-color: var(--bg-card);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    border: 2px solid var(--border-color-default);
}

.spinner {
    width: 36px;
    height: 36px;
    border: 4px solid rgba(76, 169, 223, 0.1);
    border-top-color: var(--theme-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.empty-state p {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: bold;
}

/* --- 無限スクロール用スタイル --- */
.scroll-sentinel {
    height: 10px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.scroll-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background-color: var(--bg-card);
    border-radius: var(--border-radius-card);
    border: 2px solid var(--border-color-default);
    margin-top: 10px;
}

.loader-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-muted);
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(76, 169, 223, 0.1);
    border-top-color: var(--theme-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* --- ピン留め＆お気に入りお知らせ用スタイル --- */
/* ピンとUPDATEバッジを右上に縦並びにするグループ */
.pin-group {
    position: absolute;
    top: 10px;
    right: 12px;

    /* UPDATEバッジの幅に合わせて横幅を固定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.pin-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    outline: none;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pin-btn:hover {
    transform: scale(1.15) rotate(10deg);
}

.pin-btn.pinned {
    font-size: 18px;
    line-height: 1;
}

.pin-svg {
    width: 18px;
    height: 18px;
    color: #a0aec0;
    /* 薄いグレー */
    transition: all 0.2s ease;
}

.pin-svg:hover {
    color: #4a5568;
}

/* --- タグの横スクロール＆スライドフェード用のスタイル --- */
.card-tags-container {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    /* 回り込み時に横幅いっぱいに広がるように 100% に変更 */
    overflow: hidden;
}

/* 1行目の日付タグコンテナを右詰めに寄せる設定 */
.date-tags-container {
    margin-left: auto;
    flex: 0 1 auto;
    /* 必要以上に広がらず、中身のサイズにフィットさせる */
}

.cat-tags-container {
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    margin-bottom: 12px;
}

/* タイトルが長いときに日付だけをタイトル直下へ移した行 */
.date-overflow-container {
    width: 100%;
    max-width: 100%;
}

.card-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;

    /* スクロールバーの非表示化 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 横スクロール時はコンテナ側でボタン分の余白を確保（.card-tags の padding では効かない） */
.card-tags-container.has-scroll {
    padding-right: 28px;
}

.card-tags-container.has-scroll .card-tags {
    padding-right: 4px;
    /* 最後までスクロールしたときの端余白 */
}

.card-tags .update-badge-container {
    flex-shrink: 0;
}

.card-tags::-webkit-scrollbar {
    display: none;
}

/* 右端のフェードアウト効果（スクロールボタンの左側に配置） */
.card-tags-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 28px;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card-tags-container.has-scroll::after {
    opacity: 1;
}

/* スクロール「⇨」ボタン */
.tags-scroll-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    /* 背景を消す */
    border: none;
    /* 枠線を消す */
    width: 20px;
    height: 20px;
    display: none;
    /* デフォルトは非表示 */
    align-items: center;
    justify-content: center;
    font-size: 14px;
    /* 矢印を少し大きめに */
    font-weight: bold;
    cursor: pointer;
    box-shadow: none;
    /* 影を消す */
    color: #718096;
    /* 落ち着いたグレー色 */
    z-index: 3;
    outline: none;
    transition: color 0.2s, transform 0.2s;
    user-select: none;
}

.tags-scroll-btn:hover {
    color: var(--theme-blue);
    /* ホバー時はテーマブルーに */
    transform: translateY(-50%) scale(1.15);
}

/* UPDATE バッジ用スタイル */
.update-badge-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.update-badge {
    background-color: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 3px 8px;
    /* タイトル横に馴染むようサイズを微調整 */
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* 一時的なアップデート完了用の極薄グレー表示 */
.update-badge.dismissed {
    background-color: #f3f4f6 !important;
    color: #a1a1aa !important;
    border: 1px solid #e5e7eb !important;
    animation: none !important;
}

.update-dismiss-btn {
    position: absolute;
    top: -8px;
    right: -10px;
    background: none;
    border: none;
    color: #000000;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    z-index: 5;
    padding: 2px;
    line-height: 1;
    transition: var(--transition-smooth);
    outline: none;
    font-family: system-ui, -apple-system, sans-serif;
}

.update-dismiss-btn:hover {
    color: #ff3300;
    transform: scale(1.2);
}

/* 吹き出し（ツールチップ）本体 */
.update-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 135%;
    /* バッジの上部に表示 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    color: #333333;
    text-align: left;
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid #fbbf24;
    /* バナーとお揃いのゴールドイエロー */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 100;
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
    line-height: 1.5;
}

/* 吹き出しのしっぽ（外側のゴールド枠三角形） */
.update-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #fbbf24 transparent transparent transparent;
}

/* 吹き出しのしっぽ（内側の白色塗りつぶし三角形） */
.update-tooltip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    z-index: 101;
    margin-top: -2px;
    /* 枠線と重ねる調整 */
}

/* ホバー時にディレイなしで即時表示 */
.update-dismiss-btn:hover .update-tooltip {
    visibility: visible;
    opacity: 1;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* 「ピン留め」カテゴリボタン専用スタイル */
.cat-btn.pin-filter {
    background-color: #fffbfb;
    border-color: #fcc6cd;
    color: #d24e4e;
}

/* COM3D2のみ、改行による上の余分な gap (8px分) を引っ張って相殺します */
.game-com3d2 .cat-btn.pin-filter {
    margin-top: -8px;
}

.cat-btn.pin-filter:hover {
    background-color: #ffeef0;
    border-color: #ffa3b1;
    color: #cc3333;
}

.cat-btn.pin-filter.active {
    background-color: #ffd6dc !important;
    border-color: #cc3333 !important;
    color: #cc3333 !important;
}

/* 「公開停止・削除」カテゴリボタン */
.cat-btn.cat-discontinued-filter {
    color: #888888;
}

.game-com3d2 .cat-btn.cat-discontinued-filter {
    margin-top: -8px;
}

.cat-btn.cat-discontinued-filter:hover {
    background-color: #f3f3f3;
    border-color: var(--theme-blue);
    color: #666666;
}

.cat-btn.cat-discontinued-filter.active {
    background-color: var(--theme-blue) !important;
    border-color: var(--theme-blue) !important;
    color: white !important;
}

/* 公開停止・削除プラグイン */
.discontinued-plugin .plugin-name.discontinued-name,
.plugin-card.discontinued-plugin .plugin-name {
    color: #888888;
}

.tag-badge.cat-discontinued-badge {
    background-color: #ececec;
    color: #888888;
}

a.btn-primary.btn-discontinued,
.discontinued-plugin a.btn-primary.dl-btn {
    background: #f3f3f3 !important;
    color: #777777 !important;
    border: 2px solid #bdbdbd !important;
}

a.btn-primary.btn-discontinued:hover,
.discontinued-plugin a.btn-primary.dl-btn:hover {
    background: #e8e8e8 !important;
    color: #666666 !important;
    border-color: #9e9e9e !important;
    opacity: 1 !important;
}

.history-dl-link.history-dl-discontinued {
    color: #888888 !important;
    border-color: #bdbdbd !important;
}

/* --- テーマ側の .history-item の Flexbox スタイルとの競合をリセット --- */
.history-accordion .history-item,
.related-accordion .history-item {
    display: block !important;
}

/* 5件目以降は「もっと開く」まで非表示（inline style より !important で制御） */
.history-accordion.open:not(.expanded) .history-item.hidden-history {
    display: none !important;
}

/* ==========================================
   ダークモード用の配色ルール (Dark Mode Color Rules)
   ========================================== */
html.dark-mode {
    --bg-app: #121212;
    --bg-card: #1e1e1e;
    --bg-input: #262626;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color-default: #3f3f3f;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* 🎮 COM3D2 ダークモード背景壁紙 */
html.dark-mode .game-com3d2 .control-panel::after {
    background-image: url('../images/tpcomd.png');
}

/* 🎮 CM3D2 ダークモード背景壁紙 */
html.dark-mode .game-cm3d2 .control-panel::after {
    background-image: url('../images/tpcmd.png');
}

/* 🎮 CRC ダークモード背景壁紙 */
html.dark-mode .game-crc .control-panel::after {
    background-image: url('../images/tpcrcb.png');
}

/* アップデート通知バナーのダークモード調整 */
html.dark-mode .update-notification-banner {
    border-color: #d97706;
    background: linear-gradient(to right, #2d2412 0%, #3a2e16 100%);
    color: #fde68a;
}

html.dark-mode .update-notification-banner:hover {
    border-color: #f59e0b;
    background: linear-gradient(to right, #3a2e16 0%, #4c3c1d 100%);
}

html.dark-mode .update-notification-banner.active {
    border-color: #fbbf24;
    background: linear-gradient(to right, #4c3c1d 0%, #5d4a24 100%);
}

html.dark-mode .update-all-done-link:hover {
    color: #f59e0b;
}

/* タグバッジのダークモード調整 */
html.dark-mode .tag-badge {
    background-color: #2d3748;
    color: #cbd5e1;
}

/* カテゴリトグルボタンのホバー背景ダークモード調整 */
html.dark-mode .cat-btn:hover {
    background: #2d3748;
}

/* アコーディオン内の「もっと開く」ボタンのダークモード調整 */
html.dark-mode .more-history-btn {
    background-color: #1a2a3a;
    border-color: var(--theme-blue);
    color: #e2e8f0;
}

/* 履歴個別アイテムのダークモード調整 */
html.dark-mode .history-item {
    background-color: #262626;
}

html.dark-mode .history-desc {
    color: #cbd5e1;
}

/* 登録日・更新日バッジのダークモード調整 (白浮き防止) */
html.dark-mode .tag-badge-date {
    background-color: #2d3748 !important;
    color: var(--text-muted) !important;
}

/* ダウンロードボタンの文字潰れ防止 & 背景色の調整 (白浮き防止) */
html.dark-mode a.btn-primary:link,
html.dark-mode a.btn-primary:visited,
html.dark-mode a.btn-primary:hover,
html.dark-mode a.btn-primary:active {
    color: #ffffff !important;
    background-color: #366995 !important;
    border-color: #2b557a !important;
}

/* 説明ページなどの2次ボタンのダークモード調整 (白浮き防止) */
html.dark-mode a.btn-secondary:link,
html.dark-mode a.btn-secondary:visited {
    color: var(--text-main) !important;
    background-color: var(--bg-input) !important;
    border-color: var(--border-color-default) !important;
}

html.dark-mode a.btn-secondary:hover {
    color: var(--theme-blue) !important;
    border-color: var(--theme-blue) !important;
    background-color: #262626 !important;
}

/* 「📌 ピン留め」カテゴリボタンのダークモード調整 (白浮き防止・他と統一) */
html.dark-mode .cat-btn.pin-filter {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color-default) !important;
    color: var(--text-main) !important;
}

html.dark-mode .cat-btn.pin-filter:hover {
    background-color: #2d3748 !important;
    border-color: var(--theme-blue) !important;
    color: var(--theme-blue) !important;
}

html.dark-mode .cat-btn.pin-filter.active {
    background-color: var(--theme-blue) !important;
    border-color: var(--theme-blue) !important;
    color: #ffffff !important;
}

html.dark-mode .cat-btn.cat-discontinued-filter {
    color: #9e9e9e !important;
}

html.dark-mode .cat-btn.cat-discontinued-filter:hover {
    background-color: #2d3748 !important;
    border-color: var(--theme-blue) !important;
    color: #bdbdbd !important;
}

html.dark-mode .cat-btn.cat-discontinued-filter.active {
    background-color: var(--theme-blue) !important;
    border-color: var(--theme-blue) !important;
    color: #ffffff !important;
}

html.dark-mode .discontinued-plugin .plugin-name.discontinued-name,
html.dark-mode .plugin-card.discontinued-plugin .plugin-name {
    color: #9e9e9e;
}

html.dark-mode .tag-badge.cat-discontinued-badge {
    background-color: #333333;
    color: #9e9e9e;
}

html.dark-mode a.btn-primary.btn-discontinued,
html.dark-mode .discontinued-plugin a.btn-primary.dl-btn {
    background: #2a2a2a !important;
    color: #9e9e9e !important;
    border-color: #555555 !important;
}

html.dark-mode a.btn-primary.btn-discontinued:hover,
html.dark-mode .discontinued-plugin a.btn-primary.dl-btn:hover {
    background: #333333 !important;
    color: #bdbdbd !important;
    border-color: #777777 !important;
}

html.dark-mode .history-dl-link.history-dl-discontinued {
    color: #9e9e9e !important;
    border-color: #555555 !important;
}

/* 新規登録などのステータスバッジのダークモード調整 (抑えめの黄色) */
html.dark-mode .status-badge {
    background: #dcb02f !important;
    border-color: #dcb02f !important;
    color: #222222 !important;
}

/* 「📌 ピン留め」ボタンの強制改行 */
.pin-filter-break {
    flex-basis: 100%;
    height: 0;
}

/* ==========================================================================
   プラグインまとめ内部リンク
   ========================================================================== */
.game-links {
    display: flex;
    gap: 21px;
    /* 💡リンク同士の間隔を少し広げました */
    align-items: center;
}

.game-link {
    font-size: 13px;
    font-weight: bold;
    color: var(--theme-blue, #4ca9df) !important;
    /* 💡このページで使っている水色に設定 */
    text-decoration: none !important;
    /* 💡デフォルトの下線を無しにしました */
    transition: var(--transition-smooth);
}

.game-link:hover {
    color: var(--theme-blue-hover, #215f83) !important;
    text-decoration: underline !important;
    /* 💡ホバー時のみ下線を表示します */
}

.game-link-active {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-muted, #888888) !important;
    /* 💡全〇件と同じ灰色に統一 */
    border-bottom: none !important;
    /* 💡浮いて見えた黒い太下線を削除しました */
    padding-bottom: 0;
    text-decoration: underline !important;
    /* 💡灰色テキストの下線を復活させます */
}

/* ダークモード対応 */
html.dark-mode .game-link-active {
    color: var(--text-muted, #a3a3a3) !important;
}