/* =====================================================================
   イヴンタイト デザイン設定（このファイルだけで見た目を管理します）
   ---------------------------------------------------------------------
   ・色・形・文字サイズ・発光の強さは、すべてこの :root の中の数値で決まります。
   ・これより下のルールには、色コードを直接書いていません。
   ・色を変えたいとき → このブロックの数値だけを書き換えてください。
   ・ページの項目の並びや増減を変えるときだけ、PHP側の修正が必要です。
   ===================================================================== */
:root {

  /* ---------- 色：ブランドの緑 ---------- */
  --ivnt-green:          #8bc22d;   /* 基本の緑（枠線・アクセント・ボタン） */
  --ivnt-green-rgb:      139,194,45; /* 上と同じ色のRGB（発光・半透明用。上を変えたらここも合わせる） */
  --ivnt-green-light:    #b6dd6a;   /* 暗い面の上で使う明るい緑の文字 */
  --ivnt-green-pale:     #b5d68c;   /* 暗い面の上で使う淡い緑の文字 */
  --ivnt-green-mid:      #6aa021;   /* 中間の緑（下線など） */
  --ivnt-green-deep:     #4f7d12;   /* 白い面の上で使う濃い緑の文字 */
  --ivnt-green-ink:      #2f4a0f;   /* 白い面の上で使う最も濃い緑 */
  --ivnt-green-muted:    #566a3e;   /* くすんだ緑（区切り記号など） */
  --ivnt-green-tint:     #f5faea;   /* 白い面の上の薄い緑の背景（注意書き） */
  --ivnt-green-bg:       #f6faf0;   /* 白い面の上のごく薄い緑の背景（ピックアップ） */
  --ivnt-green-on-dark:  #eef5dc;   /* 暗い面の上の、緑がかった本文の色 */

  /* ---------- 色：暗い面（ゲーム画面のパネルに合わせた黒） ---------- */
  --ivnt-surface:        #202123;   /* 暗い面の基本色 */
  --ivnt-surface-raised: #2b2c2f;   /* 少し明るい暗い面（グラデーションの端） */
  --ivnt-surface-deep:   #141516;   /* 最も深い暗い面 */
  --ivnt-line-dark:      #35363a;   /* 暗い面の枠線 */
  --ivnt-surface-red:        #1a1015; /* SSランク用の赤みのある暗い面 */
  --ivnt-surface-red-raised: #2a1015;

  /* ---------- 色：ランク・強調色 ---------- */
  --ivnt-red:        #ff2244;  --ivnt-red-rgb:    255,34,68;   /* SSランク・限定・警告 */
  --ivnt-red-light:  #ff6b7d;  --ivnt-red-light2: #ff8a97;
  --ivnt-red-pale:   #f0dade;  --ivnt-red-pale2:  #f0d0d4;
  --ivnt-red-deep:   #c8102e;
  --ivnt-yellow:     #ffd400;  --ivnt-yellow-rgb: 255,212,0;   /* Aランク */
  --ivnt-blue:       #3388ff;  --ivnt-blue-rgb:   51,136,255;  /* Bランク・コラボ */
  --ivnt-gray:       #888888;                                  /* Cランク */

  /* ---------- 色：レアリティ（アイコンの左上の三角。URは上から下へ、マゼンタ→水色） ---------- */
  --ivnt-rarity-ur-a: #e44ce8;  --ivnt-rarity-ur-b: #3acbf9;
  --ivnt-rarity-sr-a: #f9c453;  --ivnt-rarity-sr-b: #fdae4e;
  --ivnt-rarity-r-a:  #28cfee;  --ivnt-rarity-r-b:  #28cfee;

  /* ---------- 色：属性（文字色／RGB） ---------- */
  --ivnt-attr-fire:    #ff8a6b;  --ivnt-attr-fire-rgb:    255,100,70;
  --ivnt-attr-water:   #6cc2ff;  --ivnt-attr-water-rgb:   77,179,255;
  --ivnt-attr-wind:    #63e8ad;  --ivnt-attr-wind-rgb:    75,227,160;
  --ivnt-attr-thunder: #ffd83d;
  --ivnt-attr-light:   #fff3b0;  --ivnt-attr-light-rgb:   255,243,176;
  --ivnt-attr-dark:    #c7a2ff;  --ivnt-attr-dark-rgb:    185,140,255;

  /* ---------- 色：文字・無彩色 ---------- */
  --ivnt-white:       #ffffff;  --ivnt-white-rgb: 255,255,255;
  --ivnt-black-rgb:   0,0,0;                    /* 影用 */
  --ivnt-ink:         #1a1a1a;                  /* 白い面の上の本文 */
  --ivnt-ink-title:   #0f0f0f;                  /* 白い面の上の見出し */
  --ivnt-ink-strong:  #000000;                  /* 強調 */
  --ivnt-ink-soft:    #333333;                  /* やや薄い本文 */
  --ivnt-gray-100:    #e2e2e2;  --ivnt-gray-150: #d0d0d0;  --ivnt-gray-200: #dddddd;
  --ivnt-gray-300:    #cccccc;  --ivnt-gray-600: #555555;

  /* ---------- 形：角の丸み・切り欠き・枠線 ---------- */
  --ivnt-radius-sm: 4px;  --ivnt-radius: 8px;  --ivnt-radius-md: 10px;  --ivnt-radius-lg: 12px;
  --ivnt-cut-sm: 6px;  --ivnt-cut: 8px;  --ivnt-cut-md: 10px;  --ivnt-cut-lg: 16px; /* 斜めに切った角の大きさ */
  --ivnt-border-w:  2px;   /* カード・ボタンの枠線の太さ */
  --ivnt-bar-w:     5px;   /* 見出しの左の太線 */
  --ivnt-bar-w-sm:  4px;   /* 注意書きの左の太線 */

  /* ---------- 文字 ---------- */
  --ivnt-fs-xxs: 10px;  --ivnt-fs-xs: 11px;  --ivnt-fs-sm: 12px;  --ivnt-fs-base: 13px;
  --ivnt-fs-md: 14px;  --ivnt-fs-lg: 15px;  --ivnt-fs-title: 20px;
  --ivnt-fs-heading: 16px;  /* 小見出し（「解説」など。読む人が見出しだと分かる大きさ） */
  --ivnt-font-mono: 'Courier New', monospace;

  /* ---------- 発光（1が基準。0で発光なし、1.5で強め） ---------- */
  --ivnt-glow-size:  1;   /* 光のにじみの大きさ */
  --ivnt-glow-alpha: 1;   /* 光の濃さ */

  /* ---------- 余白・バッジの大きさ ---------- */
  --ivnt-sp-xs: 4px;  --ivnt-sp-sm: 8px;  --ivnt-sp-md: 10px;  --ivnt-sp-lg: 12px;  --ivnt-sp-xl: 16px;
  --ivnt-badge-sm: 50px;  --ivnt-badge-md: 56px;  --ivnt-badge-lg: 64px;
}

