/* ==========================================================
   更新情報 (Update Info)
   ========================================================== */
.update-info {
    margin-bottom: 20px !important;
    padding: 15px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-light) !important;
    color: var(--text-primary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

.update-info span:first-child {
    font-weight: bold !important;
    font-size: 1.1rem !important;
    color: var(--accent-cyan) !important;
}

.update-info .text-danger {
    color: #ff4d4d !important;
}

/* ==========================================================
   リアルタイムランキング テーブル (Glassmorphism調)
   ========================================================== */
.google-auto-ads-disable {
    width: 100%;
    /* overflow-x: auto; を削除し、横スクロールを防止 */
    border-radius: 12px !important;
    border: 1px solid var(--glass-border) !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: var(--shadow-light) !important;
    margin-bottom: 30px !important;

    /* スクロールパフォーマンス改善: GPUアクセラレーションを強制 */
    will-change: transform !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    /* iOSの滑らかさ */

    /* 画面外の描画をスキップしてカクつきを防止 */
    content-visibility: auto !important;
    contain-intrinsic-size: 1000px !important;
    /* 推定の高さ */
}

/* モバイル端末(768px以下)では描画負荷をさらに軽減 */
@media screen and (max-width: 768px) {

    .google-auto-ads-disable,
    .update-info {
        backdrop-filter: blur(4px) !important;
        /* 12pxから4pxに軽量化 */
        -webkit-backdrop-filter: blur(4px) !important;
    }

    table.ranking.tomo-table th.head {
        backdrop-filter: none !important;
        /* ヘッダーのブラーをオフにして描画を軽く */
        background: rgba(15, 23, 42, 0.95) !important;
    }
}

table.ranking.tomo-table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    text-align: center !important;
    color: var(--text-primary) !important;
    table-layout: fixed !important;
    /* テーブル幅を100%に固定し、各列の幅を制御可能にする */
}

table.ranking.tomo-table th,
table.ranking.tomo-table td {
    padding: 6px 2px !important;
    /* 全体の余白も限界まで詰める */
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    /* 横線のみでスッキリと */
    font-size: clamp(10px, 1.5vw, 13px) !important;
    /* スマホでも入るように少し縮小 */
    word-break: break-all !important;
    vertical-align: middle !important;
    transition: background-color 0.2s ease !important;
}

/* 最後の行は下線を消して枠にフィットさせる */
table.ranking.tomo-table tbody tr:last-child th,
table.ranking.tomo-table tbody tr:last-child td {
    border-bottom: none !important;
}

table.ranking.tomo-table th.head {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(8px);
    font-weight: 600 !important;
    color: #fff !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
    /* ヘッダの下を少し強調 */
    letter-spacing: 0.05em !important;
}

/* 圏内 / 圏外 ラベル */
th.rank_in {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.05) 100%) !important;
    color: var(--accent-cyan) !important;
    font-weight: bold !important;
    padding: 10px 4px !important;
    line-height: 1.2 !important;
}

th.rank_out {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    color: var(--text-muted) !important;
    font-weight: bold !important;
    padding: 10px 4px !important;
    line-height: 1.2 !important;
}

/* アーティスト・曲名の左寄せ表示と省略（...）処理 */
td.artist,
td.title {
    text-align: left !important;
    white-space: nowrap !important;
    /* 1行に制限 */
    overflow: hidden !important;
    /* はみ出しを隠す */
    text-overflow: ellipsis !important;
    /* ... で省略 */
    max-width: 100px !important;
    /* 幅の目安（table-layout: fixedに依存） */
    line-height: 1.4 !important;
}

/* 列幅の調整（table-layout: fixed前提） */
th.onair {
    width: 6% !important;
}

/* できるだけ短く */
th.rank {
    width: 8% !important;
}

/* アーティスト名・曲名の列を最大化 */
th.head:nth-child(3) {
    width: 51% !important;
    /* 53% から 2% 削減 */
}

/* 短めに */
th.daily_rank {
    width: 9% !important;
}

/* 上部ヘッダ (順位変動) */
th.rank_diff {
    width: 26% !important;
    /* 24% から 2% 増加 */
}

/* 5M, 2H, 6H, 24H */
th.diff {
    width: 6.5% !important;
    /* 6% から 0.5% ずつ増加 (合計 2%) */
}

td.artist {
    font-size: 0.75em !important;
    color: var(--text-muted) !important;
    /* アーティスト名行は高さを狭く（paddingを最小化） */
    padding: 1px 4px 0px 4px !important;
    line-height: 1.1 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    /* アーティストセルに微かな色を付けて視認性向上 */
}

td.title a {
    color: #fff !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    font-weight: 500 !important;
    font-size: 1.1em !important;
    /* 曲名を少し強調 */
    padding: 6px 0 !important;
    /* タイトルだけ縦幅を広く */
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================
   順位による装飾 (1位, 2位, 3位)
   ========================================================== */
.one {
    color: gold !important;
    /* ゴールド */
    font-weight: bold !important;
    font-size: 1.1em !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
}

.two {
    color: silver !important;
    /* シルバー */
    font-weight: bold !important;
    font-size: 1.05em !important;
    text-shadow: 0 0 6px rgba(192, 192, 192, 0.5) !important;
}

.three {
    color: bronze !important;
    /* ブロンズ */
    font-weight: bold !important;
    font-size: 1.05em !important;
    text-shadow: 0 0 6px rgba(205, 127, 50, 0.5) !important;
}

.top25 {
    color: var(--accent-pink) !important;
    font-weight: bold !important;
}

/* ==========================================================
   順位変動 (up/down)
   ========================================================== */
td.diff {
    font-weight: bold !important;
    white-space: nowrap !important;
    /* 改行を確実に防止 */
    letter-spacing: -0.05em !important;
}

td.diff.rank_up {
    /* スマホでも収まるように少し縮小 */
    font-size: 1.05em !important;
    color: white !important;
    /* ベタ塗りを少しリッチなグラデーション＋内側シャドウに */
    background: linear-gradient(135deg, #4f2929 0%, #3a1e1e 100%) !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
    padding: 8px 2px !important;
    /* 横幅を詰める */
}

td.diff.rank_up img {
    /* 緑を赤に */
    filter: hue-rotate(220deg) drop-shadow(0 0 2px rgba(255, 77, 77, 0.5)) !important;
    margin-left: 3px !important;
    /* 余白を確保して視認性を向上 */
    max-width: 10px !important;
    /* アイコンも少し小さく */
}

td.diff.rank_down {
    /* スマホでも収まるように少し縮小 */
    font-size: 1.05em !important;
    color: white !important;
    /* ベタ塗りを少しリッチなグラデーション＋内側シャドウに */
    background: linear-gradient(135deg, #1e3d6d 0%, #152b4d 100%) !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
    padding: 8px 2px !important;
    /* 横幅を詰める */
}

td.diff.rank_down img {
    /* 緑を青に */
    filter: hue-rotate(100deg) !important;
    opacity: 0.8 !important;
    margin-left: 3px !important;
    /* 余白を確保して視認性を向上 */
    max-width: 10px !important;
    /* アイコンも少し小さく */
}

td.diff img {
    vertical-align: middle !important;
    margin-left: 3px !important;
    max-width: 10px !important;
}