.vtrm-ranking{
  --vtrm-border:#dbe5ef;
  --vtrm-muted:#66758a;
  --vtrm-bg:#fff;
  --vtrm-soft:#f6f9fc;
  --vtrm-navy:#0d4666;
  margin:28px 0;
  color:inherit;
}
.vtrm-ranking *{box-sizing:border-box}
.vtrm-ranking-head{margin:0 0 18px}
.vtrm-ranking-head h2{margin:0;font-size:clamp(22px,3vw,32px);line-height:1.3}
.vtrm-card-list{display:flex;flex-direction:column;gap:14px}
.vtrm-rank-card{position:relative;display:grid;grid-template-columns:108px 96px minmax(0,1fr);gap:16px;align-items:center;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border:1px solid var(--vtrm-border);border-radius:20px;padding:15px 22px;box-shadow:0 7px 20px rgba(13,70,102,.055);overflow:hidden}
.vtrm-rank-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#b8c8d8}
.vtrm-rank-card.is-rank-1{background:linear-gradient(135deg,#fff7d9 0%,#fffdf6 38%,#fff 100%);border-color:#efd47c}
.vtrm-rank-card.is-rank-1::before{width:6px;background:linear-gradient(180deg,#f5bd25,#ffe79a,#c88a08)}
.vtrm-rank-card.is-rank-2{background:linear-gradient(135deg,#f3f6fb 0%,#fff 45%);border-color:#cbd5e1}
.vtrm-rank-card.is-rank-2::before{width:6px;background:linear-gradient(180deg,#a9b7c7,#eef3f8,#8798aa)}
.vtrm-rank-card.is-rank-3{background:linear-gradient(135deg,#fff0e5 0%,#fff 45%);border-color:#dfb08c}
.vtrm-rank-card.is-rank-3::before{width:6px;background:linear-gradient(180deg,#b97849,#e6b891,#96562f)}
.vtrm-rank-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;align-self:center}
.vtrm-rank-badge{width:78px;height:78px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#132238;color:#fff;font-weight:900;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.vtrm-rank-label{display:block;font-size:9px;line-height:1;letter-spacing:.04em;font-weight:800;white-space:nowrap;opacity:.9}.vtrm-rank-badge-inner{display:flex;align-items:center;justify-content:center;gap:2px;line-height:1}
.vtrm-rank-number{font-size:28px;line-height:1;display:block}
.vtrm-rank-unit{font-size:13px;line-height:1;display:block;transform:translateY(3px)}
.vtrm-rank-card.is-rank-1 .vtrm-rank-badge{width:78px;height:78px;border-radius:12px;background:linear-gradient(135deg,#a76b00,#f6cd59 48%,#d89a16);color:#422600;border:0}
.vtrm-rank-card.is-rank-2 .vtrm-rank-badge{width:78px;height:78px;border-radius:12px;background:linear-gradient(135deg,#77899c,#e9eef4 50%,#aab7c5);color:#243447;border:0}
.vtrm-rank-card.is-rank-3 .vtrm-rank-badge{width:78px;height:78px;border-radius:12px;background:linear-gradient(135deg,#8f5630,#e9b990 50%,#bb784c);color:#40220f;border:0}
.vtrm-rank-avatar{width:82px;height:82px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#eef4f8;border:4px solid #fff;box-shadow:0 4px 13px rgba(0,0,0,.1);font-size:30px;font-weight:900;color:#516173}
.vtrm-rank-avatar img{width:100%;height:100%;object-fit:cover}
.vtrm-rank-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center}
.vtrm-rank-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px}
.vtrm-prev-box{display:flex;align-items:center;justify-content:center;margin:0;text-align:center;line-height:1.15}
.vtrm-trend{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:66px;border-radius:12px;padding:5px 9px 6px;font-size:12px;font-weight:900;white-space:nowrap;background:#f1f5f9;color:#475569}
.vtrm-trend-label{display:block;font-size:9px;line-height:1;font-weight:800;letter-spacing:.02em;color:currentColor;opacity:.78}
.vtrm-trend-value{display:block;font-size:12px;line-height:1;font-weight:900}
.vtrm-trend.is-up{background:#eaf8ef;color:#166534}
.vtrm-trend.is-down{background:#fff1f1;color:#b91c1c}
.vtrm-trend.is-new{background:#eef2ff;color:#3730a3}
.vtrm-trend.is-same{background:#f3f4f6;color:#475569}
.vtrm-rank-name{margin:0;font-size:clamp(18px,2.2vw,24px);line-height:1.25;font-weight:900}
.vtrm-rank-name a{color:var(--color_link,#1176d4);text-decoration:none}
.vtrm-rank-name a:hover{text-decoration:underline}
.vtrm-rank-affiliation{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin:0;padding:4px 10px;border:1px solid #c9d6e3;border-radius:999px;background:#f5f8fb;font-size:15px;line-height:1.2;font-weight:800;color:#53657a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtrm-rank-metric{min-width:180px;text-align:center;padding-left:18px;border-left:1px solid #e3eaf1}
.vtrm-value-label{display:block;font-size:12px;letter-spacing:.06em;font-weight:800;color:var(--vtrm-muted);margin-bottom:4px}
.vtrm-value-line{display:inline-flex;align-items:baseline;justify-content:center;gap:4px;white-space:nowrap}
.vtrm-value-number{font-size:clamp(31px,3.7vw,44px);font-weight:900;line-height:1.05;color:var(--vtrm-navy);font-variant-numeric:tabular-nums}
.vtrm-value-suffix{font-size:14px;font-weight:800;color:#53657a}
.vtrm-rank-card.is-top .vtrm-value-number{font-size:clamp(31px,3.7vw,44px)}
.vtrm-rank-card.is-rank-1 .vtrm-value-number{
  color:#d4a300;
  background:linear-gradient(180deg,#ffe27a 0%,#d5a000 48%,#a96d00 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vtrm-rank-card.is-rank-2 .vtrm-value-number{color:#7f8d9d}
.vtrm-rank-card.is-rank-3 .vtrm-value-number{color:#b06f45}
.vtrm-ad-slot{margin:8px 0;text-align:center;clear:both}
.vtrm-source{font-size:12px;color:var(--vtrm-muted);text-align:right;margin-top:12px}
@media(min-width:761px){
  .vtrm-card-list{gap:10px}
  .vtrm-rank-card{grid-template-columns:78px 122px minmax(0,1fr);gap:14px;padding-top:9px;padding-bottom:9px}
  .vtrm-rank-side{gap:7px}
  .vtrm-rank-badge,
  .vtrm-rank-card.is-rank-1 .vtrm-rank-badge,
  .vtrm-rank-card.is-rank-2 .vtrm-rank-badge,
  .vtrm-rank-card.is-rank-3 .vtrm-rank-badge{width:68px;height:68px;border-radius:11px}
  .vtrm-rank-label{font-size:8px}
  .vtrm-rank-number{font-size:24px}
  .vtrm-rank-unit{font-size:12px}
  .vtrm-rank-avatar{width:106px;height:106px;font-size:36px}
  .vtrm-rank-info{gap:5px}
  .vtrm-rank-name{font-size:clamp(21px,2.35vw,27px)}
  .vtrm-rank-affiliation{font-size:16.5px;padding:4px 11px}
}
@media(max-width:760px){
  .vtrm-rank-card{grid-template-columns:72px 72px minmax(0,1fr);gap:10px;padding:13px 12px}
  .vtrm-rank-badge,.vtrm-rank-card.is-rank-1 .vtrm-rank-badge,.vtrm-rank-card.is-rank-2 .vtrm-rank-badge,.vtrm-rank-card.is-rank-3 .vtrm-rank-badge{width:60px;height:60px;border-radius:10px}.vtrm-rank-label{font-size:8px}
  .vtrm-rank-number{font-size:22px}
  .vtrm-rank-avatar,.vtrm-rank-card.is-top .vtrm-rank-avatar{width:66px;height:66px}
  .vtrm-rank-main{grid-template-columns:1fr;column-gap:0;row-gap:8px}
  .vtrm-rank-metric{text-align:left;border-left:0;border-top:1px solid #e7edf3;padding:8px 0 0;margin-top:0;min-width:0}
  .vtrm-value-label{margin-bottom:2px}
  .vtrm-value-number,.vtrm-rank-card.is-top .vtrm-value-number{font-size:28px}
  .vtrm-rank-affiliation{font-size:15px}
}
@media(max-width:460px){
  /* スマホ：左に順位、右上に「画像＋所属＋名前」、右下は数値だけ */
  .vtrm-rank-card{
    grid-template-columns:92px 58px minmax(0,1fr);
    grid-template-rows:auto auto;
    grid-template-areas:
      "rank avatar info"
      "rank metric metric";
    gap:7px 8px;
    align-items:center;
    padding:11px 9px 11px 0;
  }
  .vtrm-rank-side{
    grid-area:rank;
    align-self:stretch;
    justify-content:center;
    gap:11px;
    border-right:1px solid #dce5ee;
    padding:0 14px 0 20px;
    min-width:0;
  }
  .vtrm-rank-avatar{
    grid-area:avatar;
    margin:0;
    justify-self:center;
    align-self:center;
  }
  .vtrm-rank-main{display:contents}
  .vtrm-rank-info{
    grid-area:info;
    min-width:0;
    gap:4px;
    align-self:center;
  }
  .vtrm-rank-metric{
    grid-area:metric;
    min-width:0;
    margin:2px 0 0;
    padding:7px 0 0;
    border-left:0;
    border-top:1px solid #e7edf3;
    text-align:center;
  }
  .vtrm-value-label{display:block;margin-bottom:2px;font-size:11px}
  .vtrm-value-line{display:inline-flex;justify-content:center}
  .vtrm-rank-badge,.vtrm-rank-card.is-rank-1 .vtrm-rank-badge,.vtrm-rank-card.is-rank-2 .vtrm-rank-badge,.vtrm-rank-card.is-rank-3 .vtrm-rank-badge{width:58px;height:58px;border-radius:9px}.vtrm-rank-label{font-size:7.5px}
  .vtrm-rank-avatar,.vtrm-rank-card.is-top .vtrm-rank-avatar{width:50px;height:50px;border-width:2px}
  .vtrm-rank-number{font-size:19px}
  .vtrm-rank-name{font-size:17px}
  .vtrm-rank-affiliation{font-size:13px;padding:3px 8px}
  .vtrm-trend{min-width:62px;padding:5px 7px 6px}
  .vtrm-trend-label{font-size:8px}
  .vtrm-trend-value{font-size:11px}
  .vtrm-value-number,.vtrm-rank-card.is-top .vtrm-value-number{font-size:28px}
  .vtrm-value-suffix{font-size:12px}
}

/* v4.1.0 YouTube API audit mode */
.vtrm-compliance-block{padding:16px;border:1px solid #ddd;border-radius:10px;background:#fafafa}.vtrm-compliance-block p{margin:.35em 0}.vtrm-compliance-source{white-space:nowrap}

/* v4.1.7: 壊れたVTuber画像は名前のalt表示ではなく共通フォールバックへ切替 */
.vtrm-rank-avatar{position:relative}
.vtrm-avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;line-height:1.05;letter-spacing:.04em;font-weight:900;color:#8190a2;background:linear-gradient(145deg,#edf3f7,#f8fafc);opacity:0;pointer-events:none}
.vtrm-rank-avatar.is-image-missing .vtrm-avatar-fallback{opacity:1}
.vtrm-rank-avatar.is-image-missing .vtrm-avatar-image{display:none!important}