/* =====================================================================
   ページ全体のスタイル
   ===================================================================== */
    /* =====================================================
       イヴンタイト 専用CSS（黒×ネオングリーン×レッド×イエロー）
       ivnt-クラスのみ使用。他ゲームのクラスとは完全に独立。
    ===================================================== */

    .ivnt-wrap { max-width: 100%; font-size: var(--ivnt-fs-md); }

    /* ----- カラー変数（アクセント3色） ----- */
    .ivnt-c-green { --ivc: var(--ivnt-green-rgb);  --ivc-solid:var(--ivnt-green); }
    .ivnt-c-red   { --ivc: var(--ivnt-red-rgb);  --ivc-solid:var(--ivnt-red); }
    .ivnt-c-yellow{ --ivc: var(--ivnt-yellow-rgb);  --ivc-solid:var(--ivnt-yellow); }

    /* ----- パンくず ----- */
    .ivnt-breadcrumb-bar {
        display: flex; align-items: center; gap: 4px;
        padding: 8px 12px; background: var(--ivnt-surface); border-radius: var(--ivnt-radius-sm);
        margin-bottom: 12px; font-size: var(--ivnt-fs-base); border-left: 3px solid var(--ivnt-green);
    }
    .ivnt-breadcrumb-bar a, .ivnt-breadcrumb-item { color: var(--ivnt-green-light); text-decoration: none; }
    .ivnt-breadcrumb-bar a:hover { color: var(--ivnt-green); }
    .ivnt-breadcrumb-sep { color: var(--ivnt-green-muted); margin: 0 2px; }
    .ivnt-breadcrumb-current { color: var(--ivnt-white); }
    .ivnt-updated-note { font-size: var(--ivnt-fs-sm); color: var(--ivnt-gray); margin-bottom: 8px; }

    /* ----- ページ／記事タイトル ----- */
    .ivnt-article-title, .ivnt-page-title {
        font-size: 21px; font-weight: 700; color: var(--ivnt-ink-title);
        margin: 0 0 12px; line-height: 1.4;
        border-left: 4px solid var(--ivnt-green); padding-left: 10px;
    }

    /* ----- 注意書きバー ----- */
    .ivnt-notice-bar {
        background:var(--ivnt-green-tint); border-left:4px solid var(--ivnt-green-deep); padding:10px 14px;
        border-radius:var(--ivnt-radius-sm); font-size: var(--ivnt-fs-base); color:var(--ivnt-green-ink); margin-bottom:14px; line-height:1.85;
    }

    /* ----- 汎用カード ----- */
    .ivnt-card {
        background: var(--ivnt-white); border: 1px solid var(--ivnt-gray-100); border-radius: var(--ivnt-radius-md);
        margin-bottom: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(var(--ivnt-black-rgb),.06);
    }
    .ivnt-card-body { padding: 14px 16px; }
    .ivnt-card-topbar { height:3px; background:linear-gradient(90deg,var(--ivnt-green),var(--ivnt-yellow),var(--ivnt-red)); }

    /* ----- 角欠けHUD見出し（全カード共通） ----- */
    .ivnt-section-head {
        position: relative; display: flex; align-items: center; justify-content: space-between;
        background: linear-gradient(120deg,var(--ivnt-surface) 0%,var(--ivnt-surface-raised) 55%,var(--ivnt-surface) 100%);
        padding: 11px 18px; border-left: var(--ivnt-bar-w) solid var(--ivc-solid);
        clip-path: polygon(0 0,100% 0,100% 100%,var(--ivnt-cut-lg) 100%,0 calc(100% - var(--ivnt-cut-lg)));
    }
    .ivnt-section-head-label {
        font-size: var(--ivnt-fs-md); font-weight: 700; color: var(--ivnt-white); letter-spacing: .04em;
        text-shadow: 0 0 calc(8px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.6 * var(--ivnt-glow-alpha)));
    }
    .ivnt-section-head-tag {
        font-family: var(--ivnt-font-mono); font-size: var(--ivnt-fs-xxs); letter-spacing: 1px;
        color: rgba(var(--ivc),.65);
    }

    /* ----- 角欠けタグチップ（STRONG/WEAK・限定/コラボ/報酬・UR/SR/R等） ----- */
    .ivnt-tag-chip {
        display: inline-flex; align-items: center; font-size: var(--ivnt-fs-xxs); font-weight: 800;
        letter-spacing: 1px; padding: 3px 9px 3px 7px;
        clip-path: polygon(var(--ivnt-cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--ivnt-cut-sm));
    }
    .ivnt-tag-chip--fill.ivnt-c-green  { color:var(--ivnt-surface); background:var(--ivnt-green); }
    .ivnt-tag-chip--fill.ivnt-c-red    { color:var(--ivnt-white);    background:var(--ivnt-red); }
    .ivnt-tag-chip--fill.ivnt-c-yellow { color:var(--ivnt-surface); background:var(--ivnt-yellow); }
    .ivnt-tag-chip--outline {
        color:var(--ivnt-white); background:transparent; border:1px solid rgba(var(--ivnt-white-rgb),.35);
    }

    /* ----- UPPER / LOWER 小見出し ----- */
    .ivnt-tier-tag {
        position: relative; display: flex; align-items: center; gap: 10px;
        background: linear-gradient(120deg,var(--ivnt-surface) 0%,var(--ivnt-surface-raised) 60%,var(--ivnt-surface) 100%);
        padding: 6px 14px 6px 12px; margin: 16px 0 10px;
        clip-path: polygon(0 0,100% 0,100% 100%,var(--ivnt-cut-md) 100%,0 calc(100% - var(--ivnt-cut-md)));
        border-left: 3px solid var(--ivc-solid);
    }
    .ivnt-tier-tag--outline { border-left-color: rgba(var(--ivc),.4); }
    .ivnt-tier-tag-label { font-size: var(--ivnt-fs-xs); font-weight: 800; letter-spacing: 3px; color:var(--ivnt-white); text-shadow:0 0 calc(8px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.65 * var(--ivnt-glow-alpha))); flex:1; }
    .ivnt-tier-tag--outline .ivnt-tier-tag-label { color: rgba(var(--ivnt-white-rgb),.75); text-shadow:none; }
    .ivnt-tier-tag-bars { display:flex; gap:2px; opacity:.55; flex-shrink:0; }
    .ivnt-tier-tag--outline .ivnt-tier-tag-bars { opacity:.28; }
    .ivnt-tier-tag-bars i { display:block; width:1px; background:var(--ivc-solid); }
    .ivnt-tier-tag-bars i:nth-child(1){height:9px;} .ivnt-tier-tag-bars i:nth-child(2){height:13px;width:2px;}
    .ivnt-tier-tag-bars i:nth-child(3){height:7px;} .ivnt-tier-tag-bars i:nth-child(4){height:11px;}
    .ivnt-tier-tag-bars i:nth-child(5){height:8px;width:2px;}

    /* ----- ランキング説明カード ----- */
    .ivnt-ranking-desc-text { font-size: var(--ivnt-fs-base); line-height: 1.85; color:var(--ivnt-ink); }
    .ivnt-ranking-meta-bar { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .ivnt-ranking-meta-badge {
        display:inline-flex; align-items:center; font-size: var(--ivnt-fs-xs); font-weight:700;
        color:var(--ivnt-green); background:var(--ivnt-surface); padding:4px 10px 4px 8px;
        clip-path: polygon(var(--ivnt-cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--ivnt-cut-sm));
    }
    .ivnt-ranking-banner-img { margin-bottom:14px; border-radius:var(--ivnt-radius); overflow:hidden; border:3px solid var(--ivnt-green); }
    .ivnt-ranking-banner-img img { width:100%; height:auto; display:block; }

    /* ----- 目次 ----- */
    .ivnt-toc-list { padding: 14px 16px 14px 34px; margin:0; font-size: var(--ivnt-fs-base); line-height:2.0; }
    .ivnt-toc-list a { color:var(--ivnt-surface); text-decoration:none; border-bottom:1px dotted var(--ivnt-green-mid); }
    .ivnt-toc-list a:hover { color:var(--ivnt-green-deep); }

    /* ----- 導線バナー（3つ並び／リセマラ誘導） ----- */
    .ivnt-nav-banners { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
    .ivnt-nav-banner {
        flex:1 1 30%; min-width:100px; display:flex; flex-direction:column; align-items:center; gap:4px;
        padding:10px 8px; border-radius:var(--ivnt-radius); text-decoration:none; color:var(--ivnt-white); text-align:center;
        background: linear-gradient(160deg,var(--ivnt-surface),var(--ivnt-surface-raised)); border:var(--ivnt-border-w) solid var(--ivnt-green);
    }
    .ivnt-nav-banner.red    { border-color:var(--ivnt-red); }
    .ivnt-nav-banner.yellow { border-color:var(--ivnt-yellow); }
    .ivnt-nav-banner-icon { font-size: var(--ivnt-fs-title); }
    .ivnt-nav-banner-text { font-size: var(--ivnt-fs-xs); font-weight:700; line-height:1.4; }

    /* ----- 他ページへの導線バナー（1行） ----- */
    .ivnt-link-banner {
        display:flex; align-items:center; justify-content:space-between; text-decoration:none;
        background:var(--ivnt-surface); border:1px solid var(--ivnt-line-dark); border-radius:var(--ivnt-radius); padding:12px 14px; min-height:64px;
    }
    .ivnt-link-banner-title { font-size: var(--ivnt-fs-lg); font-weight:700; color:var(--ivnt-white); margin-bottom:3px; }
    .ivnt-link-banner-desc  { font-size: var(--ivnt-fs-sm); color:rgba(var(--ivnt-white-rgb),.75); line-height:1.6; }
    .ivnt-link-banner-arrow { font-size: var(--ivnt-fs-title); color:var(--ivnt-yellow); flex-shrink:0; margin-left:10px; }

    /* ----- ランキング誘導（キャラページ上部） ----- */
    .ivnt-ranking-cta {
        display:flex; align-items:center; justify-content:space-between;
        background:linear-gradient(100deg,var(--ivnt-surface),var(--ivnt-surface-raised)); border:var(--ivnt-border-w) solid var(--ivnt-green);
        border-radius:var(--ivnt-radius); padding:12px 16px; margin-bottom:14px; text-decoration:none;
    }
    .ivnt-ranking-cta-sub   { font-size: var(--ivnt-fs-xs); color:var(--ivnt-green-light); margin-bottom:2px; }
    .ivnt-ranking-cta-title { font-size: var(--ivnt-fs-lg); font-weight:700; color:var(--ivnt-white); }
    .ivnt-ranking-cta-arrow { font-size:22px; color:var(--ivnt-red); }

    /* ----- トップページ リンクカード ----- */
    .ivnt-top-links { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
    .ivnt-top-link-card {
        display:flex; align-items:center; gap:12px; padding:14px 16px;
        background:var(--ivnt-surface); border:var(--ivnt-border-w) solid var(--ivnt-green); border-radius:var(--ivnt-radius); text-decoration:none;
    }
    .ivnt-top-link-icon { font-size:24px; flex-shrink:0; }
    .ivnt-top-link-text { flex:1; min-width:0; }
    .ivnt-top-link-title { display:block; font-size: var(--ivnt-fs-lg); font-weight:700; color:var(--ivnt-white); }
    .ivnt-top-link-desc  { display:block; font-size: var(--ivnt-fs-sm); color:var(--ivnt-green-pale); margin-top:2px; }
    .ivnt-top-link-arrow { font-size: var(--ivnt-fs-title); color:var(--ivnt-green); }

    /* =====================================================
       ランクバッジ画像（テクスチャ入り文字画像）
    ===================================================== */
    .ivnt-badge-img { height: var(--ivnt-badge-h, var(--ivnt-badge-md)); width:auto; display:block; }
    .ivnt-badge-glow.ivnt-badge-img { filter: drop-shadow(0 0 calc(7px * var(--ivnt-glow-size)) rgba(var(--ivc,var(--ivnt-white-rgb)),calc(.55 * var(--ivnt-glow-alpha)))); }
    .ivnt-ss-badge { display:inline-flex; align-items:center; flex-shrink:0; }
    .ivnt-ss-badge .ivnt-badge-img { height: var(--ivnt-badge-h, var(--ivnt-badge-md)); }
    .ivnt-ss-badge .ivnt-badge-img--dup { margin-left:-11px; }
    .ivnt-ss-badge.ivnt-badge-glow .ivnt-badge-img { filter: drop-shadow(0 0 calc(7px * var(--ivnt-glow-size)) rgba(var(--ivnt-red-rgb),calc(.55 * var(--ivnt-glow-alpha)))); }

    /* =====================================================
       ランクパネル（最強ランキング／総合評価で共通使用）
       .ivnt-rank-panel.ss / .s / .a / .b / .c で色が変わる
    ===================================================== */
    .ivnt-rank-panel {
        position: relative; border-radius: var(--ivnt-radius-lg); overflow: hidden; margin-bottom: 14px;
        box-shadow: 0 0 calc(22px * var(--ivnt-glow-size)) rgba(var(--ivc,var(--ivnt-black-rgb)),calc(.2 * var(--ivnt-glow-alpha)));
    }
    .ivnt-rank-panel.ss { --ivc: var(--ivnt-red-rgb);  --ivc-solid:var(--ivnt-red); --ivc-border: rgba(var(--ivnt-red-rgb),.55); }
    .ivnt-rank-panel.s  { --ivc: var(--ivnt-green-rgb);  --ivc-solid:var(--ivnt-green); --ivc-border: rgba(var(--ivnt-green-rgb),.55); }
    .ivnt-rank-panel.a  { --ivc: var(--ivnt-yellow-rgb);  --ivc-solid:var(--ivnt-yellow); --ivc-border: rgba(var(--ivnt-yellow-rgb),.55); }
    .ivnt-rank-panel.b  { --ivc: var(--ivnt-blue-rgb); --ivc-solid:var(--ivnt-blue); --ivc-border: rgba(var(--ivnt-blue-rgb),.5); }
    .ivnt-rank-panel.c  { --ivc: var(--ivnt-white-rgb);--ivc-solid:var(--ivnt-gray);    --ivc-border: rgba(var(--ivnt-white-rgb),.15); }
    .ivnt-rank-panel {
        background: linear-gradient(150deg, rgba(var(--ivc),.14), var(--ivnt-surface-deep) 45%);
        border: var(--ivnt-border-w) solid var(--ivc-border);
    }
    .ivnt-rank-panel.c { box-shadow:none; }
    .ivnt-rank-panel::before {
        content: attr(data-rank-label);
        position: absolute; top: -40px; right: -8px;
        font-size: 176px; font-weight: 900; color: rgba(var(--ivc),.13);
        line-height: 1; letter-spacing: -.03em; pointer-events: none;
    }
    .ivnt-rank-panel-bar { height: 4px; background: var(--ivc-solid); box-shadow: 0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.8 * var(--ivnt-glow-alpha))); }
    .ivnt-rank-panel.c .ivnt-rank-panel-bar { box-shadow:none; }
    .ivnt-rank-panel-body { position: relative; padding: 16px 18px 18px; }

    /* ランクパネル頭（バッジ＋タイトル＋サブ文言＋バーコード飾り） */
    .ivnt-rank-panel-head { display:flex; align-items:center; gap:14px; }
    .ivnt-rank-panel-title-wrap { flex:1; min-width:0; }
    .ivnt-rank-panel-title {
        font-size: 17px; font-weight: 800; color: var(--ivnt-white); letter-spacing: .04em;
        text-shadow: 0 0 calc(14px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.6 * var(--ivnt-glow-alpha))); margin-bottom: 2px;
    }
    .ivnt-rank-panel.c .ivnt-rank-panel-title { color:var(--ivnt-gray-300); text-shadow:none; }
    .ivnt-rank-panel-sub { font-size: var(--ivnt-fs-xs); color: rgba(var(--ivnt-white-rgb),.75); }
    .ivnt-rank-panel-bars { display:flex; gap:2px; opacity:.5; flex-shrink:0; }
    .ivnt-rank-panel-bars i { display:block; width:1px; background:var(--ivc-solid); }
    .ivnt-rank-panel-bars i:nth-child(1){height:16px;} .ivnt-rank-panel-bars i:nth-child(2){height:12px;width:2px;}
    .ivnt-rank-panel-bars i:nth-child(3){height:18px;} .ivnt-rank-panel-bars i:nth-child(4){height:10px;}
    .ivnt-rank-panel-bars i:nth-child(5){height:16px;width:2px;}

    /* キャラカードグリッド（ランキング用） */
    .ivnt-char-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
    .ivnt-char-card { width:72px; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; }
    .ivnt-char-card-icon {
        position:relative; width:64px; height:64px; border-radius:var(--ivnt-radius);
        background: linear-gradient(160deg,var(--ivnt-surface-raised),var(--ivnt-surface-deep));
        border: 1px solid var(--ivc-border); box-shadow: 0 0 calc(14px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.3 * var(--ivnt-glow-alpha)));
        display:flex; align-items:center; justify-content:center; overflow:hidden;
    }
    .ivnt-char-card-icon img { width:100%; height:100%; object-fit:cover; }
    .ivnt-char-card-icon span { color: var(--ivc-solid); font-size: var(--ivnt-fs-sm); font-weight:700; }
    .ivnt-char-card-corner {
        position:absolute; top:0; left:0; z-index:1; width:18px; height:18px;
        clip-path: polygon(0 0, 100% 0, 0 100%);
        background: linear-gradient(160deg, var(--ivc-solid), var(--ivc-solid));   /* レアリティが無いときは、ランクの色 */
    }
    .ivnt-char-card.ivnt-rar-ur .ivnt-char-card-corner { background: linear-gradient(160deg, var(--ivnt-rarity-ur-a), var(--ivnt-rarity-ur-b)); }
    .ivnt-char-card.ivnt-rar-sr .ivnt-char-card-corner { background: linear-gradient(160deg, var(--ivnt-rarity-sr-a), var(--ivnt-rarity-sr-b)); }
    .ivnt-char-card.ivnt-rar-r  .ivnt-char-card-corner { background: linear-gradient(160deg, var(--ivnt-rarity-r-a),  var(--ivnt-rarity-r-b)); }
    /* 右下の属性アイコン */
    .ivnt-char-card-icon .ivnt-char-card-attr { position:absolute; right:2px; bottom:2px; z-index:2; width:18px; height:18px; display:block; pointer-events:none; filter: drop-shadow(0 0 2px var(--ivnt-surface-deep)); }
    .ivnt-char-card-icon .ivnt-char-card-attr img { width:100%; height:100%; object-fit:contain; display:block; }
    .ivnt-char-card-name { font-size: var(--ivnt-fs-xxs); color:var(--ivnt-gray-200); text-align:center; line-height:1.3; }
    .ivnt-char-card-ribbon {
        position:absolute; top:9px; right:-21px; width:76px; transform:rotate(40deg);
        background:var(--ivnt-yellow); color:var(--ivnt-surface); font-size:7px; font-weight:800; text-align:center;
        padding:1.5px 0; letter-spacing:1px; box-shadow:0 1px 5px rgba(var(--ivnt-black-rgb),.5);
    }
    .ivnt-char-card-ribbon.collab { background:var(--ivnt-blue); color:var(--ivnt-white); }
    .ivnt-char-card-ribbon.reward { background:var(--ivnt-green); color:var(--ivnt-surface); }
    .ivnt-ranking-empty { padding:30px; text-align:center; color:var(--ivnt-gray); font-size: var(--ivnt-fs-base); }

    /* ----- 評価基準カードの帯 ----- */
    .ivnt-criteria-row { display:flex; gap:12px; align-items:center; margin-bottom:9px; }
    .ivnt-criteria-badge { width:44px; height:24px; border-radius:var(--ivnt-radius-sm); flex-shrink:0; }
    .ivnt-criteria-badge.ss { background:var(--ivnt-red); box-shadow:0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivnt-red-rgb),calc(.5 * var(--ivnt-glow-alpha))); }
    .ivnt-criteria-badge.s  { background:var(--ivnt-green); box-shadow:0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivnt-green-rgb),calc(.5 * var(--ivnt-glow-alpha))); }
    .ivnt-criteria-badge.a  { background:var(--ivnt-yellow); box-shadow:0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivnt-yellow-rgb),calc(.5 * var(--ivnt-glow-alpha))); }
    .ivnt-criteria-badge.b  { background:var(--ivnt-blue); box-shadow:0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivnt-blue-rgb),calc(.5 * var(--ivnt-glow-alpha))); }
    .ivnt-criteria-badge.c  { background:var(--ivnt-gray-600); }
    .ivnt-criteria-text { font-size: var(--ivnt-fs-base); line-height:1.7; color:var(--ivnt-ink); }
    .ivnt-note { font-size: var(--ivnt-fs-sm); color:var(--ivnt-gray); }

    /* =====================================================
       キャラページ ヘッダー
    ===================================================== */
    .ivnt-char-header-card { position:relative; border-radius:var(--ivnt-radius-lg); overflow:hidden; margin-bottom:14px; box-shadow:0 8px 20px rgba(var(--ivnt-black-rgb),.25); }
    .ivnt-char-header {
        position:relative; padding:18px;
        background: linear-gradient(120deg,var(--ivnt-surface) 0%,var(--ivnt-surface-red) 55%,var(--ivnt-surface) 100%);
    }
    .ivnt-char-header::before {
        content:''; position:absolute; inset:0; pointer-events:none;
        background: repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(var(--ivc,var(--ivnt-red-rgb)),.04) 8px,rgba(var(--ivc,var(--ivnt-red-rgb)),.04) 9px);
    }
    .ivnt-char-header-inner { position:relative; display:flex; gap:14px; align-items:center; }
    .ivnt-char-icon {
        width:78px; height:78px; flex-shrink:0; border-radius:var(--ivnt-radius-md);
        background: linear-gradient(160deg,var(--ivnt-surface-red-raised),var(--ivnt-surface-deep));
        border:var(--ivnt-border-w) solid var(--ivc-solid,var(--ivnt-red)); box-shadow:0 0 calc(16px * var(--ivnt-glow-size)) rgba(var(--ivc,var(--ivnt-red-rgb)),calc(.55 * var(--ivnt-glow-alpha)));
        display:flex; align-items:center; justify-content:center; overflow:hidden;
    }
    .ivnt-char-icon img { width:100%; height:100%; object-fit:cover; }
    .ivnt-char-icon span { color:var(--ivc-solid,var(--ivnt-red-light)); font-size:22px; font-weight:800; }
    .ivnt-char-title-text { font-size: var(--ivnt-fs-sm); color:rgba(var(--ivnt-white-rgb),.75); margin-bottom:3px; }
    .ivnt-char-name-text { font-size:23px; font-weight:800; color:var(--ivnt-white); margin-bottom:8px; text-shadow:0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivc,var(--ivnt-red-rgb)),calc(.4 * var(--ivnt-glow-alpha))); }
    .ivnt-char-tags { display:flex; gap:6px; flex-wrap:wrap; }

    /* 立ち絵（見出しなし・krst/rlye方式） */
    .ivnt-fullbody-wrap { text-align:center; padding:6px 0 16px; }
    .ivnt-fullbody-img { max-width:100%; width:100%; height:auto; border-radius:var(--ivnt-radius-md); }

    /* 強み・弱み */
    .ivnt-proscons { display:flex; gap:14px; flex-wrap:wrap; }
    .ivnt-proscons-col { flex:1; min-width:220px; }
    .ivnt-proscons-list { margin:10px 0 0; padding-left:18px; font-size: var(--ivnt-fs-base); line-height:2.0; color:var(--ivnt-ink); }

    /* パラメータ */
    .ivnt-stat-note { font-size: var(--ivnt-fs-xs); color:var(--ivnt-gray); margin-bottom:12px; }
    .ivnt-stat-table { display:flex; gap:10px; }
    .ivnt-stat-row { flex:1; background:var(--ivnt-surface); border:1px solid var(--ivnt-green); border-radius:var(--ivnt-radius); padding:12px 8px; text-align:center; }
    .ivnt-stat-label { font-size: var(--ivnt-fs-xs); color:var(--ivnt-green-light); margin-bottom:5px; }
    .ivnt-stat-value { font-size:19px; font-weight:800; color:var(--ivnt-green); }
    /* パラメータ表：6項目を横に並べた低い表（見出し行＋Lv1＋最大レベルの3行。主役にならない控えめな見た目） */
    .ivnt-stat-grid { display:grid; grid-template-columns:auto repeat(6,minmax(0,1fr)); border:1px solid var(--ivnt-gray-200); border-radius:var(--ivnt-radius); overflow:hidden; font-size: var(--ivnt-fs-sm); }
    .ivnt-stat-grid > div { padding:7px 4px; text-align:center; border-bottom:1px solid var(--ivnt-gray-200); }
    .ivnt-stat-grid-head { background:var(--ivnt-surface); color:var(--ivnt-green-light); font-weight:700; font-size: var(--ivnt-fs-xs); }
    .ivnt-stat-grid-rowlabel { background:var(--ivnt-green-tint); color:var(--ivnt-green-deep); font-weight:700; padding:7px 8px; white-space:nowrap; }
    .ivnt-stat-grid-value { color:var(--ivnt-ink); font-variant-numeric:tabular-nums; }
    .ivnt-stat-grid > div:nth-last-child(-n+7) { border-bottom:0; }

    /* 任意画像（スキル画像／総評画像） */
    .ivnt-inline-image { border-radius:var(--ivnt-radius); overflow:hidden; margin-bottom:14px; }
    .ivnt-inline-image img { width:100%; height:auto; display:block; }

    /* スキル */
    .ivnt-skill-head {
        display:flex; align-items:center; gap:10px; background:var(--ivnt-surface);
        border:1px solid var(--ivc-border,rgba(var(--ivnt-red-rgb),.5)); border-radius:var(--ivnt-radius) var(--ivnt-radius) 0 0; padding:10px 14px;
    }
    .ivnt-skill-label {
        font-size: var(--ivnt-fs-sm); font-weight:800; color:var(--ivnt-white); background:var(--ivc-solid,var(--ivnt-red));
        padding:3px 10px; border-radius:2px; letter-spacing:1px; flex-shrink:0;
    }
    .ivnt-skill-name { flex:1; font-size: var(--ivnt-fs-md); font-weight:700; color:var(--ivnt-white); }
    .ivnt-skill-charge {
        font-size: var(--ivnt-fs-xs); color: rgba(var(--ivnt-white-rgb),.85); background:rgba(var(--ivc,var(--ivnt-red-rgb)),.12);
        border:1px solid var(--ivc-border); padding:2px 8px; border-radius:3px; white-space:nowrap; flex-shrink:0;
    }
    .ivnt-skill-body {
        background:var(--ivnt-surface); border:1px solid var(--ivc-border,rgba(var(--ivnt-red-rgb),.5)); border-top:none;
        border-radius:0 0 var(--ivnt-radius) var(--ivnt-radius); padding:14px;
    }
    .ivnt-skill-text { font-size: var(--ivnt-fs-base); color:var(--ivnt-red-pale); line-height:1.9; }
    .ivnt-skill-text strong { color: var(--ivc-solid,var(--ivnt-red-light2)); font-weight:700; }
    .ivnt-skill-comment, .ivnt-ability-comment {
        background:var(--ivnt-white); border:1px solid var(--ivnt-red-pale2); border-left:4px solid var(--ivc-solid,var(--ivnt-red));
        border-radius:0 6px 6px 0; padding:12px 14px; margin-top:12px;
    }
    .ivnt-comment-label { font-size: var(--ivnt-fs-heading); font-weight:800; color:var(--ivnt-red-deep); margin-bottom:8px; letter-spacing:.04em; }
    .ivnt-comment-text { font-size: var(--ivnt-fs-md); color:var(--ivnt-ink); line-height:1.85; }

    /* アビリティ */
    .ivnt-ability-item { margin-bottom:14px; }
    .ivnt-ability-item:last-child { margin-bottom:0; }
    .ivnt-ability-head {
        display:flex; align-items:center; gap:10px; background:var(--ivnt-surface);
        border:1px solid var(--ivc-border,rgba(var(--ivnt-green-rgb),.5)); border-radius:var(--ivnt-radius) var(--ivnt-radius) 0 0; padding:10px 14px;
    }
    .ivnt-ability-name { flex:1; font-size: var(--ivnt-fs-md); font-weight:700; color:var(--ivnt-white); }
    .ivnt-ability-body {
        background:var(--ivnt-surface); border:1px solid var(--ivc-border,rgba(var(--ivnt-green-rgb),.5)); border-top:none;
        border-radius:0 0 var(--ivnt-radius) var(--ivnt-radius); padding:14px;
    }
    .ivnt-ability-text { font-size: var(--ivnt-fs-base); color:var(--ivnt-green-on-dark); line-height:1.9; }
    .ivnt-ability-text strong { color: var(--ivc-solid,var(--ivnt-green)); }

    /* 総評 */
    .ivnt-review-wrap { padding:0 0 0 16px; border-left:var(--ivnt-bar-w) solid var(--ivnt-green); border-radius:0 var(--ivnt-radius) var(--ivnt-radius) 0; }
    .ivnt-review-text { font-size: var(--ivnt-fs-lg); line-height:2.0; color:var(--ivnt-ink); }
    .ivnt-review-text strong { color:var(--ivnt-ink-strong); font-weight:700; }

    .ivnt-char-link { color:var(--ivnt-green-deep); text-decoration:underline; font-weight:700; }
    .ivnt-copyright { font-size: var(--ivnt-fs-xs); color:var(--ivnt-gray); text-align:center; margin-top:10px; }

    /* ----- レスポンシブ ----- */
    @media (max-width: 480px) {
        .ivnt-char-card { width:60px; }
        .ivnt-char-card-icon { width:54px; height:54px; }
        .ivnt-char-card-corner { width:15px; height:15px; }
        .ivnt-char-card-icon .ivnt-char-card-attr { width:15px; height:15px; right:1px; bottom:1px; }
        .ivnt-article-title, .ivnt-page-title { font-size:18px; }
        .ivnt-proscons { flex-direction:column; }
        .ivnt-char-name-text { font-size: var(--ivnt-fs-title); }
        .ivnt-rank-panel::before { font-size:120px; top:-24px; }
    }

    /* =====================================================
       2026-09-30 追加分（リセマラ系ページ・目次・導線矢印）
       既存ルールは一切変更せず、未定義だったクラスだけを追加
    ===================================================== */

    /* 色クラスなしのh2見出しはグリーン既定（:whereで詳細度0＝ivnt-c-red等が優先される） */
    :where(.ivnt-section-head) { --ivc: var(--ivnt-green-rgb); --ivc-solid: var(--ivnt-green); }

    /* h2で書かれた見出し（リセマラ・ガイド系ページ）をCocoonのh2装飾から守る */
    .ivnt-card > h2.ivnt-section-head {
        display: block; margin: 0; font-size: var(--ivnt-fs-md); font-weight: 700; line-height: 1.5;
        color: var(--ivnt-white); letter-spacing: .04em; text-shadow: 0 0 calc(8px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.6 * var(--ivnt-glow-alpha)));
        background: linear-gradient(120deg,var(--ivnt-surface) 0%,var(--ivnt-surface-raised) 55%,var(--ivnt-surface) 100%);
        border: 0; border-left: var(--ivnt-bar-w) solid var(--ivc-solid);
        padding: 11px 18px; box-shadow: none;
    }
    .ivnt-card > h2.ivnt-section-head::before,
    .ivnt-card > h2.ivnt-section-head::after { content: none; display: none; }

    /* ----- 目次カード ----- */
    .ivnt-toc-title {
        background: var(--ivnt-surface); color: var(--ivnt-white); font-size: var(--ivnt-fs-md); font-weight: 700; letter-spacing: .04em;
        padding: 10px 18px; border-left: var(--ivnt-bar-w) solid var(--ivnt-green);
        clip-path: polygon(0 0,100% 0,100% 100%,var(--ivnt-cut-lg) 100%,0 calc(100% - var(--ivnt-cut-lg)));
    }
    .ivnt-toc-list { list-style: decimal; }
    .ivnt-toc-list ol { margin: 0; padding-left: 20px; list-style: decimal; }

    /* ----- 導線バナーの矢印／リセマラ誘導色 ----- */
    .ivnt-nav-banner-arrow { font-size: 16px; line-height: 1; color: var(--ivnt-yellow); }
    .ivnt-nav-banner.reroll { border-color: var(--ivnt-red); }
    .ivnt-nav-banner { transition: opacity .15s; }
    .ivnt-nav-banner:hover { opacity: .85; }

    /* ----- リセマラの手順（STEP 1〜） ----- */
    /* ※ページ側にも同名のCSSが残っていたため、ここへ1本化（表示が優先されていたページ側の定義を採用） */
    .ivnt-reroll-step {
        border: 1px solid var(--ivnt-gray-300); border-radius: var(--ivnt-radius);
        padding: 14px 16px; margin-bottom: 16px; background: var(--ivnt-green-bg);
    }
    .ivnt-reroll-step-head {
        display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
        font-size: var(--ivnt-fs-lg); font-weight: 700; line-height: 1.5; color: var(--ivnt-ink-title);
    }
    .ivnt-reroll-num {
        flex-shrink: 0; font-family: var(--ivnt-font-mono); font-size: var(--ivnt-fs-xs); font-weight: 700;
        letter-spacing: 1px; color: var(--ivnt-green); background: var(--ivnt-surface); padding: 3px 10px;
        border-radius: var(--ivnt-radius-sm);
        clip-path: polygon(var(--ivnt-cut-sm) 0,100% 0,100% 100%,0 100%,0 var(--ivnt-cut-sm));
    }
    .ivnt-reroll-step p { font-size: var(--ivnt-fs-base); line-height: 1.85; margin: 0 0 8px; }
    .ivnt-reroll-step img { max-width: 100%; height: auto; border-radius: var(--ivnt-radius); }

    /* =====================================================
       リセマラ当たりランキング（ランク別セクション）
       色は #rr-ss 〜 #rr-c のidで切り替え（最強ランキングのパネルと同配色）
    ===================================================== */
    .ivnt-rank-section {
        position: relative; margin-bottom: 14px; padding-bottom: 14px; overflow: hidden;
        border-radius: var(--ivnt-radius-lg); border: var(--ivnt-border-w) solid var(--ivc-border);
        background: linear-gradient(150deg, rgba(var(--ivc),.14), var(--ivnt-surface-deep) 45%);
        box-shadow: 0 0 calc(22px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.2 * var(--ivnt-glow-alpha)));
    }
    .ivnt-rank-section::before {
        content: ''; display: block; height: 4px;
        background: var(--ivc-solid); box-shadow: 0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.8 * var(--ivnt-glow-alpha)));
    }
    .ivnt-rank-section#rr-ss { --ivc: var(--ivnt-red-rgb);  --ivc-solid:var(--ivnt-red); --ivc-border: rgba(var(--ivnt-red-rgb),.55); }
    .ivnt-rank-section#rr-s  { --ivc: var(--ivnt-green-rgb);  --ivc-solid:var(--ivnt-green); --ivc-border: rgba(var(--ivnt-green-rgb),.55); }
    .ivnt-rank-section#rr-a  { --ivc: var(--ivnt-yellow-rgb);  --ivc-solid:var(--ivnt-yellow); --ivc-border: rgba(var(--ivnt-yellow-rgb),.55); }
    .ivnt-rank-section#rr-b  { --ivc: var(--ivnt-blue-rgb); --ivc-solid:var(--ivnt-blue); --ivc-border: rgba(var(--ivnt-blue-rgb),.5); }
    .ivnt-rank-section#rr-c  { --ivc: var(--ivnt-white-rgb);--ivc-solid:var(--ivnt-gray);    --ivc-border: rgba(var(--ivnt-white-rgb),.15); box-shadow: none; }
    .ivnt-rank-section#rr-c::before { box-shadow: none; }

    .ivnt-rank-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px 2px; }
    .ivnt-rank-section-badge {
        flex-shrink: 0; width: 58px; height: 40px; display: flex; align-items: center; justify-content: center;
        font-size: var(--ivnt-fs-title); font-weight: 900; color: var(--ivnt-surface); background: var(--ivc-solid);
        clip-path: polygon(var(--ivnt-cut) 0,100% 0,100% 100%,0 100%,0 var(--ivnt-cut));
    }
    .ivnt-rank-section-badge.ss::before { content: 'SS'; color: var(--ivnt-white); }
    .ivnt-rank-section-badge.s::before  { content: 'S'; }
    .ivnt-rank-section-badge.a::before  { content: 'A'; }
    .ivnt-rank-section-badge.b::before  { content: 'B'; color: var(--ivnt-white); }
    .ivnt-rank-section-badge.c::before  { content: 'C'; color: var(--ivnt-white); }
    .ivnt-rank-section-label {
        font-size: 17px; font-weight: 800; color: var(--ivnt-white); letter-spacing: .04em;
        text-shadow: 0 0 calc(14px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.6 * var(--ivnt-glow-alpha))); margin-bottom: 2px;
    }
    .ivnt-rank-section#rr-c .ivnt-rank-section-label { color: var(--ivnt-gray-300); text-shadow: none; }
    .ivnt-rank-section-sub { font-size: var(--ivnt-fs-xs); color: rgba(var(--ivnt-white-rgb),.75); }

    /* UPPER / LOWER ラベル */
    .ivnt-tier-label {
        display: flex; align-items: center; gap: 10px; margin: 12px 18px 0;
        font-size: var(--ivnt-fs-xs); font-weight: 800; letter-spacing: 3px; color: var(--ivc-solid);
    }
    .ivnt-tier-label::after { content: ''; flex: 1; height: 1px; background: rgba(var(--ivc),.35); }

    /* キャラカード */
    .ivnt-rank-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 18px 4px; }
    .ivnt-rank-card { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
    .ivnt-rank-card-icon {
        position: relative; width: 64px; height: 64px; border-radius: var(--ivnt-radius);
        background: linear-gradient(160deg,var(--ivnt-surface-raised),var(--ivnt-surface-deep));
        border: 1px solid var(--ivc-border); box-shadow: 0 0 calc(14px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.3 * var(--ivnt-glow-alpha)));
        display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    .ivnt-rank-card-icon img { width: 100%; height: 100%; object-fit: cover; }
    .ivnt-rank-card-icon span { color: var(--ivc-solid); font-size: var(--ivnt-fs-sm); font-weight: 700; }
    .ivnt-rank-card:hover .ivnt-rank-card-icon { box-shadow: 0 0 calc(18px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.6 * var(--ivnt-glow-alpha))); }
    .ivnt-rank-card-name { font-size: var(--ivnt-fs-xxs); color: var(--ivnt-gray-200); text-align: center; line-height: 1.3; }
    /* ----- 属性ごとの色（キャラページのタグチップ） ----- */
    .ivnt-tag-chip--outline.ivnt-attr-fire    { color:var(--ivnt-attr-fire); border-color:rgba(var(--ivnt-attr-fire-rgb),.75);  background:rgba(var(--ivnt-attr-fire-rgb),.10); }
    .ivnt-tag-chip--outline.ivnt-attr-water   { color:var(--ivnt-attr-water); border-color:rgba(var(--ivnt-attr-water-rgb),.75);  background:rgba(var(--ivnt-attr-water-rgb),.10); }
    .ivnt-tag-chip--outline.ivnt-attr-wind    { color:var(--ivnt-attr-wind); border-color:rgba(var(--ivnt-attr-wind-rgb),.75);  background:rgba(var(--ivnt-attr-wind-rgb),.10); }
    .ivnt-tag-chip--outline.ivnt-attr-thunder { color:var(--ivnt-attr-thunder); border-color:rgba(var(--ivnt-yellow-rgb),.75);   background:rgba(var(--ivnt-yellow-rgb),.10); }
    .ivnt-tag-chip--outline.ivnt-attr-light   { color:var(--ivnt-attr-light); border-color:rgba(var(--ivnt-attr-light-rgb),.75); background:rgba(var(--ivnt-attr-light-rgb),.10); }
    .ivnt-tag-chip--outline.ivnt-attr-dark    { color:var(--ivnt-attr-dark); border-color:rgba(var(--ivnt-attr-dark-rgb),.75); background:rgba(var(--ivnt-attr-dark-rgb),.12); }
    .ivnt-tag-chip--type { letter-spacing: .5px; }

    @media (max-width: 480px) {
        .ivnt-rank-card-icon { width: 54px; height: 54px; }
        .ivnt-rank-card { width: 62px; }
        .ivnt-rank-grid, .ivnt-rank-head { padding-left: 14px; padding-right: 14px; }
    }
    

