/* Scope OS palette tokens — 20 var 集約 (audit「hex 1,050 箸所 / 84 色 / CSS 変数 ゼロ」 対応)。 新規追加コードは var 参照で書き、 既存 hex は段階的に置換。 用途: - primary = LED / border / active state / button primary (main accent green) - glow = softer secondary green (rgba box-shadow / dim border) - cp-yellow = 戦闘力 CP big number (hero card / share) - cp-yellow-dim = 戦闘力 CP compact display (slot / compare / matchup) - orange-lock = corner brackets / VS / TARGET LOCKED accent - delta-neg / delta-pos = diff table +/− coloring - opp-* = matchup opponent (amber palette) - bg-card / bg-deep / bg-cell = 3 stops (dark → deep → radial center) - border / border-strong / hairline / hairline-dim = 4 borders - text / text-soft / text-muted = 3 body text tiers - ink-on-green = dark ink on green button */ :root{ --sc-green-primary:#8effb8; --sc-green-glow:#7dffb0; --sc-green-dim:#6cae89; --sc-green-faint:#5f9d7c; --sc-cp-yellow:#ffe14a; --sc-cp-yellow-dim:#ffd83a; --sc-orange-lock:#ff8a3d; --sc-delta-neg:#e67462; --sc-delta-pos:#8effb8; --sc-opp-accent:#ffd83a; --sc-opp-border:#4a3a1c; --sc-opp-bg-1:#301f0f; --sc-opp-bg-2:#160e06; --sc-bg-card:#0a1c12; --sc-bg-deep:#06160e; --sc-bg-cell:#13301f; --sc-border:#2c5a3f; --sc-border-strong:#3f8a63; --sc-hairline:#1c3a28; --sc-hairline-dim:#122618; --sc-hairline-row:var(--sc-hairline-row); /* stat 行区切り (stats table 内 border-bottom、 51 箇所) */ --sc-text:#eafff3; --sc-text-soft:#dcf6e7; --sc-text-muted:#9fb8a8; --sc-green-label:var(--sc-green-label); /* diff table 左列ラベル (Self label / stat 名、 70 箇所) */ --sc-green-mid:var(--sc-green-mid); /* 副次 green text (border label / opp light、 68 箇所) */ --sc-green-bright:var(--sc-green-bright); /* strong green value (CP alt / stat filled、 36 箇所) */ --sc-ink-on-green:#06150c; /* font-size scale (13 段階)。 全 inline font-size は この token 経由。 半端 pixel (8.5 / 10.5 等) は最寄りに丸め。 (2026-07-05 feedback「文字サイズって全体的にちゃんと UI 統一されてる？」) */ --sc-fs-caption:11px; /* micro caption / small mono */ --sc-fs-body-sm:12px; /* default caption */ --sc-fs-body:13px; /* body regular */ --sc-fs-body-md:14px; /* body medium */ --sc-fs-body-lg:15px; /* body large / row label */ --sc-fs-title-sm:14px; /* small title */ --sc-fs-title:16px; /* title */ --sc-fs-title-lg:18px; /* large title */ --sc-fs-hero:22px; /* hero title */ --sc-fs-page-h1:26px; /* page h1 */ --sc-fs-cp-sm:34px; /* small CP number (Orbitron) */ --sc-fs-cp:42px; /* CP number */ --sc-fs-cp-hero:52px; /* hero CP */ } *{box-sizing:border-box;} html,body{margin:0;color:var(--sc-text);font-family:'Noto Sans JP',sans-serif;overscroll-behavior:contain;} /* Body 自体は scroll しない。 .app-scroll が中身の scroll を持ち、 bottom nav は body の flex 最下段に natural に居る。 これで mobile URL bar auto-hide × position:fixed の相互作用が根絶。 */ html{background:radial-gradient(120% 70% at 50% 0%,#0c2016,#07140d 50%,#020503 92%) #020503;height:100%;} /* PC scrollbar デザイン (2026-07-10 feedback) — subtle green thumb。 home と同じ「html scroll 無効 + .app-scroll 単独スクロール + gutter stable」 構造にして左右余白の揺れをゼロに (2026-07-10 feedback: 「ホームは直った、 研究室だけ引き続き左ずれ」)。 */ html{scrollbar-color:#2c5a3f #0a1c12;scrollbar-width:thin;overflow:hidden;} ::-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;} body{display:flex;flex-direction:column;height:var(--visual-vh,100dvh);background:radial-gradient(120% 70% at 50% 0%,#0c2016,#07140d 50%,#020503 92%) fixed;overflow:hidden;} .app-scroll{flex:1 1 auto;overflow-y:scroll;overflow-x:hidden;overscroll-behavior-x:contain;overflow-anchor:none;-webkit-overflow-scrolling:touch;position:relative;scrollbar-gutter:stable;scrollbar-color:#2c5a3f #0a1c12;scrollbar-width:thin;} /* CRT scanline: mobile portrait では DPR 差で moire / alternating 縞に見える feedback (2026-07-18) があるので landscape / PC 限定に。 */ 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::after{content:'';position:fixed;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.55);pointer-events:none;z-index:1;} 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;}} /* Force sc-view hidden state to override any child inline display so cross-view transitions never leak a stale view for a frame. */ .sc-view[hidden]{display:none !important;} /* Remove the default mobile tap-highlight flash so tile taps in lab-init don't briefly overlay a grey rectangle on the tile at the moment the view swaps to build-editor. */ *{-webkit-tap-highlight-color:transparent;} /* HEADER (共通 chrome) */ .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), (orientation:landscape){.scope-header{position:static;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}} .patch-pill-dot{width:5px;height:5px;border-radius:50%;background:var(--sc-green-glow);flex-shrink:0;} /* mobile portrait はスペース節約で icon-only (王冠のみ)、 landscape / desktop は icon + label。 */ .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:var(--sc-hairline);color:#bdffd6;} .scope-header-tabs a.is-active{color:var(--sc-ink-on-green);background:var(--sc-green-primary);font-weight:700;} } /* WR_LAND_NARROW_HEADER_COMPACT */ @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:var(--sc-text);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){.lang-toggle{width:1.95rem;height:1.95rem;}} .lang-toggle:hover{border-color:var(--sc-green-primary);color:var(--sc-green-primary);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 var(--sc-border);background:rgba(7,18,12,.85);color:var(--sc-green-primary);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){ /* シンプル。 nav は body flex の最下段に natural 配置 — position:fixed を 使わないので mobile URL bar 遷移と干渉しない。 */ .scope-bottomnav{display:flex;align-items:flex-end;flex:none;z-index:9;height:74px;padding:10px 6px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid #18301f;background:#050b08;} } /* 2026-08-11 (feedback「アイテム/ルーン/スペルのピッカー画面もリロード 不可にしたい」→ 追加 feedback「X シェア/AI 相談/単体比較/対面比較も 全部リロード不可」): scouter の loss リスク高い view 表示中は browser native PtR を CSS で抑止。 scouter.js applyView() が html attr に current view を set するので、 該当 view prefix で発火。 overscroll-behavior は iOS 16+ / Chrome 63+ 対応。 JS PtR (pull-to-refresh.js) の skip と併用で 二重防御。 対象: picker-* (アイテム/ルーン/スペル) + compare-* (単体比較) + matchup-* (対面比較) + share-x (X シェア)。 build-editor / lab-init / slot-list / save-name / sample-loadouts は従来通り PtR 有効。 */ html[data-scouter-view^="picker-"], html[data-scouter-view^="compare-"], html[data-scouter-view^="matchup-"], html[data-scouter-view="share-x"], html[data-scouter-view="sample-loadouts"], html[data-scouter-view^="picker-"] body, html[data-scouter-view^="compare-"] body, html[data-scouter-view^="matchup-"] body, html[data-scouter-view="share-x"] body, html[data-scouter-view="sample-loadouts"] body{overscroll-behavior:none;} /* WR_PTR_ROOT_SCROLL */ /* Portrait mobile: root document scrolls (enables pull-to-refresh). Bottom nav switches to position:fixed since body is no longer a fixed-height flex container. Landscape/PC keep the app-shell pattern. */ @media (max-width:919px) and (orientation:portrait) and (max-width:499px){ html{overflow-y:auto;} body{display:block;height:auto;overflow:visible;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;} /* 2026-08-02 revert: .app-scroll{z-index:10} は 「app-scroll 内の overflow:visible content が bottom nav (z-index:9) を覆う副作用」 で nav が透過に見える regression 発生。 picker sticky CTA は別方法 (body 直下に配置する等) で解決予定、 nav 透過の影響が大きいため先に revert。 */ .app-scroll{flex:none;overflow:visible;overflow-y:visible;overflow-x:visible;-webkit-overflow-scrolling:auto;} .scope-bottomnav{position:fixed;bottom:0;left:0;right:0;} /* 2026-08-02 (user 明示承認「ピッカー画面って下ナビ廃止した方が良ければ それでもいいよ」、 案 C 採用): `.app-scroll` は body>*{z-index:2} の 一括 rule で意図せず stacking context を確立しており、 picker 内の 吸着 CTA (position:fixed 子孫) の z-index が nav (z-index:9) にも html::before の装飾バー (z-index:8、 同じく app-scroll の外側) にも 勝てず隠れる/覆われる。 nav 側 z-index を上げるのは 「app-scroll content が nav を覆って透過に見える」 regression を誘発した実績が あるので (0b06981db で revert)、 picker 表示中は nav と装飾バー 自体を hide して衝突を構造的に無くす。 class は に付与 (`html::before` も同じ selector 起点で切れるように)。 */ html.sc-picker-active .scope-bottomnav{display:none !important;} html.sc-picker-active::before{display:none !important;} /* 2026-08-20 (user 「各ピッカー画面についても中途半端にヘッダーが残る」): picker 中は site header (patch-pill / brand / lang-toggle / g-nav) も hide して 全画面 overlay 状態に。 picker 内 の 「完了」 / 「戻る」 button は 各 view 内 に 保持 (scope-page-done-btn 等) なので header 非表示でも 操作可能。 */ html.sc-picker-active .scope-header{display:none !important;} /* 2026-08-02 v2 fix: PtR 抑止は overscroll-behavior-y:none のみで OK、 overflow-y:hidden は 「ピッカー画面がスクロールしなくなる」 regression だったので撤去 (user 報告)。 */ html.sc-picker-active, html.sc-picker-active body{overscroll-behavior-y:none !important;} } /* sub-view の時 hero 内完了/戻る button を表示、 crosslink (試合ログ) は隠す — user 「h1 行の右端に配置」、 v2 (2026-08-02) 「戻る button も同じ配置に」。 picker view 時は完了 button を全 viewport で表示、 その他 sub-view は PC/landscape だけ h1 右端に戻る button 移動 + view 内 .sc-back-portrait を hide (portrait mobile は従来通り view 内戻る button のまま)。 旧 .sc-picker-done-bar (frame 内 absolute) と CSS は L1 (wr-ui-audit) で撤去済。 */ .scope-page-done-btn{display:none;margin-left:auto;padding:7px 16px;background:rgba(125,255,176,.06);color:#8effb8;border:1.5px solid #5aa87b;border-radius:8px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-body-sm);letter-spacing:.03em;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease;white-space:nowrap;} .scope-page-done-btn:hover{background:rgba(125,255,176,.16);border-color:#8effb8;color:#dffff0;} html.sc-picker-active .scope-page-done-btn--picker{display:inline-flex;align-items:center;} html.sc-picker-active .scope-crosslink[data-hide-in-picker]{display:none;} @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){ html.sc-subview-active:not(.sc-picker-active) .scope-page-done-btn--back{display:inline-flex;align-items:center;} html.sc-subview-active:not(.sc-picker-active) .scope-crosslink[data-hide-in-picker]{display:none;} html.sc-subview-active:not(.sc-picker-active) .sc-back-portrait{display:none;} } .scope-bottomnav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:0;color:var(--sc-green-faint);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);} /* Only apply hover on devices with an actual hover pointer — mobile taps otherwise flash the hover color mid-tap and read as flicker. */ @media (hover:hover){.scope-bottomnav-tab:hover{color:var(--sc-green-mid);}} .scope-bottomnav-tab.is-active{color:var(--sc-green-primary);} .scope-bottomnav-tab:not(.scope-bottomnav-tab-center).is-active::before{content:'';position:absolute;top:-10px;left:30%;right:30%;height:2px;background:var(--sc-green-primary);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 var(--sc-green-primary);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:var(--sc-green-primary);} .scope-bottomnav-tab-center .scope-bottomnav-icon{width:26px;height:26px;} .scope-bottomnav-tab-center .scope-bottomnav-label{margin-top:30px;} /* FOOTER (= 共通 minimal、 scouter は研究室なので bottom nav 推し) */ .site-footer{padding:30px 22px 100px;background:transparent;border-top:1px solid var(--sc-hairline);margin-top:36px;color:var(--sc-text-muted);font-family:'Noto Sans JP',sans-serif;font-size:var(--sc-fs-body-md);line-height:1.7;} @media (min-width:920px), (orientation:landscape), (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 var(--sc-hairline);} .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:var(--sc-green-mid);text-decoration:none;} @media (min-width:920px), (orientation:landscape), (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:var(--sc-green-primary);} .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;} .brand-paul-dot{color:var(--sc-cp-yellow-dim);} /* ========== SCOUTER (Scope OS · Build Lab redesign) ========== design_handoff_build_lab_flow/ の 18 frame を SPA view に集約。 各 view は 390px viewport (mobile portrait) 基準で design pixel accurate。 Phase A = raw HTML (placeholder data)、 Phase B = JS wiring 予定。 */ .scope-app{max-width:430px;margin:0 auto;padding:0 0 30px;position:relative;} /* PC / tablet (>=920): catalog と同じ 1200px + padding:0 28px 56px */ @media (min-width:920px){.scope-app{max-width:1200px;padding:0 28px 56px;}} /* Mobile landscape (orientation:landscape かつ <920): catalog の base rule と完全一致 (max-width:1200px + viewport で clamp、 padding 無し)。 Title 位置 (scope-page-hero padding-left 18px 由来 = x=18) が catalog の title 位置 (scope-cat-hero 18px = x=20) と揃う。 前回 12px 加えて title が右に 14px ずれる regression が発生した (2026-07-19 user feedback)。 sc-frame の viewport flush 問題は sc-frame 自身の margin で解決 (下の @media orientation:landscape .sc-frame rule 参照)。 */ @media (orientation:landscape) and (max-width:919px){.scope-app{max-width:1200px;padding:0 0 30px;}} /* 2026-08-17 (feedback「ビルド編集画面は 2 カラムだけどなんか狭く表示されて しかも右が完全に見切れてる」): Fire HD 10 portrait (800×1280) では landscape markup が表示されるが、 .scope-app の base rule (max-width:430) が発火して container が 430px にクランプ、 中の 2-col grid が overflow して右端が 見切れる regression。 display swap の 3-5 の conditions (tablet 相当) と 同じ条件で .scope-app の max-width を 1200 に拡張。 */ @media (min-width:720px), (orientation:portrait) and (min-width:500px) and (min-height:800px){ .scope-app{max-width:1200px;padding:0 0 30px;} } /* SPA view / sheet visibility (native hidden で display:none) */ .sc-view,.sc-sheet{display:block;} .sc-view[hidden],.sc-sheet[hidden]{display:none;} /* Portrait / landscape swap (dual markup per view = design HTML 準拠). 2026-08-16 v3 (feedback「これスマホのランドスケープ版じゃなくない？ ただのスマホビューになってる」への追随): v1(threshold=920) と v2(=1200) は portrait markup に fallback していたが、 user 期待は 「スマホランドス ケープ版」 = landscape markup 内の 2-col mobile-landscape treatment。 display swap を min-width:600 に置き、 landscape markup を PC narrow でも 表示。 内部 grid rule 側で: - 600-1199: sc-grid-dash は 2-col mobile-landscape (LEFT ident+actions | CENTER items+runes+spells+stats)、 sc-picker-grid は 3-col mobile-landscape template - 1200+: sc-grid-dash は 3-col PC dashboard、 sc-picker-grid は 3-col PC wider template picker の position:fixed bottom bar は max-height:500 で mobile 実機に 限定 (PC 縦長 window には bar 不要)。 mobile landscape (max-height:500 = phone rotated) は従来通り landscape 維持。 */ .sc-portrait-only{display:block;} .sc-landscape-only{display:none;} /* 2026-08-17 (feedback「タブレットの縦表示は、 PC 版かランドスケープ版を表示 したい」+ 続報「Amazon、 シークレットモードで来ない。 iPad は問題なかった」): 多面 catch で全 tablet 縦持ちを landscape UI へ。 iPad は pointer:coarse で fire、 Fire HD 10 Silk は pointer/hover が期待通り report しない疑い → orientation:portrait AND min-width:500 AND min-height:800 の tablet portrait 明示条件を追加 (Fire HD 10 portrait 800×1280 / Fire HD 8 portrait 533×853 マッチ、 phone portrait は <500w で除外)。 1. min-width:720 — 単純幅 base (Fire HD 10 = 800、 iPad Air 810 等) 2. (orientation:landscape) and (max-height:500) — phone rotated 3. (pointer:coarse) and (min-width:500) — 小型 tablet touch device 4. (hover:none) and (min-width:500) — pointer:coarse が fire しない Silk 等 5. (orientation:portrait) and (min-width:500) and (min-height:800) — tablet portrait 明示 catch-all。 media query の pointer/hover に依存せず、 物理的な viewport dimensions のみで判定 (Fire Silk の quirk 対策)。 phones は width <500 か height <800 で大体除外 (iPad Mini 744×1133 は match、 iPhone Pro Max 430×932 は幅で除外)。 */ @media (min-width:720px), (orientation:landscape) and (max-height:500px), (orientation:portrait) and (min-width:500px) and (min-height:800px){ .sc-portrait-only{display:none;} .sc-landscape-only{display:block;} } /* Compare-edit A/B tab toggle. デフォルト data-compare-view="B" で A パネル非表示、 B パネル表示。 A タブクリックで data-compare-view="A" に切替 → 逆。 tab の active/inactive スタイルも connected。 Tab base style は CSS class で完結 (inline style を使うと後発 CSS の override が効かず active 状態が visual に反映されない不具合になる)。 */ [data-compare-view="B"] [data-compare-view-panel="A"]{display:none !important;} [data-compare-view="A"] [data-compare-view-panel="B"]{display:none !important;} .sc-compare-tab{ flex:1;text-align:center;padding:8px 0;border-radius:7px; border:1px solid var(--sc-border);color:var(--sc-green-mid);background:transparent; font-weight:normal;cursor:pointer;font:inherit;transition:background .12s, color .12s, border-color .12s; } [data-compare-view="A"] .sc-compare-tab[data-compare-view-tab="A"], [data-compare-view="B"] .sc-compare-tab[data-compare-view-tab="B"]{ color:var(--sc-ink-on-green);background:var(--sc-green-primary); font-weight:700;border-color:var(--sc-green-primary); } /* Landscape (PC) 用の大 tab — 現行 (A) / 比較枠 (B) CP サマリー card を button 化して data-compare-view-tab で切替 (2026-07-10 feedback: 「単体比較のビルド編集画面で現行ビルドに切り替えられない」 対応)。 */ .sc-compare-tab-lg{ flex:1;text-align:center;border:1px solid var(--sc-border);border-radius:12px; padding:16px;background:rgba(10,28,18,.5);cursor:pointer;font:inherit;color:inherit; opacity:.72;transition:all .15s; } [data-compare-view="A"] .sc-compare-tab-lg[data-compare-view-tab="A"], [data-compare-view="B"] .sc-compare-tab-lg[data-compare-view-tab="B"]{ opacity:1;border-color:var(--sc-green-primary);background:rgba(16,48,36,.4); box-shadow:0 0 16px -8px rgba(125,255,176,.5); } /* Matchup-build 自分 / 相手タブ切替 (compare-edit の A/B と同構造)。 デフォルト data-matchup-view="opp" で自分 panel 非表示、 相手 panel 表示 (相手ビルド編集がメイン操作なので default = 相手)。 タブ UI は VS カードの自分 / 相手サムネボックス (.sc-matchup-vs-box) が兼ねる。 active box は border 強調 + glow で状態表示。 2026-08-16 v2 (user feedback 「相手ボックスをタップしまくる人がいた。 タブ 切替のイメージが付いていない」): segmented control 風に強化。 border-radius を wrapper で共通化、 active tab は下端 2px 太線 + bright bg、 inactive は 透明 border-bottom + dim bg、 上部に 「編集タブ (タップで切替)」 hint 付与。 */ /* !important 必須 — 各 panel は inline style で display:flex/block を明示 しているため、 CSS selector だけの display:none は inline に負けて hide しない (2026-07-10 feedback: 「対面比較の自分ビルド確認画面で 相手ビルド編集が landscape で残ってしまう」 の直接原因)。 */ [data-matchup-view="opp"] [data-matchup-view-panel="self"]{display:none !important;} [data-matchup-view="self"] [data-matchup-view-panel="opp"]{display:none !important;} .sc-matchup-tabs-hint{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--sc-green-faint);letter-spacing:.12em;text-transform:uppercase;text-align:center;margin-bottom:6px;} .sc-matchup-tabs-hint::before{content:'\2194 ';color:var(--sc-cp-yellow-dim);font-weight:700;} .sc-matchup-vs-tabs{display:flex;align-items:stretch;gap:0;background:rgba(6,14,10,.55);border:1px solid var(--sc-border);border-radius:10px;padding:4px;position:relative;} .sc-matchup-vs-tabs .sc-matchup-vs-vs{display:flex;align-items:center;justify-content:center;padding:0 8px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-body-lg);color:var(--sc-orange-lock);pointer-events:none;user-select:none;} .sc-matchup-vs-box{transition:box-shadow .15s, border-color .15s, background .15s, opacity .15s;border:0 !important;background:transparent !important;border-radius:8px !important;position:relative;} /* Active tab — 底辺 3px 太線 + bright bg + slight elevation */ [data-matchup-view="self"] .sc-matchup-vs-box[data-matchup-view-tab="self"]{ background:rgba(16,48,36,.55) !important; box-shadow:0 3px 0 0 var(--sc-green-primary), 0 0 14px -6px rgba(125,255,176,.5); } [data-matchup-view="opp"] .sc-matchup-vs-box[data-matchup-view-tab="opp"]{ background:rgba(48,40,10,.55) !important; box-shadow:0 3px 0 0 var(--sc-cp-yellow), 0 0 14px -6px rgba(255,225,74,.5); } /* Inactive tab — 更に dim (opacity 落とし + 底辺なし) */ [data-matchup-view="self"] .sc-matchup-vs-box[data-matchup-view-tab="opp"], [data-matchup-view="opp"] .sc-matchup-vs-box[data-matchup-view-tab="self"]{ opacity:.55; } /* 2026-08-16 v2 (user feedback「同チャンピオン比較の際に opp 編集が比較元 ビルドを上書きしてしまう」 対応 → 「アラートしたらどう？」 の user 選択): self=opp=同 champion+同 slot の場合、 opp panel 上部に amber banner を出す。 renderMatchupResult 側で hidden 属性を toggle。 */ .sc-matchup-same-identity-alert{display:flex;gap:8px;align-items:flex-start;margin:8px 0 10px;padding:9px 12px;border:1px solid rgba(255,180,60,.55);border-left:3px solid var(--sc-cp-yellow);border-radius:8px;background:rgba(60,44,10,.55);font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.55;color:#ffd58a;letter-spacing:.02em;} .sc-matchup-same-identity-alert[hidden]{display:none;} .sc-matchup-same-identity-alert-mark{color:var(--sc-cp-yellow);font-weight:700;flex:none;font-size:12px;line-height:1.55;} .sc-matchup-same-identity-alert-text{flex:1;} /* Landscape frame chrome (= 1232px flat window with breadcrumb) */ /* .sc-frame background: was pure #0e0f0c (near-black) which felt disconnected from home page's green-tinted world. Match home's hero radial gradient so the scouter feels part of the same site. */ .sc-frame{position:relative;border:1px solid #2a4032;border-radius:14px;background:radial-gradient(120% 70% at 50% 0%,rgba(28,60,42,.65),rgba(10,20,14,.9) 62%,rgba(6,12,8,.95));box-shadow:0 40px 90px -30px rgba(0,0,0,.8);overflow:hidden;margin-top:14px;} /* Mobile landscape (scope-app padding 0 で title 位置は catalog に揃う)、 sc-frame border chrome が viewport edge に flush しないよう frame 側で margin 確保。 catalog の chip row / card 視覚 inset (18px = scope-cat-hero padding-left) と一致させる。 2026-07-19 user feedback 「少しだけ横幅広い」 で 12px → 18px に調整。 */ @media (orientation:landscape) and (max-width:919px){.sc-frame{margin-left:18px;margin-right:18px;}} /* Universal corner brackets — pseudo-element on .sc-frame so every landscape view gets brackets without markup changes. 8-gradient stack draws 4 L-shaped orange corners. Concern D. */ .sc-frame::after{content:'';position:absolute;inset:10px;pointer-events:none;background: linear-gradient(to right, var(--sc-orange-lock) 0, var(--sc-orange-lock) 14px, transparent 14px) top left / 14px 2px no-repeat, linear-gradient(to bottom, var(--sc-orange-lock) 0, var(--sc-orange-lock) 14px, transparent 14px) top left / 2px 14px no-repeat, linear-gradient(to left, var(--sc-orange-lock) 0, var(--sc-orange-lock) 14px, transparent 14px) top right / 14px 2px no-repeat, linear-gradient(to bottom, var(--sc-orange-lock) 0, var(--sc-orange-lock) 14px, transparent 14px) top right / 2px 14px no-repeat, linear-gradient(to right, var(--sc-orange-lock) 0, var(--sc-orange-lock) 14px, transparent 14px) bottom left / 14px 2px no-repeat, linear-gradient(to top, var(--sc-orange-lock) 0, var(--sc-orange-lock) 14px, transparent 14px) bottom left / 2px 14px no-repeat, linear-gradient(to left, var(--sc-orange-lock) 0, var(--sc-orange-lock) 14px, transparent 14px) bottom right / 14px 2px no-repeat, linear-gradient(to top, var(--sc-orange-lock) 0, var(--sc-orange-lock) 14px, transparent 14px) bottom right / 2px 14px no-repeat; opacity:.75;z-index:3;} /* Reusable corners utility for standalone frames outside .sc-frame (portrait compare A/B cards, matchup VS cards, sample sheet). */ .sc-corners{position:relative;} .sc-corners::after{content:'';position:absolute;inset:5px;pointer-events:none;background: linear-gradient(to right, var(--sc-orange-lock) 0, var(--sc-orange-lock) 10px, transparent 10px) top left / 10px 2px no-repeat, linear-gradient(to bottom, var(--sc-orange-lock) 0, var(--sc-orange-lock) 10px, transparent 10px) top left / 2px 10px no-repeat, linear-gradient(to left, var(--sc-orange-lock) 0, var(--sc-orange-lock) 10px, transparent 10px) top right / 10px 2px no-repeat, linear-gradient(to bottom, var(--sc-orange-lock) 0, var(--sc-orange-lock) 10px, transparent 10px) top right / 2px 10px no-repeat, linear-gradient(to right, var(--sc-orange-lock) 0, var(--sc-orange-lock) 10px, transparent 10px) bottom left / 10px 2px no-repeat, linear-gradient(to top, var(--sc-orange-lock) 0, var(--sc-orange-lock) 10px, transparent 10px) bottom left / 2px 10px no-repeat, linear-gradient(to left, var(--sc-orange-lock) 0, var(--sc-orange-lock) 10px, transparent 10px) bottom right / 10px 2px no-repeat, linear-gradient(to top, var(--sc-orange-lock) 0, var(--sc-orange-lock) 10px, transparent 10px) bottom right / 2px 10px no-repeat; opacity:.7;z-index:3;} .sc-frame-crumb{display:flex;align-items:center;justify-content:space-between;padding:14px 24px 0;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);color:#8a9683;} .sc-frame-crumb-l{display:flex;align-items:center;gap:8px;} .sc-frame-crumb-l .sep{color:#6a6f5f;} .sc-frame-crumb-l .now{color:#cfe9da;} .sc-frame-crumb-r{display:flex;align-items:center;gap:7px;} .sc-frame-crumb-r .dot{width:7px;height:7px;border-radius:50%;background:var(--sc-green-primary);box-shadow:0 0 6px var(--sc-green-primary);animation:sc-recon 1.4s infinite;} /* idle は待機状態なので blink させず静的に (scouter が active 状態を 視覚化するため、 idle は明確に非 pulse で区別)。 */ .sc-frame-crumb-r .dot-idle{background:var(--sc-green-faint);box-shadow:none;animation:none;} .sc-frame-body{padding:16px 24px 24px;} .sc-grid-lab{display:grid;grid-template-columns:1fr;gap:20px;} /* .sc-grid-dash: viewport 幅で 3 tier 出し分け: - portrait / very narrow (<600px): 1-col vertical stack (hero → center → right) - mobile landscape + PC narrow (600-1199px): 2-col。 LEFT (hero + actions) | CENTER (items + runes + spells + stats)。 1.4:1 proportion で左列 workspace を優先。 2026-08-16 v3 で max-width:919 → 1199 に拡張、 PC narrow window でも 「スマホランドスケープ版」 2-col treatment を 提供 (feedback「これスマホのランドスケープ版じゃなくない？」)。 - desktop (1200+): 3-col dashboard (LEFT | CENTER | RIGHT) 従来の 920+ と 1080+ 両 tier を fold して 1200+ に置く。 min 幅は 1080+ tier の wider 値を採用 (LEFT min 240 / RIGHT min 260)。 2026-07-18 fix: mobile landscape で 3-col が CENTER を潰す bug + 1-col だと 「1カラム化は臨んでない」 feedback 双方対応。 */ .sc-grid-dash{display:grid;grid-template-columns:1fr;gap:16px;} @media (min-width:600px) and (max-width:1199px){ /* Mobile landscape + PC narrow 2-col: LEFT (hero + buttons in .sc-be-actions-mobile) | CENTER (items+runes+spells+stats)。 user 「スロット名を編集以降のボタン群は左カラムに配置」 (2026-07-18)。 .sc-be-actions-desktop (child 3) は display:none で grid layout に登場しないため 2 children で 2-col fit。 */ .sc-grid-dash{grid-template-columns:1fr 1.4fr;grid-template-areas:none;gap:14px;} .sc-grid-dash > :nth-child(1),.sc-grid-dash > :nth-child(2){grid-area:auto;} } @media (min-width:1200px){ /* PC 3-col (2026-07-29 再設計、 2026-08-16 v3 で 920+ から 1200+ に shift): LEFT: ident-card (top) + [flex-grow] + actions (bottom) — action bar 型 CENTER: items + runes + spells RIGHT: power-card (top、 scouter) + stats-desktop actions は LEFT 下部に、 power-card は RIGHT 上部に visual anchor 化。 min 幅は旧 1080+ tier の wider 値 (LEFT 240 / RIGHT 260、 gap 16)。 */ .sc-grid-dash{grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(260px,336px);grid-template-areas:none;gap:16px;} .sc-grid-dash > :nth-child(1),.sc-grid-dash > :nth-child(2),.sc-grid-dash > :nth-child(3){grid-area:auto;} /* LEFT column: flex column で ident-card 上 / actions 下の縦分割 */ .sc-grid-dash > :nth-child(1){display:flex;flex-direction:column;gap:14px;} .sc-grid-dash > :nth-child(1) .sc-be-actions-mobile{margin-top:auto;display:flex !important;} /* power-card は LEFT 内で hide (RIGHT に移設した clone を使う) */ .sc-grid-dash > :nth-child(1) .sc-power-card{display:none;} /* RIGHT column: power-card (JS が clone or move してくる) + stats */ .sc-be-actions-desktop{display:flex !important;} /* RIGHT の .sc-be-actions-desktop 内 buttons は撤去 (LEFT の actions-mobile に集約)。 inline style display:flex を上書きするため !important 必須 */ .sc-be-actions-desktop > .sc-be-buttons-block{display:none !important;} .sc-be-stats-mobile{display:none !important;} } .sc-ident-card{border:1px solid var(--sc-border);border-radius:12px;background:var(--sc-bg-card);padding:16px;text-align:center;} /* Landscape ident-card thumb: 縦幅 MAX で fill (2026-07-31 user feedback 「PC版、 ランドスケープ版でチャンピオンサムネがたまに縦幅足りてない」対応)。 body art の aspect ratio が 16:9 (1215×717) と 21:9 相当 (2436×1124) で 混在、 contain だと 21:9 系で縦 letterbox 発生していた。 cover に切替 で常に縦幅 fill、 landscape 系は横方向で若干 crop 発生するが縦幅 不足は根絶。 aspect-ratio は 16:9 継続、 wrap 側は既存 layout 維持。 */ .sc-ident-card .sc-ident-thumb-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1.5px solid #0c3c26;background:radial-gradient(circle at 50% 45%,#0e2d1e,#05100b);} .sc-ident-card .thumb{width:100%;height:100%;border-radius:0;border:0;object-fit:cover;object-position:center;display:block;} .sc-ident-card .name{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-title-lg);color:var(--sc-text);margin-top:10px;} .sc-ident-card .sub{font-family:'Orbitron',sans-serif;font-size:var(--sc-fs-body-sm);color:var(--sc-green-glow);letter-spacing:.06em;} .sc-power-card{border:1px solid var(--sc-border-strong);border-radius:12px;background:linear-gradient(160deg,#15553f,#0c2c1f 74%);padding:16px;box-shadow:0 0 40px -14px rgba(125,255,176,.55);} .sc-power-card-lbl{font-family:'Noto Sans JP',sans-serif;font-size:var(--sc-fs-body);font-weight:600;color:#bfeecf;letter-spacing:.1em;} .sc-power-card-v{font-family:'Orbitron',sans-serif;font-weight:900;font-size:var(--sc-fs-cp);line-height:1;color:var(--sc-cp-yellow);text-shadow:0 0 20px rgba(255,225,74,.5);margin-top:2px;} .sc-power-card-gauge{display:flex;align-items:center;gap:8px;margin-top:8px;} .sc-power-card-gauge-tag{font-family:'Orbitron',sans-serif;font-size:var(--sc-fs-caption);font-weight:700;color:#0c2c1f;background:var(--sc-green-primary);border-radius:4px;padding:2px 6px;} .sc-power-card-gauge-bar{flex:1;height:6px;border-radius:4px;background:rgba(0,0,0,.3);overflow:hidden;} .sc-power-card-gauge-fill{height:100%;background:#eafff0;} .sc-power-card-gauge-pct{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption);color:#eafff0;} /* Champion picker grid: mobile 幅で 10-col が container 超え overflow (対面比較 champion picker 右見切れ bug 2026-07-18)。 auto-fit で viewport 幅に応じて 5/6/8/10 col に自動調整。 min tile 60px 確保。 */ .sc-champ-grid-8{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:9px;} /* desktop (>=1080) は pre-regression の 10-col に戻す (2026-07-19、 mock は picker の col 数明示していないので pre-regression 実装が source of truth)。 */ @media (min-width:1080px){.sc-champ-grid-8{grid-template-columns:repeat(10,minmax(0,1fr));}} .sc-side-actions{display:flex;flex-direction:column;gap:11px;} .sc-side-actions-lbl{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body-sm);letter-spacing:.06em;color:var(--sc-green-dim);margin-bottom:2px;} .sc-side-action{display:flex;align-items:center;gap:11px;border:1px solid var(--sc-border);border-radius:10px;padding:14px;background:var(--sc-bg-card);cursor:pointer;transition:border-color .12s;text-decoration:none;color:inherit;} .sc-side-action:hover{border-color:var(--sc-green-primary);} .sc-side-action.is-primary{border-color:var(--sc-green-primary);background:rgba(16,48,36,.4);box-shadow:0 0 16px -9px rgba(125,255,176,.5);} .sc-side-action-ic{width:34px;height:34px;border-radius:8px;border:1px solid var(--sc-border);display:flex;align-items:center;justify-content:center;color:var(--sc-green-primary);flex:none;} .sc-side-action.is-primary .sc-side-action-ic{border-color:var(--sc-green-primary);} .sc-side-action-nm{font-family:'Noto Sans JP',sans-serif;font-size:var(--sc-fs-body-lg);color:var(--sc-text);} .sc-side-action.is-primary .sc-side-action-nm{font-weight:700;} .sc-stats-h{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-body-lg);color:#cfd8ec;padding:9px 14px;border-bottom:1px solid var(--sc-hairline);} .sc-stats-h .sub{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption);color:#8a9683;font-weight:400;} /* Sheet overlay pattern (bottom-slide modal) */ .sc-sheet-root{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;} .sc-sheet-root[hidden]{display:none;} .sc-sheet-dim{position:absolute;inset:0;background:rgba(4,9,6,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto;} .sc-sheet-panel{position:relative;width:100%;max-width:430px;max-height:88vh;overflow-y:auto;border-top:1px solid var(--sc-border-strong);border-radius:22px 22px 0 0;background:linear-gradient(180deg,#0d2418,#081610);box-shadow:0 -20px 50px -20px rgba(0,0,0,.8);padding:16px 18px 30px;pointer-events:auto;animation:sc-sheet-in .28s ease-out;} @media (max-width:919px){.sc-sheet-panel{padding-bottom:calc(30px + env(safe-area-inset-bottom,0));}} @keyframes sc-sheet-in{from{transform:translateY(20%);opacity:0;}to{transform:translateY(0);opacity:1;}} /* 2026-07-24 feedback「ピッカー画面のモーダル風デザインは閉じれる誤認生む」 対策: モーダル drag-handle を非表示化 (DOM は残す、 CSS で hide)。 同時に picker sheet の border-radius:22px 22px 0 0 も削除 (「full page」 感を出して誤認防止)。 */ .sc-sheet-handle{display:none;} /* Unified page title — catalog (champions/items/runes/spells) rule と一致 (2026-07-19 復元、 letter-spacing 撤去 + landscape font-size を cp-sm に bump)。 */ .scope-page-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-page-h1{font-size:var(--sc-fs-cp-sm);}} /* 2026-08-02: hero を flex row 化して sub-tab を h1 と同 row に inline 配置。 幅不足 (mobile portrait) は subtab を flex-basis:100% で強制改行 — 文字幅次第の自然 wrap だと数px差で欠け表示になる (実測で確認済) ので max-width:919px は明示的に h1 の下 1 行へ落とす。 */ .scope-page-hero{padding:14px 18px 0;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;} /* Landscape/desktop padding — catalog rule (24px 0 0) と一致。 h1 下の余白は他 page (ranking/about 9px, matchlog 10px, home 12px) と揃えて詰まらない ように sc-view 側で margin-top:0 を強制、 gap は親 flex + h1 line-box 由来の 14px を維持。 */ @media (min-width:920px){.scope-page-hero{padding:24px 0 0;gap:14px 18px;}} /* h1 下の次 section (sc-view) がくっついて詰まって見える現象の対策 — ranking/matchlog と同 tier の visual breathing を与える。 */ .scope-page-hero + .sc-view{margin-top:8px;} @media (min-width:920px){.scope-page-hero + .sc-view{margin-top:14px;}} /* mobile portrait: subtab は h1 と同 row を default 想定。 狭小端末 fallback で wrap 許容 (flex-wrap:wrap default を維持)。 */ @media (max-width:919px){ .scope-page-h1{min-width:0;flex-shrink:1;} .scope-page-hero .scope-subtab{flex-shrink:0;} } .scope-page-meta{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body-md);color:#7fa890;margin:6px 0 0;line-height:1.5;} /* 研究室 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 上 (or 下) に浮いていて 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 で現在地を強調。 /matchlog 側 (web/matchlog.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;} /* Shared status pill (mobile portrait mini-nav) */ .sc-topline{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 4px;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);color:var(--sc-green-mid);} @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){.sc-topline{display:none;}} .sc-topline-brand{display:flex;align-items:center;gap:10px;} .sc-topline-mark{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 6px rgba(125,255,176,.55));color:var(--sc-green-primary);} .sc-topline-mark svg{width:100%;height:100%;} .sc-topline-title{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:var(--sc-fs-body-sm);color:var(--sc-green-dim);letter-spacing:.06em;text-transform:uppercase;} .sc-topline-status{display:flex;align-items:center;gap:6px;} .sc-topline-status-dot{width:6px;height:6px;border-radius:50%;background:var(--sc-green-glow);box-shadow:0 0 6px var(--sc-green-glow);animation:sc-recon 1.4s infinite;} /* Hero portrait / ident-card thumb as clickable "change champion" affordance — clicking either navigates back to lab-init. Cursor + subtle hover announce interactivity without competing chrome. Marker applied via scouter.js on view entry for the champion-owned views only. */ [data-champ-clickable]{cursor:pointer;transition:filter .15s ease,transform .1s ease;} [data-champ-clickable]:hover{filter:brightness(1.12) drop-shadow(0 0 12px rgba(125,255,176,.35));} [data-champ-clickable]:active{transform:scale(.97);} @keyframes sc-recon{0%,100%{opacity:.45;}50%{opacity:1;}} @keyframes sc-spin{to{transform:rotate(360deg);}} /* Common button classes (frame 全体で頻用) */ .sc-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;border-radius:8px;padding:11px 14px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-body-lg);cursor:pointer;transition:filter .12s;box-sizing:border-box;text-decoration:none;user-select:none;} .sc-btn-primary{background:var(--sc-green-primary);color:var(--sc-ink-on-green);border:1px solid var(--sc-green-primary);box-shadow:0 0 18px -6px rgba(125,255,176,.7);} .sc-btn-primary:hover{filter:brightness(1.08);} .sc-btn-secondary{background:rgba(7,18,11,.9);color:var(--sc-green-mid);border:1px solid var(--sc-border);font-family:'JetBrains Mono',monospace;font-weight:500;font-size:var(--sc-fs-body);} .sc-btn-secondary:hover{border-color:var(--sc-green-primary);color:#bdffd6;} .sc-btn-tertiary{background:rgba(16,48,36,.4);color:#bdffd6;border:1px solid var(--sc-border-strong);font-family:'JetBrains Mono',monospace;font-weight:500;font-size:var(--sc-fs-body);} .sc-btn-tertiary:hover{border-color:var(--sc-green-primary);} /* Common chip (role / effect / tag) */ /* lane / path chip — feedback 2026-07-10 「レーンボタン小さい」 に対応 して padding + font-size を上げて tap 面積 + 可読性を確保 */ .sc-chip{display:inline-flex;align-items:center;padding:8px 15px;border-radius:7px;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);color:var(--sc-green-mid);border:1px solid var(--sc-border);background:transparent;cursor:pointer;white-space:nowrap;flex:none;transition:all .12s;} /* Locked = 「プライマリで選択済なのでセカンダリでは使えない」 系統 chip。 Wild Rift ルーン規則: セカンダリはプライマリと異なる path 必須。 (2026-07-20 Phase 2B fix — user feedback「同系統選べちゃう」) */ .sc-chip.is-locked{opacity:.28;cursor:not-allowed;pointer-events:none;text-decoration:line-through;} /* 参考ビルドガイド row (4 サイトへのディープリンク)。 スロット枠 (.sc-slot-chunk) の一番下に配置。 CLAUDE.md: 「per-champion tuning は 外部専門サイトを参照」 の house rule 導線。 label を上段、 4 links を inline-flex で下段に整列 (中黒 · で区切り、 wrap 時も整った見た目)。 */ /* padding-x は portrait chunk 内の .sc-sec と揃える (14px 18px 0) ため 12px + margin-x 6px = 実効 18px 相当。 landscape chunk (padding:16px) ではその 16px の 内側に更に 6px 入るが 視覚上違和感なし。 border-top の破線 は 左右 margin 分 shrink し 上段 spells section と 揃った幅感。 */ .scouter-buildguide{margin:8px 6px 2px;padding:10px 12px 2px;border-top:1px dashed var(--sc-border);} .scouter-buildguide[hidden]{display:none;} .scouter-buildguide-lead{display:block;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption);color:var(--sc-green-dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;} .scouter-buildguide-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body-sm);line-height:1.4;} .scouter-buildguide-link{color:var(--sc-green-glow);text-decoration:none;white-space:nowrap;transition:color .12s;} .scouter-buildguide-link:hover, .scouter-buildguide-link:focus-visible{color:#eafff0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;} .scouter-buildguide-sep{color:var(--sc-green-dim);opacity:.55;user-select:none;} /* ============================================================ Phase 2C: item picker detail pane (2-tap: focus → detail、 focused 再 tap で build 追加)。 portrait は fixed bottom sheet、 landscape は右 column の sticky pane。 ============================================================ */ /* Item cell focused = 詳細表示中 (orange HUD border) */ [data-item-list] [data-item-id].is-focused, [data-rune-keystones] [data-rune-id].is-focused, [data-rune-primary-list] [data-rune-id].is-focused, [data-rune-secondary-list] [data-rune-id].is-focused, [data-spell-list] [data-spell-id].is-focused{ outline:2px solid var(--sc-cp-yellow); outline-offset:-2px; box-shadow:0 0 12px rgba(255,216,58,.35), inset 0 0 0 1px var(--sc-cp-yellow-dim); position:relative; } [data-item-list] [data-item-id].is-focused::before{ content:'▸';position:absolute;top:2px;left:5px;z-index:2; color:var(--sc-cp-yellow);font-family:'JetBrains Mono',monospace;font-size:11px; pointer-events:none; } /* 2026-07-25 最終方針: PC = 3-col with detail pane / mobile landscape = 2-col + fullscreen sheet on tap。 breakpoint 920px で切替。 inline grid-template-columns を廃止してこの class で統一制御。 */ .sc-picker-grid{ display:grid; grid-template-columns:minmax(150px,260px) minmax(0,1fr); gap:14px; } .sc-picker-grid > .sc-picker-detail-col{display:none;} /* 2026-07-29 (feedback「各ピッカー landscape でも選択中は常時表示」): landscape mobile で unified pane (sc-pdc-fixed) を fixed 下部 bar で表示。 PC narrow (820-1199) は下記 v4 の fixed-bar block が幅 base で発火し 同 2-col + fixed bar treatment を継承 (2026-08-16 v4 feedback「3カラム はこの幅で破綻するからそうならないように調整したい」)。 */ @media (max-width:919px) and (orientation:landscape){ .sc-picker-grid{ grid-template-columns:minmax(120px,180px) minmax(0,1fr) minmax(240px,280px); } .sc-picker-grid > .sc-picker-detail-col{ display:block; min-height:1px; } } @media (min-width:1200px){ .sc-picker-grid{ grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(320px,380px); } .sc-picker-grid > .sc-picker-detail-col{ display:block; min-height:1px; } /* 2026-07-29 fix: 従来 pane 単独で position:fixed だったが、 ancestor `.sc-frame{overflow:hidden}` (line 370) で sticky が壊れ、 inline `position:sticky` の workaround も frame の overflow context に 閉じ込められて 「viewport 追従しない」 状態だった。 加えて 「現在の アイテム」 preview が middle col 上部にあり、 item list を下に scroll した時 preview と detail pane 両方が視界から消える二重 不具合 (2026-07-29 feedback)。 Fix: preview + detail を .sc-pdc-fixed wrapper で束ねて一括 fixed。 */ /* 2026-07-29 v3: sticky offset を top:14 → top:0 に。 middle col は通常 flow で grid row top:0 開始、 LEFT col も下記 sticky 化で揃える。 */ .sc-pdc-fixed{ position:sticky; /* 2026-08-02: top:0 → top:54px (.sc-picker-done-bar 分オフセット、 CTA と 重ならないようすぐ下に dock)、 max-height も同分減算。 */ top:0; align-self:start; max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px); max-height:calc(100dvh - 74px); display:flex; flex-direction:column; gap:10px; z-index:5; } /* PC pane 内の font-size は @media 内で継続適用、 sticky 系ルールは media query の外に出す (下記) — landscape mobile でも効かせるため。 */ .sc-pdc-preview{ flex:0 0 auto; border:1px solid var(--sc-border); border-radius:9px; padding:11px 12px; background:var(--sc-bg-card); } /* 2026-07-29 (feedback「選択中の吸着枠、 選択中テキスト 1 行ももったいないので削除」): PC の preview 内の見出し行 (「選択中 X/Y」 + hint) を hide、 slot grid のみに。 landscape mobile は別 media で既に hide 済、 portrait も下記同 rule で hide。 header row は inline `style="display:flex"` を持つので !important 必須。 */ .sc-pdc-preview > div:first-child{display:none !important;} .sc-pdc-fixed > .sc-item-detail-pane{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; } /* Middle col の preview は PC で hidden (sc-pdc-fixed に昇格済) */ .sc-picker-current-mid{display:none !important;} /* 2026-07-29 v2: spell picker も sc-pdc-fixed 化したのでこの fallback 撤去。 残置 pane (sc-pdc-fixed 外の bare .sc-item-detail-pane) は sticky 経由で parent grid cell に align される想定。 */ /* PC pane 内の font-size を base より大きく (11-12 → 13-14px)、 spacing も余裕 */ .sc-item-detail-pane .sc-idp-sections{gap:10px;} .sc-item-detail-pane .sc-idp-section{margin-bottom:0;} .sc-item-detail-pane .sc-idp-passive{padding:10px 12px;font-size:13px;line-height:1.6;} .sc-item-detail-pane .sc-idp-hd{margin-top:0;margin-bottom:10px;} .sc-item-detail-pane .sc-idp-cta{margin:0 0 10px;} .sc-item-detail-pane .sc-idp-cta .btn-main{padding:11px 14px;font-size:13px;} /* PC pane の rune section 内の pane も同 font-size 拡大 */ .sc-rune-section-detail > .sc-item-detail-pane{overflow-y:auto;overflow-x:hidden;} .sc-rune-section-detail > .sc-item-detail-pane .sc-idp-sections{gap:10px;} .sc-rune-section-detail > .sc-item-detail-pane .sc-idp-passive{padding:10px 12px;font-size:13px;line-height:1.6;} .sc-rune-section-detail > .sc-item-detail-pane .sc-idp-cta{margin:0 0 10px;} .sc-rune-section-detail > .sc-item-detail-pane .sc-idp-cta .btn-main{padding:11px 14px;font-size:13px;} /* PC は detail pane 常設なので fullscreen sheet 不要 */ .sc-item-detail-sheet{display:none !important;} } /* 2026-08-11 (feedback「左カラムの吸着を完全に廃止、 PC 版も同じくで」): LEFT col の sticky/max-height/overflow-y pattern を完全撤去。 効果 filter の chip 一覧を LEFT col scroll 内に収めようとする過去 iteration が mobile checkbox 実 height + LEFT col visible 制約で 「4 chip しか 見えない + Clear All pin されない」 に収束できなかったため。 これ以降 LEFT col は普通の grid item として自然 flow、 chip 一覧は全部 render、 page 全体 scroll に委ねる。 .sc-frame{overflow:clip} は border-radius clipping のため残置 (sticky containing block 用途としては不要)。 */ .sc-view[data-view="picker-item"] .sc-frame, .sc-view[data-view="picker-rune"] .sc-frame, .sc-view[data-view="picker-spell"] .sc-frame{ overflow:clip; } /* 2026-08-02 (coordinator 追加指示「PC 版とランドスケープに完了 CTA がない」): picker landscape/PC 共通の常時可視 「完了」 bar。 上の LEFT col と同じ sticky top:0 の scroll context (.sc-frame{overflow:clip} 済) を再利用する 独立行 — 既存選択中 bottom bar (.sc-pdc-fixed) の layout には無関係、 z-index も競合しないよう最上位 (7) に。 portrait の sc-sheet-head 完了 button と同色 (黄色 CTA) で統一。 2026-08-02 v2 fix (「背景色が変になって浮いている」報告): 背景が `#0d1a12` → 完全透明にフェードする gradient で、 portrait 側の 確立済 sc-sheet-head 配色 (`#0d2418` 系、 82% ではなく最後まで 60% 以上の不透明度を保つ) と別色かつ過剰にフェードしていたため、 .sc-frame 自体の radial-gradient 背景 (上部が明るい緑がかった色) と馴染まず 「浮いた」 パッチに見えていた。 sc-sheet-head と同じ 配色 + 淡い border-bottom (nav pill と同 tier の subtle green) に 統一し、 box-shadow も抑え目に (高さ/padding は上位要素の top:54px オフセット計算と結合しているため変更しない)。 */ /* .sc-picker-done-bar は h1 行右端 .scope-page-done-btn--picker に統合したので撤去 (2026-08-02、 wr-ui-audit finding L1)。 line 272 の rule + DOM 3 箇所も同時削除。 */ /* 2026-07-29 v3 (feedback「ランドスケープで詳細 pane 非表示 + 選択中枠常時表示 (フッター吸着)」 + 「12枠が画面占有」+「選択中の縦幅が高すぎ」+「LEFT col 説明ボックス削除」+「LEFT col下部見切れ」): landscape mobile では sc-item-detail-pane (詳細確認 pane) を hide、 sc-pdc-preview (選択中 preview) を viewport bottom に fixed 化 (bottom bar、 最小限高さ)。 2026-08-16 v4 (feedback「3カラムはこの幅で破綻するからそうならないように 調整したい」): gate を幅 base `min-width:600 and max-width:1199` に拡張、 max-height:500 gate も orientation:landscape 制約も削除。 PC narrow (820-1199) でも同 2-col + fixed bar treatment を継承 → 3-col 破綻解消。 fixed bar の 高さ ~54px は tall PC window でも邪魔にならない、 detail pane を fixed で 別 layer に浮かせるので item scroll と独立、 preview 常時可視。 mid-preview hide + LEFT description hide も同じ block 内で cover される。 */ @media (min-width:600px) and (max-width:1199px){ .sc-view[data-view="picker-item"] .sc-picker-grid, .sc-view[data-view="picker-rune"] .sc-picker-grid, .sc-view[data-view="picker-spell"] .sc-picker-grid{ grid-template-columns:minmax(120px,180px) minmax(0,1fr) !important; } .sc-view[data-view="picker-item"] .sc-picker-detail-col, .sc-view[data-view="picker-rune"] .sc-picker-detail-col, .sc-view[data-view="picker-spell"] .sc-picker-detail-col{ display:contents; } .sc-pdc-fixed > .sc-item-detail-pane{display:none;} /* LEFT col 説明ボックス (border+padding のある description card) を hide */ .sc-picker-grid > :first-child > div:first-child[style*="border:1px solid #234534"]{display:none;} /* LEFT col sticky/max-height は 2026-08-11 に完全撤去 (base rule から 削除済)。 landscape mobile 用の override も不要になったので撤去。 */ /* 選択中 preview を bottom bar 化 — 最小限高さ。 2026-07-29 fix (feedback「ランドスケープ時にピッカー画面のアイテム詳細 画面をスクロールさせると装備中アイテム枠がチラつく」): - backdrop-filter:blur は fixed bar 内でスクロール frame ごとに再計算 され、 landscape で middle col scroll 中に flicker/repaint する - 対策: (a) backdrop-filter 撤去 (solid 塗りに切替) して blur cost 消去、 (b) contain:layout paint style + will-change:transform で fixed bar を 独立 GPU layer に分離して scroll 中の再合成対象から外す、 (c) transform:translateZ(0) で GPU layer 昇格確実化。 */ .sc-view[data-view="picker-item"] .sc-pdc-fixed, .sc-view[data-view="picker-rune"] .sc-pdc-fixed, .sc-view[data-view="picker-spell"] .sc-pdc-fixed{ position:fixed !important; left:0;right:0;bottom:0; top:auto;max-height:none;width:100%; z-index:6; background:#050b08; border-top:1px solid var(--sc-border); padding:6px 12px; display:block !important; contain:layout paint style; will-change:transform; transform:translateZ(0); } .sc-pdc-fixed > .sc-pdc-preview{border:0;padding:0;background:transparent;} /* preview 内の見出し行 (「選択中 X/Y」 + hint) を hide、 slot grid のみ表示。 header row は inline `style="display:flex"` を持つので !important 必須。 */ .sc-pdc-fixed > .sc-pdc-preview > div:first-child{display:none !important;} /* item preview: 12-slot を 1 row 12-col に compress で縦幅最小。 icon size は rune preview (38px) と揃える (feedback「アイテムサムネサイズはルーンと揃えたい」) */ .sc-pdc-fixed > .sc-pdc-preview [data-build-items="picker-current-r"]{ grid-template-columns:repeat(12, minmax(0, 38px)) !important; gap:4px !important; justify-content:flex-start; } /* landscape mobile: item picker middle col の現在のアイテム preview (sc-picker-current-mid) を hide (bottom bar と重複)。 「選択中 X/Y」 text も一緒に。 */ .sc-picker-current-mid{display:none !important;} /* rune preview 縦幅圧縮 (progress indicator hide) */ .sc-pdc-fixed > .sc-pdc-preview [data-rune-picker-progress]{display:none;} /* middle col の bottom padding を bar 高さ (54px + 余白) に */ .sc-view[data-view="picker-item"] .sc-picker-grid > :nth-child(2), .sc-view[data-view="picker-rune"] .sc-picker-grid > :nth-child(2), .sc-view[data-view="picker-spell"] .sc-picker-grid > :nth-child(2){ padding-bottom:70px; } } /* 2026-07-29 (feedback「選択中の常時表示はスマホビューも含めて」): portrait mobile では portrait sheet 内の選択中 preview card (picker-current-p 等 を wrapper している div) を sticky:top:0 で常時 viewport 上部に固定。 :has() で 「wrapper 直下に picker-current-p / rune-preview / spell-selected を含む div」 を特定 (no HTML edit)。 */ @media (max-width:919px) and (orientation:portrait) and (max-width:499px){ /* 2026-07-29 fix (feedback「ピッカースマホビュー吸着枠がヘッダーにめり込む」): site header は portrait で position:sticky;top:0;z-index:8 なので、 sticky preview を top:0 にすると header 下に重なる。 header 高さ分 (~56px) オフセット。 */ .sc-view[data-view="picker-item"] .sc-portrait-only div:has(> [data-build-items="picker-current-p"]), .sc-view[data-view="picker-rune"] .sc-portrait-only div:has(> [data-rune-preview="portrait"]), .sc-view[data-view="picker-spell"] .sc-portrait-only div:has(> [data-spell-selected="picker-spell-p"]){ position:sticky; top:56px; z-index:6; background:var(--sc-bg-card); } /* 「選択中 X/Y」 count text を portrait でも hide (bottom bar / sticky pane で空間節約) */ .sc-view[data-view="picker-item"] .sc-portrait-only [data-build-items-count], .sc-view[data-view="picker-rune"] .sc-portrait-only [data-rune-preview-count], .sc-view[data-view="picker-spell"] .sc-portrait-only [data-spell-count]{display:none;} } /* Portrait detail sheet: full-screen 化 (2026-07-24 feedback「数値 サジェストが見切れた」→「縦幅全画面でいい」)。 top:0 まで拡張して viewport 全部使う。 border-radius 0、 handle 装飾も廃止。 2026-07-25: overscroll-behavior:contain で下スワイプ close が pull-to-refresh と干渉するのを防ぐ (scroll chain を親に伝搬させない)。 */ .sc-item-detail-sheet{ position:fixed;inset:0;z-index:12; background:linear-gradient(180deg,#0d2418,#081610); /* 2026-07-29 fix (feedback「相性アイテムがスマホビューで2件で見切れてる」 「下ナビ分隠れてるだけでは？」): 従来 padding-bottom は 14 + safe-area のみで、 portrait mobile 下部の bottomnav (74px + safe-area) 分が 最下段の相性アイテム 3 件目に被って 「スクロールしても見えない」 状態。 74 + 14 + safe-area で下ナビ分の余白を確保。 landscape / PC は下ナビが非表示なので影響なし (padding-bottom は従来通り 14 で十分だが、 統一で問題なし)。 */ padding:14px 16px calc(88px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; transform:translateY(0); transition:transform .2s ease-out; } .sc-item-detail-sheet[hidden]{display:block;transform:translateY(100%);pointer-events:none;} /* 2026-07-25 最終 landscape mobile 詳細シート layout: - portrait / PC: hero-col は display:contents で従来 flat flow (hd → cta → sections の縦 stack) - landscape mobile (< 920px + orientation:landscape): sheet 全体を 2-col grid、 LEFT = hero-col (hd + cta) sticky、 RIGHT = sections stacked。 hero が常時可視で content scroll 可の 「app」 感 layout。 */ .sc-idp-hero-col{display:contents;} .sc-idp-sections{display:flex;flex-direction:column;gap:11px;} /* 2026-07-29 (user 案「ランドスケープ時はビルドに追加ボタンの上に12枠表示」): hero-col 内の 12-slot inline preview。 default は全 view で hide、 landscape mobile sheet 内のみ可視 (下 @media で上書き)。 */ .sc-idp-sheet-preview{display:none;} /* 2026-08-02 v2 fix (「吸着になっていない」+「変な線」報告): v1 は .sc-idp-cta-bar に position:fixed を与えていたが、 その containing block である .sc-item-detail-sheet 自身が `transform:translateY(0)` (containing block 化) と `overflow-y:auto` (自己スクロール) を 兼ねていたため、 fixed 記述の子孫がその自己スクロールに巻き込まれて 実際にはコンテンツと一緒に動いていた (CDP 実測: scrollTop を 400px 進めると bar の bounding rect も同じだけ動く = 真の意味で吸着して いなかった)。 また border-top + 強い box-shadow + 透明フェード gradient の三重掛けが 「変な線」 に見えていた一因。 恒久 fix: sheet を flex column 化しスクロールを `.sc-idp-sections` だけに閉じ込める (min-height:0 + overflow-y:auto)。 CTA bar は flex の最終要素として自然に bottom 固定される — position:fixed が 不要になるので自己スクロール干渉も原理的に発生しない。 DOM 順は hd → preview → cta-bar → sections なので order で視覚順を並べ替え。 見た目は 1 本の subtle border-top のみ (box-shadow / フェード gradient は撤去、 landscape/PC の .sc-sheet-head 完了 button と 同じ背景色 #0d2418 に統一)。 */ @media (max-width:919px) and (orientation:portrait) and (max-width:499px){ .sc-item-detail-sheet{ display:flex; flex-direction:column; overflow:hidden; padding:14px 16px 0; } .sc-idp-hd{flex:0 0 auto;} .sc-idp-sections{ order:2; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:16px; } .sc-item-detail-sheet .sc-idp-cta-bar{ order:3; flex:0 0 auto; margin:10px -16px 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,#0d2418 92%,rgba(13,36,24,.6)); border-top:1px solid var(--sc-border); } .sc-item-detail-sheet .sc-idp-cta-bar .sc-idp-cta{margin:0;} } @media (max-width:919px) and (orientation:landscape){ /* sheet 全体を 2-col grid: 左 = hero (icon+name+CTA)、 右 = sections */ .sc-item-detail-sheet{ display:grid !important; grid-template-columns:minmax(240px, 300px) minmax(0, 1fr); gap:20px; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); align-content:start; } /* max-width で超横長でも中央寄せ */ .sc-item-detail-sheet > .sc-idp-hero-col, .sc-item-detail-sheet > .sc-idp-sections{ min-width:0; } /* hero-col は grid item 化 (display:contents 廃止) */ .sc-item-detail-sheet .sc-idp-hero-col{ display:flex;flex-direction:column;gap:12px; position:sticky;top:14px;align-self:start; } /* Sections は右 col で 1-col stack、 各 section が full-width で読みやすい */ .sc-idp-sections{ display:flex;flex-direction:column;gap:11px; } /* Section grid-column 指定を消す (1-col なので不要) */ .sc-idp-sec--stats,.sc-idp-sec--recipe,.sc-idp-sec--passive, .sc-idp-sec--suggest,.sc-idp-sec--synergy{grid-column:auto;} /* 2026-07-29 (user 案): sheet の hero-col 内 inline preview を表示。 CTA button の直上に置いて 「N 番目に追加」 の対象 slot が一目で分かる。 item picker: 12 slot → 6 col × 2 row grid (アイコン視認性 up、 2026-07-29 続報) rune picker: 5 slot → flex-wrap で自然折返し spell picker: 2 slot → flex 横並び */ .sc-item-detail-sheet .sc-idp-sheet-preview[data-build-items="picker-current-sheet"]{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; } .sc-item-detail-sheet .sc-idp-sheet-preview[data-rune-preview="sheet"]{ display:flex; gap:5px; flex-wrap:wrap; } .sc-item-detail-sheet .sc-idp-sheet-preview[data-spell-selected="picker-spell-sheet"]{ display:flex; gap:9px; } /* sheet 表示中は従来の固定 bottom bar (.sc-pdc-fixed) が重複するので hide。 注意: .sc-pdc-fixed と .sc-item-detail-sheet は DOM 上兄弟ではなく、 前者 は .sc-picker-grid 内深階層、 後者は section 直下。 sibling combinator (~) ではマッチしない。 共通祖先
から :has() で 見て内部の sheet の開閉を判定する。 */ section.sc-view[data-view="picker-item"]:has(.sc-item-detail-sheet:not([hidden])) .sc-pdc-fixed, section.sc-view[data-view="picker-rune"]:has(.sc-item-detail-sheet:not([hidden])) .sc-pdc-fixed, section.sc-view[data-view="picker-spell"]:has(.sc-item-detail-sheet:not([hidden])) .sc-pdc-fixed{ display:none !important; } } /* Landscape sticky pane。 2026-07-25 fix: 「landscape で詳細を確認欄が アイテム項目にかかって崩れている」 対策で overflow-x:hidden + min-width:0 + word-break で中身が 260-320px 幅の column を越えて溢れないよう防御。 */ .sc-item-detail-pane{ background:var(--sc-bg-card); border:1px solid var(--sc-border-strong); border-radius:10px; padding:14px; min-height:200px; min-width:0; overflow-x:hidden; word-break:break-word; overflow-wrap:anywhere; } .sc-item-detail-pane *{min-width:0;max-width:100%;} .sc-item-detail-pane img{max-width:100%;height:auto;} /* Detail pane 内 sections (共通 across portrait / landscape) */ .sc-idp-hd{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;margin-top:6px;} .sc-idp-icon{width:52px;height:52px;flex:none;border-radius:8px;background:radial-gradient(circle at 35% 30%,var(--sc-bg-cell),var(--sc-bg-deep));border:1px solid var(--sc-cp-yellow-dim);display:flex;align-items:center;justify-content:center;overflow:hidden;} .sc-idp-icon img{width:88%;height:88%;object-fit:contain;} .sc-idp-title{flex:1;min-width:0;} .sc-idp-name-ja{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:16px;color:var(--sc-text);line-height:1.2;} .sc-idp-name-en{font-family:'Chakra Petch',sans-serif;font-size:11px;color:var(--sc-text-muted);letter-spacing:.03em;margin-top:2px;} .sc-idp-price{display:flex;align-items:baseline;gap:4px;margin-top:5px;font-family:'Orbitron','JetBrains Mono',monospace;font-size:19px;font-weight:700;color:var(--sc-cp-yellow);} .sc-idp-price .g{font-size:10px;color:var(--sc-cp-yellow-dim);letter-spacing:.2em;} .sc-idp-close{width:26px;height:26px;flex:none;border:1px solid var(--sc-border);border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--sc-text-muted);font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1;background:transparent;cursor:pointer;} .sc-idp-close:hover{color:var(--sc-cp-yellow);border-color:var(--sc-cp-yellow-dim);} .sc-idp-section{margin-bottom:11px;} /* 2026-07-29 fix (feedback「小見出しが小さすぎ、 レギュ違反では?」): 9px → var(--sc-fs-caption) 11px に。 type ramp の最小に揃える。 */ .sc-idp-h{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption);letter-spacing:.15em;color:var(--sc-green-primary);margin-bottom:5px;display:flex;align-items:center;gap:6px;text-transform:uppercase;} .sc-idp-h::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--sc-green-primary);} .sc-idp-stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;padding:8px 10px;background:var(--sc-bg-deep);border-radius:5px;border:1px solid var(--sc-border);} .sc-idp-stat{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;} .sc-idp-stat .k{color:var(--sc-text-muted);} .sc-idp-stat .v{color:var(--sc-green-primary);font-family:'Orbitron','JetBrains Mono',monospace;font-weight:600;} /* 2026-07-25 fix「詳細説明枠の高さはフルで表示されるように」対策で font 11→13px + padding 増、 max-height 制限なしで自然に伸びる。 */ .sc-idp-passive{font-family:'Noto Sans JP',sans-serif;font-size:13px;line-height:1.75;color:var(--sc-text);padding:12px 14px;background:var(--sc-bg-deep);border-left:2px solid var(--sc-cp-yellow);border-radius:0 5px 5px 0;white-space:pre-wrap;word-break:break-word;} /* 2026-07-29 追加 (feedback「ピッカーの詳細説明欄も見出しを太字に」): カタログ / 詳細 page と同 pattern で行頭 / 文中 label 「XXX:」 を bold 化。 render_effect_html が strong.sc-idp-passive-head で包むのでこの class に color/weight を割当。 */ .sc-idp-passive-head{font-weight:700;color:#ffe07a;} .sc-idp-recipe{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--sc-text-muted);} .sc-idp-recipe img{width:20px;height:20px;border-radius:3px;border:1px solid var(--sc-border);object-fit:contain;} .sc-idp-recipe .plus{color:var(--sc-green-faint);padding:0 2px;} .sc-idp-recipe .eq{color:var(--sc-cp-yellow);font-family:'Orbitron','JetBrains Mono',monospace;font-weight:700;font-size:12px;margin-left:auto;} .sc-idp-suggest{padding:9px 10px;background:linear-gradient(180deg,rgba(125,255,176,.05),rgba(125,255,176,.02));border:1px solid var(--sc-border-strong);border-radius:5px;display:flex;flex-direction:column;gap:5px;} .sc-idp-suggest .row{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;gap:8px;} .sc-idp-suggest .row .k{color:var(--sc-text-muted);white-space:nowrap;} .sc-idp-suggest .row .v{font-family:'Orbitron','JetBrains Mono',monospace;font-weight:600;color:var(--sc-green-primary);text-align:right;} .sc-idp-suggest .row .v.warn{color:var(--sc-cp-yellow);} .sc-idp-suggest .row .v.dim{color:var(--sc-text-muted);} /* 相性 items 行 — 数値証拠 (matched stat 値) 表示 + tap で focus 切替。 2026-07-24 feedback 「シナジー情報表示、 数値的証拠のみで相性の良い アイテムなどが表示したい」対策。 */ .sc-idp-syn{display:flex;flex-direction:column;gap:6px;} /* 判定基準 caption (2026-07-25 user feedback「数値証拠はどのようにシナジー 判断されてる？」 対策で 「なぜこの pair」 を明示するため追加)。 */ .sc-idp-syn-crit{ font-family:'JetBrains Mono',monospace;font-size:10px; color:var(--sc-text-muted);line-height:1.5; padding:6px 9px; background:rgba(125,255,176,.04); border-left:2px solid var(--sc-green-primary); border-radius:3px; margin-bottom:2px; } .sc-idp-syn-row{ display:flex;align-items:center;gap:9px;padding:7px 9px;width:100%; background:var(--sc-bg-deep);border:1px solid var(--sc-border); border-radius:6px;cursor:pointer;text-align:left;color:inherit; transition:border-color .12s,background .12s; } .sc-idp-syn-row:hover{border-color:var(--sc-green-primary);background:#0f2617;} .sc-idp-syn-icon{ width:28px;height:28px;flex:none;border-radius:5px; background:radial-gradient(circle,var(--sc-bg-cell),var(--sc-bg-deep)); border:1px solid var(--sc-border);overflow:hidden; display:flex;align-items:center;justify-content:center; } .sc-idp-syn-icon img{width:88%;height:88%;object-fit:contain;} .sc-idp-syn-body{flex:1;min-width:0;} .sc-idp-syn-name{ font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:700; color:var(--sc-text);line-height:1.2; } .sc-idp-syn-stats{ font-family:'JetBrains Mono',monospace;font-size:10px; color:var(--sc-green-primary);margin-top:3px;line-height:1.3; } /* CTA は header 直下に配置 (2026-07-24 sticky で見えなかった feedback の恒久対策)。 flow 位置は 「header → CTA → stats → ...」。 */ .sc-idp-cta{ margin:8px 0 12px; display:flex;gap:6px; } .sc-idp-cta .btn-main{flex:1;padding:13px 16px;text-align:center;background:linear-gradient(180deg,#ffe14a,var(--sc-cp-yellow));color:#3d2f00;border:0;border-radius:6px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14px;letter-spacing:.03em;box-shadow:0 0 12px rgba(255,216,58,.4);cursor:pointer;} /* 2026-08-02: 閉じる button (data-idp-close) を CTA row 内に配置、 主 CTA と side-by-side (user 「上下行き来不便、 下にも閉じるかキャンセル」)。 outlined subtle design で主 CTA より目立たず、 flex-shrink:0 で主 CTA が縮まない。 */ .sc-idp-cta .btn-cancel{flex:0 0 auto;padding:13px 18px;text-align:center;background:transparent;color:#9fe0ba;border:1px solid var(--sc-border-strong);border-radius:6px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;letter-spacing:.03em;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;} .sc-idp-cta .btn-cancel:hover{background:rgba(125,255,176,.06);color:#dffff0;border-color:#5aa87b;} .sc-idp-cta .btn-main.remove{background:linear-gradient(180deg,#3a1414,#2a0d0d);color:#ff9184;border:1px solid #6b3235;box-shadow:none;} .sc-idp-cta .btn-main.is-disabled, .sc-idp-cta .btn-main[disabled]{ background:linear-gradient(180deg,#2a2a1a,#1a1a10); color:#8a8465;border:1px solid #4a4a35; box-shadow:none;cursor:not-allowed;opacity:.75; } .sc-idp-cta .btn-alt{padding:13px 16px;background:transparent;color:var(--sc-text-muted);border:1px solid var(--sc-border);border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;cursor:pointer;} .sc-idp-cta .btn-alt:hover{color:var(--sc-cp-yellow);border-color:var(--sc-cp-yellow-dim);} /* Landscape placeholder (nothing focused) */ .sc-idp-placeholder{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--sc-text-muted);text-align:center;padding:40px 20px;line-height:1.6;letter-spacing:.05em;} /* portrait 側は 「空 tap で追加」 の学習用 hint も表示 (mobile hint) */ .sc-idp-hint{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--sc-text-muted);text-align:center;letter-spacing:.06em;padding:5px 0 0;opacity:.7;} /* Phase 2D β: build editor 数値サジェスト panel. stat 表の直下 */ .sc-build-suggest{ padding:11px 12px; border:1px solid var(--sc-border-strong);border-radius:8px; background:linear-gradient(180deg,rgba(125,255,176,.05),rgba(125,255,176,.02)); display:flex;flex-direction:column;gap:6px; } .sc-build-suggest:empty{display:none;} .sc-build-suggest .hd{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em; color:var(--sc-green-primary);text-transform:uppercase; display:flex;align-items:center;gap:6px;margin-bottom:2px; } .sc-build-suggest .hd::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--sc-green-primary);} .sc-build-suggest .row{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;gap:10px;} .sc-build-suggest .row .k{color:var(--sc-text-muted);} .sc-build-suggest .row .v{font-family:'Orbitron','JetBrains Mono',monospace;font-weight:600;color:var(--sc-green-primary);} .sc-build-suggest .row .v.warn{color:var(--sc-cp-yellow);} .sc-build-suggest .row .v.dim{color:var(--sc-text-muted);} .sc-chip:hover:not(.is-active){border-color:var(--sc-green-primary);color:var(--sc-green-primary);} .sc-chip.is-active{color:var(--sc-ink-on-green);background:var(--sc-green-primary);border-color:var(--sc-green-primary);font-weight:700;} .sc-chip-row{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .sc-chip-row::-webkit-scrollbar{display:none;} .sc-effect-tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;border:1px solid var(--sc-opp-border);color:#caa15a;font-size:var(--sc-fs-caption);font-family:'JetBrains Mono',monospace;} /* Champion picker grid — feedback 2026-07-10 「スマホのチャンピオン ピッカーは 5 列にして」 で mobile portrait を 6 → 5 列、 ≥520px を 7 → 6 列に更に広げてタイル拡大。 tile 内の円アイコンは grid 幅に応じ て自動拡大、 名前は下段で 10px hardcode。 landscape (≥920px) は .sc-champ-grid-8 で 10 列扱い据え置き。 */ .sc-champ-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;} @media (min-width:520px){.sc-champ-grid{grid-template-columns:repeat(6,1fr);gap:10px;}} /* Lane 区切り section (「すべて」 mode)。 2026-07-18 feedback。 parent が is-sectioned の時は grid → flex-col に切替、 各 section の内側 grid が元の tile レイアウトを継ぐ。 */ .sc-champ-grid.is-sectioned, .sc-champ-grid-8.is-sectioned{display:flex;flex-direction:column;gap:16px;} .sc-champ-section{display:flex;flex-direction:column;gap:8px;} .sc-champ-section-label{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body-sm);letter-spacing:.12em;color:var(--sc-green-glow);text-transform:uppercase;border-bottom:1px solid var(--sc-hairline);padding-bottom:5px;} /* Portrait grid の section: 5/6 col (親 .sc-champ-grid と揃え) */ .sc-champ-grid.is-sectioned .sc-champ-section-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;} @media (min-width:520px){.sc-champ-grid.is-sectioned .sc-champ-section-grid{grid-template-columns:repeat(6,1fr);gap:10px;}} /* Landscape/matchup grid の section: 親 .sc-champ-grid-8 と揃えて auto-fit。 Desktop (>=1080) は 「すべて」 モードで tile がでかすぎ feedback (2026-07-19) を受けて 10-col に揃える (非 sectioned mode と同じ tile size)。 */ .sc-champ-grid-8.is-sectioned .sc-champ-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:9px;} @media (min-width:1080px){.sc-champ-grid-8.is-sectioned .sc-champ-section-grid{grid-template-columns:repeat(10,minmax(0,1fr));}} /* Hover 挙動 - feedback「マウスオーバー挙動するように」 */ .sc-champ-tile{transition:transform .12s;} .sc-champ-tile:hover .sc-champ-tile-icon{border-color:var(--sc-green-primary);box-shadow:0 0 12px -3px rgba(125,255,176,.5);transform:scale(1.04);transition:all .12s;} .sc-champ-tile:hover .sc-champ-tile-name{color:var(--sc-text);} /* 2026-08-17 (feedback「タブレットの縦表示において、 チャンピオンピッカー画面 のサムネイルがサイズにばらつき出ている」): grid item に min-width:0 を追加。 tile 内 .sc-champ-tile-name (white-space:nowrap) の min-content = 名前 text 幅 が grid item の暗黙 min-width:auto (= min-content) を通して track を膨らませ、 名前が長い champion (エイトロックス / スカーナー / ドクター・ムンド等) の列 だけ tile 幅拡大 → 「3-4 列目だけ big」 見た目バラツキ発生。 min-width:0 で track が 1fr を尊重、 全 tile 均等サイズに。 名前は既存 text-overflow:ellipsis で clip。 */ .sc-champ-tile{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;background:transparent;border:0;padding:0;color:inherit;width:100%;min-width:0;box-sizing:border-box;} .sc-champ-tile-icon{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid #0c3c26;background:#0c3c26;flex:none;box-shadow:0 0 6px -3px rgba(125,255,176,.35);} .sc-champ-tile-icon img{width:100%;height:100%;object-fit:cover;} .sc-champ-tile.is-selected .sc-champ-tile-icon{border-color:var(--sc-green-primary);box-shadow:0 0 10px -3px rgba(125,255,176,.6);} /* PC (>=920px): チャンピオン picker は円形サムネのまま、 サイズも 小さめキープ (2026-07-10 feedback: 「チャンピオン選ぶ画面は丸形の まま小さく」)。 X シェア背景 style の全身画像は 「ビルド編集画面 左上サムネ」 = .sc-ident-card 側に適用する (下段参照)。 */ .sc-champ-tile-name{font-size:10px;font-weight:600;color:var(--sc-text-soft);text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-family:'Noto Sans JP',sans-serif;margin-top:2px;} /* Item grid (6 col small) */ .sc-item-grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;} .sc-item-cell{position:relative;aspect-ratio:1;border-radius:6px;border:1px solid var(--sc-border);background:radial-gradient(circle,var(--sc-bg-cell),var(--sc-bg-deep));overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .12s;} /* picker-current preview: 2026-07-29 更新で 「埋まった cell tap → 詳細確認枠に 説明を出す」 が動く実装になった (scouter.js:6406) が、 従来 CSS が cursor:default のままで clickability が伝わらず 「ユーザーは直感的に丸枠を click しようとする が反応しない」 と誤解されていた (2026-07-29 feedback)。 埋まった cell のみ pointer + hover 強調で clickability を明示、 空 cell は default。 */ [data-build-items^="picker-current"] .sc-item-cell{cursor:pointer;} /* picker-current preview の空セル: 「表示専用 (item は必ず最初の空枠に入る、 hover で特定枠を狙える錯覚を与えない)」 のため grey/muted 化。 click は 「hint 行 pulse + item list へ scroll」 の誘導動作に接続 (JS 側) だが、 cursor は default (2026-08-06 feedback: 「矢印アイコンが手アイコンに 変わってホバー感ある」 → hand cursor で 「そこに入れられる」 と誤解 させない)。 */ [data-build-items^="picker-current"] .sc-item-cell.is-empty{cursor:default;border-color:var(--sc-hairline);background:rgba(7,18,11,.4);color:#3b5847;} [data-build-items^="picker-current"] .sc-item-cell.is-empty:hover{border-color:var(--sc-hairline);background:rgba(7,18,11,.4);color:#3b5847;} [data-build-items^="picker-current"] .sc-item-cell:not(.is-empty):hover{border-color:var(--sc-cp-yellow-dim);box-shadow:0 0 8px -2px rgba(255,215,120,.4);} /* opp / alt items grid の色調 scoping。 従来 iconItemHTML が inline style で 塗っていたが、 renderOppBuild / renderCompareAlt を updateItemCellInPlace ベース (skeleton in-place update) に移行するのに合わせて CSS scoping。 filled cell (`.sc-item-cell:not(.is-empty)`) だけ opp/alt 色に、 empty (＋ 表示中) は self と同じ dashed 緑 border で誘導 hint 維持。 */ [data-opp-items] .sc-item-cell:not(.is-empty){border-color:var(--sc-opp-border);background:radial-gradient(circle,var(--sc-opp-bg-1),var(--sc-opp-bg-2));} [data-alt-items] .sc-item-cell:not(.is-empty){border-color:var(--sc-border-strong);} .sc-item-cell:hover{border-color:var(--sc-green-primary);} /* 空スロット base: 「タップして追加」 の visual affordance (dashed 緑 + + アイコン)。 hover state は build editor / matchup / compare の interactive context のみ で発火 (下記 hover rule)。 picker-current preview は non-interactive なので hover 抑制 (2026-08-06 feedback: 「余計にクリック感が出て改悪」)。 */ .sc-item-cell.is-empty{border:1px dashed rgba(125,255,176,.28);background:radial-gradient(circle,rgba(20,55,35,.45),rgba(7,18,11,.55));color:var(--sc-green-dim);font-size:var(--sc-fs-title-sm);cursor:pointer;transition:border-color .12s,background .12s,color .12s;} /* 空スロットの hover state は削除 (2026-08-06 feedback: 「hover させると そこの順番に入れるアイテムと勘違いしない？」)。 2026-07-25 の 「always first empty」 UX 統一と一致 — item は必ず最初の空枠に入るので、 特定 枠を hover で targeting させる affordance は誤解のもと。 rune / spell も同じ理由で hover state を持たない。 base の dashed 緑 + + アイコン だけで 「タップして追加」 の affordance は十分伝える。 */ /* picker-current preview の空セル click 時に hint 行を一瞬 pulse させて 「何もしないんじゃなく、下から選んでね」 と視覚で誘導 (2026-08-06 feedback: A+B だけでは大枠未解消 → C 追加)。 */ @keyframes sc-picker-hint-pulse{ 0%{color:var(--sc-green-faint);transform:translateX(0);} 15%{color:var(--sc-green-primary);transform:translateX(0) scale(1.02);} 50%{color:var(--sc-green-glow);transform:translateX(2px) scale(1.04);} 100%{color:var(--sc-green-faint);transform:translateX(0);} } .sc-picker-hint{transition:color .18s;} .sc-picker-hint.is-pulsing{animation:sc-picker-hint-pulse .9s ease-out;color:var(--sc-green-primary);} /* PC 版で空セル hover した瞬間に hint 行を明色化 (2026-08-06 feedback: 「PC 版の際の何も変わらないホバーは違和感」)。 セル自身の hover 応答 (border 変化) は 「そこに入る targeting」 と誤解されるので入れない、 代わりに hint 行を明るくして 「click で下から選ぶ流れ」 を予告する。 */ .sc-picker-hint.is-hint-preview{color:var(--sc-green-primary);} /* landscape (PC + mobile landscape) は縦幅節約優先で hint 行を hide (2026-08-06 feedback: 「縦幅をとにかく取りたくないので」)。 hint の 誘導フローは 「クリック → pulse」 の on-demand で ≒ 代替可能。 */ @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){ .sc-picker-hint{display:none;} } /* Item cell img overlay (fade-in on load = JS-populated rule) img は absolute で cell 全面 cover、 opacity 0 で初期不可視。 img.onload → opacity 1 で fade-in、 同時に cell に .is-loaded class 付与で "+" placeholder を隠す。 skeleton cell に img 予入 済で src set のみで populate = DOM tear-down なし、 image ready まで "+" placeholder 見えて image ready で fade-in。 super reload 時のみ発生しない getIsCache pop-in が原因。 */ .sc-item-cell-img{position:absolute;top:6%;left:6%;width:88%;height:88%;object-fit:contain;display:block;opacity:0;transition:opacity .15s;} .sc-item-cell.is-loaded .sc-item-cell-img{opacity:1;} .sc-item-cell.is-loaded > *:not(.sc-item-cell-img):not(.sc-item-cell-clear):not(.sc-item-cell-swap){display:none;} .sc-item-cell.is-active{border-color:var(--sc-green-primary);box-shadow:0 0 10px -3px rgba(125,255,176,.6);} .sc-item-cell img{width:88%;height:88%;object-fit:contain;display:block;} /* 1-click clear ×: filled cell の右上に薄く常時表示、 hover/tap で強調。 web/ の overlay clear と同じ UX (3 click → 1 click)。 */ .sc-item-cell-clear{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(20,10,10,.82);color:#ff9aa8;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);font-weight:700;line-height:14px;text-align:center;cursor:pointer;z-index:3;opacity:.7;transition:opacity .12s,background .12s,color .12s;border:1px solid rgba(255,90,110,.35);padding:0;} .sc-item-cell-clear:hover,.sc-item-cell-clear:focus{opacity:1;background:rgba(180,40,60,.92);color:#fff;border-color:rgba(255,130,150,.7);outline:none;} /* opp/alt items (iconItemHTML 生成の .sc-item-cell / bare div) 用 — is-loaded class を使わないので showClear opt-in の container 側 span を直接表示 */ .sc-item-cell:not(.is-empty) .sc-item-cell-clear{display:block;} /* ===== 2026-08-08 v2: 装備中アイテム並び替え (in-game 準拠 button-on-top) ===== picker-current preview 限定 (build-editor items は変更なし)。 元の常時 × は 撤去、 slot tap で reorder mode 発火: - source slot: 真ん中上 (top-center) に × ボタン (delete) - 該当以外の全 slot (filled + empty): 真ん中上に循環矢印 swap ボタン swap ボタン tap で source item と該当 item の位置を入替 (target が空なら source 位置が空く single-move)。 */ /* × / swap ボタン共通配置 — 真ん中上 (top-center overhang)、 default 非表示。 個別 state class / attr で出現時に display:flex 化。 pointer-events:auto で ボタン tap 有効化 (cell click ハンドラにも bubble する)。 詳細度は `.sc-item-cell:not(.is-empty) .sc-item-cell-clear{display:block}` (line 1246、 0,3,0) を超えるため .sc-item-cell を明示 (0,3,0 + later = 勝ち)。 */ /* 2026-08-08 v4: overhang (translate -50% Y) は親 wrapper の overflow で 見切れる bug (mobile / PC 両方) → cell 内 top-center に完全収容 (top:2px)。 */ [data-build-items^="picker-current"] .sc-item-cell .sc-item-cell-clear, [data-build-items^="picker-current"] .sc-item-cell .sc-item-cell-swap{ display:none;position:absolute;top:2px;left:50%;transform:translateX(-50%); width:20px;height:20px;border-radius:50%;padding:0; align-items:center;justify-content:center;z-index:5; cursor:pointer;pointer-events:auto;line-height:1;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px; } /* × は source cell だけ visible (赤 badge)。 (0,4,0) で base の (0,3,0) 勝ち */ [data-build-items^="picker-current"] .sc-item-cell.is-reorder-source .sc-item-cell-clear{ display:flex;background:rgba(180,40,60,.95);color:#fff; border:1px solid rgba(255,130,150,.75);opacity:1; box-shadow:0 2px 8px -1px rgba(180,40,60,.6); } /* swap ボタンは reorder mode 中の非 source 全 cell (filled + empty) で visible */ [data-build-items^="picker-current"][data-reorder-source] .sc-item-cell:not(.is-reorder-source) .sc-item-cell-swap{ display:flex;background:rgba(30,50,35,.95);color:#8effb8; border:1px solid rgba(125,255,176,.6);padding:4px; box-shadow:0 2px 8px -1px rgba(0,0,0,.5),0 0 6px -1px rgba(125,255,176,.5); } .sc-item-cell-swap svg{width:100%;height:100%;} /* source cell の視覚 highlight (「今 tap されている」 明示) */ [data-build-items^="picker-current"] .sc-item-cell.is-reorder-source{ border-color:var(--sc-green-primary) !important; box-shadow:0 0 0 2px rgba(125,255,176,.5),0 0 14px -3px rgba(125,255,176,.7) !important; z-index:2; } /* reorder mode 中の空 slot: move-here highlight (緑 border + 淡い緑塗り) */ [data-build-items^="picker-current"][data-reorder-source] .sc-item-cell.is-empty{ border-color:var(--sc-green-primary) !important; background:rgba(125,255,176,.08); box-shadow:0 0 10px -4px rgba(125,255,176,.5) !important; } /* v7 (2026-08-08 user 依頼「並び替え有無の切り替えいらない、 チップ全部 取ってしまおう」): reorder mode は常時 ON、 toggle chip 廃止。 picker-item view の picker-current preview の filled slot tap = 直ちに source 化、 他 slot tap で swap、 × delete。 detail 表示は picker LIST 側 tap で見る運用に。 */ /* Core badge: splitSlots.core + 有効 enchant の slot に data-core="1" 付与、 CSS 側で orange HUD border + 左上 "CORE" ラベルで 「in-game inventory slot = 戦闘力に効いている」 と示す。 2026-07-12 feedback:「選ばれた アイテムがコアの場合にコアアイテムであることを分かりやすくして」。 hover / opp / alt scoping より詳細度を高くして常時 orange border を維持。 */ .sc-item-cell[data-core="1"], .sc-item-cell[data-core="1"]:hover, [data-opp-items] .sc-item-cell[data-core="1"]:not(.is-empty), [data-alt-items] .sc-item-cell[data-core="1"]:not(.is-empty){ border-color:var(--sc-orange-lock); box-shadow:0 0 8px -3px rgba(255,138,61,.55); } .sc-item-cell[data-core="1"]::before{ content:'CORE'; position:absolute; top:2px; left:2px; z-index:4; padding:1px 4px; 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:8px; line-height:1.1; letter-spacing:.06em; pointer-events:none; text-shadow:0 0 2px rgba(255,138,61,.4); } /* 2026-07-29 (feedback「選択中吸着エリアの CORE ラベルで X ボタンが見えなくなる」): preview 内 (sc-pdc-preview + sc-picker-current-mid) の cell は 38-48px と狭く、 CORE badge (28px 幅) と X button (16px 幅、 right corner) が overlap する。 preview では CORE badge を hide (orange border が既に 「コア」 を示すので 情報冗長でなく、 X button の可視性を優先)。 */ .sc-pdc-preview .sc-item-cell[data-core="1"]::before, .sc-picker-current-mid .sc-item-cell[data-core="1"]::before{ content:none; } /* Rune row (5 circular) */ .sc-rune-row-h{display:flex;gap:5px;} .sc-rune-slot{width:28px;height:28px;border-radius:50%;border:1px solid var(--sc-border);background:radial-gradient(circle,var(--sc-bg-cell),var(--sc-bg-deep));overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sc-green-dim);font-size:var(--sc-fs-body-lg);transition:border-color .12s;flex:none;} .sc-rune-slot:hover{border-color:var(--sc-green-primary);} .sc-rune-slot.is-empty{border:1px dashed var(--sc-border-strong);} .sc-rune-slot.is-empty-dim{border:1px dashed var(--sc-border);color:var(--sc-green-faint);} .sc-rune-slot.is-active{border-color:var(--sc-green-primary);box-shadow:0 0 10px -3px rgba(125,255,176,.6);} .sc-rune-slot img{width:82%;height:82%;object-fit:contain;} /* Spell row (2 square) */ .sc-spell-row-h{display:flex;gap:5px;} .sc-spell-slot-h{width:28px;height:28px;border-radius:6px;border:1px solid var(--sc-border);background:radial-gradient(circle,var(--sc-bg-cell),var(--sc-bg-deep));overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sc-green-dim);font-size:var(--sc-fs-body-lg);transition:border-color .12s;flex:none;} .sc-spell-slot-h:hover{border-color:var(--sc-green-primary);} .sc-spell-slot-h.is-empty{border:1px dashed var(--sc-border-strong);} .sc-spell-slot-h.is-empty-dim{border:1px dashed var(--sc-border);color:var(--sc-green-faint);} .sc-spell-slot-h img{width:86%;height:86%;object-fit:contain;} /* Full-stats grid: 2-col default (portrait / desktop RIGHT column narrow)、 mobile landscape (600-1079) では 4-col で 16 stats を 4 rows に圧縮 → spell 下配置で縦幅節約。 stats cell 幅 min 130px (体力 2,310 等が改行 せず読める) 確保。 2026-07-18 fix。 */ /* 2026-07-29: stats-grid の二重角丸撤廃。 outer .sc-be-stats* wrapper が border + radius を持つので、 inner grid は装飾なしにする (nested rounded box の 「気持ち悪い」 見た目解消)。 */ .sc-stats-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sc-hairline-row);} .sc-stats-cell{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--sc-bg-card);font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);gap:8px;} .sc-stats-cell-k{color:var(--sc-text-muted);flex:1;min-width:0;font-size:var(--sc-fs-body);} .sc-stats-cell-v{color:var(--sc-text-soft);font-weight:700;font-family:'Orbitron',sans-serif;font-size:var(--sc-fs-body-md);} /* Section head */ .sc-sec-h{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body-sm);color:#bdffd6;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .sc-sec-h-clear:hover{color:var(--sc-green-primary);border-color:var(--sc-green-primary);} /* Long-press pulse for slot chips (see attachSlotSwitcher). */ .sc-chip.is-holding{border-color:var(--sc-orange-lock);box-shadow:0 0 0 2px rgba(255,138,61,.25);transform:scale(.97);transition:transform .2s,border-color .2s,box-shadow .2s;} .sc-sec-h .sub{color:var(--sc-green-dim);font-weight:400;margin-left:6px;} /* 効果 filter accordion (picker-item)。 web-old 挙動 (checkbox + AND + accordion) に合わせて 2026-07-10 refactor。 header 折り畳み、 body は開いた時のみ 2-4 列 auto-fill grid。 */ /* 2026-07-29 (feedback「Clear All が sticky で見切れる」): overflow:hidden は sticky descendants の scroll container を作って sticky が LEFT col 単位で 効かなくなる。 overflow:clip に切替 (border-radius clipping は維持、 scroll container を作らないで sticky を LEFT col の overflow-y:auto 単位で sticky できるように)。 */ .sc-effectfilter{border:1px solid var(--sc-border);border-radius:8px;background:var(--sc-bg-card);margin-bottom:11px;overflow:clip;} .sc-effectfilter-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;background:transparent;border:0;cursor:pointer;color:var(--sc-text);font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body-sm);font-weight:600;} .sc-effectfilter.has-active .sc-effectfilter-head{color:var(--sc-green-primary);} .sc-effectfilter-right{display:flex;align-items:center;gap:7px;} .sc-effectfilter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sc-green-primary);color:var(--sc-ink-on-green);font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;} .sc-effectfilter-caret{font-size:10px;color:var(--sc-green-dim);transition:transform .15s;} .sc-effectfilter.is-open .sc-effectfilter-caret{transform:rotate(180deg);} /* 2026-07-29 v2: max-height:13rem + overflow:auto を撤去 (feedback「縦スクロール消せるようだったら削除」)。 LEFT col が sticky で独自 overflow-y:auto を持っているので、 effect filter は自然 flow で良い。 */ .sc-effectfilter-body:not([hidden]){display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px 10px;padding:9px 12px 10px;border-top:1px solid var(--sc-hairline);} .sc-effectfilter-opt{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body-sm);color:var(--sc-text-soft);cursor:pointer;white-space:nowrap;} .sc-effectfilter-opt input{accent-color:var(--sc-green-primary);cursor:pointer;margin:0;} .sc-effectfilter-clearrow{grid-column:1/-1;text-align:end;margin-top:2px;} /* 2026-08-11 (feedback「左カラム吸着廃止 + アコーディオントグルも削除」): LEFT col sticky/max-height/overflow を base rule から撤去済に伴い、 効果 filter の landscape 用 sticky/max-height/panel-scroll rule 群を 全撤去。 chip 一覧は自然 flow で全部 render、 page 全体 scroll に 委ねる。 accordion トグル (caret + click 開閉) も廃止 → 常時展開状態 で単なる 「効果で絞り込む」 label + chip 一覧 + Clear All row の静的 レイアウトに。 caret 非表示 + head の cursor/pointer を無効化。 */ .sc-effectfilter-head{cursor:default;pointer-events:none;} .sc-effectfilter-caret{display:none;} .sc-effectfilter-clear{display:inline-block;padding:0;background:none;border:0;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption);color:var(--sc-green-faint);cursor:pointer;text-decoration:underline;} .sc-effectfilter-clear:hover{color:var(--sc-green-primary);} /* Sheet header */ .sc-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .sc-sheet-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--sc-fs-title);color:var(--sc-text);} .sc-sheet-sub{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption);color:var(--sc-green-dim);} .sc-sheet-close{background:transparent;border:0;color:var(--sc-green-dim);font-size:var(--sc-fs-title-lg);cursor:pointer;padding:4px 8px;} /* Picker (portrait) の sheet-head。 2026-07-24 に一度 「完了」 button を ここで黄色 CTA 化していたが (muted な back chip では見落しが多かった ため)、 2026-08-02 (coordinator 指示「一覧の完了 CTA もフッター吸着が 良さそう」) で button 自体を下記 .sc-picker-list-cta-bar (画面下部固定) に移動。 sheet-head はタイトルのみの sticky バーとして残す (長い 一覧をスクロールしても 「何を選んでいるか」 が見えるように)。 */ .sc-view[data-view^="picker-"] .sc-portrait-only .sc-sheet-head{ position:sticky;top:0;z-index:6; margin:-16px -18px 12px; padding:14px 18px 10px; background:linear-gradient(180deg,#0d2418 92%,rgba(13,36,24,.6)); } /* 2026-08-02: 一覧 view (item/rune/spell picker の portrait grid/list) の 「完了」 CTA を画面下部固定に。 detail sheet 側の CTA bar と違い、 この markup は .sc-portrait-only (position 指定なし、 transform も無し) の 直下に置くだけで済むので position:fixed が素直に効く (detail sheet の ような 「自己スクロール+transform を兼ねた祖先」 問題が無い)。 nav は picker 表示中 body.sc-picker-active で hide 済なので z-index 競合も 無い。 配色は sc-sheet-head / .sc-picker-done-bar と統一 (#0d2418 系)。 */ .sc-picker-list-cta-bar{ position:fixed;left:0;right:0;bottom:0;z-index:5; display:flex; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); /* 2026-08-02 fix (user 「完了 CTA エリア下が透過して裏スクロールが見えて気持ち悪い」): gradient fade を撤去、 完全 opaque solid background に。 backdrop scroll が bar 底を透かして見える regression 修正。 */ background:#0d2418; border-top:1px solid var(--sc-border); box-shadow:0 -4px 12px -4px rgba(0,0,0,.4); } .sc-picker-list-cta-bar .sc-back-chip{ flex:1;justify-content:center; padding:11px 18px; background:linear-gradient(180deg,#ffe14a,var(--sc-cp-yellow)); color:#3d2f00;border:0; box-shadow:0 0 8px rgba(255,216,58,.25); font-family:'Chakra Petch',sans-serif; font-size:var(--sc-fs-body-md); letter-spacing:.03em; } .sc-picker-list-cta-bar .sc-back-chip:hover{ background:linear-gradient(180deg,#fff37a,#ffe14a); } /* Status pill: tappable in picker views (JS が toggle する is-tappable class) */ .sc-topline-status.is-tappable{cursor:pointer;transition:opacity .12s;} .sc-topline-status.is-tappable:hover{opacity:.75;} /* 2026-07-25 feedback「キーストーン/プライマリ/セカンダリの塊が塊と 分かりにくい」「各項目同一サイズの box」「詳細確認枠を 3 つに」 への大改造: - 各 section (KS/Primary/Secondary) を .sc-rune-section-card で 独立 card に (border + bg で塊明示) - Card body を PC のみ 2-col (rune list | 詳細 pane) にして 3 section それぞれ隣に detail pane - rune items は uniform-size grid (repeat(N, 1fr)) で同一 box */ .sc-rune-section-card{ border:1px solid var(--sc-border-strong); border-radius:10px; background:rgba(10,28,18,.35); padding:12px 14px; } .sc-rune-section-header{ font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption); letter-spacing:.1em;color:var(--sc-green-primary); margin-bottom:10px;padding-bottom:8px; border-bottom:1px solid var(--sc-hairline); } .sc-rune-section-body{display:flex;flex-direction:column;gap:12px;} /* 2026-07-29 v2 (feedback「ルーンピッカーのランドスケープで詳細確認枠が表示されてしまっている」): inline section detail は portrait mobile のみ表示。 landscape (mobile landscape + PC 両方) は sc-pdc-fixed の unified detail pane が担う。 */ .sc-rune-section-detail{display:none;} @media (max-width:919px) and (orientation:portrait) and (max-width:499px){ .sc-rune-section-detail{display:block;} } /* Rune slot 内の rune buttons を uniform grid (portrait 1-col / PC 3-col) */ .sc-rune-slot-runes{ display:grid; grid-template-columns:1fr; gap:8px; } @media (min-width:920px){ .sc-rune-slot-runes{grid-template-columns:repeat(3, minmax(0, 1fr));} } /* KS grid (portrait 2-col / PC 3-col) */ .sc-rune-ks-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:9px; } @media (min-width:920px){ .sc-rune-ks-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} } /* 2026-07-29 rune picker restructure: PC で sc-pdc-fixed pattern (item picker と同型) に統一。 outer RIGHT detail-col を使い、 選択中 preview + unified detail pane を 固定右カラムに置く。 middle col は 3 セクション (KS / Primary / Secondary) を side-by-side に並べる。 mobile portrait / mobile landscape は従来通り。 */ /* 2026-07-29 v2: portrait mobile のみ RIGHT col (unified pane) を hide、 landscape (mobile landscape + PC) は常に unified pane 表示。 */ @media (max-width:919px) and (orientation:portrait) and (max-width:499px){ .sc-view[data-view="picker-rune"] .sc-picker-detail-col{display:none !important;} } @media (min-width:920px){ .sc-view[data-view="picker-rune"] .sc-picker-grid{ grid-template-columns:minmax(150px,200px) minmax(0,1fr) minmax(320px,380px); } } /* landscape mobile (<920 + landscape) の rune picker: unified pane を表示、 3-col template columns を tight に (LEFT 150 / MIDDLE 1fr / RIGHT 240)。 */ @media (max-width:919px) and (orientation:landscape){ .sc-view[data-view="picker-rune"] .sc-picker-detail-col{display:block;} .sc-view[data-view="picker-rune"] .sc-picker-grid{ grid-template-columns:minmax(120px,180px) minmax(0,1fr) minmax(240px,280px); } } /* 2026-07-29 v2 revert: 3-col 横並びは 「改行多すぎて見にくい」 で縦 stack に 戻す (fixed 右カラムは保持)。 */ .sc-rune-middle-3col{display:flex;flex-direction:column;gap:14px;} /* 2026-07-25 fix: rune/spell 選択中 preview の × button (item と揃え)。 tile / pill の右上に小さい赤 「×」 で明示的 remove。 */ .sc-preview-x{ position:absolute;top:-6px;right:-6px;width:18px;height:18px; border-radius:50%;border:1px solid #6b3235; background:linear-gradient(180deg,#3a1414,#2a0d0d); color:#ff9184;font-family:'JetBrains Mono',monospace;font-size:12px; line-height:1;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 0 6px rgba(0,0,0,.4);z-index:2; } .sc-preview-x:hover{background:linear-gradient(180deg,#4a1a1a,#3a1313);color:#ffb1a5;} /* spell pill 内の × は right-inside オフセット (tile は floating -6/-6 で OK) */ [data-spell-selected] .sc-preview-x{top:50%;right:8px;transform:translateY(-50%);} /* Picker 説明ブロック (item / rune / spell 各 portrait head 直下で 使う共通スタイル)。 landscape 側は既存 inline style で表現、 将来的に統一する余地あり。 2026-07-24 feedback「ルーン、スペルの ピッカーもアイテムに揃えて説明出したい」対策。 */ .sc-picker-info{ border:1px solid #234534; border-radius:10px; background:rgba(10,28,18,.5); padding:12px 13px; font-family:'JetBrains Mono',monospace; font-size:var(--sc-fs-body-sm); color:var(--sc-text-muted); line-height:1.7; margin-bottom:12px; word-break:break-word; overflow-wrap:break-word; } .sc-picker-info b{color:var(--sc-green-mid);font-weight:700;} /* landscape mobile では picker-info の長文が overflow するので font 少し縮小 + line-height 圧縮 */ @media (max-width:919px) and (orientation:landscape){ .sc-picker-info{padding:9px 11px;font-size:var(--sc-fs-caption);line-height:1.55;margin-bottom:8px;} } /* Empty state onboarding guide — build-editor でビルドが全て空の時のみ 表示。 2026-07-24 feedback「デフォルトでアイテムが空だと何をしていいか よく分からない層がいそう」対策。 hidden 属性は JS が toggle。 */ .sc-empty-guide{ margin:14px 18px 0; padding:12px 14px; background:linear-gradient(180deg,rgba(255,216,58,.09),rgba(255,216,58,.03)); border:1px solid var(--sc-cp-yellow-dim); border-radius:8px; display:flex;gap:11px;align-items:flex-start; } /* 明示的 [hidden] 打ち消し — .class の display:flex が UA の [hidden]{display:none} を specificity で上書きしてしまう罠。 */ .sc-empty-guide[hidden]{display:none;} .sc-empty-guide-icon{ color:var(--sc-cp-yellow);font-family:'JetBrains Mono',monospace; font-size:14px;font-weight:700;line-height:1.4;flex:none; } .sc-empty-guide-body{flex:1;min-width:0;} .sc-empty-guide-h{ font-family:'Noto Sans JP',sans-serif;font-weight:700; font-size:13px;color:var(--sc-text);line-height:1.5; } .sc-empty-guide-sub{ font-family:'JetBrains Mono',monospace;font-size:11px; color:var(--sc-text-muted);margin-top:6px;line-height:1.7; } .sc-sheet-close:hover{color:#bdffd6;} /* サンプル型 card の型名 + CP: portrait は横 3-col、 landscape/desktop は縦積み。 2026-07-18 feedback。 */ @media (orientation:landscape){ .sc-sample-text-block{flex-direction:column !important;align-items:stretch !important;gap:2px !important;} .sc-sample-text-block > span{flex:none !important;} } /* Hero portrait card (frame 2, 3, 6 shared)。 2026-08-08 v10 revert: user 「色味をトップと揃えてって言ってるのに変えるの何で？」 で v10 の独自強化 (48px/.32) は撤回、 index の .scope-scouter-card と完全同 spec (22px/.12) に。 */ .sc-hero-card{position:relative;margin:13px 16px 0;border-radius:14px;overflow:hidden;box-shadow:0 22px 50px -18px rgba(0,0,0,.5),0 0 70px -8px rgba(125,255,176,.8),inset 0 0 22px rgba(125,255,176,.12);} /* 2026-08-08 v10 fix: background (色味) と border を index の .scope-scouter-card と完全同 spec に。 従来 radial-gradient(120% 90% at 50% 18%,#13402a,#081a10 70%) (暗い緑) だったのを linear-gradient(165deg,#1d6e51,#0e3a29 74%) (明るい緑) に。 */ .sc-hero-card-locked{border:1px solid rgba(125,255,176,.55);background:linear-gradient(165deg,#1d6e51,#0e3a29 74%);} .sc-hero-card-empty{border:1px dashed rgba(125,255,176,.4);background:radial-gradient(120% 90% at 50% 30%,#0e2c1d,#07140d 75%);height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;} .sc-hero-brackets span{position:absolute;width:20px;height:20px;pointer-events:none;} .sc-hero-brackets span.tl{top:0;left:0;border-top:2px solid var(--sc-orange-lock);border-left:2px solid var(--sc-orange-lock);} .sc-hero-brackets span.tr{top:0;right:0;border-top:2px solid var(--sc-orange-lock);border-right:2px solid var(--sc-orange-lock);} .sc-hero-brackets span.bl{bottom:0;left:0;border-bottom:2px solid var(--sc-orange-lock);border-left:2px solid var(--sc-orange-lock);} .sc-hero-brackets span.br{bottom:0;right:0;border-bottom:2px solid var(--sc-orange-lock);border-right:2px solid var(--sc-orange-lock);} /* filter removed per user feedback — natural champion image */ .sc-hero-portrait{} /* scanline sweep animation for scouter feel — vertical light band drifts downward across the target area every 3.2s */ @keyframes sc-scan-y{0%{transform:translateY(-14px);}100%{transform:translateY(130px);}} /* Landscape scan-y — drifts through the whole left column of build-editor. Uses top / calc(100% + N) so the beam clears both ends regardless of column height. Concern: PC scouter chrome. */ @keyframes sc-scan-y-lg{0%{top:-24px;}100%{top:calc(100% + 24px);}} /* Slot manager rows (frame 5, 6) */ .sc-slot-list{display:flex;flex-direction:column;gap:10px;} .sc-slot-card{border:1px solid var(--sc-hairline);border-radius:9px;padding:13px;background:var(--sc-bg-card);cursor:pointer;transition:border-color .12s;} .sc-slot-card:hover{border-color:var(--sc-green-primary);} .sc-slot-card.is-active{border-color:var(--sc-green-primary);background:rgba(16,48,36,.4);box-shadow:0 0 14px -8px rgba(125,255,176,.5);} .sc-slot-card-h{display:flex;align-items:center;gap:10px;} .sc-slot-chip{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption);color:var(--sc-green-dim);background:rgba(11,32,22,1);border:1px solid var(--sc-border);border-radius:4px;padding:2px 7px;flex:none;} .sc-slot-card.is-active .sc-slot-chip{color:var(--sc-ink-on-green);background:var(--sc-green-primary);border-color:var(--sc-green-primary);font-weight:700;} .sc-slot-name{font-size:var(--sc-fs-body-lg);color:#cfe9da;font-weight:700;} .sc-slot-card.is-active .sc-slot-name{color:var(--sc-text);} .sc-slot-cp{margin-left:auto;font-family:'Orbitron',sans-serif;font-weight:700;font-size:var(--sc-fs-title);color:var(--sc-green-bright);letter-spacing:.02em;} .sc-slot-card.is-active .sc-slot-cp{color:var(--sc-cp-yellow-dim);text-shadow:0 0 11px rgba(255,216,58,.45);} .sc-slot-new{font-family:'Chakra Petch';font-weight:700;font-size:var(--sc-fs-caption);color:var(--sc-ink-on-green);background:var(--sc-green-primary);border-radius:4px;padding:2px 6px;letter-spacing:.05em;} /* Action buttons row (frame 6) */ .sc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;} .sc-action-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);cursor:pointer;transition:border-color .12s;text-decoration:none;} .sc-action-share{border:1px solid #3a4150;color:#dfe4ea;background:#15191f;} .sc-action-ai{border:1px solid var(--sc-border);color:var(--sc-green-mid);background:rgba(10,28,18,.5);} .sc-action-compare{border:1px solid var(--sc-border-strong);color:#bdffd6;background:rgba(16,48,36,.4);} .sc-action-vs{border:1px solid var(--sc-border-strong);color:var(--sc-orange-lock);background:rgba(35,20,10,.4);font-weight:700;font-family:'Chakra Petch',sans-serif;font-size:var(--sc-fs-body-md);} /* Foot note */ .sc-note{font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-caption);color:var(--sc-green-faint);line-height:1.6;padding:0 6px;margin-top:14px;} /* Section wrappers within a view */ .sc-sec{position:relative;padding:14px 18px 0;} /* Slot chunk wrapper — items / runes / spells の 3 section を 「現在 編集中の slot 内容」 として 1 塊に視覚 grouping する container。 2026-08-02 user feedback「該当スロットの中にアイテム、ルーン、 スペルが包まれているような形にできる? 情報が多いのでもう少し 塊を見せた方が理解しやすい」。 build-editor (self) / compare-edit (alt B) / matchup-build (opp) の 3 scope × portrait/landscape の 6 config に同 pattern で適用。 sample CTA と slot switcher は chunk の外に残して 「chunk 全体に一括 apply」 の意図を明示。 */ .sc-slot-chunk, .sc-slot-chunk-landscape{ border:1px solid var(--sc-border-strong); border-radius:12px; background:linear-gradient(180deg,rgba(125,255,176,.09),rgba(6,20,12,.55) 60%,rgba(6,20,12,.45)); box-shadow:inset 0 0 30px -10px rgba(125,255,176,.28),0 0 22px -12px rgba(125,255,176,.5); position:relative; } /* Portrait: parent view の 16px 左右 inset を継承、 内部 sc-sec の padding:14px 18px 0 をそのまま活かす。 chunk 自体の padding は 最小 (border と sc-sec の間に 4px の余白のみ)、 最終 sec の下側 に 14px 追加。 */ .sc-slot-chunk{margin:14px 16px 0;padding:4px 0 4px;} .sc-slot-chunk > .sc-sec:last-child{padding-bottom:14px;} /* Landscape: parent grid cell に直接置くので margin 無し、 内部
は plain (sc-sec ではない) なので chunk 側で padding を提供。 各内部 section の spacing は per-config (self は flex+gap で明示、 alt/opp は既存 inline margin を保持) の理由でここでは sibling margin を 追加しない。 */ .sc-slot-chunk-landscape{margin:0;padding:16px;} /* Chunk 上端の光条 — 「今開いているスロット」 の active feedback。 */ .sc-slot-chunk::before, .sc-slot-chunk-landscape::before{ content:""; position:absolute; left:22px;right:22px;top:-1px;height:2px; background:linear-gradient(90deg,transparent,var(--sc-green-primary),transparent); opacity:.55; pointer-events:none; } /* Universal back chip — mid-flow view の左上に必ず配置、 history.back() を発火。 破綻の温床 (compare / matchup / save-name / share-x 系で 戻り経路が forward-only になっていた) を全部これで塞ぐ設計。 */ .sc-back-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--sc-border);border-radius:8px;background:rgba(10,28,18,.5);color:var(--sc-green-primary);font-family:'JetBrains Mono',monospace;font-size:var(--sc-fs-body);font-weight:600;letter-spacing:.04em;cursor:pointer;text-decoration:none;transition:border-color .12s,background .12s;line-height:1;white-space:nowrap;flex-shrink:0;} .sc-back-chip:hover{border-color:var(--sc-green-primary);background:rgba(16,48,36,.5);} .sc-back-chip svg{width:14px;height:14px;flex:none;} /* Portrait: crumb と同じ高さに (breadcrumb 左上に食い込む) */ .sc-back-portrait{margin:12px 16px 0;} /* Landscape: page-hero が display:none なので上端に張り付く。 header の直下に緊接するとキツいので少し gap を取る。 horizontal は 0 に して .sc-frame と左端を揃える (scope-app の padding:16px と一致)。 2026-07-18 feedback「ランドスケープ時にビルド編集画面の上のチャン ピオンを選択ボタンなどが左枠にインデント揃ってない」対応。 */ @media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){.sc-back-portrait{margin:8px 0 0;}} /* Mobile landscape: sc-frame と同じ 18px inset に合わせて back button (「← チャンピオン選択」) も左飛び出しを防ぐ (2026-07-19 user feedback)。 */ @media (orientation:landscape) and (max-width:919px){.sc-back-portrait{margin-left:18px;margin-right:18px;}} /* Landscape: frame chrome の左上、 breadcrumb と inline に */ /* PC 完了 chip: text (▸ 完了) が edge にくっつくので padding 増 (2026-07-25 fix)。 */ .sc-frame-crumb .sc-back-chip{padding:7px 16px;font-size:var(--sc-fs-body-sm);margin-right:10px;} /* =================================================================== JS-populated 要素の global flicker guard (rule 3 の統一適用)。 方針: 該当 element は populate 前 opacity:0 (or width:0)、 JS が `.setAttribute('data-populated','1')` を打った瞬間 CSS override が 外れて実 content に fade-in。 HTML seed の hardcoded 値 (アムム / 24,500 / bar width 等) は「見える前に隠される」 ので stale data flash が発生しない。 populate 側の hardcode 撤去とは独立に効く safety net として設計。 ================================================================ */ [data-cp-self], [data-cp-opp], [data-cp-axis-value], [data-champ-name], [data-champ-name-inline], [data-opp-name], [data-opp-name-inline], [data-crumb-sep-champ], [data-hero-sub], [data-champion-count], [data-keystone-count], .sc-topline-status, [data-save-name-input], [data-save-char-count], .sc-hero-champ-name, .sc-hero-cp, .sc-hero-cp-l, .sc-power-card-v, .sc-ident-card .name, .sc-ident-card .sub, .sc-view[data-view="build-editor"] .sc-frame-crumb-l .now, .sc-view[data-view="build-editor"] .sc-frame-crumb .now{transition:opacity .18s;} [data-cp-self]:not([data-populated]), [data-cp-opp]:not([data-populated]), [data-cp-axis-value]:not([data-populated]), [data-champ-name]:not([data-populated]), [data-champ-name-inline]:not([data-populated]), [data-opp-name]:not([data-populated]), [data-opp-name-inline]:not([data-populated]), [data-crumb-sep-champ]:not([data-populated]), [data-hero-sub]:not([data-populated]), [data-champion-count]:not([data-populated]), [data-keystone-count]:not([data-populated]), .sc-topline-status:has([data-status-text]:not([data-populated])), [data-save-name-input]:not([data-populated]), [data-save-char-count]:not([data-populated]), .sc-hero-champ-name:not([data-populated]), .sc-hero-cp:not([data-populated]), .sc-hero-cp-l:not([data-populated]), .sc-power-card-v:not([data-populated]), .sc-ident-card .name:not([data-populated]), .sc-ident-card .sub:not([data-populated]), .sc-view[data-view="build-editor"] .sc-frame-crumb-l .now:not([data-populated]), .sc-view[data-view="build-editor"] .sc-frame-crumb .now:not([data-populated]){opacity:0 !important;} /* 3 軸 bar: 未 populate は width 0、 populate 時は inline width にアニメ */ [data-cp-axis-bar]{transition:width .35s ease-out;} [data-cp-axis-bar]:not([data-populated]){width:0 !important;} /* JS-populated 画像: pre-paint / renderChampionRefs で fill された瞬間 fade-in */ img[data-champ-img], img[data-opp-img], img.sc-hero-portrait, img[data-champ-portrait]{transition:opacity .18s;} img[data-champ-img]:not([data-populated]), img[data-opp-img]:not([data-populated]), img.sc-hero-portrait:not([data-populated]), img[data-champ-portrait]:not([data-populated]){opacity:0 !important;} /* Container size 事前確保 (fetch 完了時の layout shift 抑止) */ .sc-slot-list{min-height:280px;transition:opacity .18s;} [data-sample-grid]{min-height:200px;transition:opacity .18s;} /* 2026-08-11 (feedback「iPhone 8 landscape で sample-loadouts 右カラム見切れ」 + 「一瞬収まって広がる」): 元 inline style grid-template-columns:1fr 1fr は HTML から撤去、 base CSS rule + landscape override に統一 (inline vs CSS cascade 変動を回避)。 狭 landscape (< 920) で 1-col 化して card min-content > track 幅の overflow を根本解消。 */ [data-sample-grid="landscape"]{display:grid;grid-template-columns:1fr 1fr;gap:11px;} @media (max-width:919px) and (orientation:landscape){ [data-sample-grid="landscape"]{grid-template-columns:1fr;} } [data-slot-cards="landscape"],[data-slot-hero="landscape"]{transition:opacity .18s;} .sc-slot-list:not([data-populated]), [data-sample-grid]:not([data-populated]), [data-slot-cards="landscape"]:not([data-populated]), [data-slot-hero="landscape"]:not([data-populated]){opacity:0 !important;} /* save-name view の内側 slot 選択 grid + name 入力 (別ビルドの上書き表示は first paint に流れると誤情報。 view 遷移時に renderSaveName が populate) */ [data-save-target-slot]{transition:opacity .18s;} [data-save-target-slot]:not([data-populated]){opacity:0 !important;}