@charset "UTF-8";
    /* font-size scale (13 段階) — profile.html と同一。 */
    :root{
      --sc-fs-caption:11px;
      --sc-fs-body-sm:12px;
      --sc-fs-body:13px;
      --sc-fs-body-md:14px;
      --sc-fs-body-lg:15px;
      --sc-fs-title-sm:14px;
      --sc-fs-title:16px;
      --sc-fs-title-lg:18px;
      --sc-fs-hero:22px;
      --sc-fs-page-h1:26px;
      --sc-fs-cp-sm:34px;
      --sc-fs-cp:42px;
      --sc-fs-cp-hero:52px;
    }
    *{box-sizing:border-box;}
    html,body{margin:0;color:#eafff3;font-family:'Noto Sans JP',sans-serif;}
    html{background:radial-gradient(120% 70% at 50% 0%,#0c2016,#07140d 50%,#020503 92%) #020503;scroll-behavior:smooth;}

    html{scrollbar-color:#2c5a3f #0a1c12;scrollbar-width:thin;scrollbar-gutter:stable;overflow-y:scroll;}
    ::-webkit-scrollbar{width:11px;height:11px;}
    ::-webkit-scrollbar-track{background:#0a1c12;}
    ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2c5a3f,#1c3a28);border-radius:6px;border:2px solid #0a1c12;}
    ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3f8a63,#2c5a3f);}
    ::-webkit-scrollbar-corner{background:#0a1c12;}
    @media (max-width:919px){html{scroll-padding-top:72px;}}
    body{min-height:100vh;background:radial-gradient(120% 70% at 50% 0%,#0c2016,#07140d 50%,#020503 92%) fixed;overflow-x:clip;}
    body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(180deg,rgba(125,255,176,.03) 0,rgba(125,255,176,.03) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:1;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 92%);}
    body > *{position:relative;z-index:2;}
    img{max-width:100%;}
    a{color:inherit;text-decoration:none;}
    button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;}
    @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}}

    /* HEADER — profile.html と同一 pattern */
    .scope-header{position:sticky;top:0;z-index:8;background:#0c2016;isolation:isolate;}@media (orientation:landscape){.scope-header{position:static;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}}
    @media (min-width:920px){.scope-header{position:static;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}}
    .scope-header-tabs{display:none;}
    @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .scope-header-tabs{display:flex;align-items:center;gap:clamp(2px,0.3vw,6px);font-family:'Chakra Petch',sans-serif;font-size:clamp(11px,1.15vw,17px);flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
      .scope-header-tabs::-webkit-scrollbar{display:none;}
      .scope-header-tabs a{padding:clamp(5px,0.6vw,9px) clamp(7px,1.2vw,18px);border-radius:7px;color:#b9c4ad;text-decoration:none;font-weight:600;transition:background .12s,color .12s;white-space:nowrap;}
      /* 2026-08-19 tablet portrait G nav upsize (user 「タブ縦型のGナビサイズ
         元に戻ってない？」) — PC 値には影響させず tablet portrait のみ font/gap
         を拡大。 */
      @media (orientation:portrait) and (min-width:500px) and (min-height:800px){
        .scope-header-tabs{gap:clamp(3px,0.4vw,8px);font-size:clamp(13px,1.35vw,19px);}
        .scope-header-tabs a{padding:clamp(6px,0.7vw,10px) clamp(9px,1.4vw,20px);}
      }
      /* 2026-08-19 tablet portrait G nav upsize (user 「タブ縦型のGナビサイズ
         元に戻ってない？」) — PC 値には影響させず tablet portrait のみ font/gap
         を拡大。 */
      @media (orientation:portrait) and (min-width:500px) and (min-height:800px){
        .scope-header-tabs{gap:clamp(3px,0.4vw,8px);font-size:clamp(13px,1.35vw,19px);}
        .scope-header-tabs a{padding:clamp(6px,0.7vw,10px) clamp(9px,1.4vw,20px);}
      }
      .scope-header-tabs a:hover{background:#1c3a28;color:#bdffd6;}
      .scope-header-tabs a.is-active{color:#06150c;background:#8effb8;font-weight:700;}
    }
    @media (max-width:1099px) and (orientation:landscape), (orientation:portrait) and (min-width:500px) and (max-width:1099px) and (min-height:800px){
      .patch-pill-pfx{display:none;}
      .scope-header-inner{padding:8px 12px;gap:6px;}
      .scope-header-tabs{justify-content:flex-end;overflow-x:visible;}
    }
    .lang-toggle{background:transparent;color:#eafff3;border:1px solid #3a3d33;padding:0;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:1.65rem;height:1.65rem;flex-shrink:0;box-sizing:border-box;transition:all 0.2s;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.lang-toggle{width:1.95rem;height:1.95rem;}}
    .lang-toggle:hover{border-color:#8effb8;color:#8effb8;background:rgba(125,255,176,.1);box-shadow:0 2px 6px rgba(125,255,176,.2);}

    /* back-to-top + bottom nav */
    .back-to-top{position:fixed;right:1rem;bottom:1rem;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid #2c5a3f;background:rgba(7,18,12,.85);color:#8effb8;font-size:1.1rem;line-height:1;cursor:pointer;box-shadow:0 6px 18px -4px rgba(0,0,0,.5),0 0 18px -6px rgba(125,255,176,.5);transition:all .2s;z-index:90;display:flex;align-items:center;justify-content:center;}
    @media (max-width:919px){.back-to-top{bottom:96px;}}
    @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){.back-to-top{width:3rem;height:3rem;font-size:1.25rem;right:1.5rem;bottom:1.5rem;}}
    .back-to-top[hidden]{display:none;}
    .back-to-top:hover{background:rgba(15,50,32,.95);transform:translateY(-2px);}
    .scope-bottomnav{display:none;}
    @media (max-width:919px) and (orientation:portrait) and (max-width:499px){
      .scope-bottomnav{display:flex;align-items:flex-end;position:fixed;bottom:0;left:0;right:0;z-index:9;height:74px;padding:10px 6px 8px;border-top:1px solid #18301f;background:linear-gradient(180deg,#070f0a,#050b08);box-shadow:0 -10px 24px -14px rgba(0,0,0,.8);}
      body{padding-bottom:74px;}html::before{content:'';position:fixed;left:0;right:0;bottom:0;height:74px;background:linear-gradient(180deg,#070f0a,#050b08);border-top:1px solid #18301f;box-shadow:0 -10px 24px -14px rgba(0,0,0,.8);z-index:8;pointer-events:none;}
    }
    .scope-bottomnav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:0;color:#5f9d7c;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;white-space:nowrap;position:relative;cursor:pointer;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(125,255,176,.18);}
    .scope-bottomnav-tab:hover{color:#9fe0ba;}
    .scope-bottomnav-tab.is-active{color:#8effb8;}
    .scope-bottomnav-tab:not(.scope-bottomnav-tab-center).is-active::before{content:'';position:absolute;top:-10px;left:30%;right:30%;height:2px;background:#8effb8;box-shadow:0 0 6px rgba(125,255,176,.6);}
    .scope-bottomnav-icon{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;}
    .scope-bottomnav-icon svg{display:block;width:100%;height:100%;}
    .scope-bottomnav-tab-center{position:relative;}
    .scope-bottomnav-tab-center .scope-bottomnav-icon-wrap{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 42% 36%,#1f5a3c,#0a1f14);border:1.5px solid #8effb8;box-shadow:0 0 20px -3px rgba(125,255,176,.75),inset 0 0 12px rgba(125,255,176,.28);display:flex;align-items:center;justify-content:center;color:#8effb8;}
    .scope-bottomnav-tab-center .scope-bottomnav-icon{width:26px;height:26px;}
    .scope-bottomnav-tab-center .scope-bottomnav-label{margin-top:30px;}

    /* FOOTER */
    .site-footer{padding:30px 22px 100px;background:transparent;border-top:1px solid #1c3a28;margin-top:36px;color:#9fb8a8;font-family:'Noto Sans JP',sans-serif;font-size:var(--sc-fs-body-md);line-height:1.7;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.site-footer{padding:36px 28px 36px;font-size:var(--sc-fs-body-lg);}}
    .footer-sitemap{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-bottom:24px;}
    @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){.footer-sitemap{grid-template-columns:repeat(4,1fr);gap:28px;max-width:1200px;margin-left:auto;margin-right:auto;}}
    .footer-sitemap-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-body-lg);color:#bdffd6;letter-spacing:.04em;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid #1c3a28;}
    .footer-sitemap ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
    .footer-sitemap a{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);color:#9fe0ba;text-decoration:none;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.footer-sitemap a{font-size:var(--sc-fs-body-md);}}
    .footer-sitemap a:hover{color:#8effb8;}
    .footer-attribution{margin:18px 0 14px;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);color:#8a9683;text-align:center;}
    .footer-legal{max-width:1140px;margin:14px auto 0;padding:14px 16px;background:rgba(7,18,12,.65);border-radius:10px;}
    .footer-sources,.footer-disclaimer{margin:0;font-size:var(--sc-fs-body);color:#7fa890;line-height:1.7;}
    .footer-disclaimer{margin-top:10px;padding-top:10px;color:#5a6f50;opacity:.85;}

    /* ========== STATIC PAGE (base typography) ========== */
    /* matchlog は "user" category (check_scope_app_consistency.py):
       1200px + landscape 0 28px 56px。 profile と同じ。 */
    .scope-app{max-width:1200px;margin:0 auto;padding:0 0 24px;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.scope-app{padding:0 28px 56px;}}
    /* matchlog は section 内に padding を持つ (scope-static-section) ので .scope-app top は 0、
       hero は scope-static-hero 側で padding:14px 18px 0 を追加。 scouter と同じ余白感を実現。 */
    .scope-app-matchlog > .scope-static-section{margin-left:14px;margin-right:14px;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.scope-app-matchlog > .scope-static-section{margin-left:0;margin-right:0;}}

    /* 研究室 sub-tab bar (ビルド研究室 / 試合ログ) — /scouter + /matchlog 共通。
       2026-08-02 user feedback Case A: G-nav は「研究室」1 item のまま、
       研究室内 2 sub-menu を pill tab で切替 (通常 navigation、 SPA 遷移なし)。
       2026-08-02 追記: h1 の単独 row 上に浮いていて sub-nav と誤読
       されにくい弱い視認性だった指摘を受け、 h1 と同 row inline +
       segmented-control (2 分割 pill、 active 半分が塗り) に変更。 外枠
       pill が「region container」= sub-nav の meta cue、 active tab は
       メインナビ (.scope-header-tabs a.is-active) と同じ塗り+濃色文字の
       visual weight で現在地を強調。
       /scouter 側 (web/scouter.html) にも同 class を inline 定義 — 変更時は両 file 同期。 */
    .scope-subtab{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #2c5a3f;border-radius:999px;background:rgba(10,26,17,.55);flex-shrink:0;}
    .scope-subtab-tab{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 15px;border-radius:999px;background:transparent;color:#9fe9c0;font-family:'Chakra Petch','Noto Sans JP',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.03em;text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease;}
    .scope-subtab-tab:hover{color:#dffff0;}
    .scope-subtab-tab.is-active{background:#8effb8;color:#06150c;font-weight:700;}

    /* hero を flex row 化して sub-tab を h1 と同 row に inline 配置。
       幅不足 (mobile portrait) は subtab を flex-basis:100% で強制改行 —
       文字幅次第の自然 wrap だと数px差で欠け表示になる (実測で確認済) ので
       max-width:919px は明示的に h1 の下 1 行へ落とす。 */
    .scope-static-hero{padding:14px 18px 0;margin-bottom:16px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.scope-static-hero{padding:24px 0 0;}}
    /* 2026-09-13 (見出し位置の統一): タブレット縦は上 24px だとカタログ等より 9px 下がるので 14px。 */
    @media (orientation:portrait) and (min-width:500px) and (min-height:800px) and (max-width:919px){.scope-static-hero{padding-top:14px;}}
    /* mobile portrait: subtab は h1 と同 row を default とするが、 狭小端末
       (β badge 込み h1 + subtab が入らない場合) は fallback で subtab を
       h1 下に wrap 落とす (2026-08-02 user 「念のため狭小端末の際は
       サブナビがタイトル下に落ちる形」)。 flex-wrap:wrap default を維持。 */
    @media (max-width:919px){
      .scope-app-matchlog .scope-static-h1{min-width:0;flex-shrink:1;}
      .scope-static-hero .scope-subtab{flex-shrink:0;}
    }
    .scope-static-eyebrow{font-family:'Orbitron',sans-serif;font-weight:700;font-size:var(--sc-fs-body-sm);letter-spacing:.24em;color:#ffd83a;margin-bottom:8px;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.scope-static-eyebrow{font-size:var(--sc-fs-body);}}
    .scope-static-h1{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-page-h1);color:#dffff0;line-height:1.15;margin:0;}
    @media (min-width:920px){.scope-static-h1{font-size:var(--sc-fs-cp-sm);}}
    .scope-static-meta{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body-md);color:#7fa890;margin-top:9px;}

    .scope-static-section{margin-bottom:22px;padding:16px 16px 14px;border:1px solid #1c3a28;border-radius:10px;background:rgba(10,28,18,.5);}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.scope-static-section{padding:22px 22px 18px;margin-bottom:26px;}}
    .scope-static-h2{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-title-lg);color:#bdffd6;margin:0 0 11px;padding-bottom:8px;border-bottom:1px solid #2c5a3f;letter-spacing:.02em;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.scope-static-h2{font-size:var(--sc-fs-hero);}}
    .scope-static-h3{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-title-sm);color:#dffff0;margin:14px 0 7px;letter-spacing:.02em;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.scope-static-h3{font-size:var(--sc-fs-title-sm);}}
    .scope-static-section p{margin:0 0 10px;font-size:var(--sc-fs-body-lg);color:#bdd6c6;line-height:1.75;}
    .scope-static-section p strong{color:#dffff0;font-weight:700;}
    .scope-static-section a{color:#8effb8;text-decoration:underline;text-decoration-color:#3f8a63;text-underline-offset:2px;}
    .scope-static-section a:hover{color:#bdffd6;text-decoration-color:#8effb8;}

    /* v70 (2026-08-08): β バッジ (旧 .wrp-beta-badge) 撤去。 β glyph が font
       レンダで B に誤読される問題が font 差分で解決困難と判明したため、
       matchlog h1 と scouter crosslink 双方から β 表記自体を削除。 CSS も
       dead code として removal。 */

    /* ========== MATCH LOG v2 (visual picker redesign) ========== */

    /* 2026-09-14: z-index 60 → 120。 新規登録フォーム (.wrp-ml-form-modal、 z 95) の裏に
       隠れて検証エラーのトーストが見えていなかった。 */
    .wrp-ml-toast-slot{position:fixed;left:0;right:0;bottom:104px;display:flex;justify-content:center;pointer-events:none;z-index:120;}
    @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-toast-slot{bottom:1.5rem;}}
    .wrp-ml-toast{pointer-events:auto;padding:11px 20px;border-radius:8px;background:linear-gradient(180deg,#1f5a3c,#0f3a25);border:1px solid #8effb8;color:#eafff3;font-family:'JetBrains Mono',monospace;font-size:13px;box-shadow:0 8px 24px -6px rgba(0,0,0,.55),0 0 18px -4px rgba(125,255,176,.5);opacity:0;transform:translateY(12px);transition:opacity .18s ease-out,transform .18s ease-out;max-width:min(92vw,420px);text-align:center;}
    .wrp-ml-toast.is-visible{opacity:1;transform:translateY(0);}
    .wrp-ml-toast.is-err{background:linear-gradient(180deg,#5a2626,#3a1010);border-color:#ff8b8b;}

    .wrp-ml-count-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px;padding:10px 14px;border-radius:8px;border:1px solid rgba(159,233,192,.22);background:rgba(10,28,18,.5);}
    .wrp-ml-count-num{font-family:'Orbitron',sans-serif;font-weight:700;font-size:24px;color:#8effb8;letter-spacing:.02em;line-height:1;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-count-num{font-size:28px;}}
    .wrp-ml-count-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;letter-spacing:.06em;text-transform:uppercase;}
    .wrp-ml-count-den{font-size:14px;color:rgba(159,233,192,.55);margin-left:4px;}

    .wrp-ml-form{display:flex;flex-direction:column;gap:16px;}

    /* --- meta bar (date + patch) --- */
    .wrp-ml-meta-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 14px;border:1px solid #1c3a28;border-radius:8px;background:rgba(5,12,8,.55);}
    .wrp-ml-meta-cell{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px;}
    .wrp-ml-meta-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:#9fe0ba;text-transform:uppercase;}
    .wrp-ml-meta-val{font-family:'JetBrains Mono',monospace;font-size:14px;color:#eafff3;}
    .wrp-ml-meta-date{width:100%;min-height:38px;padding:6px 10px;border:1px solid #2c5a3f;border-radius:6px;background:rgba(5,12,8,.7);color:#eafff3;font-family:'JetBrains Mono',monospace;font-size:14px;color-scheme:dark;}
    .wrp-ml-meta-date:focus{outline:none;border-color:#8effb8;box-shadow:0 0 0 2px rgba(125,255,176,.18);}

    /* --- section wrapper (each block) --- */
    .wrp-ml-block{padding:14px 14px 16px;border:1px solid #1c3a28;border-radius:10px;background:rgba(10,28,18,.5);display:flex;flex-direction:column;gap:12px;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-block{padding:18px 20px 20px;}}
    .wrp-ml-block-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;}
    .wrp-ml-block-h-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:15px;color:#bdffd6;letter-spacing:.02em;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-block-h-title{font-size:17px;}}
    .wrp-ml-block-h-sub{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(159,233,192,.6);letter-spacing:.02em;}
    .wrp-ml-req-badge{display:inline-block;padding:2px 7px;border:1px solid #8effb8;color:#8effb8;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.06em;border-radius:4px;background:rgba(125,255,176,.14);text-transform:uppercase;}
    .wrp-ml-opt-badge{display:inline-block;padding:2px 7px;border:1px solid rgba(159,233,192,.32);color:rgba(159,233,192,.72);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;border-radius:4px;text-transform:uppercase;}

    /* section 色分け (必須 = 緑 primary、 任意 = 中立) */
    .wrp-ml-block--required{border-color:#3f8a63;background:linear-gradient(180deg,rgba(125,255,176,.06),rgba(10,28,18,.5));box-shadow:0 0 12px -6px rgba(125,255,176,.32), inset 0 1px 0 rgba(125,255,176,.06);}
    .wrp-ml-block--required .wrp-ml-block-h-title{color:#eafff3;}
    .wrp-ml-block--optional{border-color:#1c3a28;background:rgba(10,28,18,.5);}

    /* 使用チャンピオン section header のレーン chip。
       Mobile portrait: 必須 badge の直後に flow (自然な左寄せ、
       title + badge + chip の 3 要素がバランス良く並ぶ)。
       PC (≥920px): margin-left:auto で右端に push、 title / badge と対極に。 */
    .wrp-ml-self-role-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:10px;border:1px dashed rgba(159,233,192,.45);color:#9fe0ba;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;background:rgba(5,12,8,.5);transition:all .15s;}
    /* Mobile portrait: header の chip は隠し、 champion 名下の chip を表示。 */
    .wrp-ml-self-role-chip--header{display:none;}
    .wrp-ml-self-role-chip--inline{margin-top:4px;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      /* PC ≥920px: header の chip を復活 (右端 push)、 inline chip は隠す。 */
      .wrp-ml-self-role-chip--header{display:inline-flex;margin-left:auto;}
      .wrp-ml-self-role-chip--inline{display:none;}
    }
    .wrp-ml-self-role-chip.is-set{border-style:solid;border-color:#8effb8;color:#8effb8;background:rgba(125,255,176,.14);font-weight:700;}

    /* 味方 grid の自分 slot marker */
    .wrp-ml-slot-self-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:10px;background:#8effb8;color:#06150c;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.06em;border:1px solid #06150c;z-index:3;line-height:1;white-space:nowrap;display:none;}
    .wrp-ml-slot.is-self .wrp-ml-slot-self-badge{display:inline-block;}
    .wrp-ml-slot.is-self{cursor:default;}
    .wrp-ml-slot.is-self .wrp-ml-slot-icon{border-style:solid;border-color:#8effb8;background:radial-gradient(circle,#1c5533,#0c2416);box-shadow:0 0 12px -2px rgba(125,255,176,.55);pointer-events:none;}
    .wrp-ml-slot.is-self:hover .wrp-ml-slot-icon,
    .wrp-ml-slot.is-self:focus-visible .wrp-ml-slot-icon{transform:none;}
    .wrp-ml-slot.is-self .wrp-ml-slot-clear{display:none !important;}
    .wrp-ml-slot.is-self .wrp-ml-slot-plus{display:none;}
    .wrp-ml-slot.is-self .wrp-ml-slot-role{color:#8effb8;font-weight:700;}

    /* ルーン section (旧 accordion → 常時表示 block) caption */
    .wrp-ml-rune-caption{margin:0;padding:0;font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;line-height:1.6;}

    /* --- 使用チャンピオン (self, big) --- */
    /* v47 (2026-08-02) user feedback「スマホとランドスケープの使用チャンピオン
       欄がちょっと幅取り過ぎ」対応で使用チャンピオン section を全体圧縮:
       - Portrait mobile: portrait 120→80、 row layout を center → left align
       - Landscape (html.is-landscape): 更圧縮 56→48
       - Row gap 20→12、 name font 縮小 */
    .wrp-ml-self-row{display:flex;flex-direction:row;align-items:center;gap:12px;justify-content:flex-start;flex-wrap:wrap;}
    /* v49 (2026-08-02) user feedback「新規登録のランドスケープの使用チャンピオン欄、
       バランスがおかしすぎる。 スマホも含めて右に余白がありすぎる」対応で
       self-slot を全 breakpoint で `flex-direction:row` (icon + name + chip inline)、
       右余白 problem 解消。 空 icon の場合は 「タップして選択」 placeholder が
       残るので空状態でも見た目崩れない。 */
    /* 2026-08-14 v7: flex → grid に変更。 icon | (name / chip) の 2 段 layout。
       長い名前 (「ツイステッド・フェイト」 等) では name が truncate する前に
       chip が name の下段に確実に落ちる (grid child は auto placement で定位置)。
       grid rows は auto なので chip 非表示 (--header active、 PC) 時は 2 行目が
       collapse して flex 時と同じ見た目。 flex 版だと chip が name と競合して
       chip が name 横に残ったまま name が truncate される bug の恒久対策。 */
    .wrp-ml-self-slot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:4px 12px;align-items:center;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;-webkit-tap-highlight-color:rgba(125,255,176,.18);}
    .wrp-ml-self-slot > .wrp-ml-self-slot-icon{grid-column:1;grid-row:1 / span 2;align-self:center;}
    .wrp-ml-self-slot > .wrp-ml-self-slot-name{grid-column:2;grid-row:1;max-width:none;min-width:0;}
    .wrp-ml-self-slot > .wrp-ml-self-role-chip--inline{grid-column:2;grid-row:2;justify-self:start;margin-top:0;}
    /* icon container は 「X 見切れ防止」 のため overflow:visible。
       img 自体に一致 border-radius を持たせて円形 clip する。 */
    .wrp-ml-self-slot-icon{position:relative;width:80px;height:80px;border-radius:50%;overflow:visible;border:2px solid #2c5a3f;background:radial-gradient(circle,#0c3c26,#061510);box-shadow:0 0 12px -4px rgba(125,255,176,.35);transition:border-color .12s,box-shadow .12s,transform .12s;}
    /* 2026-08-11 (feedback「サムネイルでかすぎ問題解消していない」): PC (portrait 系)
       の self-slot icon を 88 → 64px に scale down。 fullscreen modal 化で sheet 幅
       が 100vw に拡大した後、 88px は使用チャンピオン block 内で相対的に過大に見えて
       いたため。 landscape 側 (52px) は据え置き — 縦幅 constraint で既に compact。 */
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-self-slot-icon{width:64px;height:64px;}}
    @media (orientation:landscape){.wrp-ml-self-slot-icon{width:52px !important;height:52px !important;}}
    .wrp-ml-self-slot:hover .wrp-ml-self-slot-icon,
    .wrp-ml-self-slot:focus-visible .wrp-ml-self-slot-icon{border-color:#8effb8;box-shadow:0 0 16px -3px rgba(125,255,176,.55);transform:scale(1.02);}
    .wrp-ml-self-slot-img{width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:0;transition:opacity .18s;}
    .wrp-ml-self-slot.is-filled .wrp-ml-self-slot-img{opacity:1;}
    .wrp-ml-self-slot-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Chakra Petch',sans-serif;font-size:28px;font-weight:700;color:rgba(159,233,192,.55);text-align:center;letter-spacing:.02em;line-height:1;}
    .wrp-ml-self-slot.is-filled .wrp-ml-self-slot-placeholder{display:none;}
    .wrp-ml-self-slot-name{min-height:20px;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:14px;color:#dffff0;text-align:left;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .wrp-ml-self-slot-name:empty::before{content:'\00a0';}
    /* Clear (X) button — 共通 base styling for self / team / rune / item / spell tiles */
    .wrp-ml-self-slot-clear,
    .wrp-ml-slot-clear,
    .wrp-ml-rune-tile-clear,
    .wrp-ml-item-tile-clear,
    .wrp-ml-spell-tile-clear{position:absolute;display:none;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,74,74,.6);color:#fff;border:1px solid rgba(255,138,138,.75);padding:0;cursor:pointer;z-index:3;line-height:1;transition:background .12s,transform .12s;-webkit-tap-highlight-color:rgba(255,138,138,.3);box-shadow:0 1px 3px rgba(0,0,0,.5);}
    .wrp-ml-self-slot-clear:hover,
    .wrp-ml-slot-clear:hover,
    .wrp-ml-rune-tile-clear:hover,
    .wrp-ml-item-tile-clear:hover,
    .wrp-ml-spell-tile-clear:hover{background:rgba(255,74,74,.85);transform:scale(1.08);}
    .wrp-ml-self-slot-clear svg,
    .wrp-ml-slot-clear svg,
    .wrp-ml-rune-tile-clear svg,
    .wrp-ml-item-tile-clear svg,
    .wrp-ml-spell-tile-clear svg{width:60%;height:60%;display:block;pointer-events:none;}
    /* per-context sizes */
    .wrp-ml-self-slot-clear{width:26px;height:26px;top:-4px;right:-4px;}
    .wrp-ml-self-slot.is-filled .wrp-ml-self-slot-clear{display:flex;}
    .wrp-ml-self-caption{flex:1;display:flex;flex-direction:column;gap:6px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;line-height:1.6;text-align:center;}
    @media (min-width:640px){.wrp-ml-self-caption{text-align:left;}}
    .wrp-ml-self-caption-line{color:#bdd6c6;}

    /* --- team grids (敵 5 / 味方 4) --- */
    .wrp-ml-team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
    .wrp-ml-team-grid.is-ally{grid-template-columns:repeat(4,minmax(0,1fr));}
    @media (max-width:479px){.wrp-ml-team-grid{gap:6px;}}
    /* 2026-08-11 (feedback「全体登録画面もチャンピオン選択枠が大きい」): PC 版で
       team-grid circle が block width の 1/5 を占めて 100px 超の巨大 circle に
       なっていた (PC landscape 実測 109px)。 tile 幅 (アイテム / ルーンの 48px) と
       視覚バランスを合わせるため PC 版のみ max-width 64px + 左寄せに cap。
       @media (min-width:920px) 単体で portrait / landscape どちらも cover
       (mobile landscape は下 line 887 系の PC 圧縮 rule と別 branch なので影響なし)。 */
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .wrp-ml-team-grid{grid-template-columns:repeat(5,minmax(0,64px));justify-content:flex-start;gap:10px;}
      .wrp-ml-team-grid.is-ally{grid-template-columns:repeat(4,minmax(0,64px));}
    }
    .wrp-ml-slot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;-webkit-tap-highlight-color:rgba(125,255,176,.18);position:relative;}
    /* icon container overflow:visible + img 側に border-radius:50% で X 見切れ回避 */
    .wrp-ml-slot-icon{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:visible;border:1.5px dashed rgba(159,233,192,.35);background:radial-gradient(circle,#0c2416,#061510);transition:border-color .12s,box-shadow .12s,transform .12s;}
    .wrp-ml-slot.is-filled .wrp-ml-slot-icon{border-style:solid;border-color:#2c5a3f;background:radial-gradient(circle,#0c3c26,#061510);box-shadow:0 0 8px -3px rgba(125,255,176,.4);}
    .wrp-ml-team-block-enemy .wrp-ml-slot.is-filled .wrp-ml-slot-icon{border-color:#7a2a2a;background:radial-gradient(circle,#3a1010,#0a0303);box-shadow:0 0 8px -3px rgba(255,138,138,.4);}
    .wrp-ml-slot:hover .wrp-ml-slot-icon,
    .wrp-ml-slot:focus-visible .wrp-ml-slot-icon{border-color:#8effb8;box-shadow:0 0 10px -2px rgba(125,255,176,.5);transform:scale(1.03);}
    .wrp-ml-team-block-enemy .wrp-ml-slot:hover .wrp-ml-slot-icon,
    .wrp-ml-team-block-enemy .wrp-ml-slot:focus-visible .wrp-ml-slot-icon{border-color:#ff9c9c;box-shadow:0 0 10px -2px rgba(255,138,138,.5);}
    .wrp-ml-slot-img{width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:0;transition:opacity .18s;}
    .wrp-ml-slot.is-filled .wrp-ml-slot-img{opacity:1;}
    .wrp-ml-slot-plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Chakra Petch',sans-serif;font-size:24px;font-weight:700;color:rgba(159,233,192,.55);}
    .wrp-ml-slot.is-filled .wrp-ml-slot-plus{display:none;}
    .wrp-ml-slot-role{font-family:'JetBrains Mono',monospace;font-size:9px;color:#9fe0ba;letter-spacing:.02em;text-align:center;line-height:1.2;white-space:nowrap;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-slot-role{font-size:11px;}}
    /* v42 (2026-08-01) user feedback「敵チームのレーン名が赤字なの謎」対応で
       enemy team role label の赤字撤回。 敵側の visual 差別化は border/icon
       color (line 303) で十分。 */
    .wrp-ml-slot-name{font-family:'Noto Sans JP',sans-serif;font-weight:500;font-size:10px;color:#dffff0;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;min-height:12px;}
    .wrp-ml-slot-name:empty::before{content:'\00a0';}
    @media (min-width:520px){.wrp-ml-slot-name{font-size:11px;}}
    .wrp-ml-slot-clear{width:20px;height:20px;top:-3px;right:-3px;}
    .wrp-ml-slot.is-filled .wrp-ml-slot-clear{display:flex;}
    /* rune / item / spell tile X */
    .wrp-ml-rune-tile-clear{width:16px;height:16px;top:-4px;right:-4px;}
    .wrp-ml-item-tile-clear{width:16px;height:16px;top:-4px;right:-4px;}
    .wrp-ml-spell-tile-clear{width:18px;height:18px;top:-4px;right:-4px;}
    .wrp-ml-rune-tile.is-filled .wrp-ml-rune-tile-clear{display:flex;}
    .wrp-ml-item-tile.is-filled .wrp-ml-item-tile-clear{display:flex;}
    .wrp-ml-spell-tile.is-filled .wrp-ml-spell-tile-clear{display:flex;}

    /* --- tap-card radios (ダメージ分布 / 崩れフェーズ) --- */
    .wrp-ml-tapcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
    /* 試合結果 (勝敗) は 2 択のみなので、 3-col grid を 2-col grid + 中央寄せ
       に override (2026-08-01 user feedback: 「勝ち負けの左寄せやめて」)。 */
    .wrp-ml-block--result .wrp-ml-tapcards{grid-template-columns:repeat(2,minmax(120px,220px));justify-content:center;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-block--result .wrp-ml-tapcards{grid-template-columns:repeat(2,minmax(100px,180px));}}
    .wrp-ml-tapcard{position:relative;}
    .wrp-ml-tapcard input{position:absolute;opacity:0;pointer-events:none;}
    .wrp-ml-tapcard label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;min-width:0;padding:10px 6px;border:1px solid #2c5a3f;border-radius:8px;background:rgba(5,12,8,.6);color:#bdd6c6;font-family:'Noto Sans JP',sans-serif;font-size:13px;letter-spacing:.02em;text-align:center;line-height:1.3;overflow-wrap:anywhere;word-break:break-word;cursor:pointer;transition:all .12s;user-select:none;}
    .wrp-ml-tapcard label:hover{border-color:#3f8a63;color:#dffff0;}
    .wrp-ml-tapcard input:checked + label{border-color:#8effb8;background:rgba(125,255,176,.14);color:#eafff3;font-weight:700;box-shadow:0 0 8px rgba(125,255,176,.24);}
    .wrp-ml-tapcard input:focus-visible + label{outline:2px solid #8effb8;outline-offset:2px;}
    .wrp-ml-tapcard-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;color:#9fe0ba;background:rgba(5,12,8,.5);transition:all .12s;}
    .wrp-ml-tapcard input:checked + label .wrp-ml-tapcard-mark{color:#8effb8;border-color:#8effb8;background:rgba(125,255,176,.1);}
    .wrp-ml-tapcard-mark--ad{color:#ffb98a;}
    .wrp-ml-tapcard-mark--ap{color:#a8b8ff;}
    .wrp-ml-tapcard-mark--hy{color:#ffcaff;}
    /* 勝敗 tap-card mark 色: 勝=primary green / 負=red / 引=gold */
    .wrp-ml-tapcard-mark--win{color:#8effb8;}
    .wrp-ml-tapcard-mark--loss{color:#ff9aa8;}
    .wrp-ml-tapcard-mark--draw{color:#ffd88a;}
    /* checked 状態の上書き — mark--win/loss/draw 側の色を維持したい */
    .wrp-ml-tapcard input:checked + label .wrp-ml-tapcard-mark--win{color:#8effb8;border-color:#8effb8;background:rgba(125,255,176,.14);}
    .wrp-ml-tapcard input:checked + label .wrp-ml-tapcard-mark--loss{color:#ff9aa8;border-color:#ff9aa8;background:rgba(255,154,168,.14);}
    .wrp-ml-tapcard input:checked + label .wrp-ml-tapcard-mark--draw{color:#ffd88a;border-color:#ffd88a;background:rgba(255,216,138,.14);}
    .wrp-ml-tapcard-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(159,233,192,.65);font-weight:400;}
    .wrp-ml-tapcard input:checked + label .wrp-ml-tapcard-sub{color:#9fe0ba;}

    /* --- KDA stat cards --- */
    /* v52 (2026-08-02): KDA inline をセルボックス廃止の 「label + 数字 inline」
       tight cluster に redesign。 元の KDA section cell (border + padding + big
       number 32px) をそのまま inline 化したら縦幅でかい / 幅とるで破綻。
       新 approach: 各 cell は border-less + baseline align、 K/D/A label に色 +
       小 number input を隣接、 全体で 1 行 tight。 */
    .wrp-ml-kda-inline{display:flex;gap:10px;align-items:center;margin-left:auto;flex:0 0 auto;flex-wrap:nowrap;}
    .wrp-ml-kda-inline .wrp-ml-kda-cell{flex:0 0 auto;display:flex;flex-direction:row;align-items:baseline;gap:4px;padding:0;border:0;background:transparent;min-width:0;box-shadow:none;}
    .wrp-ml-kda-inline .wrp-ml-kda-cell:focus-within{border:0;box-shadow:none;}
    .wrp-ml-kda-inline .wrp-ml-kda-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1;text-align:left;}
    .wrp-ml-kda-inline .wrp-ml-kda-input{width:38px;min-height:28px;padding:2px 3px;border:0;border-bottom:1px solid rgba(159,233,192,.3);background:transparent;color:#eafff3;font-family:'Orbitron',sans-serif;font-weight:700;font-size:18px;text-align:center;letter-spacing:0;line-height:1;}
    .wrp-ml-kda-inline .wrp-ml-kda-input:focus{outline:none;border-bottom-color:#8effb8;}
    @media (min-width:640px){
      .wrp-ml-kda-inline{gap:12px;}
      .wrp-ml-kda-inline .wrp-ml-kda-input{width:44px;font-size:22px;min-height:32px;}
      .wrp-ml-kda-inline .wrp-ml-kda-lbl{font-size:12px;}
    }
    .wrp-ml-kda{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
    .wrp-ml-kda-cell{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:10px;border:1px solid #2c5a3f;border-radius:8px;background:rgba(5,12,8,.6);transition:border-color .12s;}
    .wrp-ml-kda-cell:focus-within{border-color:#8effb8;box-shadow:0 0 8px -2px rgba(125,255,176,.35);}
    .wrp-ml-kda-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;letter-spacing:.08em;text-align:center;}
    .wrp-ml-kda-cell .wrp-ml-kda-lbl-k{color:#8effb8;}
    .wrp-ml-kda-cell .wrp-ml-kda-lbl-d{color:#ff9aa8;}
    .wrp-ml-kda-cell .wrp-ml-kda-lbl-a{color:#ffd88a;}
    .wrp-ml-kda-input{width:100%;min-height:48px;padding:6px 4px;border:0;border-bottom:1px solid rgba(159,233,192,.25);background:transparent;color:#eafff3;font-family:'Orbitron',sans-serif;font-weight:700;font-size:28px;text-align:center;letter-spacing:.02em;line-height:1;transition:border-color .12s;}
    @media (min-width:640px){.wrp-ml-kda-input{font-size:32px;}}
    .wrp-ml-kda-input:focus{outline:none;border-bottom-color:#8effb8;}
    .wrp-ml-kda-input::-webkit-outer-spin-button,
    .wrp-ml-kda-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
    .wrp-ml-kda-input[type=number]{-moz-appearance:textfield;}
    /* v54 (2026-08-02) user feedback「KDAとキル数の数値はプルダウンにしよう」:
       KDA + 合計キル数を select (0-99) 化。 input と同 class を継承しつつ
       native arrow を消して数字中央寄せ (text-align-last が select の表示値
       に効く)。 option 生成は JS (_populateNumericSelects)。 */
    select.wrp-ml-kda-input,
    select.wrp-ml-teamkills-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;text-align:center;text-align-last:center;cursor:pointer;}
    select.wrp-ml-kda-input option,
    select.wrp-ml-teamkills-input option{background:#0a1c12;color:#eafff3;font-family:'JetBrains Mono',monospace;}

    /* --- Team score (合計キル数、 試合結果 section 内の sub-field、 v12 で merge) ---
       勝敗 tap-card の直下に配置、 「合計キル数 (任意)」 sublabel + 2 number input inline。 */
    .wrp-ml-teamkills-wrap{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(159,233,192,.2);}
    .wrp-ml-teamkills-sublbl{display:flex;align-items:baseline;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(159,233,192,.75);letter-spacing:.04em;text-align:center;justify-content:center;margin-bottom:6px;}
    .wrp-ml-teamkills-optnote{font-size:10px;color:rgba(159,233,192,.5);}
    /* --- (旧 v11 定義は下記に集約、 CSS clean) ---
       Inline 「自 [__] - [__] 敵」 の単 row layout。 KDA と別 field なので
       compact に。 中立 border (optional)、 focus 時の緑 accent は KDA と揃える。 */
    .wrp-ml-teamkills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:6px 8px;}
    .wrp-ml-teamkills-cell{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #2c5a3f;border-radius:8px;background:rgba(5,12,8,.6);transition:border-color .12s;}
    .wrp-ml-teamkills-cell:focus-within{border-color:#8effb8;box-shadow:0 0 8px -2px rgba(125,255,176,.35);}
    .wrp-ml-teamkills-lbl{font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;letter-spacing:.06em;}
    .wrp-ml-teamkills-input{width:64px;min-height:38px;padding:4px 6px;border:0;border-bottom:1px solid rgba(159,233,192,.25);background:transparent;color:#eafff3;font-family:'Orbitron',sans-serif;font-weight:700;font-size:22px;text-align:center;letter-spacing:.02em;line-height:1;transition:border-color .12s;}
    .wrp-ml-teamkills-input:focus{outline:none;border-bottom-color:#8effb8;}
    .wrp-ml-teamkills-input::-webkit-outer-spin-button,
    .wrp-ml-teamkills-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
    .wrp-ml-teamkills-input[type=number]{-moz-appearance:textfield;}
    .wrp-ml-teamkills-sep{font-family:'Chakra Petch',sans-serif;font-size:20px;color:rgba(159,233,192,.55);font-weight:700;user-select:none;padding:0 2px;}

    /* --- Duration (試合時間、 v72 2026-08-16、 試合カテゴリ section 内) ---
       teamkills と同 pattern の 2 select inline layout。 select は分 0-59 / 秒 0-59 で
       _populateNumericSelects の対象に含める。 */
    .wrp-ml-duration-wrap{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(159,233,192,.2);}
    .wrp-ml-duration-sublbl{display:flex;align-items:baseline;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(159,233,192,.75);letter-spacing:.04em;text-align:center;justify-content:center;margin-bottom:6px;}
    .wrp-ml-duration-optnote{font-size:10px;color:rgba(159,233,192,.5);}
    .wrp-ml-duration{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:6px 8px;}
    .wrp-ml-duration-cell{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #2c5a3f;border-radius:8px;background:rgba(5,12,8,.6);transition:border-color .12s;}
    .wrp-ml-duration-cell:focus-within{border-color:#8effb8;box-shadow:0 0 8px -2px rgba(125,255,176,.35);}
    .wrp-ml-duration-lbl{font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;letter-spacing:.06em;}
    .wrp-ml-duration-input{width:64px;min-height:38px;padding:4px 6px;border:0;border-bottom:1px solid rgba(159,233,192,.25);background:transparent;color:#eafff3;font-family:'Orbitron',sans-serif;font-weight:700;font-size:22px;text-align:center;text-align-last:center;letter-spacing:.02em;line-height:1;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;transition:border-color .12s;}
    .wrp-ml-duration-input:focus{outline:none;border-bottom-color:#8effb8;}
    .wrp-ml-duration-input option{background:#0a1c12;color:#eafff3;font-family:'JetBrains Mono',monospace;}
    .wrp-ml-duration-sep{font-family:'Chakra Petch',sans-serif;font-size:20px;color:rgba(159,233,192,.55);font-weight:700;user-select:none;padding:0 2px;}

    /* --- accordion (rune stats) --- */
    .wrp-ml-accordion{border:1px solid #2c5a3f;border-radius:8px;background:rgba(10,28,18,.4);overflow:hidden;}
    .wrp-ml-accordion[open]{background:rgba(10,28,18,.55);}
    .wrp-ml-accordion-summary{cursor:pointer;padding:12px 16px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;color:#bdffd6;letter-spacing:.02em;list-style:none;display:flex;align-items:center;gap:10px;justify-content:space-between;user-select:none;}
    .wrp-ml-accordion-summary::-webkit-details-marker{display:none;}
    .wrp-ml-accordion-summary::marker{content:'';}
    .wrp-ml-accordion-summary:hover{color:#eafff3;background:rgba(125,255,176,.04);}
    .wrp-ml-accordion-caret{display:inline-block;transition:transform .18s;color:#8effb8;}
    .wrp-ml-accordion[open] .wrp-ml-accordion-caret{transform:rotate(90deg);}
    .wrp-ml-accordion-optional{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(255,216,58,.72);letter-spacing:.06em;text-transform:uppercase;}
    .wrp-ml-accordion-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px;border-top:1px solid #18301f;}

    /* v16 (2026-08-01): rune / item slot — 実績値 text input 撤廃、 icon-only。
       v54 (2026-08-02) user feedback「アイテム欄の12枠は横スライダー形式に」+
       「ルーンとスペルの空枠ボックスサイズはアイテムに揃えて」対応:
       - item 12 slot は 1 行横並び + overflow-x:auto の横スライダー
         (scroll-snap で tile 頭に慣性 stop)。 幅が収まる PC / landscape
         では scroll 自体が発生しない (auto)。
       - rune 5 slot / spell 2 slot も同 slider container + 同固定 tile 幅
         (48px) で空枠 / filled とも見た目統一 (grid 1fr 可変幅を撤廃)。
       - padding 上 6px / 右 6px は clear × (top/right -4px) の clip 回避
         (overflow-x:auto は縦 overflow も clip するため)。 */
    [data-wrp-ml-rune-slots],
    [data-wrp-ml-item-slots],
    .wrp-ml-spell-row{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;padding:6px 6px 4px 2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
    /* slider の scrollbar は global (11px) でなく細身 5px — 横 scroll の
       affordance は残しつつ視覚 weight を落とす。 overflow-y:hidden は
       h-scrollbar が高さを食った時の縦 scrollbar 連鎖出現の防止。 */
    [data-wrp-ml-rune-slots]::-webkit-scrollbar,
    [data-wrp-ml-item-slots]::-webkit-scrollbar,
    .wrp-ml-spell-row::-webkit-scrollbar{height:5px;}
    [data-wrp-ml-rune-slots]::-webkit-scrollbar-thumb,
    [data-wrp-ml-item-slots]::-webkit-scrollbar-thumb,
    .wrp-ml-spell-row::-webkit-scrollbar-thumb{border:0;border-radius:3px;background:#2c5a3f;}
    [data-wrp-ml-rune-slots]::-webkit-scrollbar-track,
    [data-wrp-ml-item-slots]::-webkit-scrollbar-track,
    .wrp-ml-spell-row::-webkit-scrollbar-track{background:transparent;}

    .wrp-ml-rune-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;flex:0 0 48px;width:48px;scroll-snap-align:start;}
    /* icon container overflow:visible + img 側 border-radius で X 見切れ回避。
       aspect-ratio:1 で正方形、 responsive 幅 (grid 1fr) に追随。 */
    .wrp-ml-rune-tile-icon{position:relative;width:100%;aspect-ratio:1;border-radius:8px;overflow:visible;border:1.5px dashed rgba(159,233,192,.35);background:radial-gradient(circle,#0c2416,#061510);transition:border-color .12s,box-shadow .12s;}
    .wrp-ml-rune-tile.is-filled .wrp-ml-rune-tile-icon{border-style:solid;border-color:#2c5a3f;background:radial-gradient(circle,#0c3c26,#061510);}
    .wrp-ml-rune-tile:hover .wrp-ml-rune-tile-icon,
    .wrp-ml-rune-tile:focus-visible .wrp-ml-rune-tile-icon{border-color:#8effb8;box-shadow:0 0 8px -2px rgba(125,255,176,.5);}
    .wrp-ml-rune-tile-img{width:100%;height:100%;object-fit:contain;border-radius:8px;opacity:0;transition:opacity .18s;padding:4px;}
    .wrp-ml-rune-tile.is-filled .wrp-ml-rune-tile-img{opacity:1;}
    .wrp-ml-rune-tile-plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Chakra Petch',sans-serif;font-size:20px;font-weight:700;color:rgba(159,233,192,.55);}
    .wrp-ml-rune-tile.is-filled .wrp-ml-rune-tile-plus{display:none;}

    .wrp-ml-item-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;flex:0 0 48px;width:48px;scroll-snap-align:start;}
    /* icon container overflow:visible + img 側 border-radius で X 見切れ回避 */
    .wrp-ml-item-tile-icon{position:relative;width:100%;aspect-ratio:1;border-radius:8px;overflow:visible;border:1.5px dashed rgba(159,233,192,.35);background:radial-gradient(circle,#0c2416,#061510);transition:border-color .12s,box-shadow .12s;}
    .wrp-ml-item-tile.is-filled .wrp-ml-item-tile-icon{border-style:solid;border-color:#2c5a3f;background:radial-gradient(circle,#0c3c26,#061510);}
    .wrp-ml-item-tile:hover .wrp-ml-item-tile-icon,
    .wrp-ml-item-tile:focus-visible .wrp-ml-item-tile-icon{border-color:#8effb8;box-shadow:0 0 8px -2px rgba(125,255,176,.5);}
    .wrp-ml-item-tile-img{width:100%;height:100%;object-fit:contain;border-radius:8px;opacity:0;transition:opacity .18s;padding:2px;}
    .wrp-ml-item-tile.is-filled .wrp-ml-item-tile-img{opacity:1;}
    .wrp-ml-item-tile-plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Chakra Petch',sans-serif;font-size:20px;font-weight:700;color:rgba(159,233,192,.55);}
    .wrp-ml-item-tile.is-filled .wrp-ml-item-tile-plus{display:none;}
    /* v53 (2026-08-02): コア slot — scouter build editor の data-core="1" と
       同視覚言語 (orange accent)。 空 slot は dashed orange tint で 「ここが
       コア枠」 と示し、 filled で solid orange + CORE badge。
       CORE badge は左上、 clear × は右上 (-4px offset) なので重ならない。
       v55 (2026-08-02): .is-core は positional (前半 6) でなく matchlog.js
       _computeCoreItemSet (scouter _splitSlots port) が動的付替。 全 slot 空
       の時のみ前半 6 に fallback (空 state の視覚 guide)。 */
    .wrp-ml-item-tile.is-core .wrp-ml-item-tile-icon{border-color:rgba(255,138,61,.4);}
    .wrp-ml-item-tile.is-core.is-filled .wrp-ml-item-tile-icon{border-color:#ff8a3d;box-shadow:0 0 8px -3px rgba(255,138,61,.55);}
    .wrp-ml-item-tile.is-core:hover .wrp-ml-item-tile-icon,
    .wrp-ml-item-tile.is-core:focus-visible .wrp-ml-item-tile-icon{border-color:#ffb27a;box-shadow:0 0 8px -2px rgba(255,138,61,.5);}
    .wrp-ml-item-tile.is-core.is-filled .wrp-ml-item-tile-icon::before{content:'CORE';position:absolute;top:1px;left:1px;z-index:2;padding:1px 3px;border-radius:2px;background:rgba(255,138,61,.92);color:#0c0e0a;font-family:'Chakra Petch','Noto Sans JP',sans-serif;font-weight:700;font-size:7px;line-height:1.1;letter-spacing:.05em;pointer-events:none;}

    /* --- spell slots (2 slot、 tap で spell picker) ---
       v54 (2026-08-02): container 定義は上の slider 共通 rule (.wrp-ml-spell-row
       は rune / item slots と同 flex slider)、 tile 幅も 48px 固定で 3 者統一。 */
    .wrp-ml-spell-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;flex:0 0 48px;width:48px;scroll-snap-align:start;}
    /* icon container overflow:visible + img 側 border-radius で X 見切れ回避 */
    .wrp-ml-spell-tile-icon{position:relative;width:100%;aspect-ratio:1;border-radius:8px;overflow:visible;border:1.5px dashed rgba(159,233,192,.35);background:radial-gradient(circle,#0c2416,#061510);transition:border-color .12s,box-shadow .12s;}
    .wrp-ml-spell-tile.is-filled .wrp-ml-spell-tile-icon{border-style:solid;border-color:#2c5a3f;background:radial-gradient(circle,#0c3c26,#061510);}
    .wrp-ml-spell-tile:hover .wrp-ml-spell-tile-icon,
    .wrp-ml-spell-tile:focus-visible .wrp-ml-spell-tile-icon{border-color:#8effb8;box-shadow:0 0 8px -2px rgba(125,255,176,.5);}
    .wrp-ml-spell-tile-img{width:100%;height:100%;object-fit:contain;border-radius:8px;opacity:0;transition:opacity .18s;padding:2px;}
    .wrp-ml-spell-tile.is-filled .wrp-ml-spell-tile-img{opacity:1;}
    .wrp-ml-spell-tile-plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Chakra Petch',sans-serif;font-size:22px;font-weight:700;color:rgba(159,233,192,.55);}
    .wrp-ml-spell-tile.is-filled .wrp-ml-spell-tile-plus{display:none;}
    .wrp-ml-spell-tile-name{font-family:'Noto Sans JP',sans-serif;font-size:11px;color:#dffff0;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:14px;}
    .wrp-ml-spell-tile-name:empty::before{content:'\00a0';}

    /* v54 (2026-08-02): 実績値メモ (item / rune 統合 free-text) textarea。
       v68 (2026-08-08): 実績値は per-slot input 側に移し、 このメモは「備考」
       (試合全体の気付き) に redefine。 CSS pattern は流用。
       v70 (2026-08-08): 備考は試合単位の 「気付き / メモ」 で記入量多く
       なりがちなので min-height を 76 → 140px に拡張 (user feedback
       「備考欄はもう少し縦幅にしていい気がする」 対応)。 */
    .wrp-ml-notes-input{width:100%;min-height:140px;padding:8px 10px;border:1px solid #2c5a3f;border-radius:7px;background:rgba(5,12,8,.6);color:#eafff3;font-family:'Noto Sans JP',sans-serif;font-size:13px;line-height:1.6;resize:vertical;box-sizing:border-box;}
    .wrp-ml-notes-input:focus{outline:none;border-color:#8effb8;box-shadow:0 0 0 2px rgba(125,255,176,.18);}
    .wrp-ml-notes-input::placeholder{color:rgba(159,233,192,.4);}

    /* v68 (2026-08-08): 個別実績 (登録アイテム / ルーンごとの実績数値 input)。
       registered items / runes に対応した icon + name + text input の row layout。
       user feedback「実績値メモの前に登録アイテム、登録ルーンがある場合は該当項目に
       対して個別にテキストが入力できるようなエリアを設けよう」対応。
       state.slotNotes を per-slug に保持、 slug 変更で input 保持 (map key = slug)。 */
    .wrp-ml-per-slot-notes{display:flex;flex-direction:column;gap:12px;}
    .wrp-ml-per-slot-notes-group{display:flex;flex-direction:column;gap:6px;}
    .wrp-ml-per-slot-notes-grp-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:#9fe0ba;text-transform:uppercase;}
    .wrp-ml-per-slot-notes-list{display:flex;flex-direction:column;gap:6px;}
    .wrp-ml-per-slot-notes-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid #1c3a28;border-radius:6px;background:rgba(5,12,8,.5);}
    /* v69 (2026-08-08): サムネで item / rune 識別可能な前提で name span 撤去、
       icon + input の 2 要素 row に単純化。 icon は 32px に微増して認識性 UP、
       tooltip (title) が hover / long-press で bilingual 名を提示。 */
    .wrp-ml-per-slot-notes-icon{width:32px;height:32px;flex:none;border-radius:5px;border:1px solid #2c5a3f;background:radial-gradient(circle,#0c3c26,#061510);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:help;}
    .wrp-ml-per-slot-notes-icon img{width:88%;height:88%;object-fit:contain;display:block;}
    .wrp-ml-per-slot-notes-input{flex:1 1 auto;min-width:0;min-height:30px;padding:5px 8px;border:1px solid #2c5a3f;border-radius:5px;background:rgba(5,12,8,.6);color:#eafff3;font-family:'Noto Sans JP',sans-serif;font-size:12.5px;line-height:1.4;box-sizing:border-box;}
    .wrp-ml-per-slot-notes-input:focus{outline:none;border-color:#8effb8;box-shadow:0 0 0 2px rgba(125,255,176,.18);}
    .wrp-ml-per-slot-notes-input::placeholder{color:rgba(159,233,192,.4);font-size:11px;}
    .wrp-ml-per-slot-notes-empty{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(159,233,192,.55);line-height:1.5;padding:2px 0;}

    /* --- auto-fill bar (使用チャンピオン section 直下) --- */
    .wrp-ml-autofill{padding:10px 12px;border:1px solid #3f8a63;border-radius:8px;background:linear-gradient(180deg,rgba(125,255,176,.08),rgba(10,28,18,.6));display:flex;flex-direction:column;gap:8px;}
    .wrp-ml-autofill[hidden]{display:none;}
    .wrp-ml-autofill-lbl{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#8effb8;letter-spacing:.06em;text-transform:uppercase;}
    .wrp-ml-autofill-icon{width:14px;height:14px;flex:none;}
    .wrp-ml-autofill-chips{display:flex;flex-wrap:wrap;gap:6px;}
    .wrp-ml-autofill-chip{padding:6px 12px;border:1px solid #8effb8;border-radius:14px;background:rgba(125,255,176,.14);color:#eafff3;font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:all .12s;-webkit-tap-highlight-color:rgba(125,255,176,.24);}
    .wrp-ml-autofill-chip:hover{background:rgba(125,255,176,.24);box-shadow:0 0 8px -2px rgba(125,255,176,.55);}
    .wrp-ml-autofill-chip:focus-visible{outline:2px solid #8effb8;outline-offset:2px;}
    .wrp-ml-autofill-chip-sub{margin-left:6px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#9fe0ba;font-weight:400;letter-spacing:.02em;}

    /* --- submit + reset --- */
    .wrp-ml-submit-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
    .wrp-ml-submit-btn{flex:1;min-height:52px;padding:12px 22px;border:1px solid #8effb8;border-radius:8px;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:15px;letter-spacing:.05em;transition:all .15s;box-shadow:0 0 14px -4px rgba(125,255,176,.5);cursor:pointer;}
    .wrp-ml-submit-btn:hover{background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 18px -2px rgba(125,255,176,.7);transform:translateY(-1px);}
    .wrp-ml-submit-btn:active{transform:translateY(0);}
    .wrp-ml-submit-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
    .wrp-ml-reset-btn{min-height:52px;padding:12px 18px;border:1px solid rgba(159,233,192,.32);border-radius:8px;background:rgba(10,28,18,.6);color:#9fe0ba;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;transition:all .15s;cursor:pointer;}
    .wrp-ml-reset-btn:hover{border-color:#8effb8;color:#eafff3;}

    /* --- notice bubble --- */
    .wrp-ml-notice{margin-top:20px;padding:12px 14px;border-left:3px solid #ffd83a;border:1px solid #5a431f;border-radius:6px;background:rgba(255,216,58,.06);font-family:'JetBrains Mono',monospace;font-size:12px;color:#ffe9a8;line-height:1.6;}
    .wrp-ml-notice strong{color:#ffd83a;}

    /* ========== PICKER OVERLAY (共通 — チャンピオン / ルーン) ========== */
    /* 2026-08-11 (feedback「モーダルを敢えて小さい枠にする必要なくて全部
       fullscreen overlay が良くない?」): bottom-sheet (base) / centered dialog
       (@media min-width:640px) / side-sheet の全 variant を撤廃し、 全
       breakpoint で fullscreen 化。 padding / max-width / border / border-radius
       の viewport 縮小 rule を全部除去。 */
    .wrp-ml-picker{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:stretch;background:#0d2418;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s;padding:0;}
    .wrp-ml-picker.is-open{opacity:1;pointer-events:auto;}
    /* 2026-08-20 v2 (user feedback):
       - mobile portrait / landscape: sheet padding = 0 → head / foot が
         viewport 端まで 100% 幅で 背景 spans (user 「上下 幅 100% にして」)
       - PC (>=1200px): sheet padding = calc((100vw - 1200px)/2) 復活、 head
         / foot も 1200px content column 内に 収まる (user 「PC 版はページ上部、
         下部の 100% 不要」)。 head/foot 自身は section 内 padding で 更に
         微調整、 sheet padding の 上に 累積。 */
    .wrp-ml-picker-sheet{box-sizing:border-box;width:100vw;max-width:none;max-height:none;border:0;border-radius:0;background:#0d2418;box-shadow:0 -12px 36px -12px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;padding:0;transform:translateY(24px);transition:transform .18s;}
    @media (min-width:1200px){
      .wrp-ml-picker-sheet{padding:0 calc((100vw - 1200px)/2);}
    }
    .wrp-ml-picker.is-open .wrp-ml-picker-sheet{transform:translateY(0);}

    .wrp-ml-picker-head{padding:14px 16px 12px;border-bottom:1px solid #18301f;background:rgba(5,12,8,.55);flex:none;display:flex;flex-direction:column;gap:10px;}
    .wrp-ml-picker-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .wrp-ml-picker-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:16px;color:#dffff0;letter-spacing:.02em;}
    .wrp-ml-picker-title-ctx{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;letter-spacing:.04em;margin-top:2px;font-weight:400;}
    .wrp-ml-picker-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex:none;}
    /* 2026-08-11 (feedback「PC 版のバツボタンは全体的にもっと大きくていい」):
       全 modal の close button を PC 版で scale up (34→46px + font 18→24)。
       fullscreen 化で余裕ある PC 幅を活かした tap-comfortable size。 */
    /* 2026-08-11 v2: 後発 rule (line 1088 detail-modal-close / 1132 ai-modal-close
       / 1306 form-modal-close の個別定義) が同 specificity で cascade 上書き
       するため !important 必須。 */
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .wrp-ml-picker-close,
      .wrp-ml-form-modal-close{width:46px !important;height:46px !important;font-size:24px !important;}
      .wrp-ml-detail-modal-close,
      .wrp-ml-ai-modal-close{width:46px !important;height:46px !important;font-size:24px !important;padding:0 !important;border-radius:50% !important;border:1px solid rgba(159,233,192,.4) !important;background:rgba(10,28,18,.7) !important;color:#9fe0ba !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
    }
    .wrp-ml-picker-close:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    /* v54 (2026-08-02) user feedback「各ピッカー画面について名前で検索枠不要」:
       .wrp-ml-picker-search input + CSS を撤去。 filter は lane chip + cat chip のみ。 */
    /* 2026-08-11 (feedback「ランドスケープで枠の高さを固定して CTA や情報を
       表示するのは限界を感じる」/「ランドスケープ以外に影響出ないように設計
       して」/追加 feedback「PC 版に影響出てる」): **mobile landscape のみ**
       Option B (自然 flow + overlay scroll) に切替。 旧 landscape absolute-head
       rule (close 単独浮遊) は撤廃、 head は base の通常 flex row (title 左 +
       close 右) を継承。 mobile landscape 用 overlay/sheet の自然 flow
       override は本 file 末尾の集約 (max-width:919px) and (orientation:landscape)
       block 参照。 PC (>=920px) は c83f6b448 baseline (fullscreen + internal
       body scroll) を継承。 */

    /* Lane chips (champion picker) + Category chips (item / rune picker) —
       同 pattern の pill chip。 Container だけ別 (どちらが active かで表示
       切替、 排他 toggle)、 chip styling は完全共有。 overflow-x:auto は
       mobile portrait で chip 列が画面幅超過時に横 scroll 可能に。 */
    .wrp-ml-picker-lane-chips,
    .wrp-ml-picker-cat-chips{display:flex;flex-wrap:wrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
    .wrp-ml-picker-cat-chips{scroll-snap-type:x proximity;}
    .wrp-ml-picker-cat-chips[hidden]{display:none;}
    .wrp-ml-picker-lane-chip,
    .wrp-ml-picker-cat-chip{padding:5px 10px;border:1px solid rgba(159,233,192,.28);border-radius:14px;background:rgba(5,12,8,.6);color:#9fe0ba;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.02em;cursor:pointer;transition:all .12s;white-space:nowrap;scroll-snap-align:start;flex:0 0 auto;}
    .wrp-ml-picker-lane-chip:hover,
    .wrp-ml-picker-cat-chip:hover{border-color:#8effb8;color:#eafff3;}
    .wrp-ml-picker-lane-chip.is-active,
    .wrp-ml-picker-cat-chip.is-active{border-color:#8effb8;background:#8effb8;color:#06150c;font-weight:700;}
    /* v58 (2026-08-02): ルーン picker のセカンダリ slot でプライマリと同系統の
       chip を選択不可に (scouter.js の .sc-chip.is-locked と同見た目 + 挙動)。 */
    .wrp-ml-picker-cat-chip.is-locked{opacity:.28;cursor:not-allowed;pointer-events:none;text-decoration:line-through;}

    /* v39 (2026-08-01): actions bar (この枠を空にする + 件数) は picker body の
       iframe 化で sheet 下部 (iframe の後) に移動 — border は上側に。 */
    .wrp-ml-picker-actions{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px;border-top:1px solid #18301f;background:rgba(5,12,8,.35);flex:none;align-items:center;}
    .wrp-ml-picker-clear{padding:6px 12px;border:1px solid rgba(255,138,138,.4);border-radius:6px;background:rgba(60,20,20,.4);color:#ff9aa8;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.02em;cursor:pointer;transition:all .12s;}
    /* 2026-08-11: 空 slot 時の disabled 状態 (_openPicker で slot 空なら
       clearBtn.disabled=true 設定)。 mislead 防止で visual も muted に。 */
    .wrp-ml-picker-clear:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
    .wrp-ml-picker-clear:hover{border-color:#ff9aa8;color:#ffcaca;background:rgba(80,25,25,.6);}
    .wrp-ml-picker-count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(159,233,192,.65);align-self:center;}

    /* 2026-08-11 (feedback「試合ログ登録のチャンピオンピッカー画面が縦幅
       見切れて決定 CTA が表示されていない端末がある」): min-height:200px が
       small viewport (Android landscape 高 400-500 等) で sheet の合計高
       (head 60 + filters 60 + body-min 200 + rolefoot 100 + actions 48 +
       foot 62 = ~530) を viewport max-height (calc(100dvh - 24)) に押し込め
       ず、 sheet の overflow:hidden で foot (決定 CTA) が clip される。
       min-height:200 → 0 に撤去 → body が flex:1 で 0 まで shrink 可能に、
       foot 常時 visible。 body 短い時は data list が squeeze されて scroll
       する (元の min-height 意図 「empty list でも一定高さ確保」 は decision
       CTA 見切れの critical bug より優先度低い)。 */
    .wrp-ml-picker-body{padding:12px 14px 18px;overflow-y:auto;overscroll-behavior:none;touch-action:pan-y;flex:1;-webkit-overflow-scrolling:touch;min-height:0;}
    /* v39 (2026-08-01): picker body (search + chips + grid + role 5 択) は
       same-origin iframe に隔離 (PtR spec 遮断)。 上下の .wrp-ml-picker-* rule は
       iframe 内に copy される page CSS 経由で適用される
       (template#wrp-ml-picker-frame-css が layout override)。 */
    .wrp-ml-picker-frame{flex:1 1 0;min-height:200px;width:100%;border:0;display:block;background:transparent;}
    /* v39: iframe 化で sheet は content 由来の高さを持たなくなったので
       明示 height (従来は grid content が max-height まで押し上げていた)。
       2026-08-11: fullscreen 統一で全 breakpoint 100vh/100dvh に。 breakpoint
       別の calc(100vh - 24) / min(720, calc(100vh - 48)) は撤廃。 */
    .wrp-ml-picker-sheet{height:100vh;height:100dvh;}
    /* 2026-08-11 (feedback「サイトの横幅ルールは前提として則って欲しい」/「コンテンツ幅がという意味」):
       PC 版で sheet 内全内容 (head + filters + body + rolefoot + actions + foot) を
       site 標準 max-width:1200 中央 layout に。 sheet 自体は fullscreen (100vw overlay)
       維持、 padding calc で内容領域だけ絞る。 landscape の 2-col grid (下 line 1383)
       も 1200 padded area 内で minmax(0,1fr) + 320px に分割される (左 col ~880 / 右 col 320)。
       landscape 時の close 絶対配置 (top:0 right:0) は sheet padding-box (=1200 layout
       内側右端) に anchor される。 */
    /* 2026-08-11: PC-only padding calc rule は base rule に統合済 (全 breakpoint 対応)。 */
    .wrp-ml-picker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;}
    @media (min-width:480px){.wrp-ml-picker-grid{grid-template-columns:repeat(6,minmax(0,1fr));}}
    @media (min-width:640px){.wrp-ml-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;}}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-picker-grid{grid-template-columns:repeat(8,minmax(0,1fr));}}

    .wrp-ml-pick-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;background:transparent;border:0;color:inherit;cursor:pointer;transition:transform .1s;-webkit-tap-highlight-color:rgba(125,255,176,.18);}
    .wrp-ml-pick-tile:hover{transform:translateY(-1px);}
    .wrp-ml-pick-tile-icon{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid #0c3c26;background:#0c3c26;box-shadow:0 0 6px -3px rgba(125,255,176,.35);transition:all .12s;}
    .wrp-ml-pick-tile:hover .wrp-ml-pick-tile-icon,
    .wrp-ml-pick-tile:focus-visible .wrp-ml-pick-tile-icon{border-color:#8effb8;box-shadow:0 0 12px -3px rgba(125,255,176,.6);}
    .wrp-ml-pick-tile-icon img{width:100%;height:100%;object-fit:cover;display:block;}
    .wrp-ml-pick-tile-name{font-family:'Noto Sans JP',sans-serif;font-weight:500;font-size:11px;color:#dffff0;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

    /* rune / item / spell picker grid: rectangular tiles (icons が円形でない)
       v62 (2026-08-02) user feedback「3 列表示から 5 列表示に (厳しければ 4 列に)」:
       base を 5 col に拡張 (portrait 400px+ で問題なく収まる)、 極狭 (< 400px) は
       4 col fallback。 640px+ / 920px+ 段階で従来通り 5 → 6 と拡張。 */
    .wrp-ml-picker.is-rune .wrp-ml-picker-grid,
    .wrp-ml-picker.is-item .wrp-ml-picker-grid,
    .wrp-ml-picker.is-spell .wrp-ml-picker-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
    @media (max-width:399px){
      .wrp-ml-picker.is-rune .wrp-ml-picker-grid,
      .wrp-ml-picker.is-item .wrp-ml-picker-grid,
      .wrp-ml-picker.is-spell .wrp-ml-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
    }
    @media (min-width:640px){
      .wrp-ml-picker.is-rune .wrp-ml-picker-grid,
      .wrp-ml-picker.is-item .wrp-ml-picker-grid,
      .wrp-ml-picker.is-spell .wrp-ml-picker-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
    }
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .wrp-ml-picker.is-rune .wrp-ml-picker-grid,
      .wrp-ml-picker.is-item .wrp-ml-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
    }
    .wrp-ml-picker.is-rune .wrp-ml-pick-tile-icon,
    .wrp-ml-picker.is-item .wrp-ml-pick-tile-icon,
    .wrp-ml-picker.is-spell .wrp-ml-pick-tile-icon{border-radius:9px;aspect-ratio:1;background:radial-gradient(circle,#0c2416,#061510);border-color:#2c5a3f;}
    .wrp-ml-picker.is-rune .wrp-ml-pick-tile-icon img,
    .wrp-ml-picker.is-item .wrp-ml-pick-tile-icon img,
    .wrp-ml-picker.is-spell .wrp-ml-pick-tile-icon img{object-fit:contain;padding:6px;}
    .wrp-ml-picker.is-rune .wrp-ml-pick-tile-cat{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(159,233,192,.6);letter-spacing:.04em;line-height:1;min-height:12px;}
    .wrp-ml-picker.is-rune .wrp-ml-pick-tile-cat:empty::before{content:'\00a0';}

    .wrp-ml-picker-empty{padding:22px 12px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(159,233,192,.55);}

    /* v16 (2026-08-01): 「すべて」 chip active 時の picker section divider。
       Item / rune picker で全 category を category 別 section に区切って render、
       各 section の header に category 名 (bilingual) を配置。 単一 chip active 時
       は section 化せず flat grid (existing 挙動継承)。 */
    .wrp-ml-picker-sections{display:flex;flex-direction:column;gap:14px;}
    .wrp-ml-picker-section{display:flex;flex-direction:column;gap:10px;}
    .wrp-ml-picker-section-header{display:flex;align-items:center;gap:10px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:12px;color:#9fe0ba;letter-spacing:.06em;text-transform:uppercase;padding:2px 0;}
    .wrp-ml-picker-section-header::before,
    .wrp-ml-picker-section-header::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(159,233,192,.28),transparent);}
    .wrp-ml-picker-section-header-lbl{flex:0 0 auto;color:#bdffd6;padding:0 4px;}

    /* v61 (2026-08-02): tier / 行見出し (アップグレード済み / ミッドティア / 基本 /
       エンチャント、 or ① 1行目 / ② 2行目 / ③ 3行目)。 scouter picker の tier
       label と同じ font-family + letter-spacing + border-bottom で 「並びが可読な
       structure」 を作る。 カテゴリ divider の中に nest されるので font-size を
       1 段下げる (11px vs cat header の 12px)、 色も slightly dimmer。 */
    .wrp-ml-picker-tier-group{display:flex;flex-direction:column;gap:8px;}
    .wrp-ml-picker-tier-header{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;color:#8effb8;text-transform:uppercase;padding:2px 4px 5px;border-bottom:1px solid rgba(159,233,192,.18);}
    .wrp-ml-picker-tier-header .wrp-ml-picker-row-hint{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:400;letter-spacing:.04em;text-transform:none;color:rgba(159,233,192,.6);}
    /* rune secondary 冒頭の 「全 3 行合計で 1 個」 注記 */
    .wrp-ml-picker-row-note{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.55;letter-spacing:.02em;color:rgba(159,233,192,.7);padding:4px 4px 8px;margin-bottom:2px;}
    .wrp-ml-picker-row-note b{color:#bdffd6;font-weight:700;}

    /* body scroll lock when picker open。 v15 (2026-08-01): 単一 helper
       (_lockBodyScroll) が html + body 両方に .wrp-ml-scroll-lock をセット。
       v26 (2026-08-01): body{position:fixed} を **撤廃** (Chromium で
       body.natural_content_height >> viewport + inside position:fixed modal の
       組合せで modal 末尾 79px が paint layer から clip される挙動に抵触、
       footer が塗れず空に見える bug の根本原因)。 scroll 抑止は
       overflow:hidden + overscroll-behavior:none で十分、 scroll 位置は
       overflow:hidden の副作用で大半の browser が視覚 preserve。 */
    body.wrp-ml-picker-lock{overflow:hidden;}
    /* 2026-08-01 v17 delta: `touch-action:none` を body から撤廃 (v15 で過剰
       付与されていた)。 modal 内 scroll container が touch scroll できなくなり、
       上端未到達でも browser refresh が誤発火する現象の根本原因。
       body の scroll 抑止は overflow:hidden + overscroll-behavior:none で十分。
       PtR は _installDocumentPtRGuard (touchmove intercept) が 2 段目で保険。 */
    html.wrp-ml-scroll-lock,
    body.wrp-ml-scroll-lock{overflow:hidden !important;overscroll-behavior:none !important;}
    /* 2026-08-01 v24: 下ナビ完全削除 (要件確定)。 nav element を `display:none
       !important` で消し、 modal は予約 area 無しで viewport full 使用。
       JS 側 (_lockBodyScroll) が primary、 CSS も broad selector で fallback。 */
    body.wrp-ml-scroll-lock .scope-bottomnav,
    body[class*="modal-lock"] .scope-bottomnav,
    body[class*="scroll-lock"] .scope-bottomnav{display:none !important;}

    /* ========== SELF PICKER FOOTER (role 5 択 + Confirm CTA) ==========
       type='champion' + targetKey='self' の時のみ表示。 他 slot picker
       (敵 / 味方 / rune) では [hidden] のまま。 */
    .wrp-ml-picker-foot{flex:none;padding:12px 14px 14px;border-top:1px solid #18301f;background:linear-gradient(180deg,rgba(5,12,8,.6),rgba(5,12,8,.88));display:flex;flex-direction:column;gap:10px;}
    .wrp-ml-picker-foot[hidden]{display:none;}
    .wrp-ml-picker-foot-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
    .wrp-ml-picker-foot-hint{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(159,233,192,.5);letter-spacing:.04em;text-transform:none;}
    .wrp-ml-picker-role-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
    .wrp-ml-picker-role-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 3px;border:1px solid #2c5a3f;border-radius:7px;background:rgba(5,12,8,.65);color:#bdd6c6;font-family:'Noto Sans JP',sans-serif;font-size:11px;line-height:1.15;cursor:pointer;transition:all .12s;-webkit-tap-highlight-color:rgba(125,255,176,.18);}
    .wrp-ml-picker-role-card:hover{border-color:#3f8a63;color:#dffff0;}
    .wrp-ml-picker-role-card.is-active{border-color:#8effb8;background:rgba(125,255,176,.16);color:#eafff3;font-weight:700;box-shadow:0 0 8px rgba(125,255,176,.32);}
    .wrp-ml-picker-role-card:focus-visible{outline:2px solid #8effb8;outline-offset:2px;}
    /* 2026-08-11 (feedback「試合ログのチャンピオンピッカーのレーンに英名併記
       不要」): role-mark (TOP/JG/MID/ADC/SUP の英字 badge) を DOM 削除、 CSS
       も削除。 role card は JA/EN name span のみ (lang-ja/lang-en で JA mode /
       EN mode 排他表示) → JA context の冗長な英名併記が消え、 role card 縦幅
       も 30px 前後 shrink (picker landscape 縦幅見切れ改善にも貢献)。 */
    .wrp-ml-picker-confirm{min-height:46px;padding:10px 22px;border:1px solid #8effb8;border-radius:8px;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;cursor:pointer;transition:all .15s;box-shadow:0 0 12px -4px rgba(125,255,176,.5);}
    .wrp-ml-picker-confirm:hover:not(:disabled){background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 16px -2px rgba(125,255,176,.7);transform:translateY(-1px);}
    .wrp-ml-picker-confirm:active:not(:disabled){transform:translateY(0);}
    .wrp-ml-picker-confirm:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;background:rgba(10,28,18,.55);border-color:rgba(159,233,192,.28);color:rgba(159,233,192,.55);}
    /* 2026-08-11 (feedback「試合ログのチャンピオンピッカー画面のチップと CTA
       はもっと大きくてもよくない？ 人気投票モーダル内のチップより小さい」):
       PC 版 (>=920px) でだけ chip / CTA / clear を scale up。 人気投票 tab
       (padding 6px 12px / font 12px / border-radius 999px) を基準に揃える +
       fullscreen 化で余裕ある PC 幅を活かした comfortable size。 */
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .wrp-ml-picker-lane-chip,
      .wrp-ml-picker-cat-chip{padding:8px 16px;font-size:13px;border-radius:999px;}
      .wrp-ml-picker-clear{padding:8px 14px;font-size:12px;}
      .wrp-ml-picker-confirm{min-height:52px;padding:12px 28px;font-size:15px;}
    }

    /* self picker 時の tile 選択 highlight (pending state) */
    .wrp-ml-pick-tile.is-selected .wrp-ml-pick-tile-icon{border-color:#8effb8;box-shadow:0 0 14px -2px rgba(125,255,176,.75);background:radial-gradient(circle,#1c5533,#0c2416);}
    .wrp-ml-pick-tile.is-selected .wrp-ml-pick-tile-name{color:#8effb8;font-weight:700;}

    /* v15 (2026-08-01): 重複除外の visual - 既に他 slot で選択済み or 同 family
       (Boots / Enchant / 女神之泪系列 / Support starter) の item を picker 内で
       grey out + tap 無効化。 rune は同 slug 重複のみ。 title tooltip に 「他 slot
       で選択済み」 or 「限持一件 family と競合」 の事由を注記。 */
    .wrp-ml-pick-tile.is-disabled{cursor:not-allowed;pointer-events:auto;opacity:.4;filter:grayscale(.65);}
    .wrp-ml-pick-tile.is-disabled .wrp-ml-pick-tile-icon{border-color:rgba(159,233,192,.15);box-shadow:none;}
    .wrp-ml-pick-tile.is-disabled:hover .wrp-ml-pick-tile-icon{transform:none;border-color:rgba(159,233,192,.15);box-shadow:none;}
    .wrp-ml-pick-tile.is-disabled .wrp-ml-pick-tile-name{color:rgba(159,233,192,.5);}
    .wrp-ml-pick-tile-disabled-note{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,154,168,.75);letter-spacing:.02em;line-height:1.2;margin-top:2px;}
    .wrp-ml-pick-tile.is-disabled .wrp-ml-pick-tile-disabled-note{display:block;}

    /* ============================================================
       PC compact layout — @media (min-width:920px)
       目的: PC 1080p 相当で form 全体を 1 viewport (~ 800-900px) に収める
       モバイル portrait (< 920px) は既存 layout 完全保持
       (form-grid / col-a / col-b wrapper は mobile では display:contents で
        透過、 PC のみ grid + flex column として活性化)
    ============================================================ */
    .wrp-ml-form-grid{display:contents;}
    .wrp-ml-col{display:contents;}

    /* 2026-08-11: iframe → inline refactor 後は html.is-desktop /
       html.is-landscape class を matchMedia JS で set しなくなった (iframe 内
       matchMedia に必要だった legacy)。 @media (orientation:landscape) 版に
       置換 (PC 版は line 822-834 の @media (min-width:920px) rule が既に
       cover)。 landscape mobile (< 920px、 orientation:landscape) でも
       2-col grid が発火 → issue「ランドスケープでもスマホビュー」修正。 */
    @media (orientation:landscape){
      .wrp-ml-form{gap:6px;}
      .wrp-ml-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:start;}
      .wrp-ml-col{display:flex;flex-direction:column;gap:6px;min-width:0;}
      .wrp-ml-col-a{grid-column:1;grid-row:1;}
      .wrp-ml-col-b{grid-column:2;grid-row:1 / span 2;}
      /* 2026-08-11: notes は col-a wrapper 末尾に DOM move 済で grid pin rule 不要 */
    }

    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      /* --- 2-col grid activation ---
         Col A (自分視点 + 相手チーム構成 + 試合文脈、 入力軽め): self + autofill + KDA + enemy + ally + damage + phase
         Col B (試合後 performance 転記、 記入量多): item → rune → spell (user 指定順)
         v5 更圧縮 (2026-08-01 user feedback): 4 section 更 tight + section 間 6px。 */
      .wrp-ml-form{gap:6px;}
      .wrp-ml-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:start;}
      .wrp-ml-col{display:flex;flex-direction:column;gap:6px;min-width:0;}
      /* v71 (2026-08-09): 左下 pin 復活 (v70 で col-b 末尾に置いていた備考を
         逆戻し)。 上記 html.is-desktop / html.is-landscape 版と同 rule — @media
         側は iframe 外 (親 document 直 render) の fallback。 */
      .wrp-ml-col-a{grid-column:1;grid-row:1;}
      .wrp-ml-col-b{grid-column:2;grid-row:1 / span 2;}
      /* 2026-08-11: notes は col-a wrapper 末尾に DOM move 済で grid pin rule 不要 */

      /* --- outer section 圧縮 (further) --- */
      .scope-static-section{padding:12px 14px 10px;margin-bottom:12px;}
      .scope-static-h2{font-size:16px;margin-bottom:8px;padding-bottom:5px;}
      .scope-static-hero{margin-bottom:14px;}
      .scope-static-meta{font-size:12px;margin-top:6px;}

      /* --- block 圧縮 (further) --- */
      .wrp-ml-block{padding:6px 10px 7px;gap:4px;}
      .wrp-ml-block-h{gap:6px;}
      .wrp-ml-block-h-title{font-size:13px;}
      .wrp-ml-block-h-sub{font-size:10px;}
      .wrp-ml-req-badge,.wrp-ml-opt-badge{padding:1px 4px;font-size:9px;letter-spacing:.04em;}

      /* --- meta-bar 圧縮 (inline single row: date input + patch inline) --- */
      .wrp-ml-meta-bar{padding:5px 10px;gap:10px;flex-wrap:nowrap;align-items:center;}
      .wrp-ml-meta-cell{flex-direction:row;align-items:center;gap:6px;flex:0 0 auto;min-width:0;}
      .wrp-ml-meta-cell:first-child{flex:1;}
      .wrp-ml-meta-lbl{font-size:9px;flex:none;}
      .wrp-ml-meta-val{font-size:12px;}
      .wrp-ml-meta-date{min-height:28px;padding:3px 8px;font-size:12px;width:auto;flex:1;max-width:200px;}

      /* --- count row 圧縮 --- */
      .wrp-ml-count-row{padding:5px 10px;margin-bottom:6px;}
      .wrp-ml-count-num{font-size:18px;}

      /* v47 (2026-08-02) 使用チャンピオン section の PC 圧縮:
         self portrait 56 → 48px、 row/slot layout は従来通り (icon + name inline)。 */
      .wrp-ml-self-row{flex-direction:row;gap:10px;align-items:center;}
      .wrp-ml-self-slot{flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;}
      .wrp-ml-self-slot-icon{width:48px;height:48px;}
      .wrp-ml-self-slot-placeholder{font-size:9px;}
      .wrp-ml-self-slot-name{font-size:12px;max-width:140px;min-height:14px;text-align:left;}
      .wrp-ml-self-slot-clear{width:18px;height:18px;font-size:12px;line-height:16px;}
      .wrp-ml-self-caption{font-size:11px;line-height:1.5;gap:4px;text-align:left;}
      .wrp-ml-self-role-chip{font-size:10px;padding:1px 7px;letter-spacing:.03em;}

      /* --- KDA inline (label 左 + input 右、 縦 stack → 横 row) --- */
      .wrp-ml-kda{gap:6px;}
      .wrp-ml-kda-cell{flex-direction:row;align-items:center;justify-content:center;padding:5px 6px;gap:8px;}
      .wrp-ml-kda-lbl{font-size:13px;letter-spacing:.1em;text-align:right;}
      .wrp-ml-kda-input{min-height:28px;font-size:20px;padding:0;border-bottom:0;text-align:center;max-width:60px;flex:1;}

      /* --- Team score (PC 圧縮): inline single-row + input 40px 幅、 gap 6 --- */
      .wrp-ml-teamkills{gap:6px;padding:2px 4px;}
      .wrp-ml-teamkills-cell{padding:4px 8px;gap:6px;}
      .wrp-ml-teamkills-lbl{font-size:11px;letter-spacing:.06em;}
      .wrp-ml-teamkills-input{width:48px;min-height:26px;font-size:16px;padding:0;}
      .wrp-ml-teamkills-sep{font-size:14px;}

      /* --- datetime-local input は date より 5-6 char 分幅が要る --- */
      .wrp-ml-meta-date{max-width:220px;}

      /* --- tap-cards 圧縮 (chip 化) --- */
      .wrp-ml-tapcards{gap:5px;}
      .wrp-ml-tapcard label{min-height:38px;padding:4px 3px;font-size:11px;gap:3px;border-radius:6px;}
      .wrp-ml-tapcard-mark{width:20px;height:20px;font-size:10px;border-width:1.5px;}
      .wrp-ml-tapcard-sub{font-size:9px;}

      /* --- team grid slot 圧縮 (5 col の敵 / 4 col の味方) --- */
      .wrp-ml-team-grid{gap:5px;}
      .wrp-ml-slot{gap:3px;}
      .wrp-ml-slot-role{font-size:10px;}
      .wrp-ml-slot-name{font-size:10px;min-height:12px;}
      .wrp-ml-slot-plus{font-size:18px;}
      .wrp-ml-slot-self-badge{padding:1px 6px;font-size:9px;top:-6px;}
      .wrp-ml-slot-clear{width:16px;height:16px;font-size:10px;line-height:14px;top:-2px;right:-2px;}

      /* --- rune row 圧縮 (v16: icon-only grid, 5 col horizontal + gap 縮小) --- */
      .wrp-ml-rune-caption{font-size:11px;line-height:1.5;}
      [data-wrp-ml-rune-slots]{gap:5px;}
      .wrp-ml-rune-tile-plus{font-size:14px;}

      /* --- item row 圧縮 (v16: icon-only grid, 6 col horizontal + gap 縮小) --- */
      [data-wrp-ml-item-slots]{gap:5px;}
      .wrp-ml-item-tile-plus{font-size:14px;}

      /* --- 実績値メモ圧縮 (v54) --- */
      .wrp-ml-notes-input{min-height:56px;font-size:12px;line-height:1.5;}

      /* --- spell row 圧縮 (v53: rune と同 grid cell 幅 — 固定 size 撤廃、
             gap のみ rune ([data-wrp-ml-rune-slots]{gap:5px}) と揃える) --- */
      .wrp-ml-spell-row{gap:5px;}
      .wrp-ml-spell-tile-plus{font-size:14px;}
      .wrp-ml-spell-tile-name{font-size:10px;}

      /* --- auto-fill bar 圧縮 --- */
      .wrp-ml-autofill{padding:5px 8px;gap:4px;border-radius:6px;}
      .wrp-ml-autofill-lbl{font-size:9px;letter-spacing:.04em;gap:4px;}
      .wrp-ml-autofill-icon{width:12px;height:12px;}
      .wrp-ml-autofill-chip{padding:3px 8px;font-size:11px;border-radius:12px;}
      .wrp-ml-autofill-chip-sub{font-size:9px;margin-left:4px;}

      /* --- submit row 圧縮 --- */
      .wrp-ml-submit-row{gap:8px;margin-top:2px;}
      .wrp-ml-submit-btn{min-height:40px;font-size:13px;padding:8px 18px;}
      .wrp-ml-reset-btn{min-height:40px;font-size:11px;padding:8px 14px;}

      /* --- notice 圧縮 --- */
      .wrp-ml-notice{margin-top:10px;padding:7px 10px;font-size:10px;line-height:1.5;max-width:520px;}
    }

    /* ============================================================
       EDIT MODE BANNER (v13, 2026-08-01)
       Form 上部の 「編集中: <日時> の試合 [編集キャンセル]」 banner。
       Amber gold (sample-load bar 同系統) で primary green と差別化、
       edit mode 中のみに visible。
    ============================================================ */
    .wrp-ml-edit-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;margin-bottom:12px;border:1px solid #ffd83a;border-radius:8px;background:linear-gradient(180deg,rgba(255,216,58,.14),rgba(255,216,58,.06));color:#ffe9a8;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;line-height:1.55;}
    .wrp-ml-edit-banner[hidden]{display:none;}
    .wrp-ml-edit-banner-lbl{flex:1;min-width:0;color:#ffe9a8;}
    .wrp-ml-edit-banner-lbl strong{color:#ffd83a;font-weight:700;}
    .wrp-ml-edit-banner-cancel{padding:5px 12px;min-height:30px;border:1px solid rgba(255,216,58,.55);border-radius:6px;background:rgba(255,216,58,.1);color:#ffe9a8;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;cursor:pointer;transition:all .12s;flex:none;}
    .wrp-ml-edit-banner-cancel:hover{border-color:#ffd83a;color:#fff;background:rgba(255,216,58,.22);}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-edit-banner{margin-bottom:8px;padding:5px 10px;font-size:11px;}.wrp-ml-edit-banner-cancel{padding:4px 10px;min-height:26px;font-size:10px;}}

    /* ============================================================
       SAVED LIST (Stage 2B, 2026-08-01)
       form の下の保存済み entry 一覧。 header に count + AI 相談 CTA、
       body は card grid (mobile: 1 col、 PC: 2 col)。 各 card 右上に
       delete X button。
    ============================================================ */
    .wrp-ml-list-section{margin-bottom:22px;padding:16px 16px 14px;border:1px solid #1c3a28;border-radius:10px;background:rgba(10,28,18,.5);}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-list-section{padding:22px 22px 18px;}}
    .wrp-ml-list-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #2c5a3f;}
    .wrp-ml-list-header .scope-static-h2{margin:0;padding:0;border-bottom:0;}
    /* v54 (2026-08-02) user feedback「N件表示が上寄せ」: h2 と count を baseline
       group 化。 box center 揃え (align-items:center、 既定) だと Orbitron 数字
       の baseline が JA 見出し baseline より ~3px 浮いて 「上寄せ」 に見える
       (CDP 実測: 数字 baseline 159.2 vs 見出し baseline 162.2)。 text 同士は
       baseline 揃えが光学的に正しい。 ctas button 群は center のまま。 */
    .wrp-ml-list-header .scope-static-h2,
    .wrp-ml-list-header .wrp-ml-list-count{align-self:baseline;}
    .wrp-ml-list-count{display:inline-flex;align-items:baseline;gap:4px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;letter-spacing:.04em;}
    .wrp-ml-list-count-num{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;color:#8effb8;line-height:1;}
    .wrp-ml-list-ai-btn{margin-left:auto;min-height:36px;padding:7px 14px;border:1px solid #8effb8;border-radius:7px;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;cursor:pointer;transition:all .15s;box-shadow:0 0 10px -4px rgba(125,255,176,.5);}
    .wrp-ml-list-ai-btn:hover:not(:disabled){background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 14px -2px rgba(125,255,176,.7);transform:translateY(-1px);}
    .wrp-ml-list-ai-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}

    /* 2026-08-01 v13: patch 別 accordion group を list に導入。
       Outer list は常時 flex column (group が縦積み)。 各 group body
       内で PC のみ 2-col grid を活性化 (v11 の compact row 2-col layout を継承)。 */
    .wrp-ml-list{display:flex;flex-direction:column;gap:8px;}
    .wrp-ml-list-empty{padding:24px 12px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(159,233,192,.55);line-height:1.6;}

    /* Patch 別 accordion group (v13、 2026-08-01)。 最新パッチのみ open、
       他は collapse。 marker は SVG arrow (right → down rotate 90deg)、
       browser default marker は撤廃。 */
    .wrp-ml-list-group{border:1px solid #2c5a3f;border-radius:8px;background:rgba(5,12,8,.4);overflow:hidden;}
    .wrp-ml-list-group[open]{background:rgba(10,28,18,.55);}
    .wrp-ml-list-group-summary{cursor:pointer;padding:10px 14px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:13px;color:#bdffd6;letter-spacing:.02em;list-style:none;display:flex;align-items:center;gap:10px;user-select:none;}
    .wrp-ml-list-group-summary::-webkit-details-marker{display:none;}
    .wrp-ml-list-group-summary::marker{content:'';}
    .wrp-ml-list-group-summary:hover{background:rgba(125,255,176,.04);color:#eafff3;}
    .wrp-ml-list-group-patch{display:inline-flex;align-items:baseline;gap:6px;}
    .wrp-ml-list-group-patch-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;color:#8effb8;padding:1px 8px;border-radius:8px;border:1px solid rgba(125,255,176,.4);background:rgba(125,255,176,.08);letter-spacing:.02em;line-height:1.4;}
    .wrp-ml-list-group-patch-num--unknown{color:rgba(159,233,192,.6);border-color:rgba(159,233,192,.28);background:rgba(5,12,8,.5);}
    .wrp-ml-list-group-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;letter-spacing:.04em;}
    .wrp-ml-list-group-arrow{margin-left:auto;width:12px;height:12px;color:#8effb8;transition:transform .18s;flex:none;}
    .wrp-ml-list-group[open] .wrp-ml-list-group-arrow{transform:rotate(90deg);}
    .wrp-ml-list-group-body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;border-top:1px solid #18301f;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .wrp-ml-list-group-body{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-items:start;}
    }
    /* 2026-08-01 user feedback「ランドスケープ時の登録試合一覧はPC版同様に2列表示に
       したいかも」対応で、 landscape orientation (min-width:640px 以上) でも 2 col
       に。 mobile portrait は 1 col 継続。 */
    @media (orientation:landscape) and (min-width:640px){
      .wrp-ml-list-group-body{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-items:start;}
    }

    /* Compact 1-line row (v11、 2026-08-01)。 tap で detail modal open。
       Row shape: [W/L badge] [datetime] [champ icon] [role chip] [KDA] [teamScore] [X]
       min-height 44 で touch target 確保、 wrap は極力抑制 (敵 icons / dmg profile
       / phase / mini icon 帯は modal 側に移す)。 */
    .wrp-ml-entry{position:relative;display:flex;align-items:center;gap:6px;padding:6px 32px 6px 10px;min-height:44px;border:1px solid #2c5a3f;border-radius:7px;background:rgba(5,12,8,.55);transition:border-color .15s,background .12s;cursor:pointer;text-align:left;color:inherit;-webkit-tap-highlight-color:rgba(125,255,176,.18);}
    .wrp-ml-entry:hover,
    .wrp-ml-entry:focus-visible{border-color:#8effb8;background:rgba(10,28,18,.7);outline:none;}
    .wrp-ml-entry-del{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,74,74,.6);color:#fff;border:1px solid rgba(255,138,138,.75);padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.5);transition:background .12s,transform .12s;z-index:2;}
    .wrp-ml-entry-del:hover{background:rgba(255,74,74,.85);transform:translateY(-50%) scale(1.08);}
    .wrp-ml-entry-del svg{width:60%;height:60%;pointer-events:none;}
    .wrp-ml-entry-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12px;border:1.5px solid currentColor;line-height:1;flex:none;}
    .wrp-ml-entry-badge--win{color:#8effb8;background:rgba(125,255,176,.14);}
    .wrp-ml-entry-badge--loss{color:#ff9aa8;background:rgba(255,154,168,.14);}
    .wrp-ml-entry-badge--draw{color:#ffd88a;background:rgba(255,216,138,.14);}
    .wrp-ml-entry-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;letter-spacing:.02em;flex:0 0 auto;min-width:0;white-space:nowrap;}
    /* v54 (2026-08-02) user feedback「スマホビューの登録試合一覧に時間表示不要。
       合計スコアがバツボタンで見切れる」: mobile portrait は時刻 span を隠して
       「8/1」 だけに (幅節約)。 PC / landscape は従来通り時刻付き。 */
    @media (max-width:919px) and (orientation:portrait) and (max-width:499px){.wrp-ml-entry-time{display:none;}}
    .wrp-ml-entry-champ-icon{width:24px;height:24px;border-radius:50%;overflow:hidden;border:1px solid #2c5a3f;background:radial-gradient(circle,#0c3c26,#061510);flex:none;}
    .wrp-ml-entry-champ-icon img{width:100%;height:100%;object-fit:cover;display:block;}
    .wrp-ml-entry-role{font-family:'JetBrains Mono',monospace;font-size:10px;color:#9fe0ba;padding:1px 6px;border-radius:9px;border:1px solid rgba(159,233,192,.3);letter-spacing:.02em;flex:none;line-height:1.3;}
    .wrp-ml-entry-kda{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;color:#eafff3;letter-spacing:.02em;line-height:1;flex:0 0 auto;white-space:nowrap;margin-left:auto;}
    .wrp-ml-entry-teamscore{font-family:'JetBrains Mono',monospace;font-size:11px;color:#bdd6c6;letter-spacing:.02em;flex:none;padding:1px 6px;border-radius:9px;border:1px dashed rgba(159,233,192,.28);background:rgba(5,12,8,.5);line-height:1.3;white-space:nowrap;}
    .wrp-ml-entry-teamscore--empty{color:rgba(159,233,192,.35);border-style:dotted;}
    /* 2026-09-14: K/D/A 未記録の行は KDA チップを出さないので、 右寄せをスコア側が担う */
    .wrp-ml-entry-teamscore--push{margin-left:auto;}

    /* Detail modal — entry を tap で open。 AI modal と同 pattern、 body が
       scroll 可能な rich content 表示 area、 footer に close + delete。
       2026-08-11 (feedback「モーダルを敢えて小さい枠にする必要なくて全部
       fullscreen overlay が良くない?」): 全 breakpoint fullscreen 化。
       padding:12px + max-width:640px + border-radius:14px + border 全撤去、
       overlay padding 0 + sheet 100vw/100dvh。 */
    /* 2026-08-23 (feedback「試合ログの登録済み試合の確認画面の背景が途中でバツっと切れている」):
       overlay の dim (rgba) 単独だと、 PC/tablet landscape override で sheet
       が min-height:100dvh + height:auto の natural-flow になった時、
       sheet の bottom edge と overlay dim の境界に色差 (#081610 gradient bottom
       vs. rgba(3,8,5,.72) over body #161616) が発生して 「バツっと切れる」
       視認される。 sheet gradient と 同じ 底値 #081610 solid を overlay
       base に敷いて seam を消す。 backdrop-blur も継続。 */
    .wrp-ml-detail-modal{position:fixed;inset:0;z-index:105;display:flex;align-items:stretch;justify-content:stretch;padding:0;background:#0d2418;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s;}
    .wrp-ml-detail-modal.is-open{opacity:1;pointer-events:auto;}
    .wrp-ml-detail-modal-sheet{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;display:flex;flex-direction:column;background:#0d2418;border:0;border-radius:0;padding:14px max(16px, calc((100vw - 1200px) / 2));color:#eafff3;box-sizing:border-box;overflow:hidden;transform:translateY(12px);transition:transform .18s;}
    .wrp-ml-detail-modal.is-open .wrp-ml-detail-modal-sheet{transform:translateY(0);}
    /* 2026-08-11 (feedback「PC 版各モーダルはサイズバランス最適化」): fullscreen 化で
       100vw に拡大した sheet 内の詳細表示 + CTA (閉じる / 編集 / 削除の 3 button)
       が過大に見えていたため、 PC 版のみ内容領域 max-width:1000 の中央 layout に。
       sheet 自体は fullscreen 維持 (背景 overlay も full)、 padding で有効内容領域
       を絞る。 */
    /* 2026-08-11: base rule に統合済 (全 breakpoint 対応)。 */
    .wrp-ml-detail-modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #18301f;flex:none;}
    .wrp-ml-detail-modal-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:15px;color:#dffff0;letter-spacing:.02em;min-width:0;}
    /* 2026-08-11 (feedback「試合ログの各 page のバツサイズを scouter AI に
       合わせて + 丸の中にセンタリングされてない」): text button pattern を
       撤廃、 全 modal 統一 circle (mobile 34x34 + PC 46x46) に refactor。
       display:inline-flex + align/justify:center で ✕ を確実に中央配置。 */
    .wrp-ml-detail-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none;transition:all .12s;}
    .wrp-ml-detail-modal-close:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    /* 2026-08-01 v37: 詳細 modal body を same-origin iframe (srcdoc) 化 = PtR 恒久 fix。
       v27〜v36 の全 approach (overscroll-behavior / touch-action / capture-phase
       preventDefault / scrollTop pin / JS scroll takeover) でも Firefox Android の
       PtR を止められなかったため、 scroll container を別 browsing context に隔離。
       iframe 内の touch pan は iframe 自身の root scroller が消費し、 iframe 側
       html{overscroll-behavior:none} が scroll chaining を spec レベルで遮断する
       ので、 親 document (top-level root scroller) に gesture が届かず PtR は
       構造的に発火し得ない。 AI 相談 modal の textarea (native form-control
       scroll) と同じ 「独立 scroll pipeline」 化。 iframe 内 content の CSS は
       下部の template#wrp-ml-detail-frame-css (inert) が単一 source。 */
    .wrp-ml-detail-modal-body{flex:1 1 0;min-height:0;width:100%;display:block;border:0;padding:0;margin:0;background:transparent;}
    /* 2026-08-23: 詳細 modal の 3 CTA (閉じる / 編集 / 削除) にも 対称 breathing。
       padding-top:8 のみだと button border-bottom が sheet padding-bottom 14 と
       接近 して 見切れ 感、 padding-bottom:8 を 追加。 */
    .wrp-ml-detail-modal-actions{display:flex;gap:9px;margin-top:8px;padding:8px 0;border-top:1px solid #18301f;flex:none;}
    .wrp-ml-detail-modal-cancel,.wrp-ml-detail-modal-edit,.wrp-ml-detail-modal-del{min-height:40px;padding:8px 12px;border-radius:8px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer;transition:all .15s;}
    .wrp-ml-detail-modal-cancel{flex:1;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;}
    .wrp-ml-detail-modal-cancel:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    /* Edit button — 中立 primary green outline、 cancel と del の中間に配置。
       filled primary CTA よりは弱め (delete との視覚バランスと、 「編集開始」
       が破壊的でないため)、 outline + subtle bg。 */
    .wrp-ml-detail-modal-edit{flex:1.2;border:1px solid #8effb8;background:rgba(15,60,40,.35);color:#8effb8;}
    .wrp-ml-detail-modal-edit:hover{border-color:#bdffd6;color:#bdffd6;background:rgba(30,80,50,.5);box-shadow:0 0 10px -4px rgba(125,255,176,.55);}
    .wrp-ml-detail-modal-del{flex:1;border:1px solid rgba(255,138,138,.55);background:rgba(60,20,20,.55);color:#ff9aa8;}
    .wrp-ml-detail-modal-del:hover{border-color:#ff9aa8;color:#ffcaca;background:rgba(80,25,25,.75);}
    body.wrp-ml-detail-modal-lock{overflow:hidden;}

    /* Detail modal body content CSS は v37 で iframe srcdoc 内に移動 —
       下部の template#wrp-ml-detail-frame-css を参照 (親 document には不適用)。 */

    /* ============================================================
       AI PROMPT MODAL (Stage 2C, 2026-08-01)
       scouter の AI 相談 modal と同 pattern。 fixed overlay + 中央 sheet、
       textarea readonly + copy button で clipboard コピー。
    ============================================================ */
    /* 2026-08-11 (feedback「モーダルを敢えて小さい枠にする必要なくて全部
       fullscreen overlay が良くない?」): 全 breakpoint fullscreen 化。
       padding:12px + max-width:640px + border-radius:14px + border 全撤去、
       overlay padding 0 + sheet 100vw/100dvh。 */
    .wrp-ml-ai-modal{position:fixed;inset:0;z-index:110;display:flex;align-items:stretch;justify-content:stretch;padding:0;background:#0d2418;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s;}
    .wrp-ml-ai-modal.is-open{opacity:1;pointer-events:auto;}
    .wrp-ml-ai-modal-sheet{position:relative;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;display:flex;flex-direction:column;background:#0d2418;border:0;border-radius:0;padding:14px max(16px, calc((100vw - 1200px) / 2));color:#eafff3;box-sizing:border-box;overflow:hidden;transform:translateY(12px);transition:transform .18s;}
    .wrp-ml-ai-modal.is-open .wrp-ml-ai-modal-sheet{transform:translateY(0);}
    .wrp-ml-ai-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex:none;gap:8px;}
    .wrp-ml-ai-modal-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:16px;color:#dffff0;letter-spacing:.02em;}
    /* 2026-08-11: 全 modal 統一 circle pattern (mobile 34x34 + PC 46x46 経由)。 */
    .wrp-ml-ai-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none;transition:all .12s;}
    .wrp-ml-ai-modal-close:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    /* v47: min-height 110px は portrait 用 guard — 全件集計 mode でも pickerlist を
       常時表示するようになったので、 textarea が潰れきらない下限を確保。
       landscape は iframe override 側で min-height:0 に戻る (grid row が高さ管理)。 */
    /* 2026-08-11 (feedback「matchlog AI の文字サイズを scouter AI に合わせて」):
       textarea 12→13、 note 11→12 に scale up (scouter AI の sc-fs-body /
       sc-fs-body-sm と統一)。 */
    .wrp-ml-ai-modal-textarea{width:100%;flex:1 1 0;min-height:110px;padding:10px;background:rgba(10,28,18,.5);border:1px solid #2c5a3f;border-radius:8px;color:#bdd6c6;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.55;resize:none;box-sizing:border-box;overscroll-behavior:contain;}
    .wrp-ml-ai-modal-textarea:focus{outline:none;border-color:#8effb8;box-shadow:0 0 0 2px rgba(125,255,176,.18);}
    /* v39 (2026-08-01): AI 相談 body (scope selector + pickerlist + textarea) は
       same-origin iframe に隔離 (PtR spec 遮断)。 scope / pickerlist / textarea の
       rule は iframe 内に copy される page CSS 経由で適用される。 */
    .wrp-ml-ai-modal-frame{flex:1 1 0;min-height:0;width:100%;border:0;display:block;background:transparent;}
    .wrp-ml-ai-modal-note{font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;margin:8px 0 0;line-height:1.5;flex:none;}
    /* 2026-08-11 (feedback「matchlog AI のバツボタンのサイズ、位置を scouter AI
       に合わせて」): v47 の landscape 「head absolute + close 極小 20x20 + title
       hide + note hide + sheet padding 圧縮」 pattern を全撤去。 scouter AI と
       同じく head は通常 flow (title 左 + close 右)、 close は 46x46 (PC scale
       rule 経由)、 note / title は常時表示。 */
    @media (orientation:landscape){
      /* 2026-08-11: sheet padding は base rule に統合済 (全 breakpoint padding calc)、
         landscape 特殊 padding override 撤去。 */
      .wrp-ml-ai-modal-actions{margin-top:6px;}
    }
    /* 2026-08-11 (feedback「PC 版各モーダルはサイズバランス最適化」): fullscreen 化で
       100vw に拡大した sheet 内の textarea + pickerlist + CTA が過大に見えていた
       ため、 PC 版 (portrait + landscape) のみ内容領域 max-width:1100 の中央 layout
       に。 sheet 自体は fullscreen 維持 (背景 overlay も full)、 padding で有効
       内容領域を絞る。 landscape override (padding:10px 12px, line 1113) より後に
       置いて PC-landscape でも中央寄せが効くように。 */
    /* 2026-08-11: base rule に統合済 (全 breakpoint 対応)。 */
    .wrp-ml-ai-modal-actions{display:flex;gap:9px;margin-top:8px;flex:none;}
    .wrp-ml-ai-modal-cancel,.wrp-ml-ai-modal-copy{min-height:40px;padding:8px 16px;border-radius:8px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer;transition:all .15s;}
    .wrp-ml-ai-modal-cancel{flex:1;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;}
    .wrp-ml-ai-modal-cancel:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    .wrp-ml-ai-modal-copy{flex:1.6;border:1px solid #8effb8;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;box-shadow:0 0 10px -4px rgba(125,255,176,.5);}
    .wrp-ml-ai-modal-copy:hover{background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 14px -2px rgba(125,255,176,.7);}
    .wrp-ml-ai-modal-copy:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;background:rgba(10,28,18,.55);border-color:rgba(159,233,192,.28);color:rgba(159,233,192,.55);}
    body.wrp-ml-ai-modal-lock{overflow:hidden;}

    /* ============================================================
       AI EXTRACT PROMPT MODAL (B1, 2026-08-16)
       スクショから JSON 抽出用プロンプトを配布する modal。 相談 modal と
       同 shell (fullscreen overlay + 中央 sheet)。 body に intro 説明 +
       サービス別使い方 tips (Claude / ChatGPT / Gemini の 3 card) +
       prompt textarea を縦積み。 v75 pattern (inline sheet、 iframe 不使用)。
    ============================================================ */
    .wrp-ml-ai-extract-modal{position:fixed;inset:0;z-index:110;display:flex;align-items:stretch;justify-content:stretch;padding:0;background:#0d2418;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s;}
    .wrp-ml-ai-extract-modal.is-open{opacity:1;pointer-events:auto;}
    .wrp-ml-ai-extract-modal-sheet{position:relative;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;display:flex;flex-direction:column;background:#0d2418;border:0;border-radius:0;padding:14px max(16px, calc((100vw - 1200px) / 2));color:#eafff3;box-sizing:border-box;overflow:hidden;transform:translateY(12px);transition:transform .18s;}
    .wrp-ml-ai-extract-modal.is-open .wrp-ml-ai-extract-modal-sheet{transform:translateY(0);}
    .wrp-ml-ai-extract-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex:none;gap:8px;}
    .wrp-ml-ai-extract-modal-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:16px;color:#dffff0;letter-spacing:.02em;}
    .wrp-ml-ai-extract-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none;transition:all .12s;}
    .wrp-ml-ai-extract-modal-close:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    /* Body: intro + tips + textarea を縦積み。 mobile portrait では全体を body
       scroll、 landscape / PC は base flex + textarea 側で内部 scroll。 */
    .wrp-ml-ai-extract-modal-body{flex:1 1 0;min-height:0;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:2px 2px 4px;box-sizing:border-box;}
    .wrp-ml-ai-extract-intro{font-family:'Noto Sans JP',sans-serif;font-size:13px;line-height:1.6;color:#bdd6c6;margin:0;flex:none;}
    .wrp-ml-ai-extract-intro strong{color:#eafff3;font-weight:700;}
    /* Service tip cards: 3-col grid (Claude / ChatGPT / Gemini)、 mobile 1-col stack。 */
    /* Textarea: 単一 scroll container。 body scroll と競合しないよう自動 fit
       (min-height 240、 flex-grow で伸長)。 code 系 font でプロンプト全体を可視化。 */
    .wrp-ml-ai-extract-modal-textarea{width:100%;flex:1 1 auto;min-height:240px;padding:10px;background:rgba(10,28,18,.5);border:1px solid #2c5a3f;border-radius:8px;color:#bdd6c6;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.55;resize:none;box-sizing:border-box;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
    .wrp-ml-ai-extract-modal-textarea:focus{outline:none;border-color:#8effb8;box-shadow:0 0 0 2px rgba(125,255,176,.18);}
    .wrp-ml-ai-extract-modal-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;margin:6px 0 0;line-height:1.5;flex:none;}
    .wrp-ml-ai-extract-modal-actions{display:flex;gap:9px;margin-top:8px;flex:none;}
    .wrp-ml-ai-extract-modal-cancel,.wrp-ml-ai-extract-modal-copy{min-height:40px;padding:8px 16px;border-radius:8px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer;transition:all .15s;}
    .wrp-ml-ai-extract-modal-cancel{flex:1;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;}
    .wrp-ml-ai-extract-modal-cancel:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    .wrp-ml-ai-extract-modal-copy{flex:1.6;border:1px solid #8effb8;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;box-shadow:0 0 10px -4px rgba(125,255,176,.5);}
    .wrp-ml-ai-extract-modal-copy:hover{background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 14px -2px rgba(125,255,176,.7);}
    body.wrp-ml-ai-extract-modal-lock{overflow:hidden;}

    /* ============================================================
       AI IMPORT MODAL (B2, 2026-08-16)
       B1 で生成した prompt を AI に投げた後、 返ってきた JSON を貼付
       して form field に auto-populate する paste sub-modal。 form-modal
       (z-index 100) より上の z-index 120 で開く。 shell design は
       ai-extract-modal と共通、 独立 lock class (wrp-ml-ai-import-modal-lock)。
    ============================================================ */
    .wrp-ml-ai-import-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:stretch;justify-content:stretch;padding:0;background:#0d2418;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s;}
    .wrp-ml-ai-import-modal.is-open{opacity:1;pointer-events:auto;}
    .wrp-ml-ai-import-modal-sheet{position:relative;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;display:flex;flex-direction:column;background:#0d2418;border:0;border-radius:0;padding:14px max(16px, calc((100vw - 1200px) / 2));color:#eafff3;box-sizing:border-box;overflow:hidden;transform:translateY(12px);transition:transform .18s;}
    .wrp-ml-ai-import-modal.is-open .wrp-ml-ai-import-modal-sheet{transform:translateY(0);}
    .wrp-ml-ai-import-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex:none;gap:8px;}
    .wrp-ml-ai-import-modal-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:16px;color:#dffff0;letter-spacing:.02em;}
    .wrp-ml-ai-import-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none;transition:all .12s;}
    .wrp-ml-ai-import-modal-close:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    .wrp-ml-ai-import-modal-body{flex:1 1 0;min-height:0;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:2px 2px 4px;box-sizing:border-box;}
    .wrp-ml-ai-import-intro{font-family:'Noto Sans JP',sans-serif;font-size:13px;line-height:1.6;color:#bdd6c6;margin:0;flex:none;}
    .wrp-ml-ai-import-intro strong{color:#eafff3;font-weight:700;}
    .wrp-ml-ai-import-modal-textarea{width:100%;flex:1 1 auto;min-height:240px;padding:10px;background:rgba(10,28,18,.5);border:1px solid #2c5a3f;border-radius:8px;color:#eafff3;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.55;resize:none;box-sizing:border-box;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
    .wrp-ml-ai-import-modal-textarea:focus{outline:none;border-color:#8effb8;box-shadow:0 0 0 2px rgba(125,255,176,.18);}
    /* Modal 内 banner: parse 失敗の redirect / hint 用 (成功時は modal を close するので不要)。 */
    .wrp-ml-ai-import-modal-banner{padding:8px 10px;border-radius:8px;font-family:'Noto Sans JP',sans-serif;font-size:12px;line-height:1.5;flex:none;}
    .wrp-ml-ai-import-modal-banner[hidden]{display:none;}
    .wrp-ml-ai-import-modal-banner.is-err{border:1px solid #ff9aa8;background:rgba(255,154,168,.10);color:#ffd0d6;}
    .wrp-ml-ai-import-modal-actions{display:flex;gap:9px;margin-top:8px;flex:none;}
    .wrp-ml-ai-import-modal-cancel,.wrp-ml-ai-import-modal-submit{min-height:40px;padding:8px 16px;border-radius:8px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer;transition:all .15s;}
    .wrp-ml-ai-import-modal-cancel{flex:1;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;}
    .wrp-ml-ai-import-modal-cancel:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    .wrp-ml-ai-import-modal-submit{flex:1.6;border:1px solid #8effb8;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;box-shadow:0 0 10px -4px rgba(125,255,176,.5);}
    .wrp-ml-ai-import-modal-submit:hover{background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 14px -2px rgba(125,255,176,.7);}
    body.wrp-ml-ai-import-modal-lock{overflow:hidden;}

    /* Form 内 「AI JSON 取込」 CTA (form-body 冒頭)。 wrp-ml-list-ai-btn の
       green primary CTA デザインを踏襲、 form 上部で幅一杯の block button。 */
    .wrp-ml-ai-import-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;padding:9px 16px;margin:0;border:1px solid #8effb8;border-radius:8px;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;cursor:pointer;transition:all .15s;box-shadow:0 0 10px -4px rgba(125,255,176,.5);text-align:center;box-sizing:border-box;}
    .wrp-ml-ai-import-btn:hover{background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 14px -2px rgba(125,255,176,.7);transform:translateY(-1px);}
    .wrp-ml-ai-import-btn-icon{display:inline-flex;align-items:center;line-height:0;}
    .wrp-ml-ai-import-btn-icon svg{width:15px;height:15px;}

    /* Form 上部 banner (取込 result 表示、 成功=green / unresolved=amber)。 */
    .wrp-ml-ai-import-banner{padding:8px 10px;border-radius:8px;font-family:'Noto Sans JP',sans-serif;font-size:12px;line-height:1.55;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
    .wrp-ml-ai-import-banner[hidden]{display:none;}
    .wrp-ml-ai-import-banner.is-ok{border:1px solid #8effb8;background:rgba(125,255,176,.10);color:#dffff0;}
    .wrp-ml-ai-import-banner.is-warn{border:1px solid #ffb86b;background:rgba(255,184,107,.10);color:#ffe3c0;}
    .wrp-ml-ai-import-banner-msg{flex:1;min-width:0;}
    .wrp-ml-ai-import-banner-close{width:22px;height:22px;padding:0;flex:none;border-radius:50%;border:1px solid rgba(159,233,192,.35);background:transparent;color:inherit;font-family:'Chakra Petch',sans-serif;font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
    .wrp-ml-ai-import-banner-close:hover{border-color:#8effb8;background:rgba(30,60,40,.6);}

    /* AI 取込で resolve 失敗した field を amber outline で強調 (block/section 単位)。 */
    .wrp-ml-form-modal-body .wrp-ml-block.is-ai-unresolved,
    .wrp-ml-form-modal-body [data-wrp-ml-slot].is-ai-unresolved{outline:2px solid #ffb86b;outline-offset:2px;border-radius:8px;}

    /* 詳細 (optional) accordion (B2 の selfPerf + objectives)。 <details>/<summary>
       ネイティブで折り畳み、 open 時に body が展開。 form modal body 末尾に配置。 */
    .wrp-ml-form-modal-body .wrp-ml-detail-accordion{border:1px solid #1c3a28;border-radius:8px;background:rgba(10,28,18,.4);margin:0;}
    .wrp-ml-detail-accordion-summary{cursor:pointer;padding:10px 14px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;color:#9fe0ba;letter-spacing:.04em;list-style:none;display:flex;align-items:center;gap:8px;user-select:none;}
    .wrp-ml-detail-accordion-summary::-webkit-details-marker{display:none;}
    .wrp-ml-detail-accordion-summary::marker{content:'';}
    .wrp-ml-detail-accordion-summary:hover{color:#eafff3;}
    .wrp-ml-detail-accordion-arrow{width:10px;height:10px;color:currentColor;transition:transform .18s;flex:none;}
    .wrp-ml-detail-accordion[open] .wrp-ml-detail-accordion-arrow{transform:rotate(90deg);}
    .wrp-ml-detail-accordion-hint{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(159,233,192,.55);letter-spacing:.02em;font-weight:400;}
    .wrp-ml-detail-accordion-body{padding:2px 12px 12px;border-top:1px solid rgba(159,233,192,.14);display:flex;flex-direction:column;gap:12px;}
    .wrp-ml-detail-accordion-subhead{font-family:'JetBrains Mono',monospace;font-size:11px;color:#8effb8;letter-spacing:.06em;margin:8px 0 -2px;text-transform:uppercase;}
    .wrp-ml-detail-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
    @media (max-width:640px){.wrp-ml-detail-fields{grid-template-columns:repeat(2,minmax(0,1fr));}}
    .wrp-ml-detail-field{display:flex;flex-direction:column;gap:3px;padding:6px 8px;border:1px solid #2c5a3f;border-radius:6px;background:rgba(5,12,8,.6);min-width:0;}
    .wrp-ml-detail-field:focus-within{border-color:#8effb8;box-shadow:0 0 8px -2px rgba(125,255,176,.35);}
    .wrp-ml-detail-field-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:#9fe0ba;letter-spacing:.06em;}
    .wrp-ml-detail-field-input{width:100%;min-height:26px;padding:2px 4px;border:0;border-bottom:1px solid rgba(159,233,192,.25);background:transparent;color:#eafff3;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;letter-spacing:.02em;line-height:1;box-sizing:border-box;transition:border-color .12s;}
    .wrp-ml-detail-field-input:focus{outline:none;border-bottom-color:#8effb8;}
    .wrp-ml-detail-field-input::-webkit-outer-spin-button,
    .wrp-ml-detail-field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
    .wrp-ml-detail-field-input[type=number]{-moz-appearance:textfield;}
    .wrp-ml-detail-field-mvp{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #2c5a3f;border-radius:6px;background:rgba(5,12,8,.6);cursor:pointer;color:#eafff3;font-family:'Chakra Petch',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;transition:border-color .12s;grid-column:span 1;}
    .wrp-ml-detail-field-mvp:has(input:checked){border-color:#ffd88a;background:rgba(255,216,138,.08);color:#ffd88a;}
    .wrp-ml-detail-field-mvp input{margin:0;accent-color:#ffd88a;flex:none;}
    .wrp-ml-detail-objectives-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;}
    .wrp-ml-detail-objectives-hd{display:grid;grid-template-columns:80px repeat(2,1fr);gap:6px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(159,233,192,.6);letter-spacing:.06em;padding:0 4px;}
    .wrp-ml-detail-objectives-row{display:grid;grid-template-columns:80px repeat(2,1fr);align-items:center;gap:6px 12px;padding:2px 4px;border-bottom:1px dashed rgba(159,233,192,.12);}
    .wrp-ml-detail-objectives-row:last-child{border-bottom:0;}
    .wrp-ml-detail-objectives-lbl{font-family:'Noto Sans JP',sans-serif;font-size:12px;color:#bdd6c6;letter-spacing:.02em;}
    .wrp-ml-detail-objectives-cell{display:flex;align-items:center;gap:4px;}
    .wrp-ml-detail-objectives-cell input{width:100%;min-height:28px;padding:2px 6px;border:1px solid rgba(159,233,192,.2);border-radius:5px;background:rgba(5,12,8,.5);color:#eafff3;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;text-align:center;box-sizing:border-box;transition:border-color .12s;}
    .wrp-ml-detail-objectives-cell input:focus{outline:none;border-color:#8effb8;}
    .wrp-ml-detail-objectives-cell input::-webkit-outer-spin-button,
    .wrp-ml-detail-objectives-cell input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
    .wrp-ml-detail-objectives-cell input[type=number]{-moz-appearance:textfield;}

    /* v19 (2026-08-19、 Phase 2): 味方 / 敵 team perf readonly display (AI 取込専用)。
       form 側 accordion 内と detail modal 内の両方で使用。 各 role 1 行、 KDA +
       stat cells (flex-wrap で狭幅対応)。 */
    .wrp-ml-team-perf{display:flex;flex-direction:column;gap:4px;font-family:'JetBrains Mono',monospace;}
    .wrp-ml-team-perf-row{display:grid;grid-template-columns:70px 90px 1fr;gap:8px;padding:5px 8px;background:rgba(5,12,8,.4);border:1px solid rgba(159,233,192,.16);border-radius:5px;font-size:11px;color:#bdd6c6;align-items:center;line-height:1.35;}
    .wrp-ml-team-perf-row--empty{opacity:.4;color:rgba(159,233,192,.5);}
    .wrp-ml-team-perf-role{color:rgba(159,233,192,.7);letter-spacing:.06em;font-size:10px;text-transform:uppercase;}
    .wrp-ml-team-perf-kda{font-weight:700;color:#eafff3;letter-spacing:.02em;font-size:12px;}
    .wrp-ml-team-perf-stats{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10px;color:rgba(159,233,192,.75);min-width:0;}
    .wrp-ml-team-perf-stats>span{white-space:nowrap;}
    .wrp-ml-team-perf-stat-lbl{color:rgba(159,233,192,.5);margin-right:3px;}
    .wrp-ml-team-perf-empty{padding:8px 4px;font-size:10px;color:rgba(159,233,192,.45);text-align:center;font-style:italic;}

    /* Detail modal strip for selfPerf + objectives (readonly summary rows)。 */
    .wrp-ml-detail-perf-strip{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#bdd6c6;letter-spacing:.02em;padding:6px 8px;border:1px dashed rgba(159,233,192,.2);border-radius:6px;background:rgba(5,12,8,.35);}
    .wrp-ml-detail-perf-strip-cell{white-space:nowrap;}
    .wrp-ml-detail-perf-strip-key{color:#9fe0ba;margin-right:4px;}
    .wrp-ml-detail-perf-strip-mvp{color:#ffd88a;font-weight:700;letter-spacing:.06em;}

    /* v15 (2026-08-01): AI 相談 「対象試合」 selector (radio + optional checkbox 一覧)。
       上部の radio row 「全保存試合 (N 件) から集計」 / 「試合を選ぶ」 で mode 切替。
       「試合を選ぶ」 選択時に checkbox list 表示、 counter + 生成 button 制御。
       Textarea は常時 visible で mode 切替 / checkbox change で live 再生成。 */
    .wrp-ml-ai-scope{display:flex;flex-direction:column;gap:8px;padding:8px 10px;margin-bottom:8px;border:1px solid #2c5a3f;border-radius:8px;background:rgba(5,12,8,.55);flex:none;}
    .wrp-ml-ai-scope-row{display:flex;flex-wrap:wrap;gap:6px 12px;}
    /* 2026-08-11 (feedback「試合ログの AI 相談の試合選択側の文字サイズもっと
       サイズ上げて。 小さすぎて読めない」): pickerlist / scope / textarea 系の
       font-size を全 element +1-2px scale up (10-11 → 12-13、 9 → 11)、 landscape
       特殊 scale down override は全撤去 (line 1550+ の @media (orientation:
       landscape) 内 font-size 系)。 */
    .wrp-ml-ai-scope-radio{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-size:13px;color:#bdd6c6;padding:3px 8px;border-radius:6px;border:1px solid transparent;transition:all .12s;}
    .wrp-ml-ai-scope-radio:hover{color:#eafff3;background:rgba(125,255,176,.06);}
    .wrp-ml-ai-scope-radio input{margin:0;accent-color:#8effb8;flex:none;}
    .wrp-ml-ai-scope-radio.is-active{border-color:rgba(125,255,176,.35);background:rgba(125,255,176,.08);color:#eafff3;font-weight:700;}
    .wrp-ml-ai-scope-counter{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;letter-spacing:.04em;align-self:center;}
    .wrp-ml-ai-scope-counter-num{color:#8effb8;font-weight:700;}

    /* Checkbox list — patch 別 grouped、 各 row は 「[chk] [W/L badge] [日時]
       [champ] [role] [KDA]」。 max-height + overflow で 20 件超でも収まる。 */
    /* 2026-08-11 (feedback「スマホ版 AI 相談の試合情報 scroll は 5-6 試合で発火して
       欲しい。 現状 9 試合表示で縦幅取りすぎ」): 前 font scale up (row 11→13、
       padding scale) で row 高 ~32px、 6 row = ~200px。 max-height 36vh (mobile 800
       で 288px = 9-10 row) → 200px 固定に。 landscape は base override (line 1565
       の grid layout rule) で max-height:none 継承なので影響なし。 */
    .wrp-ml-ai-pickerlist{max-height:200px;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;-webkit-overflow-scrolling:touch;border:1px solid #18301f;border-radius:6px;padding:6px;background:rgba(3,10,6,.5);display:flex;flex-direction:column;gap:4px;}
    /* 2026-08-11 (feedback「試合ログ AI 相談左カラムはさらに 3 倍ぐらい縦幅増やして」):
       landscape で pickerlist の max-height 完全撤廃 → 全 rows render、
       sheet 縦拡張 → overlay scroll で navigate。 内部 scroll 廃止で 「試合数
       多くても全部見える」 UX。 2026-08-22 (user 「左枠が 4 件しか表示されて
       いない」): mobile landscape 限定だった rule を全 landscape (PC 含む) に拡張。
       PC 2-col grid でも 右 col の textarea auto-size 縦拡張と 左 col pickerlist
       が同期して伸びる (grid row 2 が両 col 共通 height)。 */
    @media (orientation:landscape){
      .wrp-ml-ai-pickerlist{max-height:none !important;overflow-y:visible !important;}
    }
    /* v34: 1px pseudo で scrollHeight > clientHeight を常時確保 (試合数が少ない時も
       _pinScrollTop が効くよう)。 詳細 modal body と同じ PtR 保険 pattern。 */
    .wrp-ml-ai-pickerlist::after{content:'';display:block;height:1px;min-height:1px;flex:none;flex-shrink:0;}
    .wrp-ml-ai-pickerlist[hidden]{display:none;}
    /* v47 (2026-08-02): 全件集計 mode でも pickerlist を 「集計対象 preview」 として
       常時表示。 is-readonly = checkbox なし render + row の hover / cursor 中立化。 */
    .wrp-ml-ai-pickerlist.is-readonly .wrp-ml-ai-pickerlist-row{cursor:default;}
    .wrp-ml-ai-pickerlist.is-readonly .wrp-ml-ai-pickerlist-row:hover{background:transparent;}
    /* v40 (2026-08-01): pickerlist-group を <details> accordion 化。 保存済み list v13
       と同型、 site current patch を default open (該当なしなら最上位)。 */
    .wrp-ml-ai-pickerlist-group{display:flex;flex-direction:column;border:1px solid rgba(159,233,192,.14);border-radius:6px;background:rgba(3,10,6,.4);margin-bottom:4px;}
    .wrp-ml-ai-pickerlist-group[open]{background:rgba(10,28,18,.5);}
    .wrp-ml-ai-pickerlist-group-summary{cursor:pointer;padding:6px 8px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;letter-spacing:.06em;list-style:none;display:flex;align-items:center;gap:6px;user-select:none;}
    .wrp-ml-ai-pickerlist-group-summary::-webkit-details-marker{display:none;}
    .wrp-ml-ai-pickerlist-group-summary::marker{content:'';}
    .wrp-ml-ai-pickerlist-group-summary:hover{background:rgba(125,255,176,.04);color:#eafff3;}
    .wrp-ml-ai-pickerlist-group-patch{display:inline-flex;align-items:baseline;gap:4px;text-transform:uppercase;}
    .wrp-ml-ai-pickerlist-group-num{color:#8effb8;font-weight:700;padding:1px 6px;border-radius:6px;border:1px solid rgba(125,255,176,.4);background:rgba(125,255,176,.08);letter-spacing:.02em;font-size:12px;line-height:1.3;text-transform:none;}
    .wrp-ml-ai-pickerlist-group-count{margin-left:auto;color:rgba(159,233,192,.7);font-size:11px;}
    .wrp-ml-ai-pickerlist-group-selected{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:#8effb8;color:#06150c;font-weight:700;font-size:11px;line-height:1;}
    .wrp-ml-ai-pickerlist-group-arrow{width:10px;height:10px;color:#9fe0ba;transition:transform .18s;flex:none;}
    .wrp-ml-ai-pickerlist-group[open] .wrp-ml-ai-pickerlist-group-arrow{transform:rotate(90deg);}
    .wrp-ml-ai-pickerlist-group-body{padding:4px 4px 6px;display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(159,233,192,.12);}
    .wrp-ml-ai-pickerlist-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:4px;cursor:pointer;color:#bdd6c6;font-family:'Noto Sans JP',sans-serif;font-size:13px;transition:background .12s;}
    .wrp-ml-ai-pickerlist-row:hover{background:rgba(125,255,176,.05);}
    .wrp-ml-ai-pickerlist-row.is-checked{background:rgba(125,255,176,.08);color:#eafff3;}
    .wrp-ml-ai-pickerlist-row input{margin:0;accent-color:#8effb8;flex:none;}
    .wrp-ml-ai-pickerlist-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:11px;border:1.5px solid currentColor;line-height:1;flex:none;}
    .wrp-ml-ai-pickerlist-badge--win{color:#8effb8;background:rgba(125,255,176,.14);}
    .wrp-ml-ai-pickerlist-badge--loss{color:#ff9aa8;background:rgba(255,154,168,.14);}
    .wrp-ml-ai-pickerlist-badge--draw{color:#ffd88a;background:rgba(255,216,138,.14);}
    .wrp-ml-ai-pickerlist-date{font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;letter-spacing:.02em;white-space:nowrap;flex:none;}
    .wrp-ml-ai-pickerlist-champ{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
    .wrp-ml-ai-pickerlist-kda{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;color:#eafff3;letter-spacing:.02em;white-space:nowrap;flex:none;}
    .wrp-ml-ai-pickerlist-actions{display:flex;gap:6px;padding:2px 6px 0;}
    /* v47: display:flex が UA の [hidden]{display:none} に勝って hidden attr が
       効かない bug の guard (portrait 全件集計 mode で button が露出していた)。 */
    .wrp-ml-ai-pickerlist-actions[hidden]{display:none !important;}
    .wrp-ml-ai-scope-counter[hidden]{display:none !important;}
    .wrp-ml-ai-pickerlist-action{padding:3px 8px;border:1px solid rgba(159,233,192,.32);border-radius:6px;background:rgba(10,28,18,.6);color:#9fe0ba;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:all .12s;}
    .wrp-ml-ai-pickerlist-action:hover{border-color:#8effb8;color:#eafff3;}

    /* ============================================================
       LIST HEADER CTA row (2026-08-01 v14): 「新規登録」 primary CTA +
       既存 AI 相談の 2 button を一覧 header 右端に並列配置。
       Mobile portrait は折り返し、 PC は横並び。
    ============================================================ */
    .wrp-ml-list-header-ctas{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
    /* 既存 AI btn の margin-left:auto は wrapper 側に移すので上書き解除 */
    .wrp-ml-list-header-ctas .wrp-ml-list-ai-btn{margin-left:0;}
    /* Mobile portrait 狭幅 (~520 未満): 2 btn 合計幅が header 幅に収まらないので
       ctas を title/count の下に flex-basis 100% で落として full row に + 2 btn は
       等分幅の side-by-side (AI btn 内の長 text は wrap 許可)。
       overflow-wrap:anywhere で 「AI 相談プロンプトを生成」 の長 word を強制 wrap。 */
    /* long / short label toggle (mobile portrait 用の縮約表示)。 default は long
       visible。 max-width:520 で long 隠し + short visible。 */
    .wrp-ml-btn-lbl-short{display:none;}
    .wrp-ml-btn-lbl-long{display:inline;}
    @media (max-width:520px){
      .wrp-ml-btn-lbl-long{display:none;}
      .wrp-ml-btn-lbl-short{display:inline;}
      /* 親 section の内幅に強制 clamp。 flex-wrap の子が push で幅 inflate
         する現象を防ぐ。 min-width:0 で intrinsic min-content にも縮む。 */
      .wrp-ml-list-header{width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden;}
      /* B1 (2026-08-16): 3 btn 化 (新規 / AI 抽出 / AI 相談) で 3-col grid に変更。
         各短ラベル (「新規」 「AI 抽出」 「AI 相談」) は 3 等分でも読める幅。 */
      .wrp-ml-list-header-ctas{margin-left:0;flex-basis:100%;width:100%;max-width:100%;box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;overflow:hidden;}
      .wrp-ml-list-header-ctas .wrp-ml-list-new-btn,
      .wrp-ml-list-header-ctas .wrp-ml-list-ai-btn{width:100%;min-width:0;max-width:100%;padding-left:6px;padding-right:6px;white-space:nowrap;text-align:center;line-height:1.3;justify-content:center;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;font-size:11px;}
    }
    /* 「+ 新規登録」 primary CTA。 AI btn と同 pattern (primary green gradient)。 */
    .wrp-ml-list-new-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 14px;border:1px solid #8effb8;border-radius:7px;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;cursor:pointer;transition:all .15s;box-shadow:0 0 10px -4px rgba(125,255,176,.5);-webkit-tap-highlight-color:rgba(125,255,176,.24);}
    .wrp-ml-list-new-btn:hover{background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 14px -2px rgba(125,255,176,.7);transform:translateY(-1px);}
    .wrp-ml-list-new-btn:focus-visible{outline:2px solid #8effb8;outline-offset:2px;}
    .wrp-ml-list-new-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:none;}
    .wrp-ml-list-new-btn-icon svg{width:100%;height:100%;display:block;}

    /* ============================================================
       EMPTY STATE onboarding hero (2026-08-30 B2 approach canvas
       Matchlog.dc.html): 抽象 3-step 説明 を 排除、 「記録後 の 履歴 list
       (3 log rows、 1 行 selected highlight) + 単品 review AI prompt」 の
       単一 preview card を 見せて 「1 試合 記録 する と こう 変わる」 を
       先に 提示。 canvas は 390px 固定 だが shipped は 幅可変 (mobile
       375-430 / tablet 500+ / PC 900+)、 max-width 620 で 中央寄せ。
    ============================================================ */
    .wrp-ml-list-onboarding{display:flex;flex-direction:column;gap:14px;padding:16px 0 24px;text-align:left;box-sizing:border-box;}
    /* 2026-08-30 課題1 (matchlog 幅 fix) → 課題4 再fix: 元 rule は tablet-portrait で
       max-width:620 に cap していたが user feedback「大外枠 に対して 縮めて
       表示 されている」 に対応して cap は 撤去 済 だったが、 横 padding
       (16-28px) を wrapper 自身に 残していたため、 既に 22px (desktop) /
       16px (mobile) padding 済 の 親 .wrp-ml-list-section の 内側 に
       もう 一段 padding が 重なり、 header の 3 button 行 (.wrp-ml-list-header-ctas
       は 横 padding 0、 section の padding だけで inset) より onboarding-card
       が 左右 合計 32-56px 狭く render されていた (2026-08-30 「試合ログの
       方の中のボックスが引き続き狭い」 3 度目 指摘 で 特定)。 wrapper の
       横 padding は 完全 撤去 (0) — section の padding だけ で inset を
       揃える。 breathing 感 は .wrp-ml-list-onboarding-card 自身 の 内部
       padding (16px 14px 18px 等) で 既に 確保 されている ので 二重 padding
       は 不要だった。 */
    @media (min-width:520px){.wrp-ml-list-onboarding{margin:6px 0 0;padding:20px 0 28px;gap:16px;}}
    @media (min-width:920px){.wrp-ml-list-onboarding{padding:28px 0 36px;}}

    /* Headline row: ▸ label + hairline rule */
    .wrp-ml-list-onboarding-hd{display:flex;align-items:center;gap:8px;min-width:0;}
    .wrp-ml-list-onboarding-hd-lbl{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:11px;color:#8effb8;letter-spacing:.14em;flex:0 1 auto;min-width:0;line-height:1.3;}
    .wrp-ml-list-onboarding-hd-rule{height:1px;flex:1 1 20px;min-width:20px;background:linear-gradient(90deg,#3f8a63,transparent);}
    /* 2026-09-13: 見本カードは押すと新規登録を開く (scouter の見本カードと同じ扱い)。 */
    .wrp-ml-list-onboarding-hd-tag{flex:none;padding:2px 7px;border:1px solid #3f8a63;border-radius:4px;font-family:'Noto Sans JP',sans-serif;font-size:10px;font-weight:700;line-height:1.3;color:#8effb8;letter-spacing:.06em;}
    .wrp-ml-list-onboarding-card[data-wrp-ml-open-new]{cursor:pointer;-webkit-tap-highlight-color:rgba(125,255,176,.12);}

    /* Preview card wrapper — glow border + top-right accent tick */
    .wrp-ml-list-onboarding-card{position:relative;padding:16px 14px 18px;border:1px solid #3f8a63;border-radius:12px;background:radial-gradient(120% 90% at 50% 0%,rgba(15,58,37,.65),rgba(6,22,14,.92));box-shadow:0 0 18px -6px rgba(125,255,176,.35);}
    .wrp-ml-list-onboarding-card-tick{position:absolute;top:-1px;right:14px;width:32px;height:3px;background:linear-gradient(90deg,transparent,#8effb8);border-radius:0 0 3px 3px;box-shadow:0 0 8px rgba(125,255,176,.55);}

    /* Meta strip */
    .wrp-ml-list-onboarding-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;}
    .wrp-ml-list-onboarding-meta-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:#6cae89;letter-spacing:.14em;}
    .wrp-ml-list-onboarding-meta-patch{font-family:'JetBrains Mono',monospace;font-size:9px;color:#5f9d7c;letter-spacing:.04em;}

    /* Log rows (3 rows, 1st is selected/review) */
    .wrp-ml-list-onboarding-rows{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
    .wrp-ml-list-onboarding-row{display:grid;grid-template-columns:16px 1fr 46px;gap:6px;align-items:center;padding:6px 8px;background:rgba(10,28,18,.4);border-radius:5px;border-left:2px solid #e67462;min-width:0;}
    .wrp-ml-list-onboarding-row.is-win{border-left-color:#8effb8;}
    .wrp-ml-list-onboarding-row.is-review{background:rgba(15,58,37,.55);border-left-color:#ffe14a;box-shadow:0 0 8px -2px rgba(255,216,58,.35);}
    .wrp-ml-list-onboarding-row-badge{width:14px;height:14px;border-radius:50%;font-family:'Chakra Petch',sans-serif;font-size:8px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
    .wrp-ml-list-onboarding-row-badge.is-loss{background:radial-gradient(circle,#e67462,#7a2626);}
    .wrp-ml-list-onboarding-row-badge.is-win{background:radial-gradient(circle,#8effb8,#1f5a3c);color:#06160e;}
    .wrp-ml-list-onboarding-row-champ{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;}
    .wrp-ml-list-onboarding-row-avatar{width:18px;height:18px;border-radius:50%;background:#2c1a48 url('https://game.gtimg.cn/images/lgamem/act/lrlib/img/HeadIcon/H_S_10123.png') center/cover no-repeat;flex:none;overflow:hidden;}
    .wrp-ml-list-onboarding-row-name{font-family:'Noto Sans JP',sans-serif;font-size:11px;color:#eafff3;flex:none;}
    .wrp-ml-list-onboarding-row-date{font-family:'JetBrains Mono',monospace;font-size:9px;color:#9fb8a8;flex:none;}
    .wrp-ml-list-onboarding-row-tag{font-family:'JetBrains Mono',monospace;font-size:8px;color:#ffe14a;padding:1px 5px;border:1px solid rgba(255,216,58,.45);border-radius:3px;letter-spacing:.06em;flex:none;}
    .wrp-ml-list-onboarding-row-kda{font-family:'JetBrains Mono',monospace;font-size:10px;color:#eafff3;text-align:right;}

    /* Divider between col-left subsections (2026-08-30 課題C、
       scouter.css .sc-onboarding-divider と同 pattern) */
    .wrp-ml-list-onboarding-divider{margin:2px 0 12px;height:1px;background:linear-gradient(90deg,transparent,#1c3a28 15%,#1c3a28 85%,transparent);}

    /* Selected item/rune/spell icon grid (2026-08-30 課題C、
       scouter.css .sc-onboarding-loadout* を wrp-ml-list-onboarding-loadout*
       に移植した同一 pattern) */
    .wrp-ml-list-onboarding-loadout-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;color:#6cae89;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;}
    .wrp-ml-list-onboarding-loadout{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
    .wrp-ml-list-onboarding-loadout-row{display:flex;align-items:center;gap:8px;}
    .wrp-ml-list-onboarding-loadout-row-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;color:#8effb8;letter-spacing:.04em;flex:none;width:48px;display:flex;flex-direction:column;gap:1px;}
    .wrp-ml-list-onboarding-loadout-row-count{font-size:8px;color:#5f8f74;}
    .wrp-ml-list-onboarding-loadout-icons{display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0;}
    .wrp-ml-list-onboarding-loadout-icon{width:20px;height:20px;border-radius:5px;border:1px solid #2c5a3f;object-fit:cover;background:#0c1f14;flex:none;display:block;}
    .wrp-ml-list-onboarding-loadout-icon.is-keystone{border-color:#ffe14a;box-shadow:0 0 6px -1px rgba(255,225,74,.6);}

    /* Ally vs enemy composition grid (2026-08-30 課題C、新規 pattern) */
    .wrp-ml-list-onboarding-comp-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;color:#6cae89;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;}
    .wrp-ml-list-onboarding-comp{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
    .wrp-ml-list-onboarding-comp-row{display:flex;align-items:center;gap:8px;}
    .wrp-ml-list-onboarding-comp-row-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.04em;flex:none;width:24px;color:#8effb8;}
    .wrp-ml-list-onboarding-comp-row.is-enemy .wrp-ml-list-onboarding-comp-row-lbl{color:#ff9c86;}
    .wrp-ml-list-onboarding-comp-icons{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0;}
    .wrp-ml-list-onboarding-comp-slot{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;}
    .wrp-ml-list-onboarding-comp-icon{width:22px;height:22px;border-radius:50%;border:1px solid #2c5a3f;object-fit:cover;background:#0c1f14;display:block;}
    .wrp-ml-list-onboarding-comp-row.is-enemy .wrp-ml-list-onboarding-comp-icon{border-color:#6a3730;}
    .wrp-ml-list-onboarding-comp-role{font-family:'Noto Sans JP',sans-serif;font-size:7px;color:#6cae89;letter-spacing:0;white-space:nowrap;line-height:1;}

    /* Col wrapper (display:contents on mobile/tablet — 2-col split only
       applies at the PC/landscape breakpoint below). */
    .wrp-ml-list-onboarding-col-left,.wrp-ml-list-onboarding-col-right{display:contents;}

    /* Prompt code-block
       2026-08-30 課題1 追加: overflow-wrap:anywhere で 長 token (URL / champion 名
       等) が col-right の 実 幅 に 対して 強制 wrap、 max-width:100% + min-width:0
       (親 col 側) と 併せて overflow を完全 制御。 */
    .wrp-ml-list-onboarding-prompt-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;color:#6cae89;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px;}
    .wrp-ml-list-onboarding-prompt-code{margin:0;padding:11px 12px;border-left:2px solid #8effb8;background:rgba(3,10,6,.9);border-radius:0 6px 6px 0;font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.7;color:#bdd6c6;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.4);max-width:100%;box-sizing:border-box;}
    @media (min-width:520px){.wrp-ml-list-onboarding-prompt-code{font-size:11px;padding:13px 14px;}}
    .wrp-ml-list-onboarding-prompt-code .ml-p-h1{color:#8effb8;font-weight:700;}
    .wrp-ml-list-onboarding-prompt-code .ml-p-h2{color:#6cae89;}
    .wrp-ml-list-onboarding-prompt-code .ml-p-strong{color:#eafff3;font-weight:700;}
    .wrp-ml-list-onboarding-prompt-code .ml-p-accent{color:#ffe14a;}
    .wrp-ml-list-onboarding-prompt-code .ml-p-accent-b{color:#ffe14a;font-weight:700;}
    .wrp-ml-list-onboarding-prompt-code .ml-p-loss{color:#e67462;font-weight:700;}

    /* Primary CTA (full width, green glow) — retains data-wrp-ml-open-new
       delegated handler binding (see _wireNewEntryCTA) */
    .wrp-ml-list-onboarding-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:14px 22px;border:1px solid #8effb8;border-radius:10px;background:linear-gradient(180deg,#1f5a3c,#0f3a25);color:#eafff3;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;cursor:pointer;transition:all .15s;box-shadow:0 0 18px -4px rgba(125,255,176,.55);-webkit-tap-highlight-color:rgba(125,255,176,.24);}
    .wrp-ml-list-onboarding-cta:hover{background:linear-gradient(180deg,#2c8055,#155336);box-shadow:0 0 22px -2px rgba(125,255,176,.7);transform:translateY(-1px);}
    .wrp-ml-list-onboarding-cta:focus-visible{outline:2px solid #8effb8;outline-offset:2px;}
    .wrp-ml-list-onboarding-cta-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:none;}
    .wrp-ml-list-onboarding-cta-icon svg{width:100%;height:100%;display:block;}
    .wrp-ml-list-onboarding-cta-arrow{font-size:16px;line-height:1;}

    /* 2026-08-30 fix: PC / landscape で mobile-first font-size (9-14px) が
       そのまま流用されて小さすぎた課題への対応。 scouter.css .sc-onboarding
       と同方針で 920+ / landscape+500 幅帯を scale up。
       2026-08-30 追記: 試合履歴 list (左) と AI prompt (右) を 2-col 化。
       grid の row-track 共有だと右 col の長い prompt が左 col の各行
       トラックまで無理に引き伸ばして隙間だらけになるため flex を採用
       (col-left/col-right の 2 wrapper を独立した flex column にして
       高さ結合を避ける、 scouter.css と同方針)。
       2026-08-30 課題D (「試合ログの方も横幅いっぱい活用して。 微妙に
       狭くしなくていい」): max-width:1180px を撤去、 .scope-app
       (max-width:1200px) + .scope-static-section (padding:22px) の
       content box をそのまま使い切る。 scouter (.sc-frame 幅揃え前提) と
       違い matchlog は横幅最大化のみが要件なので margin:0 auto は不要
       (親要素が既に中央寄せ済)、 横 padding は .scope-app 本体の 28px
       余白と同格の 28px に統一。 2026-08-30 課題4 再fix: その 「28px 統一」
       自体 が 二重 padding の 原因 だった (.wrp-ml-list-section が 既に
       22px padding 適用 済)。 横 padding は 0 に、 縦 (breathing) だけ 残す。 */
    @media (min-width:920px), (orientation:landscape) and (min-width:500px){
      .wrp-ml-list-onboarding{max-width:none;margin:0;padding:32px 0 40px;gap:18px;}
      .wrp-ml-list-onboarding-hd-lbl{font-size:13px;}
      .wrp-ml-list-onboarding-card{padding:24px 28px 28px;display:flex;align-items:flex-start;gap:32px;box-sizing:border-box;}
      /* 2026-08-30 課題1 (matchlog 右カラム 外枠 はみ出し fix): 元 min-width
         (280+380 = 660px) が narrow landscape (720x360 等) で card 幅要求 が
         scope-static-section content box を超え、 col-right の prompt code-block
         が 外枠 を突き抜けて overflow していた root cause。 min-width:0 に
         降ろして flex-basis 42/58% に完全委任、 幅は 親 (card padding 差引後) を
         percentage で正確に分割、 内部 prompt-code は max-width:100% +
         overflow-wrap:anywhere で確実 wrap。 */
      .wrp-ml-list-onboarding-col-left{display:flex;flex-direction:column;flex:1 1 42%;min-width:0;}
      .wrp-ml-list-onboarding-col-right{display:flex;flex-direction:column;flex:1 1 58%;min-width:0;}
      .wrp-ml-list-onboarding-meta{margin-bottom:14px;}
      .wrp-ml-list-onboarding-meta-lbl{font-size:12px;}
      .wrp-ml-list-onboarding-meta-patch{font-size:11px;}
      .wrp-ml-list-onboarding-rows{gap:7px;margin-bottom:0;}
      .wrp-ml-list-onboarding-row{grid-template-columns:19px 1fr 56px;gap:8px;padding:8px 10px;}
      .wrp-ml-list-onboarding-row-badge{width:17px;height:17px;font-size:10px;}
      .wrp-ml-list-onboarding-row-avatar{width:22px;height:22px;}
      .wrp-ml-list-onboarding-row-name{font-size:13px;}
      .wrp-ml-list-onboarding-row-date{font-size:11px;}
      .wrp-ml-list-onboarding-row-tag{font-size:10px;}
      .wrp-ml-list-onboarding-row-kda{font-size:12px;}
      .wrp-ml-list-onboarding-loadout-lbl,.wrp-ml-list-onboarding-comp-lbl{font-size:10px;}
      .wrp-ml-list-onboarding-loadout-icon{width:24px;height:24px;}
      .wrp-ml-list-onboarding-loadout-row-lbl{font-size:10px;}
      .wrp-ml-list-onboarding-comp-icon{width:26px;height:26px;}
      .wrp-ml-list-onboarding-comp-role{font-size:8px;}
      .wrp-ml-list-onboarding-comp-row-lbl{font-size:10px;}
      .wrp-ml-list-onboarding-prompt-lbl{font-size:11px;}
      .wrp-ml-list-onboarding-prompt-code{font-size:13px;padding:16px 18px;line-height:1.75;flex:1;}
      .wrp-ml-list-onboarding-cta{min-height:60px;padding:16px 26px;font-size:17px;}
      .wrp-ml-list-onboarding-cta-icon{width:16px;height:16px;}
      .wrp-ml-list-onboarding-cta-arrow{font-size:18px;}
    }

    /* ============================================================
       FORM MODAL (2026-08-01 v14): 「新規登録 / 編集」 フォームを fixed
       overlay 内の modal panel に収める。 Mobile portrait は全画面、
       PC ≥920px は中央 modal (max-width 1000)。 body scrollable + sticky
       footer (Cancel / Save)。 z-index は picker (100) より下に置いて、
       modal 内 form から picker が上に重なる挙動を確保。
    ============================================================ */
    /* 2026-08-11 (feedback「モーダルを敢えて小さい枠にする必要なくて全部
       fullscreen overlay が良くない?」): 全 breakpoint で fullscreen 化。
       centered dialog (旧 @media (min-width:920px) の max-width:1000px + margin
       付き rule) を撤廃、 PC でも入力集中モードに統一。 */
    /* 2026-08-23 (feedback「試合ログの新規登録画面の背景が途中でバツっと切れている」):
       上記 wrp-ml-detail-modal と 同 root cause。 sheet natural-flow で
       overlay dim との境界に seam が出るので、 sheet gradient bottom と
       同じ #081610 solid を overlay 敷き詰め。 */
    .wrp-ml-form-modal{position:fixed;inset:0;z-index:95;display:flex;align-items:stretch;justify-content:stretch;padding:0;background:#0d2418;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s;}
    .wrp-ml-form-modal.is-open{opacity:1;pointer-events:auto;}
    /* 2026-08-14 v9b (user 修正 「PC/ランドスケープは今のままで OK、 モバイル縦
       だけ深緑背景 100% にして」): sheet padding = 0 化は portrait only に
       絞る。 default (PC/landscape) は従来通り centering padding で 1200 に
       閉じ込め。 mobile portrait 側の rule は下の @media block で上書き。 */
    .wrp-ml-form-modal-sheet{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;display:flex;flex-direction:column;background:#0d2418;color:#eafff3;overflow:hidden;border:0;border-radius:0;padding:0 max(16px, calc((100vw - 1200px) / 2));transform:translateY(12px);transition:transform .18s;box-sizing:border-box;}
    @media (max-width:919px) and (orientation:portrait) and (max-width:499px){
      /* mobile portrait のみ: sheet padding 0 で head/foot 背景を 100vw span
         させる。 head/body/foot は自前 padding で中身の水平位置を保持。 */
      .wrp-ml-form-modal-sheet{padding:0;}
    }
    .wrp-ml-form-modal.is-open .wrp-ml-form-modal-sheet{transform:translateY(0);}
    /* v9b: 従来通り padding 12 16 で中身の水平位置を確保。 PC/landscape は
       sheet padding で 1200 centered、 mobile portrait は sheet padding 0
       なので head 背景が 100vw まで広がる (head 自身の 16 padding で content
       は 16px inset、 従来と同じ見え方)。 */
    .wrp-ml-form-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;flex:none;border-bottom:1px solid #18301f;background:rgba(5,12,8,.55);}
    .wrp-ml-form-modal-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:16px;color:#dffff0;letter-spacing:.02em;}
    .wrp-ml-form-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(159,233,192,.4);background:rgba(10,28,18,.7);color:#9fe0ba;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:all .12s;}
    .wrp-ml-form-modal-close:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    /* v45 (2026-08-01): landscape で親 head は 「× のみ右上浮遊」、 親 foot は
       完全 hide して iframe 内の frame-actions (Cancel/Reset/Save) が代替。
       これで iframe body が viewport 100% 占有可能 (縦幅極限まで確保)。
       2026-08-11: fullscreen 統一後も landscape の縦幅節約は有効なので保持。 */
    /* 2026-08-11 (feedback「試合ログの新規登録画面のバツボタンが 100% 表示で
       右上に飛び出している」): form modal head の landscape absolute rule
       (position:absolute + close 28x28 + title hide) を全撤廃。 absolute で
       sheet padding calc を bypass して viewport 右端に pin される root cause。
       matchlog AI modal と同 pattern で通常 flex flow (title 左 + close 右)、
       close 位置は sheet padding calc 内側の 1200 layout 右端に確定。
       foot は landscape でも display:none 保持 (form-frame-actions が代替)。 */
    @media (orientation:landscape){
      .wrp-ml-form-modal-foot{display:none !important;}
    }
    /* v38: form body は same-origin iframe に隔離 (PtR spec-level 遮断)。
       iframe が sheet の flex child、 foot は親 DOM のまま。
       下の .wrp-ml-form-modal-body 系 rule は iframe 内に copy される page CSS
       経由で適用される (template#wrp-ml-form-frame-css が scroll 挙動を override)。 */
    .wrp-ml-form-modal-frame{flex:1 1 0;min-height:0;width:100%;border:0;display:block;background:transparent;}
    /* 2026-08-11 iframe → inline refactor bug fix: <form> 自体が sheet の
       flex child になり、 form-body の flex:1 1 0 が form 内で機能するには
       form 側も flex parent 化 + shrink 可能化が必要。 これを欠くと form が
       content 全高 (数千 px) を占有し、 foot (Cancel/Reset/Save) が sheet の
       flex column から画面外に押し出されて 「せり上がって何も登録できない」
       状態になる (user 報告 2026-08-11、 Android verify)。 */
    .wrp-ml-form{flex:1 1 0;min-height:0;min-width:0;display:flex;flex-direction:column;}
    /* 2026-08-14 v8 (user 指示 「試合を編集」 modal head の outer に合わせて全
       viewport で一致させて): 水平 padding 16 → 0 に絞り、 block outer が
       sheet inner (= head outer と同じ領域) を span するように。 縦 padding
       (14, 18) は維持。 head も内側に 16px padding を持っているが block 側
       は自前 padding (5-8px) + border で視覚コンテナ感を保ち、 outer 境界
       のみ head と揃える。 */
    .wrp-ml-form-modal-body{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:none;touch-action:pan-y;padding:14px 0 18px;display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch;}
    /* 2026-08-11 (feedback「試合ログの登録画面の PC 版、 サムネイルとチップ、
       CTA のサイズバランスがおかしい」): fullscreen 化で sheet 幅 100vw に
       拡大 (1440-1920+) したため、 従来 max-width:1000 前提の element size
       (サムネ 88 / chip / CTA 14px) が相対的に 30-40% 縮小 → スカスカ。
       内容領域を max-width:1200 中央 layout (padding calc pattern) で復活
       させ、 element size は据え置きでも balance 復活。 sheet 自体は fullscreen
       overlay のまま。 */
    /* 2026-08-11 (feedback「サイトの横幅ルールは前提として則って欲しい」/「コンテンツ幅がという意味」):
       chrome anchor pattern (body だけ 1200 layout、 head/foot は 100vw 全幅) を廃止。
       sheet レベルに padding-x を掛けて head + form-body + foot 全内容を site 標準
       max-width:1200 中央 layout に統一。 sheet 自体は fullscreen (100vw overlay) 維持。
       form-body 側は base padding (14px 16px 18px) を利用しつつ PC-only gap:6px を維持。 */
    /* 2026-08-11: sheet padding は base rule に統合済 (全 breakpoint 対応)。 form-body gap のみ PC で圧縮。 */
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-form-modal-body{gap:6px;}}
    @media (max-width:919px) and (orientation:portrait) and (max-width:499px){
      /* mobile portrait のみ: sheet padding 0 で 100vw span したので、 body 側
         に 16px 水平 padding を戻して block outer が viewport 端に貼り付かない
         breathing を確保。 head content とも同じ 16px inset で align。 */
      .wrp-ml-form-modal-body{padding-left:16px;padding-right:16px;}
    }
    /* v9b: 従来 padding に revert。 head と同じ理由で mobile portrait は
       sheet padding 0 の結果 foot 背景も 100vw span。 */
    .wrp-ml-form-modal-foot{flex:none;display:flex;flex-wrap:wrap;gap:10px;padding:10px 14px 12px;border-top:1px solid #18301f;background:linear-gradient(180deg,rgba(5,12,8,.5),rgba(5,12,8,.92));align-items:center;}
    .wrp-ml-form-modal-foot .wrp-ml-submit-btn{flex:1 1 auto;margin:0;}
    .wrp-ml-form-modal-foot .wrp-ml-reset-btn{margin:0;flex:0 0 auto;}
    .wrp-ml-form-modal-cancel{flex:0 0 auto;margin:0;min-height:52px;padding:12px 18px;border:1px solid rgba(159,233,192,.4);border-radius:8px;background:rgba(10,28,18,.7);color:#9fe0ba;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:all .15s;}
    .wrp-ml-form-modal-cancel:hover{border-color:#8effb8;color:#eafff3;background:rgba(30,60,40,.85);}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .wrp-ml-form-modal-foot{padding:8px 14px 10px;}
      .wrp-ml-form-modal-foot .wrp-ml-submit-btn{min-height:40px;font-size:13px;padding:8px 18px;}
      .wrp-ml-form-modal-foot .wrp-ml-reset-btn{min-height:40px;font-size:11px;padding:8px 14px;}
      .wrp-ml-form-modal-cancel{min-height:40px;padding:8px 14px;font-size:11px;}
    }
    body.wrp-ml-form-modal-lock{overflow:hidden;}
    /* form-modal open 中の submit-row は sticky footer に置換済なので原本は隠す。
       (v14 refactor で旧 wrp-ml-submit-row は DOM から撤去、 CSS は防御的に残す) */
    .wrp-ml-form-modal .wrp-ml-submit-row{display:none;}

    /* ============================================================
       Picker landscape — 2026-08-11 refactor (mobile landscape only)
       ============================================================
       旧: landscape (mobile + PC) で picker-sheet を 2-col grid split
       (左 col: head + filter + body / 右 col: role + actions + foot) で
       viewport 内に全 element を詰め込む。
       新 (feedback「ランドスケープで枠の高さを固定して CTA や情報を表示するのは
       限界を感じる」/「ランドスケープ以外に影響出ないように設計して」/追加
       feedback「PC 版に影響出てる」): **mobile landscape のみ** Option B
       (fullscreen overlay 維持 + 内部自然 flow + sticky 全廃止 + overlay
       scroll に委任) に切替。 grid split / 高固定は撤廃、 head → filters →
       body → rolefoot → actions → foot の自然縦 flow で sheet が伸び、
       viewport 超過分は overlay 自身が scroll する。 集約 mobile landscape
       override block は本 file 末尾を参照。 PC (>=920px、 portrait / landscape
       両方) は c83f6b448 baseline (fullscreen + internal body scroll) を継承 —
       PC widescreen は縦幅制約が緩いので natural-flow refactor 不要、 従来の
       flex column + 内部 body scroll pattern で十分。 role card 2-col compact +
       confirm CTA compact は mobile landscape 用 visual 圧縮として維持 (下記
       集約 block 内)。
    ============================================================ */

    /* ============================================================
       v16 (2026-08-01): Mobile portrait bottom-nav offset for ALL modals。
       2026-08-11: 全 modal fullscreen 統一で 4 modal とも overlay padding:0
       + sheet 100vw/100dvh 化 (下ナビは modal open 中 body class で hide)。
       Mobile portrait 用 svh fallback は「URL bar が動的に高変動する
       Android Chrome / iOS Safari」 の場面で primary 単位を svh に固定して
       CTA (Copy/Save/Delete/決定) が clip されない安全策のみ残す。
    ============================================================ */
    @media (max-width:919px) and (orientation:portrait) and (max-width:499px){
      .wrp-ml-ai-modal-sheet,
      .wrp-ml-detail-modal-sheet,
      .wrp-ml-form-modal-sheet,
      .wrp-ml-picker-sheet{
        height:100vh;
        height:100dvh;
        height:100svh;
        max-height:none;
      }
    }

    /* ============================================================
       v75 (2026-08-11) 4 modal iframe → 親 DOM inline refactor に伴う CSS 移行。
       旧 template#wrp-ml-{form,picker,ai,detail}-frame-css の中身のうち、
       (a) iframe root scroller / body reset 系は破棄
       (b) landscape 系 (旧 html.is-landscape) は `@media (orientation:landscape)` +
           該当 modal scope に変換
       (c) desktop 系 (旧 html.is-desktop) は `@media (min-width:920px)` +
           該当 modal scope に変換
       (d) sidesheet 系 (旧 html.is-sidesheet) は
           `@media (min-width:920px) and (orientation:landscape)` に変換
    ============================================================ */

    /* ---- Detail modal body (旧 wrp-ml-detail-frame-css inline 移行) ---- */
    .wrp-ml-detail-modal-body{padding:4px 2px 8px;background:transparent;color:#eafff3;font-family:'Noto Sans JP',sans-serif;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;overscroll-behavior:contain;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
    /* v51 (2026-08-02): 味方 + 敵 team block を 2-col grid で 1 行に (PC/landscape)、
       mobile portrait は縦積み。 */
    .wrp-ml-detail-teams-row{display:flex;flex-direction:column;gap:12px;}
    @media (min-width:920px),(orientation:landscape){.wrp-ml-detail-teams-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}}
    .wrp-ml-detail-block{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid #1c3a28;border-radius:8px;background:rgba(5,12,8,.5);}
    .wrp-ml-detail-block-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:#9fe0ba;text-transform:uppercase;}
    .wrp-ml-detail-team-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .wrp-ml-detail-champ-icon{display:inline-block;width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(circle,#0c3c26,#061510);border:1.5px solid #2c5a3f;}
    .wrp-ml-detail-champ-icon.is-enemy{border-color:#7a2a2a;background:radial-gradient(circle,#3a1010,#0a0303);}
    .wrp-ml-detail-champ-icon.is-empty{border-style:dashed;border-color:rgba(159,233,192,.28);background:transparent;}
    .wrp-ml-detail-champ-icon img{width:100%;height:100%;object-fit:cover;display:block;}
    .wrp-ml-detail-kda-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#bdd6c6;}
    .wrp-ml-detail-kda-num{font-family:'Orbitron',sans-serif;font-weight:700;font-size:18px;color:#eafff3;letter-spacing:.02em;line-height:1;}
    .wrp-ml-detail-teamscore-num{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;color:#eafff3;letter-spacing:.02em;line-height:1;}
    .wrp-ml-detail-chip{padding:3px 9px;border-radius:12px;border:1px solid rgba(159,233,192,.28);font-family:'JetBrains Mono',monospace;font-size:11px;color:#bdd6c6;letter-spacing:.02em;line-height:1.3;flex:none;}
    .wrp-ml-detail-chip--ad{border-color:rgba(255,185,138,.55);color:#ffb98a;}
    .wrp-ml-detail-chip--ap{border-color:rgba(168,184,255,.55);color:#a8b8ff;}
    .wrp-ml-detail-chip--hy{border-color:rgba(255,202,255,.55);color:#ffcaff;}
    .wrp-ml-detail-mini-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;}
    .wrp-ml-detail-mini-cell{display:flex;flex-direction:column;align-items:center;gap:3px;width:46px;flex:none;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-detail-mini-cell{width:52px;}}
    .wrp-ml-detail-mini-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:7px;overflow:hidden;border:1px solid #2c5a3f;background:rgba(5,12,8,.7);flex:none;}
    .wrp-ml-detail-mini-cell .wrp-ml-detail-mini-icon{width:44px;height:44px;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-detail-mini-cell .wrp-ml-detail-mini-icon{width:48px;height:48px;}}
    .wrp-ml-detail-mini-icon.is-circle{border-radius:50%;}
    .wrp-ml-detail-mini-icon img{width:100%;height:100%;object-fit:contain;display:block;padding:2px;}
    .wrp-ml-detail-mini-name{font-family:'Noto Sans JP',sans-serif;font-size:10px;color:#bdd6c6;text-align:center;line-height:1.25;letter-spacing:.01em;word-break:break-word;max-width:100%;}
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-ml-detail-mini-name{font-size:11px;}}
    .wrp-ml-detail-notes{font-family:'Noto Sans JP',sans-serif;font-size:12px;color:#bdd6c6;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
    .wrp-ml-detail-patch{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(159,233,192,.55);letter-spacing:.02em;}
    .wrp-ml-detail-empty{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(159,233,192,.4);letter-spacing:.02em;}

    /* ---- Form modal body landscape 圧縮 (旧 wrp-ml-form-frame-css inline 移行) ----
       v42 landscape: 見出し / 説明文を極力減らして body 縦幅を稼ぐ。
       scope は .wrp-ml-form-modal-body 内に限定 (list section / 他 modal に leak させない)。 */
    @media (orientation:landscape){
      .wrp-ml-form-modal-body .scope-static-section{padding:8px 10px 6px !important;margin-bottom:6px !important;}
      .wrp-ml-form-modal-body .wrp-ml-block{padding:5px 8px 6px !important;gap:3px !important;}
      .wrp-ml-form-modal-body .wrp-ml-block-h{gap:4px !important;margin-bottom:2px !important;}
      .wrp-ml-form-modal-body .wrp-ml-block-h-title{font-size:12px !important;}
      .wrp-ml-form-modal-body .wrp-ml-req-badge,
      .wrp-ml-form-modal-body .wrp-ml-opt-badge{padding:0 4px !important;font-size:9px !important;}
      .wrp-ml-form-modal-body .wrp-ml-self-caption,
      .wrp-ml-form-modal-body .wrp-ml-hint,
      .wrp-ml-form-modal-body .wrp-ml-autofill-hint{display:none !important;}
    }
    /* v42 submit validation shake (form scope 内で発火) */
    .wrp-ml-form-modal-body .wrp-ml-block.is-invalid{border-color:#ff6b6b !important;box-shadow:0 0 0 2px rgba(255,107,107,.35), 0 0 12px -4px rgba(255,107,107,.6) !important;animation:wrp-ml-invalid-shake .4s ease-out;}
    @keyframes wrp-ml-invalid-shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
    /* v45 frame-actions: landscape のみ表示 (portrait/desktop は親 foot が primary、
       @media (orientation:landscape) の .wrp-ml-form-modal-foot{display:none !important;}
       と対で動く)。 */
    /* 2026-08-23 (feedback「試合ログの登録済み試合のCTA3つがPCでボタン下線が見切れている」):
       padding-bottom 4px は 3 CTA (キャンセル / リセット / 編集を保存) の
       border-bottom が form-body の 18px bottom padding と視覚的に接触して
       「下線見切れ」 と 感知 される。 padding-bottom を 12px に上げて button
       border の 下部 breathing 確保。 padding-top も 12 で対称 layout に。 */
    .wrp-ml-form-frame-actions{display:none;flex-wrap:wrap;gap:10px;padding:12px 16px;margin-top:8px;border-top:1px dashed rgba(159,233,192,.16);align-items:center;}
    @media (orientation:landscape){
      .wrp-ml-form-frame-actions{display:flex;}
      .wrp-ml-form-frame-actions .wrp-ml-submit-btn{flex:1 1 auto;min-height:44px;font-size:13px;padding:8px 16px;}
      .wrp-ml-form-frame-actions .wrp-ml-form-modal-cancel{flex:0 0 auto;min-height:44px;font-size:11px;padding:8px 14px;}
      .wrp-ml-form-frame-actions .wrp-ml-reset-btn{flex:0 0 auto;min-height:44px;font-size:11px;padding:8px 14px;}
    }

    /* ---- Picker filters + rolefoot (旧 wrp-ml-picker-frame-css inline 移行) ---- */
    .wrp-ml-picker-filters{flex:none;display:flex;flex-direction:column;gap:10px;padding:10px 16px 12px;border-bottom:1px solid #18301f;background:rgba(5,12,8,.55);}
    .wrp-ml-picker-rolefoot{flex:none;padding:12px 14px 14px;border-top:1px solid #18301f;background:linear-gradient(180deg,rgba(5,12,8,.6),rgba(5,12,8,.88));display:flex;flex-direction:column;gap:10px;}
    .wrp-ml-picker-rolefoot[hidden]{display:none;}
    /* 2026-08-20 v2: PC で 各 section の 内部 padding は 元の値そのままで OK。
       sheet の 外側 padding (calc((100vw - 1200px)/2)) で content column 化 済。 */
    /* v53 landscape tile count: 全幅 landscape (mobile + PC) は tile を小さく高密度に。
       champion 10 col / rune・item・spell 8 col。 sidesheet はさらに 1 段粗く (下 rule)。 */
    @media (orientation:landscape){
      .wrp-ml-picker .wrp-ml-picker-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;}
      .wrp-ml-picker.is-rune .wrp-ml-picker-grid,
      .wrp-ml-picker.is-item .wrp-ml-picker-grid,
      .wrp-ml-picker.is-spell .wrp-ml-picker-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;}
      .wrp-ml-picker .wrp-ml-pick-tile-name{font-size:10px;}
    }
    /* 2026-08-11 (feedback「全体登録画面もチャンピオン選択枠が大きい」): 旧 rule は
       side-sheet (幅 min(420px,42vw)) 時代の 8/6 col。 fullscreen 化で col-a 幅が
       ~1200px (2-col split の左) に拡大したので tile が 150px 超と過大に。 fullscreen
       前提の 12/10 col に上げて tile 高密度化 + サイズ縮小。 base landscape rule
       (10/8 col) より更に高密度 = PC の広い横幅を活かす。 */
    @media (min-width:920px) and (orientation:landscape){
      .wrp-ml-picker .wrp-ml-picker-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;}
      /* 2026-08-11 (feedback「試合ログのアイテム、 ルーン、 スペルのピッカー内
         のサムネイルももう少し小さくていい」): rune/item/spell を 10 → 12 col
         に密度 up (tile ~110 → ~90px)。 champion は 12 col 維持 (顔識別性)。 */
      .wrp-ml-picker.is-rune .wrp-ml-picker-grid,
      .wrp-ml-picker.is-item .wrp-ml-picker-grid,
      .wrp-ml-picker.is-spell .wrp-ml-picker-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;}
    }

    /* ---- AI modal body-wrap (旧 wrp-ml-ai-frame-css inline 移行) ----
       旧 iframe body の flex/grid layout を .wrp-ml-ai-modal-body-wrap に移設。
       Base (portrait + PC landscape 継承): 縦 flex column、 scope + pickerlist +
       textarea を flex fixed で詰め込む pattern。 landscape 用 2-col grid split
       (旧 v46 の pickerlist 40% + textarea 60%) は 2026-08-11 refactor で撤廃。
       **Mobile landscape** は本 file 末尾集約 override block で自然縦 flow +
       overlay scroll pattern に切替 (「ランドスケープで枠の高さを固定して CTA や
       情報を表示するのは限界を感じる」/「ランドスケープ以外に影響出ないように
       設計して」/追加「PC 版に影響出てる」)。 PC (>=920px) は base flex column
       pattern を継承 (縦幅制約が緩いので natural-flow refactor 不要)。 */
    .wrp-ml-ai-modal-body-wrap{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px;padding:2px 2px 0;box-sizing:border-box;overscroll-behavior:contain;overflow:hidden;}

    /* ============================================================
       Mobile landscape modal 自然 flow override (2026-08-11)
       Scope: @media (max-width:919px) and (orientation:landscape) のみ
       ============================================================
       全 4 modal (form / picker / AI / detail) を **mobile landscape のみ**:
       - overlay: overflow-y:auto (sheet 100dvh 超過分は overlay 内 scroll)
       - sheet: display:block + min-height:100dvh + height:auto + max-height:none
                + overflow:visible (自然 flow で伸び、 背景 dim は 100dvh 全域保証)
       - 内部 container (head / body / foot / rolefoot / actions / body-wrap):
                flex/grid fixed sizing 撤廃、 通常 block flow
       - AI pickerlist: max-height 撤廃 (natural flow で全 row render)
       - AI textarea: flex:1 撤廃、 min-height:220px で最低高保証
       - Picker head: 旧 landscape absolute (close 単独浮遊) 撤廃、 base の
                通常 flex row 継承
       - AI body-wrap: 旧 landscape 2-col grid split 撤廃、 自然縦 flow
       - Picker sheet: 旧 landscape 2-col grid (left col: filter+body / right
                col: role+actions+foot) 撤廃、 自然縦 flow

       Portrait (< 920px) は base rule (sheet 100dvh + body flex:1 + 内部 scroll
       pattern) 完全維持。 PC (>= 920px、 portrait / landscape 両方) も base rule
       (前 refactor c83f6b448 の fullscreen + max-width:1200 padding calc) を
       完全維持 — 2026-08-11 追加 feedback「PC 版に影響出てる」対応で scope を
       mobile landscape only に narrow。 PC widescreen は元々縦幅制約が緩いので
       natural-flow refactor 不要、 従来の flex column + 内部 body scroll pattern
       で十分。
    ============================================================ */
    /* 2026-08-20 v2 (user 「タブレットのランドスケープ表示で吸着が続いている」):
       landscape の 幅制約 (max-width:919px) を撤廃、 全 landscape (mobile /
       タブレット / PC landscape 全部) + タブレット縦 (portrait ≥500 + ≥800h)
       を natural-flow scope に。 sheet 内部 scroll (吸着 head/foot) を撤廃、
       overlay 全体 scroll に委任。 mobile portrait <500px のみ base rule
       (sheet 100dvh + body 内部 scroll) を継承。 */
    @media (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      /* Overlays: sheet 超過分を overlay 内 scroll に委任。 AI import modal は
         base rule (sheet 100vh + body internal overflow-y:auto + textarea internal
         scroll + actions pinned bottom) を維持 — user 「テキスト入力枠もスクロール
         するようになれば解決」 の判断で、 textarea 自体を scroll container として
         使う pattern に整合。 2026-08-22 で natural-flow inclusion を revert。 */
      .wrp-ml-form-modal,
      .wrp-ml-picker,
      .wrp-ml-ai-modal,
      .wrp-ml-detail-modal{
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
      }
      /* 2026-08-22 (user 「試合ログの AI 相談モーダルも背景バツっと切れてる」):
         overlay の base rule `display:flex; align-items:stretch` で sheet が overlay
         100vh に強制 stretch されて sheet 背景 gradient が 100vh で 途切れ、 grid
         content が 100vh 超えても sheet box が 100vh のまま、 overlay scroll 底に
         semi-transparent overlay bg (rgba 3,8,5,.72) だけ残る = 「バツっと黒くなる」。
         AI modal は display:block に切替、 sheet が block flow で content 分伸長、
         背景 gradient が overlay scroll 全域を cover (matchlog AI 抽出 / 取込 +
         scouter AI 相談 と同 root cause 対策)。 */
      .wrp-ml-ai-modal{
        display:block !important;
      }
      /* Sheets: 自然 flow + 100dvh min で背景 dim 全域保証 (AI modal は下記
         で display:grid に上書き。 min-height/height/max-height/overflow は
         下記の 2-col grid rule と一致するので base 集約と互換) */
      .wrp-ml-form-modal-sheet,
      .wrp-ml-picker-sheet,
      .wrp-ml-ai-modal-sheet,
      .wrp-ml-detail-modal-sheet{
        display:block !important;
        min-height:100dvh !important;
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
      }
      /* 内部 container: 全 flex fixed 撤廃 + 内部 scroll 撤廃 (overlay に委任)
         AI modal 系 (head / body-wrap / actions / note / scope) は除外 —
         下記の 2-col grid rule で明示的に grid child として positioning。 */
      .wrp-ml-form-modal-head,
      .wrp-ml-form-modal-body,
      .wrp-ml-form-modal-foot,
      .wrp-ml-picker-head,
      .wrp-ml-picker-filters,
      .wrp-ml-picker-body,
      .wrp-ml-picker-rolefoot,
      .wrp-ml-picker-actions,
      .wrp-ml-picker-foot,
      .wrp-ml-detail-modal-head,
      .wrp-ml-detail-modal-body,
      .wrp-ml-detail-modal-actions{
        flex:none !important;
        min-height:auto !important;
        max-height:none !important;
        overflow:visible !important;
      }
      /* Form 自身 (sheet の直下 child) も natural flow */
      .wrp-ml-form-modal .wrp-ml-form{
        display:block !important;
        flex:none !important;
        min-height:auto !important;
      }
      /* Picker head: 旧 landscape absolute 撤廃、 base の flex row を継承 */
      .wrp-ml-picker-head{
        position:static !important;
        z-index:auto !important;
      }
      .wrp-ml-picker-title-row > div{display:block !important;}
      /* ============================================================
         AI modal 2-col grid layout (2026-08-11 iterate、 landscape のみ)
         ============================================================
         Feedback「試合ログの AI 相談画面、 縦幅 FV に収まるような工夫になっ
         ているからその考えはもう捨ててもらって、 縦幅ちゃんと確保して見やす
         いことを重要視して」。 前 iteration の sheet 100dvh 固定 + grid で
         全 fit approach を廃止、 sheet は縦拡張 + overlay scroll に委任、
         2-col grid は widescreen 幅活用のためだけに使う (縦は自然 flow)。

         landscape 用 layout:
           +--------------+---------------------+
           | Head (title + close)               |  ← row 1, span 2
           +--------------+---------------------+
           | scope +      | textarea (auto-size |  ← row 2, 左:4fr / 右:6fr
           | pickerlist   |  で content 全高)     |
           | (base pickerlist                   |
           |  max-height:200 |                  |
           |  で内部 scroll                     |
           |  例外扱い)   +---------------------+
           |              | note                |  ← row 3, 右 col
           |              +---------------------+
           |              | actions (Copy 右底)  |  ← row 4, 右 col
           +--------------+---------------------+

         Sheet が height:auto + min-height:100dvh + overflow:visible で
         content 分伸縮、 viewport 超過分は overlay 側で scroll。 textarea
         は auto-size (JS scrollHeight → height) で content 全高 render
         (内部 scroll なし)。 pickerlist は base rule の max-height:200 を
         継承して内部 scroll (例外扱い: user 前 feedback「表示試合数気になる」
         対応)。 CTA (Copy prompt) は grid row 4 で右 col 底に配置 — sheet
         縦長で overlay scroll しないと reach しない case は許容 (user 明示
         「見やすさ重要視、 CTA 常時可視は諦める」)。

         body-wrap は display:contents で phantom 化 → 内側の scope +
         textarea が sheet 直接の grid child として positioning (DOM 変更
         なし)。 note + actions は元々 sheet 直接 child なのでそのまま
         grid child として使える。

         font/spacing は base (portrait) 継承 (前 iteration の landscape 用
         圧縮 override は既に撤廃済、 見やすさ優先)。

         portrait / PC (>= 920px) は base rule 完全維持 (触らない)。 */
      .wrp-ml-ai-modal-sheet{
        display:grid !important;
        grid-template-columns:minmax(0,4fr) minmax(0,6fr) !important;
        grid-auto-rows:auto !important;
        gap:8px 12px !important;
        /* height / min-height / max-height / overflow は base 集約 rule
           (line 1577-1585) の display:block 系と一致 — display だけ grid
           に上書き。 */
      }
      /* 2026-08-22: overlay scroll 底 で Copy CTA の box-shadow / border が
         viewport edge に クリップされる 「下線が少し見切れる」 問題対応。 sheet
         の padding-bottom や actions の margin-bottom では overlay scrollHeight が
         伸びなかったので、 sheet 直下 の疑似 spacer element として ::after を追加
         (grid 最終 row の後に 20px の 空 area を確保)。 */
      .wrp-ml-ai-modal-sheet::after{
        content:'';
        display:block;
        grid-column:1 / span 2;
        height:20px;
      }
      .wrp-ml-ai-modal-head{
        grid-column:1 / span 2;
        grid-row:1;
        margin-bottom:0 !important;
        flex:none !important;
      }
      /* body-wrap を phantom 化 — 内側の scope + textarea が sheet の grid
         child として positioning される。 flex/padding/overflow は base の
         (line 1538) のまま、 display のみ contents に上書き。 */
      .wrp-ml-ai-modal-body-wrap{
        display:contents !important;
      }
      /* 左 col row 2: scope container (radio + pickerlist-actions +
         pickerlist を natural block flow で内包)。 pickerlist は base rule
         (line 1210) max-height:200 継承で内部 scroll 例外扱い。 scope の
         border/padding/background 視覚 container はそのまま維持。 */
      .wrp-ml-ai-scope{
        grid-column:1;
        grid-row:2;
        margin-bottom:0 !important;
        align-self:start;
      }
      /* 右 col row 2: textarea は auto-size (JS scrollHeight → height)
         効かせて content 全高 render。 height を !important 化しないので
         JS 側の inline height style が勝つ (base flex:1 の flex 制約は
         flex:none で外す)。 min-height 300 で下限保証。 */
      .wrp-ml-ai-modal-textarea{
        grid-column:2;
        grid-row:2;
        min-height:300px !important;
        max-height:none !important;
        overflow:visible !important;
        flex:none !important;
        /* 2026-08-11 (feedback「プロンプト枠をスワイプしても移動しない」):
           textarea は default で touch を text select / cursor に消化して
           overlay scroll に propagate しない。 overflow:visible で内部 scroll
           も無い = swipe が完全消滅。 pointer-events:none で textarea 上の
           touch を overlay に pass、 sheet 縦拡張の scroll navigate 可能に。
           手動 select copy は不可になるが Copy prompt button が primary UX で
           cover (readonly でも copy 経路は button + JS clipboard)。 */
        pointer-events:none !important;
      }
      /* 右 col row 3-4: note + actions は右 col の下段。 sheet 縦長時、
         overlay scroll しないと reach しない case もあり (user 判断)。 */
      .wrp-ml-ai-modal-note{
        grid-column:2;
        grid-row:3;
        margin:0 !important;
        flex:none !important;
      }
      .wrp-ml-ai-modal-actions{
        grid-column:2;
        grid-row:4;
        margin:0 !important;
      }
      /* Picker: role card は landscape 用 compact 2-col wrap を維持 (visual only) */
      .wrp-ml-picker-role-row{grid-template-columns:1fr 1fr !important;gap:5px !important;}
      .wrp-ml-picker-role-card{min-height:34px !important;padding:4px 3px !important;font-size:10px !important;}
      /* Form modal foot は landscape で hide 継続 — form 末尾 frame-actions が代替
         (base rule line ~1344 の display:none !important 相当を継承)。 集約 rule で
         flex/min-height 上書きしても display:none は特異性で残る。 */

    }

    /* ================================================================
       2026-08-22 (user 「ランドスケープの AI データ抽出 / AI 回答入力 モーダル
       を ビルド編集の AI 相談 と同様に 2-col 化、 かつ吸着させないで」):
       AI extract + AI import modal も **mobile landscape** で natural-flow 2-col
       grid に統合 (scouter AI 相談 modal pattern と同型)。
       user 追加 feedback 「PC 版にまで影響してる。 ランドスケープはスマホランド
       スケープと認識して」 で scope を max-width:919px に narrow。
       Layout: head (span 2) / textarea (LEFT wide, span 2-3 rows) /
               intro (RIGHT row 2) / [banner (RIGHT row 3)] / actions (RIGHT bottom pin)
       Overlay overflow-y:auto で sheet 縦拡張分を委任。 sheet は
       display:grid + min-height:100dvh + overflow:visible (自然 flow)。
       AI extract textarea: read-only + Copy button UX なので pointer-events:none
         で swipe pass-through (scouter と同じ挙動)。
       AI import textarea: paste 用に pointer-events はデフォルト auto 保持。
       PC 版 は base rule (sheet 100vh + body 内部 overflow-y:auto + textarea flex:1 auto +
       actions pinned bottom) を そのまま 維持 = PC は 縦幅制約 が 緩いので natural-flow
       refactor 不要、 textarea も full 高さ 活用。
    ================================================================ */
    @media (max-width:919px) and (orientation:landscape){
      /* 2026-08-22 (user 「背景が途中からバツっと黒くなるの止めて」):
         overlay の base rule は `display:flex; align-items:stretch` で sheet を
         overlay 高さ (100vh) に強制 stretch していた → sheet 内 grid content が
         100vh 超えても sheet の box は 100vh のまま で、 sheet 背景 gradient
         が 100vh で 途切れ、 下 は overlay の rgba(3,8,5,.72) だけ = 「バツっと
         黒くなる」 症状。 overlay を display:block に切替えて sheet を normal
         block flow で 自身の grid content 分 伸長させる。 sheet 背景 gradient
         が overlay scroll 全域を cover。 */
      .wrp-ml-ai-extract-modal,
      .wrp-ml-ai-import-modal{
        display:block !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
      }
      .wrp-ml-ai-extract-modal-sheet,
      .wrp-ml-ai-import-modal-sheet{
        display:grid !important;
        grid-template-columns:minmax(0,6fr) minmax(0,4fr) !important;
        grid-auto-rows:auto !important;
        gap:8px 12px !important;
        min-height:100dvh !important;
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
      }
      /* Copy CTA / Import CTA 下線の viewport edge クリップ対策 spacer */
      .wrp-ml-ai-extract-modal-sheet::after,
      .wrp-ml-ai-import-modal-sheet::after{
        content:'';
        display:block;
        grid-column:1 / span 2;
        height:20px;
      }
      /* Head span 2 */
      .wrp-ml-ai-extract-modal-head,
      .wrp-ml-ai-import-modal-head{
        grid-column:1 / span 2 !important;
        grid-row:1 !important;
        margin-bottom:0 !important;
        flex:none !important;
      }
      /* Body を phantom 化 → 内側 intro / textarea / [banner] が sheet 直下 grid child に */
      .wrp-ml-ai-extract-modal-body,
      .wrp-ml-ai-import-modal-body{
        display:contents !important;
      }
      /* textarea LEFT wide col、 row 2 のみ (右 col の intro と 同 row)。
         2026-08-22 (user 「左枠はスクロールしない縦幅を確保が正だった。 他 AI
         モーダルと合わせて高さ確保して」 + 「左枠の高さを最初からもっと確保して」):
         内部 scroll を撤廃 (overflow:visible)、 min-height を calc(100dvh - 100px) に
         引き上げて 起動時から full viewport 近い 縦幅 を 確保。 内容 overflow は
         overlay scroll に委任 (scouter AI 相談 pattern と 同型)。
         旧: grid-row:2/span 3 で 縦 3 rows fill、 右 col 3 items (intro/note/actions)
             と 均等分布 → 右 col item 間 に dead space が発生、 note が 中央 宙ぶらり
             な 見た目 (「配置場所に違和感」)。
         新: grid-row:2 の 1 行 のみ span、 右 col の intro (row 2) と 同 row で height
             align。 note (row 3) と actions (row 4) は 右 col の 底 に 密着して pack。
         **CRITICAL** (user 「新規登録と登録済みの試合をタップできない」):
         pointer-events:auto は modal 閉時に textarea が viewport 中央の click 対象
         になって 背景 CTA を 全遮蔽 する regression を招く。 `.is-open` scope
         必須 (前 iteration 51d018216e で 同 pattern の regression 発生済)。 */
      .wrp-ml-ai-extract-modal-textarea,
      .wrp-ml-ai-import-modal-textarea{
        grid-column:1 !important;
        grid-row:2 / span 3 !important;
        min-height:calc(100dvh - 100px) !important;
        max-height:none !important;
        overflow:visible !important;
        flex:none !important;
      }
      /* Modal 開時 のみ textarea を click 対象化 (閉時は inherit pe:none で 背景 click 通過) */
      .wrp-ml-ai-extract-modal.is-open .wrp-ml-ai-extract-modal-textarea,
      .wrp-ml-ai-import-modal.is-open .wrp-ml-ai-import-modal-textarea{
        pointer-events:auto !important;
      }
      /* Intro RIGHT col row 2 (top) */
      .wrp-ml-ai-extract-intro,
      .wrp-ml-ai-import-intro{
        grid-column:2 !important;
        grid-row:2 !important;
        margin:0 !important;
        align-self:start !important;
      }
      /* AI extract note: 2026-08-22 (user 「プロンプトには個人情報を含みませんの
         配置場所に違和感ありすぎる」) — actions の 直上 に 密着 pack (中央
         宙ぶらり 解消)。 grid-row:3 で 単独 row、 align-self:end で row 底 に。
         gap 8px で actions と 近接。 */
      .wrp-ml-ai-extract-modal-note{
        grid-column:2 !important;
        grid-row:3 !important;
        margin:0 !important;
        flex:none !important;
        align-self:end !important;
      }
      /* AI import banner (エラー時のみ表示): actions の 直上 に 密着。 */
      .wrp-ml-ai-import-modal-banner{
        grid-column:2 !important;
        grid-row:3 !important;
        margin:0 !important;
        flex:none !important;
        align-self:end !important;
      }
      /* Actions RIGHT col row 4 (bottom pin) */
      .wrp-ml-ai-extract-modal-actions,
      .wrp-ml-ai-import-modal-actions{
        grid-column:2 !important;
        grid-row:4 !important;
        margin:0 !important;
        align-self:end !important;
        flex:none !important;
      }
    }

    /* 2026-08-22 (user 「PC 版の UI が変わっているんだけど。 カラム分けを勝手に
       変えないで」): PC AI 相談 の 2-col grid layout はそのまま維持。 Copy CTA
       見切れは grid row 4 の位置 issue だが、 layout 変更ではなく overlay scroll
       で reach 可能 (user 判断で 「見やすさ重要視、 CTA 常時可視は諦める」)。 */

    /* ============================================================
       新規登録フォームの簡素化 (2026-09-14)
       常時表示は 日時・パッチ / 使用チャンピオン / 勝敗 / ひとことメモ / 「詳細を追加」。
       それ以外は <details data-wrp-ml-more> に畳む。 値は試作 (Fable) の mock.css から。
    ============================================================ */
    /* [hidden] を .wrp-ml-block{display:flex} より強くする (PC で空の 「個別実績」 が 36px 見えていた) */
    .wrp-ml-block[hidden]{display:none !important;}

    /* 日時 / パッチ: スマホでも 1 行 */
    .wrp-ml-meta-bar--compact{flex-wrap:nowrap;padding:6px 12px;gap:10px;align-items:center;}
    .wrp-ml-meta-bar--compact .wrp-ml-meta-cell{flex-direction:row;align-items:center;gap:8px;min-width:0;flex:0 0 auto;}
    .wrp-ml-meta-bar--compact .wrp-ml-meta-cell:first-child{flex:1 1 auto;}
    .wrp-ml-meta-bar--compact .wrp-ml-meta-lbl{flex:none;letter-spacing:.04em;}
    .wrp-ml-meta-bar--compact .wrp-ml-meta-date{min-height:34px;font-size:13px;padding:4px 8px;flex:1 1 auto;width:auto;min-width:0;}
    .wrp-ml-meta-bar--compact .wrp-ml-meta-val{font-size:13px;}

    /* 使用チャンピオン: K/D/A を外した後の行 + レーンだけを選ぶ 5 択 */
    .wrp-ml-block--self .wrp-ml-self-row{gap:14px;}
    .wrp-ml-self-role-chip[role=button]{cursor:pointer;}
    .wrp-ml-self-role-chip[role=button]:hover{border-color:#8effb8;color:#eafff3;}
    .wrp-ml-self-role-chip[role=button]:focus-visible{outline:2px solid #8effb8;outline-offset:2px;}
    .wrp-ml-self-role-pop{display:flex;flex-wrap:wrap;gap:6px;}
    .wrp-ml-self-role-pop[hidden]{display:none;}
    .wrp-ml-self-role-opt{min-height:34px;padding:4px 12px;border:1px solid #2c5a3f;border-radius:16px;background:rgba(5,12,8,.6);color:#bdd6c6;font-family:'Noto Sans JP',sans-serif;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:all .12s;-webkit-tap-highlight-color:rgba(125,255,176,.18);}
    .wrp-ml-self-role-opt:hover{border-color:#8effb8;color:#eafff3;}
    .wrp-ml-self-role-opt.is-active{border-color:#8effb8;background:rgba(125,255,176,.14);color:#8effb8;font-weight:700;}
    .wrp-ml-self-role-opt--none{border-style:dashed;color:rgba(159,233,192,.72);}

    /* ひとことメモ */
    .wrp-ml-block--memo .wrp-ml-notes-input{min-height:68px;}

    /* 詳細を追加 (disclosure) */
    .wrp-ml-form-modal-body .wrp-ml-more{border-color:#2c5a3f;background:rgba(10,28,18,.5);}
    .wrp-ml-more-summary{padding:13px 14px;font-size:14px;color:#bdffd6;min-height:48px;box-sizing:border-box;}
    .wrp-ml-more-summary .wrp-ml-detail-accordion-arrow{width:11px;height:11px;}
    .wrp-ml-more[open] .wrp-ml-more-lbl-closed{display:none;}
    .wrp-ml-more:not([open]) .wrp-ml-more-lbl-open{display:none;}
    .wrp-ml-more[open] .wrp-ml-more-hint{display:none;}
    .wrp-ml-more-count{margin-left:auto;padding:2px 8px;border-radius:10px;border:1px solid #8effb8;background:rgba(125,255,176,.14);color:#8effb8;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.04em;white-space:nowrap;}
    .wrp-ml-more-count[hidden]{display:none;}
    .wrp-ml-more-hint + .wrp-ml-more-count:not([hidden]){margin-left:8px;}
    /* 入力済チップが出たらヒントは隠す (幅 360 での折返し防止) */
    .wrp-ml-more-summary:has(.wrp-ml-more-count:not([hidden])) .wrp-ml-more-hint{display:none;}
    .wrp-ml-more-body{padding:14px 12px 14px;border-top:1px solid rgba(159,233,192,.14);display:flex;flex-direction:column;gap:16px;}
    /* 開いた時は外枠を消し、 中の block を最上位 block と同じ幅で流す (二重枠を避ける) */
    .wrp-ml-form-modal-body .wrp-ml-more[open]{border-color:transparent;background:transparent;}
    .wrp-ml-more[open] > .wrp-ml-more-summary{border:1px solid #2c5a3f;border-radius:8px;background:rgba(10,28,18,.5);}
    .wrp-ml-more[open] .wrp-ml-more-body{padding:16px 0 0;border-top:0;}

    /* KDA / 合計キル数 block */
    .wrp-ml-block--kda .wrp-ml-kda-inline{margin-left:0;gap:18px;}
    .wrp-ml-block--kda .wrp-ml-teamkills-optnote{display:none;}
    /* 旧 「詳細」 アコーディオンの中身を通常 block に流し込む */
    .wrp-ml-block--extras .wrp-ml-detail-accordion-body{padding:0;border-top:0;}
    .wrp-ml-block--extras .wrp-ml-detail-accordion-subhead:first-child{margin-top:0;}

    /* PC / 大きい縦画面: 詳細の中は従来通り 2 列 */
    @media (min-width:920px), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .wrp-ml-more-summary{padding:9px 12px;font-size:13px;min-height:40px;}
      .wrp-ml-more-body{padding:10px 10px 10px;gap:8px;}
      .wrp-ml-more[open] .wrp-ml-more-body{padding:8px 0 0;}
      .wrp-ml-block--memo .wrp-ml-notes-input{min-height:96px;}
      .wrp-ml-col-b .wrp-ml-block--memo{flex:1 1 auto;}
      .wrp-ml-col-b .wrp-ml-block--memo .wrp-ml-notes-input{height:100%;}
      .wrp-ml-meta-bar--compact .wrp-ml-meta-date{min-height:28px;font-size:12px;}
      .wrp-ml-block--kda .wrp-ml-kda-inline{gap:14px;}
      .wrp-ml-self-role-opt{min-height:28px;padding:2px 10px;font-size:11px;}
    }
    @media (orientation:landscape){
      .wrp-ml-more-summary{padding:9px 12px;font-size:13px;min-height:40px;}
      .wrp-ml-more-body{padding:10px 10px 10px;gap:8px;}
      .wrp-ml-more[open] .wrp-ml-more-body{padding:8px 0 0;}
    }

    /* ============================================================
       保存済み試合のチャンピオン絞り込み (2026-09-14)
       一覧と AI 相談プロンプトで共有する 1 つのコントロール。 スマホ縦でも 1 行。
    ============================================================ */
    .wrp-ml-champ-filter{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:10px;margin:0 0 10px;min-width:0;}
    .wrp-ml-champ-filter[hidden]{display:none;}
    .wrp-ml-champ-filter-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;max-width:62%;padding:4px 10px 4px 12px;border:1px solid #2c5a3f;border-radius:7px;background:rgba(5,12,8,.6);color:#eafff3;font-family:'Noto Sans JP',sans-serif;font-size:13px;cursor:pointer;transition:border-color .12s;flex:0 1 auto;min-width:0;}
    .wrp-ml-champ-filter-btn:hover,.wrp-ml-champ-filter-btn[aria-expanded="true"]{border-color:#8effb8;}
    .wrp-ml-champ-filter-btn:focus-visible{outline:2px solid #8effb8;outline-offset:2px;}
    .wrp-ml-champ-filter-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;color:#9fe0ba;flex:none;text-transform:uppercase;}
    .wrp-ml-champ-filter-val{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;}
    .wrp-ml-champ-filter-caret{width:12px;height:12px;flex:none;color:#9fe0ba;}
    .wrp-ml-champ-filter-status{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
    .wrp-ml-champ-filter-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;overflow:hidden;flex:none;}
    .wrp-ml-champ-filter-icon img{width:100%;height:100%;object-fit:cover;display:block;}
    .wrp-ml-champ-filter-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;width:min(300px,100%);max-height:320px;overflow-y:auto;overscroll-behavior:contain;padding:4px;border:1px solid #3f8a63;border-radius:8px;background:#0a1c12;box-shadow:0 10px 24px -8px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:2px;}
    .wrp-ml-champ-filter-menu[hidden]{display:none;}
    .wrp-ml-champ-filter-opt{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;padding:4px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#eafff3;font-family:'Noto Sans JP',sans-serif;font-size:13px;text-align:left;cursor:pointer;}
    .wrp-ml-champ-filter-opt:hover{background:rgba(125,255,176,.08);}
    .wrp-ml-champ-filter-opt.is-active{border-color:#8effb8;background:rgba(125,255,176,.14);font-weight:700;}
    .wrp-ml-champ-filter-opt .wrp-ml-champ-filter-icon{width:28px;height:28px;}
    .wrp-ml-champ-filter-opt-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
    .wrp-ml-champ-filter-opt-n{font-family:'JetBrains Mono',monospace;font-size:11px;color:#9fe0ba;}
    /* AI 相談 modal 内の絞り込み。 メニューは JS が body 直下へ移して fixed 配置する
       (sheet の overflow:hidden + transform で切れるため)。 modal (z 110) より上。 */
    .wrp-ml-champ-filter--ai{margin:0;}
    .wrp-ml-champ-filter-menu--floating{position:fixed;top:auto;left:auto;z-index:130;}

    /* 2026-09-14: 「成績 / オブジェクト」 を PC / 横向きで 2 カラムの下に全幅配置したので、
       横幅を使って数値欄を詰める (スマホ縦は従来の 3 列 / 2 列のまま)。 */
    @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){
      .wrp-ml-block--extras .wrp-ml-detail-fields{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
    }
    /* 「成績 / オブジェクト」 内の 2 分割ラッパー。 左カラム幅に戻したので全画面で透過 (縦 1 列)。 */
    .wrp-ml-extras-col{display:contents;}

    /* 2026-09-14 (curator 指示): PC / 横向きは DOM の 2 カラム (左 = カテゴリ / ダメージ / フェーズ /
       成績、 右 = KDA / 味方 / 敵 / 装備 / 個別実績) で並べ、 スマホ縦はカラムが display:contents で
       .wrp-ml-more-body の flex 直下に並ぶので order で従来の表示順に戻す。 同じ値はカラム内の
       並びとしても矛盾しない (左 1,3,4,11 / 右 2,5-10)。 */
    .wrp-ml-more-grid .wrp-ml-block--category{order:1;}
    .wrp-ml-more-grid .wrp-ml-block--kda{order:2;}
    .wrp-ml-more-grid .wrp-ml-block--damage{order:3;}
    .wrp-ml-more-grid .wrp-ml-block--phase{order:4;}
    .wrp-ml-more-grid .wrp-ml-team-block-ally{order:5;}
    .wrp-ml-more-grid .wrp-ml-team-block-enemy{order:6;}
    .wrp-ml-more-grid .wrp-ml-block--item{order:7;}
    .wrp-ml-more-grid .wrp-ml-block--rune{order:8;}
    .wrp-ml-more-grid .wrp-ml-block--spell{order:9;}
    .wrp-ml-more-grid .wrp-ml-block--per-slot-notes{order:10;}
    .wrp-ml-more-grid .wrp-ml-block--extras{order:11;}