/* =====================================================================
   部品：テンプレート（PHP）に直接書かれていた見た目を、ここへ移したもの
   ===================================================================== */
.ivnt-wrap .ivnt-chip-row { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px; }
.ivnt-wrap .ivnt-tag-chip.ivnt-tag-chip--limited { background:var(--ivnt-red);color:var(--ivnt-white); }
.ivnt-wrap .ivnt-tag-chip.ivnt-tag-chip--collab { background:var(--ivnt-blue);color:var(--ivnt-white); }
.ivnt-wrap .ivnt-panel-label { font-size:var(--ivnt-fs-sm);font-weight:700;color:rgba(var(--ivnt-white-rgb),.75);letter-spacing:2px;margin-bottom:12px; }
.ivnt-wrap .ivnt-panel-row { display:flex;align-items:center;gap:16px; }
.ivnt-wrap .ivnt-rank-panel-title.ivnt-rank-panel-title--lg { font-size:19px;margin-bottom:6px; }
.ivnt-wrap .ivnt-panel-desc { font-size:var(--ivnt-fs-base);color:rgba(var(--ivnt-white-rgb),.85);line-height:1.8; }
.ivnt-wrap .ivnt-skill-label.ivnt-skill-label--green { background:var(--ivnt-green);color:var(--ivnt-surface); }
.ivnt-wrap .ivnt-ability-comment.ivnt-ability-comment--green { border-left-color:var(--ivnt-green); }
.ivnt-wrap .ivnt-comment-label.ivnt-comment-label--green { color:var(--ivnt-green-deep); }
.ivnt-wrap .ivnt-card-body.ivnt-card-body--stack { padding:14px;display:flex;flex-direction:column;gap:10px; }
.ivnt-wrap .ivnt-banner-img { width:100%;height:auto;border-radius:6px;margin-bottom:16px; }
.ivnt-wrap .ivnt-grow { flex:1;min-width:0; }
.ivnt-wrap .ivnt-flex1 { flex:1; }
.ivnt-wrap .ivnt-block { display:block; }
.ivnt-wrap .ivnt-ml-auto { margin-left:auto; }
.ivnt-wrap .ivnt-mt-xs { margin-top:var(--ivnt-sp-xs); }
.ivnt-wrap .ivnt-mt-md { margin-top:var(--ivnt-sp-md); }
.ivnt-wrap .ivnt-mb-lg { margin-bottom:var(--ivnt-sp-lg); }
.ivnt-wrap .ivnt-mr-sm { margin-right:var(--ivnt-sp-sm); }
.ivnt-wrap .ivnt-text-green-deep { color:var(--ivnt-green-deep); }
.ivnt-wrap .ivnt-link-deep { color:var(--ivnt-green-deep);text-decoration:none; }
.ivnt-wrap .ivnt-lead { font-size:var(--ivnt-fs-base);line-height:1.7;margin-bottom:12px; }
.ivnt-wrap .ivnt-body-text { font-size:var(--ivnt-fs-base);line-height:1.85; }
.ivnt-wrap .ivnt-body-lg { font-size:var(--ivnt-fs-md);line-height:1.9; }
.ivnt-wrap .ivnt-pick { display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ivnt-gray-200);border-radius:var(--ivnt-radius);padding:12px 14px;margin-bottom:10px;background:var(--ivnt-green-bg); }
.ivnt-wrap .ivnt-pick-thumb { flex-shrink:0;width:60px; }
.ivnt-wrap .ivnt-pick-img { width:60px;height:60px;border-radius:6px;object-fit:cover;border:var(--ivnt-border-w) solid var(--ivnt-gray-200);display:block; }
.ivnt-wrap .ivnt-pick-img--ph { width:60px;height:60px;border-radius:6px;background:var(--ivnt-surface);display:flex;align-items:center;justify-content:center;font-size:var(--ivnt-fs-xs);color:var(--ivnt-green);text-align:center; }
.ivnt-wrap .ivnt-pick-head { font-weight:700;font-size:var(--ivnt-fs-lg);margin-bottom:6px; }
.ivnt-wrap .ivnt-pick-text { font-size:var(--ivnt-fs-base);line-height:1.75;color:var(--ivnt-ink-soft);margin:0; }
.ivnt-wrap .ivnt-pick-tag { display:inline-block;font-size:var(--ivnt-fs-xs);font-weight:800;color:var(--ivnt-surface);background:var(--ivnt-green);border-radius:var(--ivnt-radius-sm);padding:2px 8px;margin-right:8px;vertical-align:middle; }
.ivnt-wrap .ivnt-legend-row { display:flex;align-items:center;gap:9px;font-size:var(--ivnt-fs-base);margin-bottom:10px; }
.ivnt-wrap .ivnt-legend-row.ivnt-legend-row--last { margin-bottom:0; }
.ivnt-wrap .ivnt-callout--info { background:var(--ivnt-green-tint);border-left:4px solid var(--ivnt-green-deep);padding:10px 14px;border-radius:var(--ivnt-radius-sm);font-size:var(--ivnt-fs-base);color:var(--ivnt-green-ink);margin-bottom:16px; }
.ivnt-wrap .ivnt-callout--warn { border-left:4px solid var(--ivnt-green-deep);padding:12px 16px;background:var(--ivnt-green-tint);border-radius:6px;margin:12px 0; }
.ivnt-wrap .ivnt-callout--plain { background:var(--ivnt-green-tint);border-radius:6px;padding:12px 16px;margin-bottom:12px; }
.ivnt-wrap .ivnt-callout--guide { background:var(--ivnt-green-tint);border-left:4px solid var(--ivnt-green-deep);padding:12px 16px;border-radius:var(--ivnt-radius-sm);font-size:var(--ivnt-fs-base);color:var(--ivnt-green-ink);margin-bottom:14px;line-height:1.85; }
.ivnt-wrap .ivnt-callout-title { font-weight:700;margin-bottom:8px; }
.ivnt-wrap .ivnt-callout-list { padding-left:16px;list-style:disc;line-height:2; }
.ivnt-wrap a.ivnt-cta { display:flex;align-items:center;gap:10px;padding:16px 18px;background:linear-gradient(90deg,var(--ivnt-surface),var(--ivnt-surface-raised));border:var(--ivnt-border-w) solid var(--ivnt-cta-color,var(--ivnt-green));color:var(--ivnt-white);border-radius:var(--ivnt-radius);text-decoration:none;font-weight:700; }
.ivnt-wrap a.ivnt-cta--red { --ivnt-cta-color:var(--ivnt-red); }
.ivnt-wrap a.ivnt-cta--green { --ivnt-cta-color:var(--ivnt-green); }
.ivnt-wrap a.ivnt-cta--mt { margin-top:16px; }
.ivnt-wrap a.ivnt-cta--mb { margin-bottom:14px; }
.ivnt-wrap a.ivnt-cta--my { margin:14px 0; }
.ivnt-wrap .ivnt-cta-icon { font-size:22px; }
.ivnt-wrap .ivnt-cta-title { display:block;font-size:var(--ivnt-fs-lg); }
.ivnt-wrap .ivnt-cta-sub { display:block;font-size:var(--ivnt-fs-sm);font-weight:400;opacity:0.9;margin-top:2px; }
.ivnt-wrap .ivnt-cta-arrow { font-size:var(--ivnt-fs-title); }
.ivnt-wrap .ivnt-btn-row { display:flex;gap:8px;flex-wrap:wrap;margin-top:14px; }
.ivnt-wrap a.ivnt-cta-btn { flex:1;min-width:140px;display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--ivnt-surface);border:var(--ivnt-border-w) solid var(--ivnt-cta-color,var(--ivnt-green));color:var(--ivnt-white);border-radius:var(--ivnt-radius);text-decoration:none;font-weight:700;font-size:var(--ivnt-fs-base); }
.ivnt-wrap a.ivnt-cta, .ivnt-wrap a.ivnt-cta:hover, .ivnt-wrap a.ivnt-cta:visited,
.ivnt-wrap a.ivnt-cta-btn, .ivnt-wrap a.ivnt-cta-btn:hover, .ivnt-wrap a.ivnt-cta-btn:visited { color: var(--ivnt-white); text-decoration: none; }
.ivnt-wrap a.ivnt-link-deep, .ivnt-wrap a.ivnt-link-deep:hover { color: var(--ivnt-green-deep); text-decoration: none; }

/* ランクごとの色（キャラページのカードに付けるクラス。PHPに色を書かずに済ませるため） */
.ivnt-rk-ss { --ivc: var(--ivnt-red-rgb);    --ivc-solid: var(--ivnt-red);    --ivc-border: rgba(var(--ivnt-red-rgb),.55); }
.ivnt-rk-s  { --ivc: var(--ivnt-green-rgb);  --ivc-solid: var(--ivnt-green);  --ivc-border: rgba(var(--ivnt-green-rgb),.55); }
.ivnt-rk-a  { --ivc: var(--ivnt-yellow-rgb); --ivc-solid: var(--ivnt-yellow); --ivc-border: rgba(var(--ivnt-yellow-rgb),.55); }
.ivnt-rk-b  { --ivc: var(--ivnt-blue-rgb);   --ivc-solid: var(--ivnt-blue);   --ivc-border: rgba(var(--ivnt-blue-rgb),.55); }
.ivnt-rk-c  { --ivc: var(--ivnt-white-rgb);  --ivc-solid: var(--ivnt-gray);   --ivc-border: rgba(var(--ivnt-white-rgb),.55); }

/* ランクバッジの大きさ（PHPからはsm/md/lgで指定） */
.ivnt-badge-sz-sm { --ivnt-badge-h: var(--ivnt-badge-sm); }
.ivnt-badge-sz-md { --ivnt-badge-h: var(--ivnt-badge-md); }
.ivnt-badge-sz-lg { --ivnt-badge-h: var(--ivnt-badge-lg); }

/* =====================================================================
   記事ページ本文（固定ページの本文欄で書いた文章）の見た目
   page-ivnt-article.php で使用。見出し・段落・箇条書き・表を、エディタの標準の書き方のまま整える。
   ===================================================================== */
.ivnt-wrap .ivnt-content { font-size: var(--ivnt-fs-md); line-height: 1.95; color: var(--ivnt-ink); margin-bottom: 24px; }
.ivnt-wrap .ivnt-content p { margin: 0 0 16px; }
.ivnt-wrap .ivnt-content h2 {
  margin: 36px 0 16px; padding: 12px 18px; font-size: var(--ivnt-fs-heading); font-weight: 700; line-height: 1.5;
  color: var(--ivnt-white); letter-spacing: .04em; border: 0; border-left: var(--ivnt-bar-w) solid var(--ivnt-green);
  background: linear-gradient(120deg,var(--ivnt-surface) 0%,var(--ivnt-surface-raised) 55%,var(--ivnt-surface) 100%);
  clip-path: polygon(0 0,100% 0,100% 100%,var(--ivnt-cut-lg) 100%,0 calc(100% - var(--ivnt-cut-lg))); box-shadow: none;
}
.ivnt-wrap .ivnt-content h2::before, .ivnt-wrap .ivnt-content h2::after { content: none; display: none; }
.ivnt-wrap .ivnt-content h3 {
  margin: 28px 0 12px; padding: 4px 0 4px 12px; font-size: var(--ivnt-fs-heading); font-weight: 800; line-height: 1.5;
  color: var(--ivnt-ink-title); border: 0; border-left: var(--ivnt-bar-w-sm) solid var(--ivnt-green-mid); background: none;
}
.ivnt-wrap .ivnt-content h3::before, .ivnt-wrap .ivnt-content h3::after { content: none; display: none; }
.ivnt-wrap .ivnt-content ul, .ivnt-wrap .ivnt-content ol { margin: 0 0 16px; padding-left: 1.5em; }
.ivnt-wrap .ivnt-content ul { list-style: disc; }
.ivnt-wrap .ivnt-content ol { list-style: decimal; }
.ivnt-wrap .ivnt-content li { margin-bottom: 8px; }
.ivnt-wrap .ivnt-content strong { font-weight: 700; color: var(--ivnt-ink-strong); }
.ivnt-wrap .ivnt-content .ivnt-text-red  { color: var(--ivnt-red-deep); font-weight: 700; }
.ivnt-wrap .ivnt-content .ivnt-text-blue { color: var(--ivnt-blue); font-weight: 700; }
.ivnt-wrap .ivnt-content img { max-width: 100%; height: auto; border-radius: var(--ivnt-radius); }
.ivnt-wrap .ivnt-content .ivnt-callout--info { margin: 0 0 20px; line-height: 1.9; }
.ivnt-wrap .ivnt-content .ivnt-table-wrap { overflow-x: auto; margin: 0 0 8px; }
.ivnt-wrap .ivnt-content table { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: var(--ivnt-fs-base); line-height: 1.6; }
.ivnt-wrap .ivnt-content th { background: var(--ivnt-surface); color: var(--ivnt-green-light); font-weight: 700; padding: 8px 10px; border: 1px solid var(--ivnt-line-dark); text-align: center; }
.ivnt-wrap .ivnt-content td { padding: 8px 10px; border: 1px solid var(--ivnt-gray-200); text-align: center; background: var(--ivnt-white); }
.ivnt-wrap .ivnt-content tr:nth-child(even) td { background: var(--ivnt-green-bg); }
.ivnt-wrap .ivnt-content td:first-child { font-weight: 700; color: var(--ivnt-green-deep); }
.ivnt-wrap .ivnt-content .ivnt-table-note { font-size: var(--ivnt-fs-sm); color: var(--ivnt-gray); margin: 0 0 20px; line-height: 1.7; }
.ivnt-wrap .ivnt-content a { color: var(--ivnt-green-deep); text-decoration: underline; }
.ivnt-wrap .ivnt-content figure.ivnt-figure { margin: 0 0 22px; }
.ivnt-wrap .ivnt-content figure.ivnt-figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; border: 1px solid var(--ivnt-gray-200); border-radius: var(--ivnt-radius); }
.ivnt-wrap .ivnt-content figure.ivnt-figure--banner img { width: 100%; }
.ivnt-wrap .ivnt-content figure.ivnt-figure figcaption { font-size: var(--ivnt-fs-sm); color: var(--ivnt-gray); text-align: center; line-height: 1.7; margin-top: 8px; }
.ivnt-wrap .ivnt-content .ivnt-callout--info ul { margin: 8px 0 0; }
.ivnt-wrap .ivnt-content .ivnt-callout--info li:last-child { margin-bottom: 0; }

/* =====================================================================
   サイドバー（イヴンタイトのページの右側。sidebar.php → ivnt_render_sidebar()）
   .ivnt-wrap の外側に出るため、.ivnt-sidebar で範囲を限定している
   ===================================================================== */
.ivnt-sidebar .ivnt-side-card { background: var(--ivnt-white); border: 1px solid var(--ivnt-gray-200); border-radius: var(--ivnt-radius); margin-bottom: 12px; overflow: hidden; }
.ivnt-sidebar .ivnt-side-head {
  padding: 10px 14px; font-size: var(--ivnt-fs-md); font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: var(--ivnt-white);
  background: linear-gradient(120deg,var(--ivnt-surface) 0%,var(--ivnt-surface-raised) 55%,var(--ivnt-surface) 100%);
  border-left: var(--ivnt-bar-w) solid var(--ivnt-green);
}
.ivnt-sidebar .ivnt-side-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ivnt-sidebar .ivnt-side-list li { list-style: none !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--ivnt-gray-200); }
.ivnt-sidebar .ivnt-side-list li:last-child { border-bottom: 0; }
.ivnt-sidebar .ivnt-side-list li::before { display: none !important; }
.ivnt-sidebar .ivnt-side-list a { display: block; padding: 9px 14px; font-size: var(--ivnt-fs-base); font-weight: 700; line-height: 1.5; color: var(--ivnt-green-deep); text-decoration: none; }
.ivnt-sidebar .ivnt-side-list a:hover { background: var(--ivnt-green-tint); }
.ivnt-sidebar .ivnt-side-body { padding: 10px 12px; }

/* =====================================================================
   にぎやかなページ用の部品（リセマラ当たりランキング・最初にやること・イヴンソウル）
   色・形・発光は、すべて冒頭の :root の数値で決まります。ここに色コードは書いていません。
   ===================================================================== */

/* ---------- ヒーローバナー（ページ上部の大きな見出し） ---------- */
.ivnt-wrap .ivnt-hero {
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 20px 18px 18px;
  border: var(--ivnt-border-w) solid var(--ivc-solid); border-radius: var(--ivnt-radius-lg);
  background:
    radial-gradient(120% 140% at 90% 0%, rgba(var(--ivc),.30), transparent 58%),
    linear-gradient(160deg, var(--ivnt-surface-raised), var(--ivnt-surface-deep));
  box-shadow: 0 0 calc(22px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.35 * var(--ivnt-glow-alpha)));
  color: var(--ivnt-white);
}
.ivnt-wrap .ivnt-hero--image { background-size: cover; background-position: center; }
.ivnt-wrap .ivnt-hero--image::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(var(--ivnt-black-rgb),.82), rgba(var(--ivnt-black-rgb),.35)); }
.ivnt-wrap .ivnt-hero > * { position: relative; }
.ivnt-wrap .ivnt-hero-kicker { font-family: var(--ivnt-font-mono); font-size: var(--ivnt-fs-xs); letter-spacing: .22em; color: var(--ivc-solid); }
.ivnt-wrap .ivnt-hero-title { margin: 4px 0 6px; font-size: var(--ivnt-fs-title); font-weight: 800; line-height: 1.35; color: var(--ivnt-white); text-shadow: 0 0 calc(14px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.7 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-hero-sub { margin: 0; font-size: var(--ivnt-fs-base); line-height: 1.8; color: var(--ivnt-green-on-dark); }
.ivnt-wrap .ivnt-hero-avatars { display: flex; align-items: center; margin-top: 14px; }
.ivnt-wrap .ivnt-hero-avatar {
  width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--ivc-solid); background: var(--ivnt-surface);
  box-shadow: 0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.5 * var(--ivnt-glow-alpha)));
  display: flex; align-items: center; justify-content: center; color: var(--ivc-solid); font-size: var(--ivnt-fs-xs); font-weight: 700;
}
.ivnt-wrap .ivnt-hero-avatar:first-child { margin-left: 0; }
.ivnt-wrap .ivnt-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ivnt-wrap .ivnt-hero-avatar-note { margin-left: 12px; font-size: var(--ivnt-fs-sm); color: var(--ivnt-green-pale); }

/* ---------- 「迷ったらこの2体」大きなピックアップ ---------- */
.ivnt-wrap .ivnt-top-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ivnt-wrap a.ivnt-top-pick, .ivnt-wrap .ivnt-top-pick {
  position: relative; display: flex; align-items: flex-end; min-height: 190px; overflow: hidden;
  border: var(--ivnt-border-w) solid var(--ivc-solid); border-radius: var(--ivnt-radius-lg);
  background: linear-gradient(160deg, var(--ivnt-surface-raised), var(--ivnt-surface-deep));
  box-shadow: 0 0 calc(18px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.4 * var(--ivnt-glow-alpha)));
  text-decoration: none; color: var(--ivnt-white);
}
.ivnt-wrap .ivnt-top-pick-art { position: absolute; inset: 0; }
.ivnt-wrap .ivnt-top-pick-art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ivnt-wrap .ivnt-top-pick-art span { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--ivnt-fs-title); font-weight: 800; color: var(--ivc-solid); opacity: .6; }
.ivnt-wrap .ivnt-top-pick-body { position: relative; width: 100%; padding: 36px 12px 12px; background: linear-gradient(to top, rgba(var(--ivnt-black-rgb),.9) 25%, transparent); }
.ivnt-wrap .ivnt-top-pick-rank { display: inline-block; margin-bottom: 4px; padding: 1px 9px; border-radius: var(--ivnt-radius-sm); background: var(--ivc-solid); color: var(--ivnt-surface); font-size: var(--ivnt-fs-xs); font-weight: 800; letter-spacing: .08em; }
.ivnt-wrap .ivnt-top-pick-name { font-size: var(--ivnt-fs-lg); font-weight: 800; line-height: 1.3; text-shadow: 0 0 calc(8px * var(--ivnt-glow-size)) rgba(var(--ivnt-black-rgb),.9); }
.ivnt-wrap .ivnt-top-pick-note { margin-top: 3px; font-size: var(--ivnt-fs-xs); line-height: 1.55; color: var(--ivnt-green-on-dark); }

/* ---------- 属性・タイプの小さなチップ（白い面の上でも読める暗い地） ---------- */
.ivnt-wrap .ivnt-mini-chip { display: inline-block; padding: 1px 8px; border-radius: var(--ivnt-radius-sm); background: var(--ivnt-surface); color: var(--ivnt-white); font-size: var(--ivnt-fs-xs); font-weight: 700; line-height: 1.6; white-space: nowrap; }
.ivnt-wrap .ivnt-mini-chip.ivnt-attr-fire    { color: var(--ivnt-attr-fire); }
.ivnt-wrap .ivnt-mini-chip.ivnt-attr-water   { color: var(--ivnt-attr-water); }
.ivnt-wrap .ivnt-mini-chip.ivnt-attr-wind    { color: var(--ivnt-attr-wind); }
.ivnt-wrap .ivnt-mini-chip.ivnt-attr-thunder { color: var(--ivnt-attr-thunder); }
.ivnt-wrap .ivnt-mini-chip.ivnt-attr-light   { color: var(--ivnt-attr-light); }
.ivnt-wrap .ivnt-mini-chip.ivnt-attr-dark    { color: var(--ivnt-attr-dark); }

/* ---------- 早見表 ---------- */
.ivnt-wrap .ivnt-compare-wrap { overflow-x: auto; }
.ivnt-wrap .ivnt-compare { width: 100%; border-collapse: collapse; font-size: var(--ivnt-fs-sm); }
.ivnt-wrap .ivnt-compare th { padding: 8px 10px; background: var(--ivnt-surface); color: var(--ivnt-green-light); font-weight: 700; text-align: left; white-space: nowrap; }
.ivnt-wrap .ivnt-compare td { padding: 8px 10px; border-bottom: 1px solid var(--ivnt-gray-200); vertical-align: middle; color: var(--ivnt-ink); line-height: 1.6; }
.ivnt-wrap .ivnt-compare tr:nth-child(even) td { background: var(--ivnt-green-bg); }
.ivnt-wrap .ivnt-compare-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ivnt-ink-title); text-decoration: none; white-space: nowrap; }
.ivnt-wrap .ivnt-compare-icon { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--ivnt-surface); border: 2px solid var(--ivc-solid); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ivc-solid); font-size: var(--ivnt-fs-xxs); }
.ivnt-wrap .ivnt-compare-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ivnt-wrap .ivnt-compare-rank { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: var(--ivnt-radius-sm); background: var(--ivc-solid); color: var(--ivnt-surface); font-weight: 800; text-align: center; }

/* ---------- 大きめのキャラ評価カード（全身絵つき） ---------- */
.ivnt-wrap .ivnt-pick--wide { border-left: var(--ivnt-bar-w) solid var(--ivc-solid); }
.ivnt-wrap .ivnt-pick--wide .ivnt-pick-thumb { width: 84px; }
.ivnt-wrap .ivnt-pick--wide .ivnt-pick-img, .ivnt-wrap .ivnt-pick--wide .ivnt-pick-img--ph { width: 84px; height: 124px; object-position: top center; }
.ivnt-wrap .ivnt-pick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }

/* ---------- 対象外キャラの注記 ---------- */
.ivnt-wrap .ivnt-exclude-list { margin: 0; padding: 0; list-style: none; }
.ivnt-wrap .ivnt-exclude-list li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--ivnt-gray-200); font-size: var(--ivnt-fs-base); line-height: 1.7; color: var(--ivnt-ink-soft); }
.ivnt-wrap .ivnt-exclude-list li:last-child { border-bottom: 0; }
.ivnt-wrap .ivnt-exclude-name { flex-shrink: 0; min-width: 7.5em; font-weight: 700; color: var(--ivnt-ink-title); }

/* ---------- STEPカード（最初にやること） ---------- */
.ivnt-wrap .ivnt-step { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--ivnt-gray-200); }
.ivnt-wrap .ivnt-step:last-child { border-bottom: 0; }
.ivnt-wrap .ivnt-step-num {
  flex-shrink: 0; width: 58px; padding: 8px 0 6px; text-align: center; align-self: flex-start;
  background: linear-gradient(160deg, var(--ivnt-surface-raised), var(--ivnt-surface-deep));
  border: var(--ivnt-border-w) solid var(--ivc-solid);
  clip-path: polygon(0 0, calc(100% - var(--ivnt-cut-md)) 0, 100% var(--ivnt-cut-md), 100% 100%, var(--ivnt-cut-md) 100%, 0 calc(100% - var(--ivnt-cut-md)));
  filter: drop-shadow(0 0 calc(6px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.6 * var(--ivnt-glow-alpha))));
}
.ivnt-wrap .ivnt-step-num-label { display: block; font-family: var(--ivnt-font-mono); font-size: var(--ivnt-fs-xxs); letter-spacing: .15em; color: var(--ivnt-green-pale); }
.ivnt-wrap .ivnt-step-num-value { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--ivc-solid); text-shadow: 0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.7 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-step-body { flex: 1; min-width: 0; }
.ivnt-wrap .ivnt-step-title { margin: 0 0 6px; font-size: var(--ivnt-fs-lg); font-weight: 800; line-height: 1.5; color: var(--ivnt-ink-title); }
.ivnt-wrap .ivnt-step-text { margin: 0 0 4px; font-size: var(--ivnt-fs-base); line-height: 1.85; color: var(--ivnt-ink-soft); }
.ivnt-wrap .ivnt-step-shot { margin-top: 10px; border: 1px solid var(--ivnt-gray-200); border-radius: var(--ivnt-radius); overflow: hidden; }
.ivnt-wrap .ivnt-step-shot img { display: block; width: 100%; height: auto; }
.ivnt-wrap .ivnt-step-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ivnt-wrap a.ivnt-step-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ivnt-green); border-radius: var(--ivnt-radius); background: var(--ivnt-surface); color: var(--ivnt-white); font-size: var(--ivnt-fs-sm); font-weight: 700; text-decoration: none; }
.ivnt-wrap a.ivnt-step-link:hover { box-shadow: 0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivnt-green-rgb),calc(.6 * var(--ivnt-glow-alpha))); }

/* ---------- 戦闘の流れ図（ATTACK → PUNISH → チェイン） ---------- */
.ivnt-wrap .ivnt-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; align-items: stretch; margin: 12px 0; }
.ivnt-wrap .ivnt-flow-box { padding: 10px 8px; border: var(--ivnt-border-w) solid var(--ivc-solid); border-radius: var(--ivnt-radius); background: var(--ivnt-surface); text-align: center; box-shadow: 0 0 calc(12px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.35 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-flow-box-title { font-size: var(--ivnt-fs-md); font-weight: 800; color: var(--ivc-solid); }
.ivnt-wrap .ivnt-flow-box-text { margin-top: 4px; font-size: var(--ivnt-fs-xs); line-height: 1.6; color: var(--ivnt-green-on-dark); }
.ivnt-wrap .ivnt-flow-arrow { align-self: center; font-size: 18px; color: var(--ivnt-yellow); }
.ivnt-wrap .ivnt-chain-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.ivnt-wrap .ivnt-chain-box { padding: 8px 6px; border: 1px solid var(--ivc-solid); border-radius: var(--ivnt-radius); background: rgba(var(--ivc),.08); text-align: center; }
.ivnt-wrap .ivnt-chain-box-num { display: block; font-size: var(--ivnt-fs-lg); font-weight: 800; color: var(--ivnt-ink-title); }
.ivnt-wrap .ivnt-chain-box-label { display: block; font-size: var(--ivnt-fs-xs); color: var(--ivnt-ink-soft); }

/* ---------- チェックリスト（まとめ） ---------- */
.ivnt-wrap .ivnt-checklist { margin: 0; padding: 0; list-style: none; }
.ivnt-wrap .ivnt-checklist li { position: relative; padding: 7px 0 7px 30px; border-bottom: 1px dashed var(--ivnt-gray-200); font-size: var(--ivnt-fs-base); line-height: 1.75; color: var(--ivnt-ink); }
.ivnt-wrap .ivnt-checklist li:last-child { border-bottom: 0; }
.ivnt-wrap .ivnt-checklist li::before { content: "✓"; position: absolute; left: 4px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ivnt-green); color: var(--ivnt-surface); font-size: var(--ivnt-fs-sm); font-weight: 800; line-height: 20px; text-align: center; }

/* ---------- イヴンソウル（個別ページ・一覧） ---------- */
.ivnt-wrap .ivnt-soul-lead { margin-bottom: 14px; }
.ivnt-wrap .ivnt-soul-obtain { margin-top: 6px; font-size: var(--ivnt-fs-xs); color: var(--ivnt-green-pale); }
.ivnt-wrap .ivnt-soul-skill-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.ivnt-wrap .ivnt-soul-skill-lv { flex-shrink: 0; min-width: 52px; padding: 2px 6px; border-radius: var(--ivnt-radius-sm); background: var(--ivnt-green); color: var(--ivnt-surface); font-size: var(--ivnt-fs-xs); font-weight: 800; text-align: center; }
.ivnt-wrap .ivnt-soul-filter { display: flex; flex-direction: column; gap: 10px; }
.ivnt-wrap .ivnt-soul-filter-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ivnt-wrap .ivnt-soul-filter-label { min-width: 6.5em; font-size: var(--ivnt-fs-sm); font-weight: 700; color: var(--ivnt-ink-soft); }
.ivnt-wrap .ivnt-soul-filter-btn { padding: 4px 12px; border: 1px solid var(--ivnt-gray-300); border-radius: var(--ivnt-radius); background: var(--ivnt-white); color: var(--ivnt-ink-soft); font-size: var(--ivnt-fs-sm); font-weight: 700; cursor: pointer; }
.ivnt-wrap .ivnt-soul-filter-btn.is-active { border-color: var(--ivnt-green); background: var(--ivnt-surface); color: var(--ivnt-green-light); box-shadow: 0 0 calc(8px * var(--ivnt-glow-size)) rgba(var(--ivnt-green-rgb),calc(.5 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-soul-count { font-size: var(--ivnt-fs-sm); color: var(--ivnt-ink-soft); }
.ivnt-wrap .ivnt-soul-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ivnt-wrap a.ivnt-soul-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ivnt-line-dark); border-radius: var(--ivnt-radius); background: linear-gradient(90deg, var(--ivnt-surface), var(--ivnt-surface-raised)); color: var(--ivnt-white); text-decoration: none; }
.ivnt-wrap a.ivnt-soul-row:hover { border-color: var(--ivnt-green); box-shadow: 0 0 calc(12px * var(--ivnt-glow-size)) rgba(var(--ivnt-green-rgb),calc(.45 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-soul-row[hidden] { display: none; }
.ivnt-wrap .ivnt-soul-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--ivnt-radius); overflow: hidden; border: 1px solid rgba(var(--ivnt-green-rgb),.5); background: var(--ivnt-surface-deep); display: flex; align-items: center; justify-content: center; color: var(--ivnt-green); font-size: var(--ivnt-fs-sm); font-weight: 700; }
.ivnt-wrap .ivnt-soul-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ivnt-wrap .ivnt-soul-main { flex: 1; min-width: 0; }
.ivnt-wrap .ivnt-soul-name { margin-bottom: 4px; font-size: var(--ivnt-fs-md); font-weight: 800; color: var(--ivnt-white); }
.ivnt-wrap .ivnt-soul-skill-text { margin-top: 4px; font-size: var(--ivnt-fs-xs); line-height: 1.6; color: var(--ivnt-green-on-dark); }
.ivnt-wrap .ivnt-soul-skill-tag { display: inline-block; min-width: 16px; margin-right: 6px; padding: 0 4px; border-radius: var(--ivnt-radius-sm); background: var(--ivnt-green); color: var(--ivnt-surface); font-size: var(--ivnt-fs-xxs); font-weight: 800; text-align: center; }
.ivnt-wrap .ivnt-soul-cost { flex-shrink: 0; text-align: center; }
.ivnt-wrap .ivnt-soul-cost-label { display: block; font-size: var(--ivnt-fs-xxs); color: var(--ivnt-green-pale); }
.ivnt-wrap .ivnt-soul-cost-value { display: block; font-size: var(--ivnt-fs-title); font-weight: 800; line-height: 1.1; color: var(--ivnt-yellow); }

/* ---------- スマホ ---------- */
@media (max-width: 480px) {
  .ivnt-wrap .ivnt-top-picks { gap: 8px; }
  .ivnt-wrap .ivnt-top-pick { min-height: 170px; }
  .ivnt-wrap .ivnt-flow { grid-template-columns: 1fr; }
  .ivnt-wrap .ivnt-flow-arrow { justify-self: center; transform: rotate(90deg); }
  .ivnt-wrap .ivnt-step-num { width: 50px; }
  .ivnt-wrap .ivnt-soul-filter-label { min-width: 100%; }
}

.ivnt-c-blue  { --ivc: var(--ivnt-blue-rgb);  --ivc-solid:var(--ivnt-blue); }
.ivnt-wrap .ivnt-hero-updated { margin-top: 10px; font-size: var(--ivnt-fs-xs); color: var(--ivnt-green-pale); }

/* ---------- リセマラのおすすめ（大きなカード）・次点 ---------- */
.ivnt-wrap .ivnt-recommend {
  display: flex; gap: 14px; overflow: hidden; color: var(--ivnt-white);
  border: var(--ivnt-border-w) solid var(--ivc-solid); border-radius: var(--ivnt-radius-lg);
  background:
    radial-gradient(110% 120% at 100% 0%, rgba(var(--ivc),.22), transparent 60%),
    linear-gradient(160deg, var(--ivnt-surface-raised), var(--ivnt-surface-deep));
  box-shadow: 0 0 calc(20px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.4 * var(--ivnt-glow-alpha)));
}
.ivnt-wrap .ivnt-recommend-art { position: relative; flex: 0 0 38%; min-height: 260px; background: var(--ivnt-surface-deep); }
.ivnt-wrap .ivnt-recommend-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ivnt-wrap .ivnt-recommend-art span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--ivnt-fs-title); font-weight: 800; color: var(--ivc-solid); opacity: .6; }
.ivnt-wrap .ivnt-recommend-body { flex: 1; min-width: 0; padding: 14px 14px 14px 0; }
.ivnt-wrap .ivnt-recommend-badge { display: inline-block; padding: 2px 10px; border-radius: var(--ivnt-radius-sm); background: var(--ivnt-yellow); color: var(--ivnt-surface); font-size: var(--ivnt-fs-xs); font-weight: 800; letter-spacing: .08em; }
.ivnt-wrap .ivnt-recommend-name { margin: 6px 0 2px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ivnt-white); text-shadow: 0 0 calc(12px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.7 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-recommend-note { margin-bottom: 10px; font-size: var(--ivnt-fs-sm); color: var(--ivnt-green-pale); }
.ivnt-wrap .ivnt-recommend .ivnt-checklist li { color: var(--ivnt-green-on-dark); border-bottom-color: rgba(var(--ivnt-white-rgb),.15); }
.ivnt-wrap .ivnt-recommend .ivnt-checklist li strong { color: var(--ivnt-white); }
.ivnt-wrap .ivnt-runner { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--ivnt-gray-200); border-radius: var(--ivnt-radius); background: var(--ivnt-green-bg); }
.ivnt-wrap .ivnt-runner-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--ivnt-surface); border: 2px solid var(--ivnt-green); display: flex; align-items: center; justify-content: center; color: var(--ivnt-green); font-size: var(--ivnt-fs-xs); font-weight: 700; }
.ivnt-wrap .ivnt-runner-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ivnt-wrap .ivnt-runner-text { font-size: var(--ivnt-fs-base); line-height: 1.7; color: var(--ivnt-ink-soft); }
@media (max-width: 480px) {
  .ivnt-wrap .ivnt-recommend { flex-direction: column; gap: 0; }
  .ivnt-wrap .ivnt-recommend-art { flex: none; min-height: 0; height: 230px; }
  .ivnt-wrap .ivnt-recommend-body { padding: 12px 14px 14px; }
}

/* ---------- STEPの画像（figure）と、画像の説明文 ---------- */
.ivnt-wrap figure.ivnt-step-shot { margin: 10px 0 0; }
.ivnt-wrap .ivnt-step-shot-cap { padding: 5px 10px; background: var(--ivnt-green-bg); border-top: 1px solid var(--ivnt-gray-200); font-size: var(--ivnt-fs-xs); line-height: 1.6; color: var(--ivnt-ink-soft); text-align: center; }

/* ---------- イヴン能力：何凸のときか（範囲）／プロフィール ---------- */
.ivnt-wrap .ivnt-ability-range { display: inline-block; margin-right: 8px; padding: 1px 8px; border: 1px solid var(--ivnt-yellow); border-radius: var(--ivnt-radius-sm); background: var(--ivnt-surface); color: var(--ivnt-yellow); font-size: var(--ivnt-fs-xs); font-weight: 700; white-space: nowrap; }
.ivnt-wrap .ivnt-profile-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
.ivnt-wrap .ivnt-profile-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--ivnt-gray-200); border-radius: var(--ivnt-radius); background: var(--ivnt-green-bg); }
.ivnt-wrap .ivnt-profile-item dt { flex-shrink: 0; min-width: 3.2em; margin: 0; font-size: var(--ivnt-fs-xs); font-weight: 700; color: var(--ivnt-ink-soft); }
.ivnt-wrap .ivnt-profile-item dd { margin: 0; font-size: var(--ivnt-fs-base); font-weight: 700; color: var(--ivnt-ink-title); }
@media (max-width: 480px) { .ivnt-wrap .ivnt-profile-list { grid-template-columns: 1fr; } }

/* =====================================================================
   トップページ用の部品（バナー・まずはここから・攻略のポイント・キャラ一覧）
   色・形・発光は、冒頭の :root の数値で決まります。
   ===================================================================== */
.ivnt-wrap .ivnt-top-banner { margin: 0 0 14px; border-radius: var(--ivnt-radius-lg); overflow: hidden; border: var(--ivnt-border-w) solid var(--ivnt-green); box-shadow: 0 0 calc(18px * var(--ivnt-glow-size)) rgba(var(--ivnt-green-rgb),calc(.35 * var(--ivnt-glow-alpha))); background: var(--ivnt-surface-deep); }
.ivnt-wrap .ivnt-top-banner img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }

/* まずはここから：大きなタイル */
.ivnt-wrap .ivnt-start-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ivnt-wrap a.ivnt-start-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px; text-align: center; text-decoration: none; color: var(--ivnt-white);
  border: var(--ivnt-border-w) solid var(--ivc-solid); border-radius: var(--ivnt-radius-lg);
  background: radial-gradient(120% 140% at 50% 0%, rgba(var(--ivc),.28), transparent 62%), linear-gradient(160deg, var(--ivnt-surface-raised), var(--ivnt-surface-deep));
  box-shadow: 0 0 calc(14px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.4 * var(--ivnt-glow-alpha)));
}
.ivnt-wrap a.ivnt-start-tile:hover { box-shadow: 0 0 calc(22px * var(--ivnt-glow-size)) rgba(var(--ivc),calc(.7 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-start-tile-icon { font-size: 30px; line-height: 1.2; }
.ivnt-wrap .ivnt-start-tile-title { font-size: var(--ivnt-fs-md); font-weight: 800; line-height: 1.4; color: var(--ivnt-white); }
.ivnt-wrap .ivnt-start-tile-sub { font-size: var(--ivnt-fs-xs); line-height: 1.5; color: var(--ivnt-green-on-dark); }
.ivnt-wrap .ivnt-start-tile-arrow { position: absolute; right: 10px; bottom: 6px; font-size: 18px; color: var(--ivc-solid); }

/* 攻略のポイント */
.ivnt-wrap .ivnt-point-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ivnt-wrap a.ivnt-point-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; text-decoration: none; border: 1px solid var(--ivnt-gray-200); border-left: var(--ivnt-bar-w) solid var(--ivnt-green); border-radius: var(--ivnt-radius); background: var(--ivnt-green-bg); }
.ivnt-wrap a.ivnt-point-card:hover { box-shadow: 0 0 calc(10px * var(--ivnt-glow-size)) rgba(var(--ivnt-green-rgb),calc(.4 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-point-card-icon { flex-shrink: 0; font-size: 24px; line-height: 1.3; }
.ivnt-wrap .ivnt-point-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ivnt-wrap .ivnt-point-card-title { font-size: var(--ivnt-fs-md); font-weight: 800; line-height: 1.4; color: var(--ivnt-ink-title); }
.ivnt-wrap .ivnt-point-card-text { font-size: var(--ivnt-fs-sm); line-height: 1.7; color: var(--ivnt-ink-soft); }

/* キャラ一覧・新着 */
.ivnt-wrap .ivnt-char-group { margin-bottom: 14px; }
.ivnt-wrap .ivnt-char-group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ivnt-wrap .ivnt-char-group-count { font-size: var(--ivnt-fs-sm); color: var(--ivnt-ink-soft); }
.ivnt-wrap .ivnt-top-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px 8px; }
.ivnt-wrap a.ivnt-char-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; }
.ivnt-wrap .ivnt-char-tile-icon { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ivnt-surface); border: 2px solid var(--ivnt-green); color: var(--ivnt-green); font-size: var(--ivnt-fs-sm); font-weight: 700; box-shadow: 0 0 calc(8px * var(--ivnt-glow-size)) rgba(var(--ivnt-green-rgb),calc(.4 * var(--ivnt-glow-alpha))); }
.ivnt-wrap .ivnt-char-tile-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ivnt-wrap .ivnt-char-tile-icon--fire    { border-color: var(--ivnt-attr-fire); }
.ivnt-wrap .ivnt-char-tile-icon--water   { border-color: var(--ivnt-attr-water); }
.ivnt-wrap .ivnt-char-tile-icon--wind    { border-color: var(--ivnt-attr-wind); }
.ivnt-wrap .ivnt-char-tile-icon--thunder { border-color: var(--ivnt-attr-thunder); }
.ivnt-wrap .ivnt-char-tile-icon--light   { border-color: var(--ivnt-attr-light); }
.ivnt-wrap .ivnt-char-tile-icon--dark    { border-color: var(--ivnt-attr-dark); }
.ivnt-wrap .ivnt-char-tile-name { font-size: var(--ivnt-fs-xs); font-weight: 700; line-height: 1.4; text-align: center; color: var(--ivnt-ink-title); }

@media (max-width: 480px) {
  .ivnt-wrap .ivnt-start-tiles { grid-template-columns: 1fr; }
  .ivnt-wrap a.ivnt-start-tile { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: left; }
  .ivnt-wrap .ivnt-start-tile-title { flex: 1; }
  .ivnt-wrap .ivnt-start-tile-sub { display: none; }
  .ivnt-wrap .ivnt-start-tile-arrow { position: static; }
  .ivnt-wrap .ivnt-point-grid { grid-template-columns: 1fr; }
}

/* ---------- アイコンの見方（最強ランキング） ---------- */
.ivnt-wrap .ivnt-icon-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--ivnt-gray-200); border-radius: var(--ivnt-radius); background: var(--ivnt-green-bg); font-size: var(--ivnt-fs-xs); color: var(--ivnt-ink-soft); }
.ivnt-wrap .ivnt-icon-legend-title { font-weight: 800; color: var(--ivnt-ink-title); }
.ivnt-wrap .ivnt-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ivnt-wrap .ivnt-legend-swatch { display: inline-block; width: 14px; height: 14px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ivnt-wrap .ivnt-legend-swatch.ivnt-rar-ur { background: linear-gradient(160deg, var(--ivnt-rarity-ur-a), var(--ivnt-rarity-ur-b)); }
.ivnt-wrap .ivnt-legend-swatch.ivnt-rar-sr { background: linear-gradient(160deg, var(--ivnt-rarity-sr-a), var(--ivnt-rarity-sr-b)); }
.ivnt-wrap .ivnt-legend-swatch.ivnt-rar-r  { background: linear-gradient(160deg, var(--ivnt-rarity-r-a),  var(--ivnt-rarity-r-b)); }
.ivnt-wrap .ivnt-legend-attr { width: 16px; height: 16px; object-fit: contain; display: inline-block; vertical-align: middle; }