/* ============================================================ dashboard.css ============================================================ */ :root { /* === lol_matchup 統一カラーパレット === */ --bg: #080b11; --bg2: #141c2e; --bg3: #1a2438; --panel: #0f1520; --surface: #0f1520; --surface2: #141c2e; --surface3: #1a2438; --border: #1e2d45; --border-glow: #253d65; --gold: #D9A441; --gold2: #F0C987; --blue: #4D9DE0; --blue-dim: rgba(77,157,224,0.08); --red: #e84057; --lose: #e84057; --green: #46C98B; --win: #46C98B; --text: #ccd4e0; --text-bright: #e8f0f8; --text-dim: #6a7d96; --text2: #6a7d96; --text3: #3d4f65; --challenger: #f4d03f; --grandmaster: #e8614a; --master: #9b59b6; --diamond: #5dade2; --emerald: #2ecc71; --platinum: #76d7c4; --gold-rank: #d4ac0d; --silver: #aab7b8; } /* ============================================================ テーマ: SUR MESURE（lol_jungle8由来・オートクチュール仕立て室ノワール） [data-theme="sur-mesure"] は /assets/theme-toggle.js が に付与する。 ランク帯カラー(--challenger等)は意味色なので上書きしない。 ============================================================ */ html[data-theme="sur-mesure"] { --bg: #161210; --bg2: #292119; --bg3: #292119; --panel: #201A16; --surface: #201A16; --surface2: #292119; --surface3: #292119; --border: #362B24; --border-glow: #4C3C31; --gold: #D29AA4; --gold2: #E4B8BF; --blue: #8FB3D9; --blue-dim: rgba(143,179,217,0.08); --red: #D97F72; --lose: #D97F72; --green: #9DC4A8; --win: #9DC4A8; --text: #EFE9E3; --text-bright: #EFE9E3; --text-dim: #B3A79D; --text2: #B3A79D; --text3: #7C6F64; --so-acc: #D29AA4; --so-rgb: 210,154,164; --thread: rgba(210,154,164,.28); } html[data-theme="sur-mesure"], [data-theme="sur-mesure"] body { font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif; } * { margin:0; padding:0; box-sizing:border-box; } html, body { width:100%; height:100%; background:var(--bg); color:var(--text); font-family:'Noto Sans JP',sans-serif; font-size:12px; overflow:hidden; } body::before { content:''; position:fixed; inset:0; background-image: linear-gradient(rgba(77,157,224,0.025) 1px,transparent 1px), linear-gradient(90deg,rgba(77,157,224,0.025) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; z-index:0; } /* ===== 16:9 CANVAS ===== */ .wrapper { position:relative; z-index:1; width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; } .canvas { width:100%; height:100%; max-width:calc(100vh * 16 / 9); max-height:calc(100vw * 9 / 16); display:grid; grid-template-rows:48px 1fr 0.9fr; grid-template-columns:1fr 1fr 52px; gap:8px; padding:10px; } /* no-rank時はresizeハンドルを隠す */ .canvas.no-rank .rank-panel { display:none; } .canvas.no-rank .resize-handle-rank { display:none; } /* ===== HEADER ===== */ header { grid-column:1/-1; grid-row:1; display:flex; align-items:center; gap:18px; padding:0 16px; background:var(--panel); border:1px solid var(--border); border-top:2px solid var(--gold); clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%); } .logo { font-family:'Rajdhani',sans-serif; font-size:20px; font-weight:700; color:var(--gold); letter-spacing:3px; } .logo span { color:var(--blue); } .live-badge { display:flex; align-items:center; gap:6px; background:rgba(232,64,87,0.15); border:1px solid rgba(232,64,87,0.5); padding:3px 10px; font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; color:var(--red); letter-spacing:2px; } .live-dot { width:5px; height:5px; background:var(--red); border-radius:50%; animation:pulse 1.5s infinite; } .not-in-game-badge { display:flex; align-items:center; background:rgba(74,96,128,0.15); border:1px solid rgba(74,96,128,0.4); padding:3px 10px; font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; color:var(--text-dim); letter-spacing:2px; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} } .header-stats { display:flex; gap:24px; } .hstat-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; } .hstat-val { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:600; color:var(--text-bright); } /* タイマーは桁が増えても幅が変わらないよう固定（右のサモナー名がズレるのを防ぐ） */ #gameTimer { display:inline-block; min-width:5ch; text-align:left; font-variant-numeric:tabular-nums; } /* ===== PANEL ===== */ .panel { background:var(--panel); border:1px solid var(--border); padding:10px 12px; position:relative; overflow:hidden; display:flex; flex-direction:column; } .panel.gold-top { border-top:2px solid var(--gold); } .panel.blue-top { border-top:2px solid var(--blue); } .panel-title { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; color:var(--blue); letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:6px; flex-shrink:0; } .panel-title::before { content:''; width:2px; height:12px; background:var(--blue); } .corner-deco { position:absolute; top:0; right:0; width:0; height:0; border-left:14px solid transparent; border-top:14px solid var(--border-glow); } /* ===== GRID POSITIONS ===== */ .team-panel { grid-row:2; } #blueTeamPanel { grid-column:1; } #redTeamPanel { grid-column:2; } /* ===== BAN PANEL ===== */ #banPanel { grid-column:3; grid-row:2; display:flex; flex-direction:column; align-items:center; gap:0; padding:8px 4px; } .ban-section { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; width:100%; } .ban-team-label { font-family:'Rajdhani',sans-serif; font-size:7px; font-weight:700; letter-spacing:1px; text-align:center; line-height:1.2; margin-bottom:2px; } .ban-team-label.bl { color:var(--blue); } .ban-team-label.rd { color:var(--red); } .ban-icons { display:flex; flex-direction:column; gap:3px; align-items:center; } .ban-icon { width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,0.12); overflow:hidden; flex-shrink:0; position:relative; } .ban-icon img { width:100%; height:100%; object-fit:cover; display:block; } .ban-icon-empty { width:26px; height:26px; border-radius:50%; border:1px dashed rgba(255,255,255,0.1); flex-shrink:0; } .ban-divider { width:70%; height:1px; background:var(--border); flex-shrink:0; margin:4px 0; } /* ===== BOTTOM ROW (grid + resizable) ===== */ /* canvas と同じ column 構成で BLUE TEAM / RED TEAM+BAN に正確に揃える */ .bottom-row { grid-row:3; grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr 52px; column-gap:8px; min-height:0; overflow:hidden; } .bottom-left { grid-column:1; display:flex; gap:0; min-height:0; overflow:hidden; } .bottom-right { grid-column:2 / -1; display:flex; gap:0; min-height:0; overflow:hidden; } .bottom-left .panel, .bottom-right .panel { min-width:0; overflow:hidden; } /* グループ内横幅比率 */ .builds-panel { flex:3 1 0; } .ejg-panel { flex:1 1 0; } .ai-panel { flex:1 1 0; } .matchup-panel { flex:1 1 0; } /* mygg: 敵JGはPCで横幅213px固定、残りをMATCHUPが占有。JS未適用時の既定 */ .canvas.mygg .ejg-panel { flex:0 0 213px; } .canvas.mygg .matchup-panel { flex:1 1 0; } .resize-handle { width:5px; background:transparent; cursor:col-resize; flex-shrink:0; position:relative; } .resize-handle::after { content:''; position:absolute; top:15%; bottom:15%; left:2px; width:1px; background:var(--border); } .resize-handle:hover::after, .resize-handle.dragging::after { background:var(--gold); } /* ===== TEAM / PLAYERS ===== */ .team-label { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; padding-bottom:5px; flex-shrink:0; } .team-label.bl { color:var(--blue); border-bottom:1px solid rgba(77,157,224,0.25); } .team-label.rd { color:var(--red); border-bottom:1px solid rgba(232,64,87,0.25); } /* ===== 検索プログレスバー ===== */ .search-prog-track { width:100%; height:3px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; margin-bottom:10px; } .search-prog-fill { height:100%; width:0%; background:var(--blue); border-radius:2px; } .search-prog-msg { font-size:11px; color:var(--text-dim); text-align:center; letter-spacing:0.5px; font-family:'Rajdhani',sans-serif; } .players { display:flex; flex-direction:column; gap:4px; flex:1; } .player-row { display:flex; align-items:center; gap:6px; padding:4px 6px; background:rgba(255,255,255,0.02); border:1px solid transparent; cursor:pointer; transition:all 0.15s; flex:1; } .player-row:hover { background:rgba(77,157,224,0.05); border-color:rgba(77,157,224,0.2); } .player-row.me { background:rgba(217,164,65,0.07); border-color:rgba(217,164,65,0.3); } .champ-icon { width:32px; height:32px; border-radius:50%; background:var(--bg3); border:1px solid var(--border); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; } .champ-icon img { width:100%; height:100%; object-fit:cover; } .pinfo { flex:1; min-width:0; } .pname { display:flex; align-items:baseline; gap:4px; font-size:12px; color:var(--text-bright); overflow:hidden; } .pname-inner { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .p-level { font-size:8px; color:var(--text-dim); flex-shrink:0; font-family:'Rajdhani',sans-serif; } .player-row.me .pname { color:var(--gold); font-weight:500; } .pchamp { font-size:10px; color:var(--text-dim); } .rank-badge { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; padding:1px 6px; border:1px solid; white-space:nowrap; flex-shrink:0; } .rank-CHALLENGER { color:var(--challenger); border-color:rgba(244,208,63,0.4); background:rgba(244,208,63,0.07); } .rank-GRANDMASTER { color:var(--grandmaster);border-color:rgba(232,97,74,0.4); background:rgba(232,97,74,0.07); } .rank-MASTER { color:var(--master); border-color:rgba(155,89,182,0.4); background:rgba(155,89,182,0.07); } .rank-DIAMOND { color:var(--diamond); border-color:rgba(93,173,226,0.4); background:rgba(93,173,226,0.07); } .rank-EMERALD { color:var(--emerald); border-color:rgba(46,204,113,0.4); background:rgba(46,204,113,0.07); } .rank-PLATINUM { color:var(--platinum); border-color:rgba(118,215,196,0.4);background:rgba(118,215,196,0.07); } .rank-GOLD { color:var(--gold-rank); border-color:rgba(212,172,13,0.4); background:rgba(212,172,13,0.07); } .rank-SILVER { color:var(--silver); border-color:rgba(170,183,184,0.4);background:rgba(170,183,184,0.07); } .rank-UNRANKED { color:var(--text-dim); border-color:rgba(74,96,128,0.4); background:rgba(74,96,128,0.07); } .winrate-col { text-align:right; flex-shrink:0; } .wr-num { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--green); display:block; } .wr-sub { font-size:10px; color:var(--text-dim); } /* ===== MY RANK ===== */ .rank-body { display:flex; align-items:center; gap:12px; padding:8px 0; flex-shrink:0; } .rank-emblem { width:52px; height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:28px; background:radial-gradient(circle,rgba(217,164,65,0.15) 0%,transparent 70%); border:2px solid rgba(217,164,65,0.35); border-radius:50%; } .rank-tier { font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700; color:var(--gold); line-height:1; } .rank-lp { font-family:'Rajdhani',sans-serif; font-size:14px; color:var(--text); margin-top:1px; } .rank-record { font-size:10px; color:var(--text-dim); margin-top:2px; } .rank-record .w { color:var(--green); } .rank-record .l { color:var(--red); } .lp-change { margin-left:auto; flex-shrink:0; font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; padding:3px 10px; border:1px solid rgba(64,200,122,0.4); background:rgba(64,200,122,0.1); color:var(--green); } .lp-change.neg { border-color:rgba(232,64,87,0.4); background:rgba(232,64,87,0.1); color:var(--red); } .recent-strip { display:flex; gap:2px; margin-top:4px; flex-shrink:0; } .gpill { height:5px; flex:1; border-radius:1px; } .gpill.win { background:var(--green); } .gpill.loss { background:var(--red); } .mini-lp-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-top:8px; flex-shrink:0; } .mstat { background:var(--bg3); border:1px solid var(--border); padding:5px 6px; text-align:center; } .mstat-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; } .mstat-val { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; color:var(--text-bright); } .mstat-val.pos { color:var(--green); } .mstat-val.neg { color:var(--red); } .team-avg-bar { display:flex; align-items:center; gap:6px; margin-bottom:3px; } .avg-bar-track { flex:1; height:6px; background:var(--bg3); border-radius:2px; overflow:hidden; } .avg-bar-fill { height:100%; opacity:0.7; transition:width 0.5s; } .avg-bar-fill.blue { background:var(--blue); } .avg-bar-fill.red { background:var(--red); } .avg-bar-label { font-family:'Rajdhani',sans-serif; font-size:12px; } .avg-bar-label.blue { color:var(--blue); } .avg-bar-label.red { color:var(--red); } /* ===== BUILDS ===== */ .builds-scroll { display:flex; gap:7px; overflow-x:auto; overflow-y:hidden; flex:1; padding-bottom:4px; align-items:stretch; } .builds-scroll::-webkit-scrollbar { height:3px; } .builds-scroll::-webkit-scrollbar-track { background:var(--bg3); } .builds-scroll::-webkit-scrollbar-thumb { background:var(--border-glow); } .build-card { flex-shrink:0; width:200px; background:var(--bg3); border:1px solid var(--border); padding:10px; cursor:pointer; transition:border-color 0.2s; display:flex; flex-direction:column; align-self:stretch; /* 横並びで高さを揃える */ } .build-card:hover { border-color:var(--gold); box-shadow:0 0 16px rgba(217,164,65,0.12); } .bc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .bc-num { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:600; color:var(--text-dim); letter-spacing:1px; } .bc-wr { font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; color:var(--green); } .bc-wr.low { color:var(--red); } .items-row { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:6px; } .rune-block { display:flex; flex-direction:column; gap:3px; flex:1; } /* flex:1でbc-metaを下に押し下げる */ .item-icon { width:28px; height:28px; background:var(--bg2); border:1px solid var(--border); border-radius:3px; overflow:hidden; position:relative; cursor:help; } .item-icon img { width:100%; height:100%; object-fit:cover; } .item-icon:hover::after { content:attr(data-tip); position:absolute; bottom:32px; left:50%; transform:translateX(-50%); background:#000; border:1px solid var(--border-glow); padding:3px 7px; font-size:10px; color:var(--text-bright); white-space:nowrap; z-index:20; pointer-events:none; } .spells-row { display:flex; gap:3px; align-items:center; } .spell-icon { width:22px; height:22px; background:var(--bg2); border:1px solid var(--border); border-radius:2px; overflow:hidden; } .spell-icon img { width:100%; height:100%; object-fit:cover; } .spell-label { font-size:10px; color:var(--text-dim); margin-left:4px; } .rune-path-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; } .rune-row { display:flex; gap:3px; align-items:center; } .ri { width:18px; height:18px; border-radius:50%; background:var(--bg2); border:1px solid var(--border); overflow:hidden; flex-shrink:0; } .ri img { width:100%; height:100%; object-fit:cover; } .ri-lg { width:24px; height:24px; border-radius:50%; background:var(--bg2); border:1px solid var(--border); overflow:hidden; flex-shrink:0; } .ri-lg img { width:100%; height:100%; object-fit:cover; } .ri.ks { width:24px; height:24px; border-color:var(--gold); } .ri-ks { width:30px; height:30px; border-radius:50%; background:var(--bg2); border:2px solid var(--gold); overflow:hidden; flex-shrink:0; } .ri-ks img { width:100%; height:100%; object-fit:cover; } .rune-divider { height:1px; background:var(--border); margin:2px 0; } .bc-meta { display:flex; justify-content:space-between; padding-top:5px; margin-top:6px; border-top:1px solid var(--border); font-size:10px; color:var(--text-dim); } .bc-kda { font-family:'Rajdhani',sans-serif; font-size:12px; color:var(--text); } /* ===== BUILD CARD: MATCH LIST ===== */ .bc-match-list { margin-top:6px; max-height:110px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; } .bc-match-list::-webkit-scrollbar { width:3px; } .bc-match-list::-webkit-scrollbar-track { background:transparent; } .bc-match-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .bc-match-row { display:flex; align-items:center; gap:4px; padding:2px 0; border-bottom:1px solid rgba(26,42,69,0.5); flex-shrink:0; } .bc-match-row:last-child { border-bottom:none; } .bc-match-badge { font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; padding:1px 4px; border-radius:2px; flex-shrink:0; min-width:20px; text-align:center; } .bc-match-badge.win { background:rgba(64,200,122,0.15); color:var(--green); } .bc-match-badge.loss { background:rgba(232,64,87,0.12); color:var(--red); } .bc-match-champs { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; } .match-champ-row { display:flex; align-items:center; gap:2px; } .match-champ-label { font-size:8px; color:var(--text-dim); width:18px; flex-shrink:0; font-family:'Rajdhani',sans-serif; } .match-champ-icon { width:18px; height:18px; border-radius:2px; object-fit:cover; border:1px solid transparent; } .match-champ-icon.ally { border-color:rgba(70,130,255,0.5); } .match-champ-icon.enemy { border-color:rgba(220,60,60,0.5); } .bc-match-kda { font-family:'Rajdhani',sans-serif; font-size:10px; color:var(--text-dim); flex-shrink:0; white-space:nowrap; } /* ===== LP CHART ===== */ .lp-chart-wrap { flex:1; position:relative; min-height:0; } #lpCanvas { width:100%; height:100%; display:block; } .lp-tooltip { position:absolute; background:rgba(4,7,15,0.95); border:1px solid var(--border-glow); padding:5px 9px; font-family:'Rajdhani',sans-serif; font-size:12px; color:var(--text-bright); pointer-events:none; display:none; white-space:nowrap; z-index:10; } .lp-bottom-stats { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:7px; flex-shrink:0; } .lbstat { background:var(--bg3); border:1px solid var(--border); padding:5px 8px; } .lbstat-label { font-size:9px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; } .lbstat-val { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; color:var(--text-bright); } .lbstat-val.pos { color:var(--green); } .lbstat-val.neg { color:var(--red); } /* ===== SKELETON ===== */ .skeleton { background:linear-gradient(90deg,var(--bg3) 25%,var(--border) 50%,var(--bg3) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:2px; } @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes spin { to { transform: rotate(360deg); } } .spin { animation: spin 0.8s linear infinite; } /* ===== SCROLLBAR ===== */ ::-webkit-scrollbar { width:3px; height:3px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:var(--border-glow); } /* ===== 検索オーバーレイ ===== */ .search-overlay { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; } /* 背景：LoL画像 + 多重オーバーレイ */ .so-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; } .so-vignette { position:absolute; inset:0; background: radial-gradient(ellipse 100% 80% at 50% 40%, transparent 20%, rgba(4,10,22,0.7) 100%), linear-gradient(to bottom, rgba(4,10,22,0.55) 0%, transparent 25%, transparent 65%, rgba(4,10,22,0.9) 100%); } .so-tint { position:absolute; inset:0; background:linear-gradient(135deg, rgba(6,24,48,0.65) 0%, rgba(4,10,22,0.5) 50%, rgba(2,6,18,0.7) 100%); } .so-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(217,164,65,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(217,164,65,0.05) 1px, transparent 1px); background-size:44px 44px; pointer-events:none; } /* パーティクル */ .so-particles { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; } .so-particle { position:absolute; bottom:-10px; background:var(--gold); border-radius:50%; opacity:0; animation:so-floatup linear infinite; } @keyframes so-floatup { 0% { opacity:0; transform:translateY(0) scale(0.4); } 12% { opacity:0.55; } 88% { opacity:0.15; } 100% { opacity:0; transform:translateY(-110vh) scale(1.2); } } /* アプリ一覧ボタン */ .btn-back-home { position:absolute; top:1rem; left:1rem; z-index:20; display:inline-flex; align-items:center; gap:0.4rem; color:#c8bfa8; opacity:0.85; background:rgba(1,10,19,0.6); border:1px solid rgba(200,190,168,.2); border-radius:2px; padding:0.4rem 0.9rem; font-family:'Rajdhani',sans-serif; font-size:0.8rem; font-weight:600; letter-spacing:1.5px; text-decoration:none; transition:opacity 0.2s, border-color 0.2s, background 0.2s; } .btn-back-home:hover { opacity:1; border-color:#c8bfa8; background:rgba(1,10,19,0.8); } /* メインコンテンツ：フェードイン */ .so-content { position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; text-align:center; padding:1.5rem 2rem; animation:so-enter 0.7s ease both; } @keyframes so-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } /* モニュメント（SVGタクティカルスコープ） */ .so-monument { margin-bottom:0.85rem; } .so-monument-svg { width:90px; height:90px; display:block; filter:drop-shadow(0 0 10px rgba(217,164,65,0.3)) drop-shadow(0 0 24px rgba(217,164,65,0.1)); } /* スクリーンコーナーHUD */ .so-corner-hud { position:absolute; z-index:6; pointer-events:none; width:22px; height:22px; border-color:rgba(217,164,65,0.4); border-style:solid; transition:opacity 0.3s; } .so-ch-tl { top:10px; left:10px; border-width:1.5px 0 0 1.5px; } .so-ch-tr { top:10px; right:10px; border-width:1.5px 1.5px 0 0; } .so-ch-bl { bottom:44px; left:10px; border-width:0 0 1.5px 1.5px; } .so-ch-br { bottom:44px; right:10px; border-width:0 1.5px 1.5px 0; } /* サブタイトル */ .so-sub { font-family:'Rajdhani',sans-serif; font-size:0.62rem; font-weight:700; letter-spacing:0.55em; color:rgba(77,157,224,0.65); text-transform:uppercase; margin:0 0 0.28rem; } /* メインロゴ */ .so-logo { font-family:'Cinzel',serif; font-size:clamp(2.4rem,5.5vw,3.8rem); font-weight:900; letter-spacing:0.04em; line-height:1.1; color:#f0e6d3; margin:0 0 1rem; text-shadow:0 0 28px rgba(217,164,65,0.6), 0 0 60px rgba(217,164,65,0.2), 2px 3px 8px rgba(0,0,0,0.95); } .so-logo span { color:var(--blue); text-shadow:0 0 18px rgba(77,157,224,0.7), 0 0 40px rgba(77,157,224,0.3), 2px 3px 8px rgba(0,0,0,0.95); } /* 区切り線 */ .so-divider { display:flex; align-items:center; gap:1rem; width:100%; max-width:420px; margin-bottom:1.2rem; } .so-divider span { flex:1; height:1px; } .so-divider span:first-child { background:linear-gradient(to right, transparent, rgba(217,164,65,0.45)); } .so-divider span:last-child { background:linear-gradient(to left, transparent, rgba(217,164,65,0.45)); } .so-divider-icon { flex-shrink:0; display:flex; align-items:center; opacity:0.7; } /* フィールドラベル */ .so-field-label { font-family:'Rajdhani',sans-serif; font-size:0.68rem; font-weight:600; letter-spacing:0.3em; color:rgba(200,170,110,0.6); text-transform:uppercase; margin-bottom:0.55rem; text-align:left; width:100%; } /* 検索ボックス */ .search-box { position:relative; z-index:1; width:420px; display:flex; flex-direction:column; align-items:center; gap:12px; } /* コーナーティック付きラッパー */ .so-input-outer { position:relative; width:100%; } .so-corner { position:absolute; width:8px; height:8px; z-index:2; border-color:var(--gold); border-style:solid; opacity:0.8; } .so-corner-tl { top:0; left:0; border-width:2px 0 0 2px; } .so-corner-tr { top:0; right:0; border-width:2px 2px 0 0; } .so-corner-bl { bottom:0; left:0; border-width:0 0 2px 2px; } .so-corner-br { bottom:0; right:0; border-width:0 2px 2px 0; } .search-input-wrap { width:100%; display:flex; gap:0; border:1px solid rgba(217,164,65,0.2); background:rgba(4,12,28,0.65); transition:border-color 0.2s, box-shadow 0.2s; } .search-input-wrap:focus-within { border-color:rgba(217,164,65,0.5); box-shadow:0 0 0 1px rgba(217,164,65,0.15), 0 6px 28px rgba(217,164,65,0.12); } .search-input { flex:1; min-width:0; background:transparent; border:none; outline:none; padding:13px 16px; font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:600; color:var(--text-bright); letter-spacing:1px; } .search-input::placeholder { color:rgba(217,164,65,0.25); font-weight:400; } .search-hash { display:flex; align-items:center; flex-shrink:0; color:rgba(217,164,65,0.45); font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:600; padding:0 2px; } .search-tag-input { width:74px; flex-shrink:0; background:transparent; border:none; outline:none; padding:13px 8px; font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:600; color:var(--gold); letter-spacing:1px; } .search-tag-input::placeholder { color:rgba(217,164,65,0.25); font-weight:400; } .search-btn { background:transparent; border:none; border-left:1px solid rgba(217,164,65,0.2); padding:0 18px; cursor:pointer; color:var(--gold); transition:background 0.15s, color 0.15s; display:flex; align-items:center; } .search-btn:hover { background:rgba(217,164,65,0.12); color:#f0e6d3; } .search-btn:disabled { opacity:0.4; cursor:not-allowed; } /* 検索履歴 */ .search-history { width:100%; display:flex; flex-direction:column; gap:4px; } .search-history-item { display:flex; align-items:center; gap:10px; padding:7px 12px; background:rgba(4,12,28,0.7); border:1px solid rgba(217,164,65,0.12); cursor:pointer; transition:border-color 0.15s, background 0.15s; font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:600; color:var(--text); } .search-history-item:hover { border-color:rgba(217,164,65,0.4); background:rgba(4,12,28,0.85); color:#f0e6d3; } .search-history-icon { color:var(--gold); opacity:0.45; font-size:11px; } .search-error { font-size:12px; color:var(--red); min-height:16px; text-align:center; letter-spacing:1px; } /* フッター */ .so-footer { position:absolute; bottom:0; left:0; right:0; z-index:10; text-align:center; padding:0.65rem 1rem; backdrop-filter:blur(8px); background:rgba(4,10,22,0.6); border-top:1px solid rgba(217,164,65,0.08); } .so-footer p { font-family:'Rajdhani',sans-serif; font-size:0.68rem; color:rgba(217,164,65,0.28); letter-spacing:1px; margin:0; } /* ===== ヘッダー内検索窓 ===== */ .header-search-wrap { margin-left:auto; display:flex; align-items:center; gap:10px; } .header-summoner-name { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; color:var(--gold); letter-spacing:1px; white-space:nowrap; } .header-search-inner { display:flex; align-items:center; border:1px solid var(--border); background:var(--bg3); transition:border-color 0.2s; } .header-search-inner:focus-within { border-color:var(--blue); } .header-search-input { background:transparent; border:none; outline:none; padding:4px 10px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; color:var(--text-bright); letter-spacing:1px; width:120px; } .header-search-input::placeholder { color:var(--text-dim); font-weight:400; } .header-search-hash { display:flex; align-items:center; flex-shrink:0; color:var(--text-dim); font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; } .header-search-tag-input { background:transparent; border:none; outline:none; padding:4px 6px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; color:var(--gold); letter-spacing:1px; width:52px; flex-shrink:0; } .header-search-tag-input::placeholder { color:var(--text-dim); font-weight:400; } .header-search-btn { background:transparent; border:none; border-left:1px solid var(--border); padding:4px 10px; cursor:pointer; color:var(--blue); transition:background 0.15s; display:flex; align-items:center; } .header-search-btn:hover { background:rgba(77,157,224,0.1); } .header-search-btn:disabled { cursor:not-allowed; opacity:0.6; } .header-search-spinner { width:11px; height:11px; border:2px solid rgba(77,157,224,0.3); border-top-color:var(--blue); border-radius:50%; animation:hdr-spin 0.7s linear infinite; flex-shrink:0; } @keyframes hdr-spin { to { transform:rotate(360deg); } } /* ===== ヘッダー検索ステータスバー ===== */ .hdr-status-bar { position:fixed; top:54px; left:0; right:0; z-index:400; display:none; align-items:center; justify-content:center; gap:7px; padding:5px 16px; background:rgba(4,10,22,0.94); border-bottom:1px solid rgba(77,157,224,0.2); font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.5px; color:var(--blue); pointer-events:none; } .hdr-status-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; background:var(--blue); box-shadow:0 0 6px var(--blue); animation:hdr-blink 1.2s ease-in-out infinite; } @keyframes hdr-blink { 0%,100%{opacity:0.35;} 50%{opacity:1;} } /* ===== お気に入りボタン ===== */ .header-fav-btn { background:transparent; border:1px solid var(--border); padding:3px 8px; cursor:pointer; font-size:15px; color:var(--text-dim); transition:all 0.15s; line-height:1; flex-shrink:0; } .header-fav-btn:hover { border-color:var(--gold); color:var(--gold); } .header-fav-btn.fav-active { color:var(--gold); border-color:var(--gold); background:rgba(217,164,65,0.1); } /* ===== お気に入り履歴スタイル ===== */ .fav-item { border-color:rgba(217,164,65,0.3) !important; background:rgba(217,164,65,0.05) !important; } .fav-star { color:var(--gold) !important; } /* ===== トースト ===== */ #lc-toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:rgba(10,16,32,0.95); border:1px solid var(--border-glow); color:var(--text-bright); padding:10px 20px; font-family:'Rajdhani',sans-serif; font-size:13px; letter-spacing:1px; opacity:0; pointer-events:none; transition:opacity 0.3s; z-index:200; white-space:nowrap; } #lc-toast.show { opacity:1; } /* ===== 最近10試合チャンプ ===== */ .recent-champs { display:flex; gap:2px; flex-wrap:nowrap; width:200px; flex-shrink:0; overflow:hidden; /* 10枚×(18px+2px gap) = 200px 固定 → mastery開始位置が常に揃う */ } .rc-slot { width:18px; flex-shrink:0; position:relative; overflow:hidden; border-radius:2px; } .rc-slot img { width:18px; height:18px; object-fit:cover; display:block; border-radius:2px; } .rc-bar { height:3px; width:100%; border-radius:1px 1px 0 0; } .rc-bar.rc-win { background:var(--green); } .rc-bar.rc-loss { background:var(--red); } /* ===== pinfo下段（横1行・絶対に折り返さない） ===== */ .pinfo-bottom { display:flex; flex-wrap:nowrap; align-items:flex-end; gap:6px; margin-top:4px; overflow:hidden; min-width:0; } /* mastery + 前回チャンプ を横並びにする行 */ .pinfo-icons-row { display:flex; align-items:flex-end; gap:0; flex-shrink:0; } /* ===== マスタリーTop3 ===== */ .mastery-champs { display:flex; gap:3px; flex-shrink:0; align-items:flex-end; border-left:1px solid rgba(255,255,255,0.15); padding-left:6px; } .mastery-slot { position:relative; width:26px; height:26px; flex-shrink:0; cursor:default; margin-bottom:0; } .mastery-slot img { width:26px; height:26px; object-fit:cover; display:block; border-radius:3px; border:1px solid rgba(255,255,255,0.15); } .mastery-lvl { position:absolute; bottom:0; right:0; font-size:8px; font-weight:700; line-height:1; background:rgba(0,0,0,0.8); padding:1px 2px; border-radius:2px 0 2px 0; } /* ===== 前回試合チャンプ ===== */ .last-match-wrap { display:flex; flex-shrink:0; align-items:flex-end; border-left:1px solid rgba(255,255,255,0.15); padding-left:6px; margin-left:6px; } .last-match-champ { position:relative; width:26px; height:26px; flex-shrink:0; cursor:default; border-radius:3px; overflow:visible; } .last-match-champ img { width:26px; height:26px; object-fit:cover; display:block; border-radius:3px; } .last-match-champ.enc-win img { border:1px solid rgba(64,200,122,0.7); } .last-match-champ.enc-loss img { border:1px solid rgba(232,64,87,0.7); } .last-match-label { position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:7px; font-weight:700; color:var(--text-dim); white-space:nowrap; letter-spacing:0.5px; } /* ===== player-rowクリック ===== */ .player-row.clickable { cursor:pointer; } .player-row.clickable:hover { background:rgba(77,157,224,0.07); border-color:rgba(77,157,224,0.3); } /* ===== スペル・ルーン列 ===== */ .p-spell-rune-col { display:flex; flex-direction:column; gap:2px; flex-shrink:0; justify-content:center; min-width:20px; } .p-spells, .p-runes { display:flex; gap:2px; } .spell-slot { width:18px; height:18px; background:var(--bg2); border:1px solid var(--border); border-radius:2px; overflow:hidden; flex-shrink:0; } .spell-slot img { width:100%; height:100%; object-fit:cover; display:block; } .prune-slot { width:18px; height:18px; background:var(--bg2); border:1px solid var(--border); border-radius:50%; overflow:hidden; flex-shrink:0; } .prune-slot.ks-slot { border-color:var(--gold); } .prune-slot img { width:100%; height:100%; object-fit:cover; display:block; } /* ===== ポジションアイコン ===== */ .p-position { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .p-position img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0.85); } /* ===== OP.GGリンク ===== */ .opgg-link { color:inherit; text-decoration:none; transition:color 0.15s; } .opgg-link:hover { color:var(--blue); text-decoration:underline; } /* ===== 検索履歴削除ボタン ===== */ .search-history-del { font-size:11px; color:var(--text-dim); padding:2px 4px; cursor:pointer; transition:color 0.15s; flex-shrink:0; } .search-history-del:hover { color:var(--red); } /* ===== 現チャンプ/レーン成績ブロック ===== */ .perf-block { display:grid; grid-template-columns:50px 50px; gap:4px; flex-shrink:0; padding:0 4px; align-items:start; width:112px; /* padding(8px)+track(50px)+gap(4px)+track(50px)=112px で固定 */ } .perf-col { display:flex; flex-direction:column; align-items:center; width:50px; } .perf-label { font-size:8px; color:var(--text3); letter-spacing:0.3px; white-space:nowrap; margin-bottom:1px; } .perf-pct { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; line-height:1.1; } .perf-pct span { font-size:10px; font-weight:400; opacity:0.8; } .perf-pct.perf-empty { font-size:14px; color:var(--text3); } .perf-sub { font-size:8px; color:var(--text2); letter-spacing:0.2px; min-height:10px; } .perf-good .perf-pct { color:var(--green); } .perf-mid .perf-pct { color:var(--text); } .perf-bad .perf-pct { color:var(--red); } /* 自分の行は成績ブロック非表示 */ .player-row.me .perf-block { visibility:hidden; } /* ===== 敵JGスタートパネル ===== */ .ejg-panel { min-width:0; overflow:hidden; } .ejg-content { display:flex; flex-direction:column; flex:1; min-height:0; gap:6px; overflow:hidden; } .ejg-placeholder { font-size:11px; color:var(--text-dim); padding:8px 0; } .ejg-rate-warn { font-size:10px; color:var(--gold); background:rgba(217,164,65,0.07); border:1px solid rgba(217,164,65,0.22); border-left:2px solid var(--gold2); padding:4px 8px; letter-spacing:0.3px; flex-shrink:0; } /* マップエリア */ .ejg-map-wrap { position:relative; flex-shrink:0; width:100%; aspect-ratio:1; max-height:55%; } .ejg-map-wrap canvas { position:absolute; inset:0; width:100%; height:100%; } /* チャンプリスト */ .ejg-champ-list { display:flex; flex-direction:column; gap:3px; overflow-y:auto; flex:1; min-height:0; } .ejg-champ-row { display:flex; align-items:center; gap:5px; flex-shrink:0; } .ejg-champ-icon { width:22px; height:22px; border-radius:2px; flex-shrink:0; object-fit:cover; background:var(--bg); } .ejg-champ-name { font-size:10px; color:var(--text2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ejg-champ-bars { display:flex; gap:2px; align-items:center; } .ejg-bar { display:flex; flex-direction:column; align-items:center; gap:1px; padding:1px 4px; border-radius:2px; min-width:24px; } .ejg-bar-lbl { font-size:6px; color:var(--text3); letter-spacing:0.2px; } .ejg-bar-n { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; line-height:1; } .ejg-totals { display:flex; gap:4px; flex-shrink:0; padding-top:4px; border-top:1px solid var(--border); } .ejg-total-chip { display:flex; flex-direction:column; align-items:center; padding:2px 6px; border-radius:2px; flex:1; } .ejg-total-lbl { font-size:7px; color:var(--text3); } .ejg-total-n { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; line-height:1.1; } .ejg-loading { font-size:10px; color:var(--text3); padding:6px 0; } /* ===== プレイヤー行 新レイアウト ===== */ .player-wr { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:50px; } .wr-label { font-size:8px; color:var(--text3); letter-spacing:0.3px; white-space:nowrap; margin-bottom:1px; } .wr-num { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; line-height:1.1; } .wr-num.pos { color:var(--green); } .wr-num.neg { color:var(--red); } .wr-num.neu { color:var(--text-dim); } .wr-sub { font-size:8px; color:var(--text2); letter-spacing:0.2px; min-height:10px; } .player-rank-block { display:flex; align-items:center; gap:4px; flex-shrink:0; width:106px; overflow:hidden; } .rank-icon-wrap { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .rank-tier-icon { width:22px; height:22px; object-fit:contain; } .rank-text-wrap { display:flex; flex-direction:column; min-width:0; overflow:hidden; } .rank-line1 { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; white-space:nowrap; line-height:1.2; overflow:hidden; text-overflow:ellipsis; } .rank-line2 { font-family:'Rajdhani',sans-serif; font-size:10px; color:var(--text-dim); line-height:1.2; } /* モバイル用コンパクトティア（デスクトップでは非表示） */ .rank-line1-short { display:none; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; white-space:nowrap; line-height:1.1; letter-spacing:.5px; } /* ローマ数字（Ⅰ/Ⅱ/Ⅲ/Ⅳ）はグリフが大きめなので少し縮める */ .rank-line1-short .rk-rn { font-size:.78em; } .rank-CHALLENGER .rank-line1-short { color:var(--challenger); } .rank-GRANDMASTER .rank-line1-short { color:var(--grandmaster); } .rank-MASTER .rank-line1-short { color:var(--master); } .rank-DIAMOND .rank-line1-short { color:var(--diamond); } .rank-EMERALD .rank-line1-short { color:var(--emerald); } .rank-PLATINUM .rank-line1-short { color:var(--platinum); } .rank-GOLD .rank-line1-short { color:var(--gold-rank); } .rank-SILVER .rank-line1-short { color:var(--silver); } .rank-BRONZE .rank-line1-short { color:var(--bronze, var(--text-dim)); } .rank-IRON .rank-line1-short { color:var(--iron, var(--text-dim)); } .rank-UNRANKED .rank-line1-short { color:var(--text-dim); } .rank-CHALLENGER .rank-line1 { color:var(--challenger); } .rank-GRANDMASTER .rank-line1 { color:var(--grandmaster); } .rank-MASTER .rank-line1 { color:var(--master); } .rank-DIAMOND .rank-line1 { color:var(--diamond); } .rank-EMERALD .rank-line1 { color:var(--emerald); } .rank-PLATINUM .rank-line1 { color:var(--platinum); } .rank-GOLD .rank-line1 { color:var(--gold-rank); } .rank-SILVER .rank-line1 { color:var(--silver); } /* ===== チャンプアイコン + レベルバッジ ===== */ .champ-icon-wrap { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:0; } .lv-badge { font-size:7px; font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:0.3px; color:var(--text-dim); background:var(--bg2); border:1px solid var(--border); padding:0 3px; border-radius:2px; white-space:nowrap; margin-top:1px; line-height:1.4; } /* ===== AI アドバイス パネル ===== */ .ai-meta-btn { background:transparent; border:1px solid var(--border); color:var(--text-dim); font-size:9px; padding:2px 6px; cursor:pointer; letter-spacing:.5px; font-family:'Rajdhani',sans-serif; font-weight:600; transition:all 0.15s; } .ai-meta-btn:hover { border-color:var(--blue); color:var(--blue); } .ai-meta-btn.active { border-color:var(--gold); color:var(--gold); } .ai-prompt-box { background:rgba(4,7,15,0.9); border:1px solid rgba(26,42,69,0.8); border-left:2px solid var(--border-glow); padding:6px 8px; margin-bottom:6px; flex-shrink:0; font-size:9px; color:var(--text-dim); line-height:1.5; max-height:90px; overflow-y:auto; white-space:pre-wrap; font-family:monospace; } .ai-section { display:flex; gap:8px; padding:5px 0; border-bottom:1px solid rgba(26,42,69,0.5); } .ai-section:last-child { border-bottom:none; } .ai-num { flex-shrink:0; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; border:1px solid; margin-top:1px; background:rgba(0,0,0,0.3); } .ai-body { flex:1; font-size:11px; line-height:1.65; color:#b8cad8; } .ai-body strong { color:var(--text-bright); } .ai-preamble { font-size:10px; color:var(--text-dim); padding:0 0 5px; margin-bottom:4px; border-bottom:1px solid rgba(26,42,69,0.4); line-height:1.5; } .ai-empty { color:var(--text-dim); font-size:11px; padding:8px 0; } .rank-UNRANKED .rank-line1 { color:var(--text-dim); } /* ===== lol_matchup スタイル統一: ボタン角丸 ===== */ header button, header a, .ai-meta-btn, .header-fav-btn, .header-search-btn { border-radius: 6px; } /* ===== MATCHUP パネル (グリッド配置) ===== */ /* .matchup-panel は .panel.gold-top と組み合わせて使用 */ .matchup-vs-label { font-family: 'Rajdhani', sans-serif; font-size: 9px; color: var(--text3); letter-spacing: 0.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .matchup-body { flex: 1; overflow-y: auto; font-size: 11px; line-height: 1.65; color: var(--text); padding: 2px 0; } .matchup-body::-webkit-scrollbar { width: 3px; } .matchup-body::-webkit-scrollbar-track { background: transparent; } .matchup-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* 見出し — lol_matchup .bubble に準拠 */ .matchup-body h1 { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: #fff; margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--gold); letter-spacing: 1px; } .matchup-body h2 { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; color: #fff; margin: 10px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--border); letter-spacing: 1px; } .matchup-body h3 { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: 2px; text-transform: uppercase; margin: 10px 0 5px; } .matchup-body h4 { font-size: 11px; font-weight: 700; color: var(--text); margin: 8px 0 3px; } .matchup-body h5 { font-size: 10px; font-weight: 700; color: var(--text2); margin: 6px 0 3px; } .matchup-body h1:first-child, .matchup-body h2:first-child, .matchup-body h3:first-child, .matchup-body h4:first-child { margin-top: 0; } .matchup-body p { margin-bottom: 6px; } .matchup-body p:last-child { margin-bottom: 0; } .matchup-body strong { color: #fb923c; font-weight: 700; } /* --gold2 */ .matchup-body em { color: var(--blue); font-style: normal; } .matchup-body ul, .matchup-body ol { padding-left: 14px; margin: 4px 0 8px; list-style: none; } .matchup-body li { position: relative; padding-left: 10px; margin-bottom: 4px; line-height: 1.6; } .matchup-body li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--gold2); font-size: 1.1em; line-height: 1.6; } .matchup-body hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; } .matchup-body blockquote { border-left: 2px solid var(--gold2); padding: 4px 8px; margin: 6px 0; background: rgba(77,157,224,0.06); border-radius: 0 4px 4px 0; color: var(--text2); font-size: 10px; } .matchup-body table { width: 100%; border-collapse: collapse; font-size: 10px; margin: 6px 0; } .matchup-body th { background: var(--bg3,#1a2438); color: var(--text2); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 5px; text-align: left; border: 1px solid var(--border); } .matchup-body td { padding: 3px 5px; border: 1px solid var(--border); } .matchup-body tr:nth-child(even) td { background: rgba(255,255,255,0.02); } /* ローディングドット */ .matchup-loading { display: flex; align-items: center; gap: 5px; padding: 12px 0; } .matchup-dot { width: 5px; height: 5px; background: var(--blue); border-radius: 50%; animation: matchupBounce 1.2s infinite; } .matchup-dot:nth-child(2) { animation-delay: 0.2s; } .matchup-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes matchupBounce { 0%,80%,100% { transform:translateY(0); opacity:0.4; } 40% { transform:translateY(-5px); opacity:1; } } /* 再取得ボタン */ .matchup-regen-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: 9px; padding: 2px 7px; cursor: pointer; letter-spacing: .5px; font-family: 'Rajdhani', sans-serif; transition: all 0.15s; } .matchup-regen-btn:hover { border-color: var(--blue); color: var(--blue); } /* チャンプアイコン（インライン）*/ .matchup-body .inline-champ-icon { width: 16px; height: 16px; border-radius: 3px; vertical-align: middle; margin: 0 2px 1px 0; object-fit: cover; } /* コードフェンス内データブロック */ .matchup-data-block { background: rgba(77,157,224,0.07); border: 1px solid rgba(77,157,224,0.18); border-radius: 4px; padding: 5px 8px; margin: 4px 0; font-family: 'Rajdhani', sans-serif; font-size: 11px; color: var(--text); letter-spacing: 0.3px; line-height: 1.6; } /* ============================================================ lolsumoner-inspired VISUAL UPGRADE ============================================================ */ /* --- 深みのあるカラーパレット上書き --- */ :root { --bg: #020b15; --panel: #091428; --bg2: #0d1b2a; --bg3: #141e2e; --border: #1e3a5f; --border-glow: #2a4d7a; } /* --- 背景グリッドをゴールドではなくブルーに --- */ body::before { background-image: linear-gradient(rgba(77,157,224,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(77,157,224,0.018) 1px, transparent 1px); background-size: 44px 44px; } /* --- ヘッダー強化 --- */ header { background: linear-gradient(90deg, #091428 0%, #051424 50%, #091428 100%); border-top: 2px solid var(--gold); border-bottom: 1px solid rgba(217,164,65,0.12); box-shadow: 0 2px 24px rgba(0,0,0,0.6), 0 0 40px rgba(217,164,65,0.04); } .logo { font-family: 'Cinzel', serif; font-size: 18px; letter-spacing: 4px; font-weight: 700; text-shadow: 0 0 14px rgba(217,164,65,0.45), 0 0 30px rgba(217,164,65,0.15); } .logo span { text-shadow: 0 0 10px rgba(77,157,224,0.6), 0 0 25px rgba(77,157,224,0.2); } /* --- パネル強化 --- */ .panel.gold-top { background: linear-gradient(180deg, rgba(217,164,65,0.03) 0%, transparent 40%); box-shadow: 0 0 30px rgba(217,164,65,0.05), 0 4px 20px rgba(0,0,0,0.4); } .panel.blue-top { background: linear-gradient(180deg, rgba(77,157,224,0.04) 0%, transparent 40%); box-shadow: 0 0 30px rgba(77,157,224,0.04), 0 4px 20px rgba(0,0,0,0.4); } /* コーナーデコ：ダイヤモンド型へ変更 */ .corner-deco { width: 10px; height: 10px; border: none; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); background: transparent; } /* --- パネルタイトル強化 --- */ .panel-title { font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; color: rgba(217,164,65,0.85); padding-bottom: 7px; border-bottom: 1px solid rgba(217,164,65,0.12); margin-bottom: 10px; } .panel-title::before { content: ''; width: 8px; height: 8px; flex-shrink: 0; background: transparent; border: 1.5px solid var(--gold); transform: rotate(45deg); } /* --- チームラベル：平行四辺形 --- */ .team-label { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%); padding: 3px 22px 3px 8px; letter-spacing: 3px; font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700; border-bottom: none; margin-bottom: 8px; } .team-label.bl { background: linear-gradient(90deg, rgba(77,157,224,0.1) 0%, transparent 100%); border-bottom: none; border-left: 2px solid var(--blue); box-shadow: inset 0 0 20px rgba(77,157,224,0.04); } .team-label.rd { background: linear-gradient(90deg, rgba(232,64,87,0.1) 0%, transparent 100%); border-bottom: none; border-left: 2px solid var(--red); box-shadow: inset 0 0 20px rgba(232,64,87,0.04); } /* --- プレイヤー行強化 --- */ .player-row { background: rgba(9,20,40,0.6); border: 1px solid rgba(30,58,95,0.5); border-left: 2px solid transparent; padding: 5px 8px; } .player-row:hover { background: rgba(77,157,224,0.05); border-color: rgba(77,157,224,0.22); border-left-color: var(--blue); box-shadow: inset 3px 0 16px rgba(77,157,224,0.04); } .player-row.me { background: rgba(217,164,65,0.06); border-color: rgba(217,164,65,0.28); border-left-color: var(--gold); box-shadow: inset 3px 0 16px rgba(217,164,65,0.05); } /* --- ランクバッジ --- */ .rank-badge { font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 1px 7px; } /* --- チャンプアイコン --- */ .champ-icon { border: 1px solid rgba(217,164,65,0.2); box-shadow: 0 0 8px rgba(217,164,65,0.08); } /* --- スケルトンを深い色で --- */ .skeleton { background: linear-gradient(90deg, #091428 25%, #1a2634 50%, #091428 75%); } /* --- ライブバッジ強化 --- */ .live-badge { background: rgba(232,64,87,0.1); border: 1px solid rgba(232,64,87,0.4); box-shadow: 0 0 12px rgba(232,64,87,0.15); clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); padding: 3px 16px; } /* --- ヘッダー統計強化 --- */ .hstat-label { font-family: 'Rajdhani', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: 1.5px; } .hstat-val { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-bright); } /* --- ビルドカード強化 --- */ .build-card { background: linear-gradient(180deg, rgba(217,164,65,0.03) 0%, #091428 100%); border-color: rgba(30,58,95,0.8); box-shadow: 0 2px 12px rgba(0,0,0,0.3); } .build-card:hover { border-color: rgba(217,164,65,0.5); box-shadow: 0 0 20px rgba(217,164,65,0.12), 0 4px 20px rgba(0,0,0,0.4); } /* --- EJGパネル強化 --- */ .ejg-total-chip { background: rgba(9,20,40,0.8); border: 1px solid rgba(30,58,95,0.6); } /* --- バンパネル --- */ #banPanel { background: linear-gradient(180deg, rgba(217,164,65,0.02) 0%, transparent 100%); } /* --- scrollbar カスタム --- */ ::-webkit-scrollbar-thumb { background: rgba(30,58,95,0.8); } ::-webkit-scrollbar-thumb:hover { background: rgba(217,164,65,0.3); } /* --- ヘッダー検索窓 --- */ .header-search-inner { background: rgba(9,20,40,0.8); border-color: rgba(30,58,95,0.8); border-radius: 0; } .header-search-inner:focus-within { border-color: var(--blue); box-shadow: 0 0 10px rgba(77,157,224,0.1); } /* --- AIアドバイス・マッチアップパネル本文 --- */ .matchup-body { font-size: 11px; line-height: 1.7; } /* --- パネル外枠の微細な光彩 (blue-top) --- */ #blueTeamPanel { box-shadow: -2px 0 20px rgba(77,157,224,0.04), 0 0 30px rgba(77,157,224,0.03); } #redTeamPanel { box-shadow: 2px 0 20px rgba(232,64,87,0.04), 0 0 30px rgba(232,64,87,0.03); } /* --- 検索オーバーレイフッター位置修正 --- */ .so-ch-bl { bottom:50px; } /* ============================================================ MOBILE 対応（≤820px）：16:9レターボックスを解除し縦積み＋スクロール 既存デスクトップルールは非変更。JSのinline flexは!importantで上書き。 ============================================================ */ @media (max-width:820px){ /* ページ全体をスクロール可能に */ html,body{ height:auto; overflow-x:hidden; overflow-y:auto; } /* 検索オーバーレイ（ランディング）：入力ボックスを画面幅に収める */ .search-box{ width:min(420px,92vw); } .search-overlay{ overflow-y:auto; } /* ===== ダッシュボード：16:9固定を解除して縦1カラム ===== */ .wrapper{ position:relative; height:auto; min-height:100vh; display:block; padding:8px; } .canvas{ max-width:none; max-height:none; width:100%; height:auto; display:flex; flex-direction:column; gap:8px; padding:0; } /* ヘッダー：全幅・折返し・角クリップ解除 */ header{ grid-column:auto; grid-row:auto; flex-wrap:wrap; gap:10px 14px; padding:10px 12px; min-height:0; clip-path:none; border-top:2px solid var(--gold); } .header-stats{ gap:14px; flex-wrap:wrap; } /* モバイルでは「達人ビルド」リンクとバージョン表記を非表示 */ .builds-link{ display:none!important; } #apiVersion{ display:none!important; } /* モバイルの試合表示画面ではヘッダーの検索窓・ボタンを非表示（再検索はロゴタップで検索画面へ） */ .header-search-inner{ display:none!important; } /* サモナー名は Time の右にインラインで表示（独立段にしない）。Timeとの間を少し空ける */ .header-search-wrap{ flex:0 1 auto; min-width:0; justify-content:flex-start; gap:6px; margin:0 0 0 14px; } .header-summoner-name{ min-width:0; max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* チームパネル：縦積み・全幅・内容に応じて伸長 */ .team-panel,#blueTeamPanel,#redTeamPanel{ grid-column:auto!important; grid-row:auto!important; width:100%; overflow:visible; box-shadow:none; } /* BANパネル：青5 / 赤5 を1行に横並び（BLUE [5] / RED [5] を同じ行に） */ #banPanel{ grid-column:auto; grid-row:auto; width:100%; flex-direction:row; align-items:center; gap:10px; padding:6px 8px; } #banPanel .ban-section{ flex-direction:row; align-items:center; flex:1 1 0; min-width:0; width:auto; gap:6px; } #banPanel .ban-team-label{ margin:0; min-width:30px; flex-shrink:0; text-align:left; font-size:8px; line-height:1; } #banPanel .ban-icons{ flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; gap:3px; flex:1 1 0; min-width:0; overflow:hidden; } #banPanel .ban-icon,#banPanel .ban-icon-empty{ width:24px; height:24px; } #banPanel .ban-divider{ display:none; } /* 下段：横並びグリッド → 縦積み。JSのinline flexを上書き */ .bottom-row{ grid-column:auto; grid-row:auto; display:flex; flex-direction:column; gap:8px; overflow:visible; min-height:0; } .bottom-left,.bottom-right{ flex-direction:column; gap:8px; overflow:visible; } .builds-panel,.ejg-panel,.ai-panel,.matchup-panel,.rank-panel{ flex:none!important; width:100%!important; overflow:visible; } .bottom-left .panel,.bottom-right .panel{ overflow:visible; } /* リサイズハンドルはモバイルで無効化 */ .resize-handle,.resize-handle-rank{ display:none!important; } /* パネル内のグラフ等が潰れないよう最低高さを確保 */ .lp-chart-wrap{ min-height:160px!important; height:160px; } .panel{ min-height:0; } /* ===== プレイヤー行：狭い画面向けに再構成＆コンパクト化 ===== */ .player-row{ gap:5px; padding:3px 5px; align-items:center; } /* 過去使用10体ストリップは非表示（場所を取り過ぎるため）。他項目は表示する */ .recent-champs{ display:none!important; } /* サモスペ／ルーンは表示・少し縮小 */ .p-spell-rune-col{ display:flex; } .p-spells,.p-runes{ gap:2px; } .spell-slot,.prune-slot{ width:15px; height:15px; } /* ポジション：アイコン＋ラベルを表示・縮小 */ .p-position{ flex-shrink:0; } .p-position img{ width:16px; height:16px; } .p-position span{ font-size:8px; } /* マスタリーTop3は表示・縮小 */ .mastery-champs{ display:flex; } /* アイコンを大きくし、枠とimgのサイズを揃えてレベル数字をアイコンに被せる */ .mastery-slot{ width:28px; height:28px; } .mastery-slot img{ width:28px; height:28px; } .mastery-lvl{ font-size:9px; padding:1px 2px; } /* 名前＋下段（マスタリー等）は伸縮、はみ出さない。 ただし overflow:hidden だとアイコン上の「前回」ラベルが切れるため visible にし、 名前のはみ出しは .pinfo / .pname-inner 側で制御する */ .player-row{ overflow:visible; } /* 「前回」ラベルをアイコンに被らないよう少し上へ */ .last-match-label{ top:-13px; } .pinfo{ min-width:0; flex:1 1 0; overflow:hidden; } .pname{ font-size:12px; min-width:0; max-width:100%; overflow:hidden; } .pname-inner{ display:block; flex:1 1 auto; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pname-inner .opgg-link{ display:inline; } .pinfo-bottom{ gap:4px; flex-wrap:wrap; min-width:0; } /* このチャンプ／レーン成績（パフォーマンス枠）はモバイルでは非表示 */ .perf-block{ display:none; } /* チャンプアイコン */ .champ-icon{ width:30px; height:30px; } .lv-badge{ font-size:7px; padding:0 2px; } /* 勝率：コンパクト固定幅 */ .player-wr{ flex-shrink:0; width:auto; min-width:34px; } .wr-label{ display:none; } .wr-num{ font-size:12px; } .wr-sub{ font-size:8px; } /* ランク：アイコン＋コンパクトティア（GⅣ等）。LPは非表示・エンブレムとティア表記を拡大 */ .rank-line1{ display:none; } .rank-line1-short{ display:block; font-size:16px; } .rank-line2{ display:none; } /* LPはモバイルでは非表示 */ .player-rank-block{ min-width:0; gap:3px; flex-shrink:0; } .rank-icon-wrap{ width:26px; height:26px; } .rank-tier-icon{ width:26px; height:26px; } } /* --- さらに小さい画面（≤430px）の微調整 --- */ @media (max-width:430px){ .logo{ font-size:17px; letter-spacing:2px; } .search-input,.search-tag-input,.search-hash{ font-size:16px; padding-top:12px; padding-bottom:12px; } .search-tag-input{ width:62px; } header{ padding:8px 10px; } /* プレイヤー行をさらに詰める */ .player-row{ gap:4px; padding:2px 4px; } .champ-icon{ width:26px; height:26px; } .recent-champs .rc-slot:nth-child(n+8){ display:none; } /* 直近は7件まで表示 */ .rc-slot img{ width:13px; height:13px; } .pname{ font-size:11px; } .player-wr{ min-width:30px; } .wr-num{ font-size:11px; } .rank-icon-wrap,.rank-tier-icon{ width:23px; height:23px; } .rank-line1-short{ font-size:15px; } #banPanel .ban-icon,#banPanel .ban-icon-empty{ width:22px; height:22px; } } /* ===== 更新ボタン ===== */ .refresh-game-btn { display: flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-family: 'Rajdhani', sans-serif; font-size: 11px; letter-spacing: 1px; padding: 4px 10px; cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .refresh-game-btn:hover { border-color: var(--blue); color: var(--blue); } .refresh-game-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ===== ポジションドラッグ ===== */ .player-row[draggable=true] { cursor: grab; } .player-row.dragging { opacity: 0.35; cursor: grabbing; } .player-row.drag-over { outline: 1px dashed var(--gold); background: rgba(220, 38, 38, 0.07); } /* ===== ポジション変更通知 ===== */ .pos-swap-notice { display: flex; align-items: center; gap: 8px; background: rgba(220, 38, 38, 0.07); border: 1px solid rgba(220, 38, 38, 0.28); padding: 5px 8px; font-size: 10px; color: var(--gold); flex-shrink: 0; margin-bottom: 4px; } .pos-swap-notice span { flex: 1; } .pos-swap-rerun-btn { background: rgba(220, 38, 38, 0.15); border: 1px solid var(--gold); color: var(--gold); font-family: 'Rajdhani', sans-serif; font-size: 10px; padding: 2px 8px; cursor: pointer; letter-spacing: .5px; white-space: nowrap; transition: background 0.15s; } .pos-swap-rerun-btn:hover { background: rgba(220, 38, 38, 0.3); } .pos-swap-close-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; } .pos-swap-close-btn:hover { color: var(--text); } .so-ch-br { bottom:50px; } /* ================================================================ トップ画面アクセントカラー上書き — Gold #D9A441 ================================================================ */ :root { --so-acc:#D9A441; --so-rgb:217,164,65; } .so-grid { background-image: linear-gradient(rgba(var(--so-rgb),.04) 1px,transparent 1px), linear-gradient(90deg,rgba(var(--so-rgb),.04) 1px,transparent 1px); background-size:44px 44px; } .so-particle { background:var(--so-acc); } .so-monument-svg { filter:drop-shadow(0 0 10px rgba(var(--so-rgb),.3)) drop-shadow(0 0 24px rgba(var(--so-rgb),.1)); } .so-corner-hud { border-color:rgba(var(--so-rgb),.45); } .so-sub { color:rgba(var(--so-rgb),.65); } .so-logo { text-shadow:0 0 28px rgba(var(--so-rgb),.35),0 0 60px rgba(var(--so-rgb),.12),2px 3px 8px rgba(0,0,0,.95); } .so-logo span { color:var(--so-acc); text-shadow:0 0 18px rgba(var(--so-rgb),.7),0 0 40px rgba(var(--so-rgb),.3),2px 3px 8px rgba(0,0,0,.95); } .so-divider span:first-child { background:linear-gradient(to right,transparent,rgba(var(--so-rgb),.45)); } .so-divider span:last-child { background:linear-gradient(to left, transparent,rgba(var(--so-rgb),.45)); } .so-corner { border-color:var(--so-acc); } .so-field-label { color:rgba(var(--so-rgb),.5); } .search-input-wrap { border-color:rgba(var(--so-rgb),.2); } .search-input-wrap:focus-within { border-color:rgba(var(--so-rgb),.5); box-shadow:0 0 0 1px rgba(var(--so-rgb),.15),0 6px 28px rgba(var(--so-rgb),.1); } .search-input::placeholder { color:rgba(var(--so-rgb),.25); } .search-hash { color:rgba(var(--so-rgb),.5); } .search-tag-input { color:var(--so-acc); } .search-tag-input::placeholder { color:rgba(var(--so-rgb),.25); } .search-btn { color:var(--so-acc); border-left-color:rgba(var(--so-rgb),.2); } .search-btn:hover { background:rgba(var(--so-rgb),.1); color:#f0e6d3; } .search-history-item { border-color:rgba(var(--so-rgb),.12); } .search-history-item:hover { border-color:rgba(var(--so-rgb),.4); } .search-history-icon { color:var(--so-acc); } .so-footer { border-top-color:rgba(var(--so-rgb),.08); } /* ================================================================ SUR MESURE — Layer 3 アダプタ（livecoach固有DOMを仕立て室の骨格へ） 設計思想スイッチ: 色だけでなくタイポ/装飾/骨格まで切り替える。 すべて html[data-theme="sur-mesure"] スコープ（他テーマ・他アプリ非影響）。 ================================================================ */ /* ── 背景: 青の方眼グリッド → ごく淡いロゼの縫い罫 ── */ html[data-theme="sur-mesure"] body::before { background-image: linear-gradient(rgba(210,154,164,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(210,154,164,.02) 1px, transparent 1px); background-size:34px 34px; } /* ── タイポ: Cinzel/Rajdhani → Prata（明朝ディスプレイ）/ Jost ── */ html[data-theme="sur-mesure"] .logo { font-family:'Prata',serif; font-weight:400; letter-spacing:.04em; } html[data-theme="sur-mesure"] .panel-title, html[data-theme="sur-mesure"] .team-label, html[data-theme="sur-mesure"] .hstat-label, html[data-theme="sur-mesure"] .hstat-val, html[data-theme="sur-mesure"] .ban-team-label, html[data-theme="sur-mesure"] .live-badge, html[data-theme="sur-mesure"] .not-in-game-badge, html[data-theme="sur-mesure"] .rank-badge, html[data-theme="sur-mesure"] .p-level, html[data-theme="sur-mesure"] .wr-num, html[data-theme="sur-mesure"] .header-summoner-name { font-family:'Jost','Zen Kaku Gothic New',sans-serif; } /* ── ヘッダー: 角の切り欠き(HUD) → まっすぐな縫い代罫 ── */ html[data-theme="sur-mesure"] header { clip-path:none; border:1px solid var(--border); border-top:1px solid var(--gold); } html[data-theme="sur-mesure"] .panel-title::before { background:var(--gold); } /* ── パネル: グロー枠 → ステッチ内枠（点線）＋シャープな角 ── */ html[data-theme="sur-mesure"] .panel { border-radius:0; } html[data-theme="sur-mesure"] .panel::after { content:''; position:absolute; inset:5px; pointer-events:none; z-index:0; border:1px dashed rgba(210,154,164,.12); } html[data-theme="sur-mesure"] .panel.gold-top { border-top:1px solid var(--gold); } html[data-theme="sur-mesure"] .panel.blue-top { border-top:1px solid var(--blue); } /* コーナー三角(HUD) → 小さなロゼのピン */ html[data-theme="sur-mesure"] .corner-deco { width:6px; height:6px; border:none; border-radius:50%; top:6px; right:6px; background:var(--gold); box-shadow:0 0 6px rgba(210,154,164,.5); } html[data-theme="sur-mesure"] .team-label.bl { border-bottom-color:rgba(143,179,217,.3); } html[data-theme="sur-mesure"] .team-label.rd { border-bottom-color:rgba(217,143,126,.3); } /* ================================================================ SUR MESURE — LANDING（検索オーバーレイ）を仕立て室の入口へ ================================================================ */ /* 背景の LoL マップ → エスプレッソ黒。装飾は couture/thread で与える */ html[data-theme="sur-mesure"] .so-bg { background-image:none !important; background:#161210; } html[data-theme="sur-mesure"] .so-vignette { background:radial-gradient(ellipse 100% 80% at 50% 40%, transparent 30%, rgba(14,11,9,.85) 100%); } html[data-theme="sur-mesure"] .so-tint { background: radial-gradient(ellipse 60% 42% at 84% -8%, rgba(210,154,164,.08) 0%, transparent 62%), radial-gradient(ellipse 55% 45% at 6% 108%, rgba(143,179,217,.05) 0%, transparent 62%); } /* grid レイヤーに型紙のフレンチカーブを載せる */ html[data-theme="sur-mesure"] .so-grid { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23D29AA4' stroke-opacity='.06'%3E%3Cpath d='M-40 880 C 260 640, 190 400, 560 120'/%3E%3Cpath d='M20 920 C 330 680, 260 430, 660 110' stroke-dasharray='2 8'/%3E%3Cpath d='M520 940 C 720 760, 690 560, 940 420'/%3E%3Ccircle cx='560' cy='120' r='4' fill='%23D29AA4' fill-opacity='.12' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); background-size:cover; background-position:center; } /* スクリーンHUD/回転スコープは仕立て室の言語ではない → 隠す */ html[data-theme="sur-mesure"] .so-corner-hud { display:none; } /* ロゴ: Cinzel＋ネオン → Prata＋落ち着いた字面 */ html[data-theme="sur-mesure"] .so-logo { font-family:'Prata',serif; font-weight:400; letter-spacing:.02em; color:#EFE9E3; text-shadow:none; } html[data-theme="sur-mesure"] .so-logo span { color:var(--gold); text-shadow:none; } html[data-theme="sur-mesure"] .so-sub { font-family:'Jost',sans-serif; letter-spacing:.34em; color:var(--gold); } html[data-theme="sur-mesure"] .so-field-label { font-family:'Jost',sans-serif; color:var(--text-dim); } /* 区切り線 → 縫い糸（破線）＋中央ピン */ html[data-theme="sur-mesure"] .so-divider span:first-child, html[data-theme="sur-mesure"] .so-divider span:last-child { background:repeating-linear-gradient(90deg, var(--thread) 0 7px, transparent 7px 13px) !important; } html[data-theme="sur-mesure"] .so-divider-icon svg polygon { fill:var(--gold) !important; } /* 検索窓: Rajdhani → Jost、角は直線 */ html[data-theme="sur-mesure"] .so-input-outer { } html[data-theme="sur-mesure"] .search-input, html[data-theme="sur-mesure"] .search-hash, html[data-theme="sur-mesure"] .search-tag-input { font-family:'Jost','Zen Kaku Gothic New',sans-serif; letter-spacing:.02em; } html[data-theme="sur-mesure"] .search-input-wrap { border-radius:0; background:rgba(28,23,20,.7); } /* 戻るリンク / フッター（要素は維持＝ナビ・法務要件） */ html[data-theme="sur-mesure"] .btn-back-home { font-family:'Jost',sans-serif; border-radius:0; background:var(--panel); border-color:var(--border); color:var(--text-dim); } html[data-theme="sur-mesure"] .btn-back-home:hover { border-color:var(--gold); color:var(--gold); } html[data-theme="sur-mesure"] .so-footer { background:rgba(22,18,16,.82); border-top-color:var(--border); } html[data-theme="sur-mesure"] .so-footer p { font-family:'Jost',sans-serif; } .so-footer p { color:rgba(var(--so-rgb),.28); } /* ================================================================ NEXUS v2 — Layer 3 アダプタ（CHAMPAGNE CHROME / livecoach） 宇宙ラウンジのVIP管制卓: 墨黒 #0A090E / シャンパンゴールド #E7C980 / クローム / 星雲アクセント(サファイア/アメジスト/ローズ/ミント)。 タイポ: 見出し=Marcellus(400のみ) / UI=Outfit / データ=IBM Plex Mono。 v2はリスキンではなく骨格の再設計: [ダッシュボード] ①BANパネルを右端52px列→左端フルハイト背骨レールへ移設 ②bottom-rowの52pxスペーサー列を廃止し2等分 ③ヘッダー3ゾーン再配置 （検索=中央コマンドパレット位置 / Mode・Time=右端） [LANDING] 中央寄せ縦積み→左下寄せ非対称コンポジション、 検索=金グラデ縁のコンシェルジュデスク、フッター=左寄せテレメトリ すべて html[data-theme="nexus"] スコープ（他テーマ・他アプリ非影響）。 ランク帯カラー(--challenger等)は意味色なので上書きしない。 ================================================================ */ html[data-theme="nexus"] { --bg: #0A090E; --bg2: #12101A; --bg3: #171423; --panel: #100E17; --surface: #100E17; --surface2: #12101A; --surface3: #171423; --border: #282334; --border-glow: rgba(231,201,128,.4); --gold: #E7C980; --gold2: #F3DFA6; --blue: #4F8DF7; --blue-dim: rgba(79,141,247,.08); --red: #FB7185; --lose: #FB7185; --green: #7CE3B1; --win: #7CE3B1; --text: #D8D3CA; --text-bright: #F0EDE6; --text-dim: #948FA3; --text2: #948FA3; --text3: #5C5769; --so-acc: #E7C980; --so-rgb: 231,201,128; --nx-goldgrad:linear-gradient(105deg,#F7E7BC 0%,#E7C980 38%,#A8823F 62%,#F3DFA6 100%); --nx-chromegrad:linear-gradient(105deg,#F4F7FC 0%,#C3CBD9 40%,#8C96A8 62%,#EDF1F7 100%); } html[data-theme="nexus"], [data-theme="nexus"] body { font-family:'Outfit','Noto Sans JP',sans-serif; } /* ── 背景: 青方眼 → 星雲アンビエント＋スターダスト（ラウンジの窓外） ── */ html[data-theme="nexus"] body::before { background-image: radial-gradient(ellipse 40% 30% at 84% -2%, rgba(79,141,247,.09), transparent 62%), radial-gradient(ellipse 36% 30% at 4% 40%, rgba(168,85,247,.06), transparent 62%), radial-gradient(ellipse 44% 30% at 60% 108%, rgba(251,113,133,.05), transparent 62%), radial-gradient(1.2px 1.2px at 18% 22%, rgba(231,201,128,.5), transparent 100%), radial-gradient(1px 1px at 64% 8%, rgba(215,221,232,.45), transparent 100%), radial-gradient(1.3px 1.3px at 82% 64%, rgba(231,201,128,.35), transparent 100%), radial-gradient(1px 1px at 36% 78%, rgba(215,221,232,.4), transparent 100%); background-size:100% 100%, 100% 100%, 100% 100%, 640px 640px, 520px 520px, 700px 700px, 560px 560px; } /* ── タイポ: データ系=IBM Plex Mono / ロゴ・パネル見出し=Marcellus ── */ html[data-theme="nexus"] .hstat-label, html[data-theme="nexus"] .hstat-val, html[data-theme="nexus"] .ban-team-label, html[data-theme="nexus"] .live-badge, html[data-theme="nexus"] .not-in-game-badge, html[data-theme="nexus"] .rank-badge, html[data-theme="nexus"] .p-level, html[data-theme="nexus"] .wr-num, html[data-theme="nexus"] .bc-num, html[data-theme="nexus"] .bc-wr, html[data-theme="nexus"] .bc-kda, html[data-theme="nexus"] .header-summoner-name, html[data-theme="nexus"] .header-search-input, html[data-theme="nexus"] .header-search-tag-input, html[data-theme="nexus"] .search-prog-msg, html[data-theme="nexus"] .refresh-game-btn { font-family:'IBM Plex Mono',monospace; } html[data-theme="nexus"] .panel-title, html[data-theme="nexus"] .team-label { font-family:'Marcellus',serif; font-weight:400; letter-spacing:.2em; } /* ══ 骨格再設計①②: BAN背骨レール左端化＋bottom-row 2等分 ══ */ html[data-theme="nexus"] .canvas { grid-template-columns:52px 1fr 1fr; grid-template-rows:52px 1fr 0.9fr; } html[data-theme="nexus"] #banPanel { grid-column:1; grid-row:2 / span 2; } html[data-theme="nexus"] #blueTeamPanel { grid-column:2; } html[data-theme="nexus"] #redTeamPanel { grid-column:3; } html[data-theme="nexus"] .bottom-row { grid-column:2 / -1; grid-template-columns:1fr 1fr; } html[data-theme="nexus"] .bottom-left { grid-column:1; } html[data-theme="nexus"] .bottom-right { grid-column:2; } /* 背骨レールの意匠（金ヘアライン＋上下グラデ） */ html[data-theme="nexus"] #banPanel { border:1px solid transparent; border-radius:6px; background:linear-gradient(180deg,#14111D,#0E0C13) padding-box, var(--nx-goldgrad) border-box; justify-content:space-between; } html[data-theme="nexus"] .ban-divider { background:rgba(231,201,128,.35); width:60%; } /* ══ 骨格再設計③: ヘッダー3ゾーン（検索=中央 / Mode・Time=右端） ══ */ html[data-theme="nexus"] header { clip-path:none; border-radius:6px; border:1px solid transparent; background:linear-gradient(180deg,#14111D,#0F0D16) padding-box, var(--nx-goldgrad) border-box; } html[data-theme="nexus"] .header-search-wrap { order:1; margin-left:auto; margin-right:auto; } html[data-theme="nexus"] .header-stats { order:2; } html[data-theme="nexus"] .refresh-game-btn { order:3; } html[data-theme="nexus"] .builds-link { order:4; border-radius:99px !important; } html[data-theme="nexus"] #apiVersion { order:5; } html[data-theme="nexus"] .logo { font-family:'Marcellus',serif; font-weight:400; letter-spacing:.03em; background:var(--nx-chromegrad); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; } html[data-theme="nexus"] .logo span { background:var(--nx-goldgrad); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; } html[data-theme="nexus"] .hstat-val { color:var(--gold); } /* ── パネル: ベベルHUD → 金縁ラウンジパネル（角丸・チーム色ヘアライン） ── */ html[data-theme="nexus"] .panel { border-radius:6px; clip-path:none; background:linear-gradient(165deg, rgba(20,17,29,.97), rgba(14,12,19,.94)); border:1px solid rgba(215,221,232,.1); } html[data-theme="nexus"] .panel.gold-top { border-top:1px solid rgba(231,201,128,.6); } html[data-theme="nexus"] .panel.blue-top { border-top:1px solid rgba(79,141,247,.55); } html[data-theme="nexus"] #redTeamPanel.panel.blue-top { border-top:1px solid rgba(251,113,133,.55); } /* コーナー三角 → 金の小ブラケット */ html[data-theme="nexus"] .corner-deco { border:none; width:12px; height:12px; top:0; right:0; background:transparent; border-top:1.5px solid rgba(231,201,128,.55); border-right:1.5px solid rgba(231,201,128,.55); border-radius:0 6px 0 0; } html[data-theme="nexus"] .panel-title { color:var(--gold); } html[data-theme="nexus"] .panel-title::before { width:6px; height:6px; border-radius:50%; background:var(--nx-goldgrad); box-shadow:0 0 8px rgba(231,201,128,.7); } /* ── チーム: BLUE=サファイア / RED=ローズ ── */ html[data-theme="nexus"] .team-label.bl { border-bottom:1px solid rgba(79,141,247,.4); } html[data-theme="nexus"] .team-label.rd { border-bottom:1px solid rgba(251,113,133,.4); } html[data-theme="nexus"] .player-row { border-left:2px solid transparent; background:rgba(240,237,230,.015); border-radius:4px; } html[data-theme="nexus"] .player-row:hover { background:rgba(231,201,128,.05); border-color:rgba(231,201,128,.25); border-left-color:var(--gold); } html[data-theme="nexus"] .player-row.me { background:rgba(231,201,128,.07); border-color:rgba(231,201,128,.3); border-left-color:var(--gold); } /* アイコン: ヘックス → 金縁サークレット（円形+金リング） */ html[data-theme="nexus"] .champ-icon, html[data-theme="nexus"] .ban-icon { border-radius:50%; clip-path:none; border:1px solid rgba(231,201,128,.4); background:var(--bg3); } html[data-theme="nexus"] .ban-icon-empty { border-radius:50%; clip-path:none; border:1px dashed rgba(231,201,128,.3); background:var(--bg3); } html[data-theme="nexus"] .rank-badge { border-radius:99px; font-weight:600; } /* ── ビルドカード: 金縁のセラーカード ── */ html[data-theme="nexus"] .build-card { clip-path:none; border-radius:6px; background:var(--bg3); } html[data-theme="nexus"] .build-card:hover { border-color:rgba(231,201,128,.55); box-shadow:0 0 16px rgba(231,201,128,.12); } html[data-theme="nexus"] .item-icon { border-radius:4px; } html[data-theme="nexus"] .item-icon:hover::after { background:#0A090E; border-color:rgba(231,201,128,.4); font-family:'IBM Plex Mono',monospace; } html[data-theme="nexus"] .builds-scroll::-webkit-scrollbar-thumb { background:rgba(231,201,128,.35); } /* ── ヘッダー内検索・操作系: シャンパンの受付カウンター ── */ html[data-theme="nexus"] .header-search-inner { background:#0D0B12; border-color:rgba(215,221,232,.14); border-radius:99px; padding-left:6px; } html[data-theme="nexus"] .header-search-inner:focus-within { border-color:var(--gold); box-shadow:0 0 10px rgba(231,201,128,.18); } html[data-theme="nexus"] .refresh-game-btn { border-radius:99px; } html[data-theme="nexus"] .live-badge { background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.5); border-radius:99px; } html[data-theme="nexus"] .not-in-game-badge { border-radius:99px; } /* ================================================================ NEXUS v2 — LANDING（検索オーバーレイ）を宇宙ラウンジの受付へ 骨格再設計: 中央寄せ縦積み → 左下寄せ非対称コンポジション ================================================================ */ html[data-theme="nexus"] .search-overlay { align-items:flex-start; justify-content:flex-end; } html[data-theme="nexus"] .so-content { align-items:flex-start; text-align:left; padding:1.5rem 2rem 9vh 7vw; } html[data-theme="nexus"] .so-divider { max-width:300px; } html[data-theme="nexus"] .search-box { align-items:flex-start; } html[data-theme="nexus"] .so-field-label { text-align:left; } /* 背景の LoL マップ → 既定(LIVECOACH)と同じ画像を維持し、上に金/星雲のティントを重ねる。 */ html[data-theme="nexus"] .so-vignette { background: radial-gradient(ellipse 100% 80% at 50% 40%, transparent 20%, rgba(5,4,8,.72) 100%), linear-gradient(to bottom, rgba(5,4,8,.58) 0%, transparent 25%, transparent 60%, rgba(5,4,8,.92) 100%); } html[data-theme="nexus"] .so-tint { background: radial-gradient(ellipse 46% 36% at 86% -6%, rgba(79,141,247,.16) 0%, transparent 62%), radial-gradient(ellipse 40% 40% at 8% 108%, rgba(168,85,247,.13) 0%, transparent 62%), radial-gradient(ellipse 36% 30% at 70% 106%, rgba(251,113,133,.1) 0%, transparent 62%), linear-gradient(135deg, rgba(10,9,14,.5) 0%, rgba(10,9,14,.3) 50%, rgba(6,5,9,.62) 100%); } /* grid レイヤー → スターダスト */ html[data-theme="nexus"] .so-grid { background-image: radial-gradient(1.2px 1.2px at 18% 22%, rgba(231,201,128,.55), transparent 100%), radial-gradient(1px 1px at 64% 8%, rgba(215,221,232,.5), transparent 100%), radial-gradient(1.4px 1.4px at 82% 64%, rgba(231,201,128,.4), transparent 100%), radial-gradient(1px 1px at 36% 78%, rgba(215,221,232,.45), transparent 100%), radial-gradient(1px 1px at 92% 30%, rgba(168,85,247,.4), transparent 100%); background-size:640px 640px, 520px 520px, 700px 700px, 560px 560px, 480px 480px; } /* パーティクル: 金の光球のまま（シャンパンの泡） */ html[data-theme="nexus"] .so-particle { border-radius:50%; } /* コーナーHUD → 廃止（ヴィトリーヌの余白へ） */ html[data-theme="nexus"] .so-corner-hud { display:none; } /* ロゴ: Cinzelネオン → Marcellus。"Live"=クロームグラデ、"Coach"=金グラデ */ html[data-theme="nexus"] .so-logo { font-family:'Marcellus',serif; font-weight:400; letter-spacing:.02em; color:transparent; -webkit-text-stroke:0; background:var(--nx-chromegrad); -webkit-background-clip:text; background-clip:text; text-shadow:none; } html[data-theme="nexus"] .so-logo span { background:var(--nx-goldgrad); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; } /* サブコピー: 金のモノスペース・インジケータ行 */ html[data-theme="nexus"] .so-sub { font-family:'IBM Plex Mono',monospace; font-weight:500; letter-spacing:.38em; color:rgba(231,201,128,.75); } html[data-theme="nexus"] .so-sub::before { content:'◆ '; letter-spacing:0; } /* 区切り線 → 金のヘアライン（左寄せ・短く） */ html[data-theme="nexus"] .so-divider span:first-child { background:linear-gradient(to right, rgba(231,201,128,.6), rgba(215,221,232,.25)) !important; } html[data-theme="nexus"] .so-divider span:last-child { background:linear-gradient(to left, transparent, rgba(215,221,232,.25)) !important; } /* 検索窓: コンシェルジュデスク（金グラデ縁・角丸・ダーク面） */ html[data-theme="nexus"] .so-field-label { font-family:'IBM Plex Mono',monospace; color:rgba(231,201,128,.7); } html[data-theme="nexus"] .search-input, html[data-theme="nexus"] .search-hash, html[data-theme="nexus"] .search-tag-input { font-family:'IBM Plex Mono',monospace; letter-spacing:.01em; } html[data-theme="nexus"] .so-corner { display:none; } html[data-theme="nexus"] .search-input-wrap { border-radius:8px; caret-color:var(--so-acc); border:1px solid transparent; background:linear-gradient(#0D0B12,#0D0B12) padding-box, var(--nx-goldgrad) border-box; } /* 戻るリンク / フッター（要素は維持＝ナビ・法務要件） */ html[data-theme="nexus"] .btn-back-home { font-family:'IBM Plex Mono',monospace; border-radius:99px; background:rgba(13,11,18,.75); border-color:rgba(231,201,128,.3); color:var(--text-dim); } html[data-theme="nexus"] .btn-back-home:hover { border-color:var(--gold); color:var(--gold); background:rgba(13,11,18,.92); } html[data-theme="nexus"] .so-footer { background:rgba(8,7,12,.8); border-top-color:rgba(231,201,128,.25); text-align:left; padding-left:7vw; } html[data-theme="nexus"] .so-footer p { font-family:'IBM Plex Mono',monospace; } /* ── モバイル(≤820px): flex縦積みに戻るため order/中央寄せを整える ── */ @media (max-width:820px){ html[data-theme="nexus"] .header-search-wrap { order:0; margin:0 0 0 14px; } html[data-theme="nexus"] .header-stats, html[data-theme="nexus"] .refresh-game-btn, html[data-theme="nexus"] .builds-link, html[data-theme="nexus"] #apiVersion { order:0; } html[data-theme="nexus"] .so-content { padding:1.5rem 1.2rem 7vh 6vw; } html[data-theme="nexus"] .search-box { width:min(420px,92vw); } } /* ================================================================ INK & VERMILION（墨と朱）— Layer 3 アダプタ（lol_livecoach ダッシュボード） 生成り和紙 #F3ECDD × 墨 #2B2621 × 朱 #B3372C 一点差し。和の余白美。 タイポ: 見出し=Shippori Mincho(明朝) / UI・データ=Zen Kaku Gothic New。 骨格再設計（詳細: .kiro/specs/theme-switcher-ink/requirements.md）: ①BANパネルを右端52px縦列→廃止し、ヘッダー直下の全幅水平帯に統合 ②チームパネルの見出しを横書き上部→パネル左端フルハイトの縦書き(tategaki)ラベル帯に変更 ③ヘッダーはロゴ(朱印バッジ)を左端固定、検索以降をorder+margin-left:autoで右寄せクラスタ化 （NEXUSの中央寄せとは余白の位置が異なる） ④ボトム行(達人ビルド+敵JG / AI・敵JG+MATCHUP)の左右を入れ替え すべて html[data-theme="ink"] スコープ（他テーマ・他アプリ非影響）。 ランク帯カラー(--challenger等)は意味色なので上書きしない。 ================================================================ */ html[data-theme="ink"] { --bg: #F3ECDD; --bg2: #EAE1CC; --bg3: #E1D5BA; --panel: #F9F4E8; --surface: #F9F4E8; --surface2: #EAE1CC; --surface3: #E1D5BA; --border: #D6C7A6; --border-glow: rgba(179,55,44,.35); --gold: #B3372C; --gold2: #CC4A3A; --blue: #3D5A73; --blue-dim: rgba(61,90,115,.08); --red: #A8462F; --lose: #A8462F; --green: #5C7A52; --win: #5C7A52; --text: #2B2621; --text-bright: #1C1A17; --text-dim: #8A8578; --text2: #8A8578; --text3: #B0A894; --so-acc: #B3372C; --so-rgb: 179,55,44; } html[data-theme="ink"], [data-theme="ink"] body { font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif; } /* ── 背景: 青方眼 → 和紙の繊維目＋淡い朱/藍のにじみ ── */ html[data-theme="ink"] body::before { background-image: radial-gradient(ellipse 44% 32% at 90% -4%, rgba(179,55,44,.05), transparent 62%), radial-gradient(ellipse 40% 34% at 2% 104%, rgba(61,90,115,.045), transparent 62%), repeating-linear-gradient(115deg, rgba(43,38,33,.018) 0px, rgba(43,38,33,.018) 1px, transparent 1px, transparent 3px); background-size:100% 100%, 100% 100%, auto; } /* ── タイポ: データ系=Zen Kaku Gothic New / ロゴ・パネル見出し=Shippori Mincho ── */ html[data-theme="ink"] .hstat-label, html[data-theme="ink"] .hstat-val, html[data-theme="ink"] .ban-team-label, html[data-theme="ink"] .live-badge, html[data-theme="ink"] .not-in-game-badge, html[data-theme="ink"] .rank-badge, html[data-theme="ink"] .p-level, html[data-theme="ink"] .wr-num, html[data-theme="ink"] .bc-num, html[data-theme="ink"] .bc-wr, html[data-theme="ink"] .bc-kda, html[data-theme="ink"] .header-summoner-name, html[data-theme="ink"] .header-search-input, html[data-theme="ink"] .header-search-tag-input, html[data-theme="ink"] .search-prog-msg, html[data-theme="ink"] .refresh-game-btn { font-family:'Zen Kaku Gothic New',sans-serif; } html[data-theme="ink"] .panel-title { font-family:'Shippori Mincho',serif; font-weight:700; letter-spacing:.1em; } /* ══ 骨格再設計①: BAN水平帯統合＋canvas 2列4行化 ══ */ html[data-theme="ink"] .canvas { grid-template-columns:1fr 1fr; grid-template-rows:48px auto 1fr 0.9fr; } html[data-theme="ink"] header { grid-column:1/-1; grid-row:1; } html[data-theme="ink"] #banPanel { grid-column:1/-1; grid-row:2; flex-direction:row; align-items:center; justify-content:center; gap:18px; padding:7px 16px; background:var(--panel); border:1px solid var(--border); border-top:none; } html[data-theme="ink"] .ban-section { flex-direction:row; align-items:center; gap:8px; flex:0 0 auto; width:auto; } html[data-theme="ink"] .ban-team-label { text-align:left; line-height:1.2; margin:0; } html[data-theme="ink"] .ban-icons { flex-direction:row; gap:5px; } html[data-theme="ink"] .ban-divider { width:1px; height:22px; background:var(--gold); opacity:.4; margin:0; } html[data-theme="ink"] #blueTeamPanel { grid-column:1; grid-row:3; } html[data-theme="ink"] #redTeamPanel { grid-column:2; grid-row:3; } html[data-theme="ink"] .bottom-row { grid-column:1/-1; grid-row:4; grid-template-columns:1fr 1fr; } /* ══ 骨格再設計④: ボトム行の左右反転 ══ */ html[data-theme="ink"] .bottom-left { grid-column:2/-1; } html[data-theme="ink"] .bottom-right { grid-column:1; } /* ══ 骨格再設計③: ヘッダー — ロゴ朱印バッジ左固定＋検索以降を右寄せクラスタ ══ */ html[data-theme="ink"] header { background:var(--panel); border:1px solid var(--border); border-top:2px solid var(--gold); clip-path:none; } html[data-theme="ink"] .logo { font-family:'Shippori Mincho',serif; font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:8px; } html[data-theme="ink"] .logo::before { content:'戦'; display:flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0; background:var(--gold); color:#F9F4E8; border-radius:2px; font-size:12px; line-height:1; } html[data-theme="ink"] .header-search-wrap { order:1; margin-left:auto; } html[data-theme="ink"] .header-stats { order:2; } html[data-theme="ink"] .refresh-game-btn { order:3; } html[data-theme="ink"] .builds-link { order:4; border-radius:2px !important; } html[data-theme="ink"] #apiVersion { order:5; } html[data-theme="ink"] .hstat-val { color:var(--gold); } /* ── パネル: ベベルHUD → 落ち着いた紙面パネル＋朱の角印 ── */ html[data-theme="ink"] .panel { border-radius:2px; clip-path:none; background:var(--panel); border:1px solid var(--border); box-shadow:0 2px 10px rgba(43,38,33,.05); } html[data-theme="ink"] .panel.gold-top { border-top:2px solid var(--gold); } html[data-theme="ink"] .panel.blue-top { border-top:2px solid var(--blue); } html[data-theme="ink"] #redTeamPanel.panel.blue-top { border-top:2px solid var(--red); } /* コーナー三角ベベル → 朱の角印（正方形） */ html[data-theme="ink"] .corner-deco { border:none; width:12px; height:12px; top:6px; right:6px; background:var(--gold); border-radius:2px; opacity:.85; } html[data-theme="ink"] .panel-title::before { display:none; } /* ══ 骨格再設計②: チームパネル見出し → 縦書き(tategaki)左端エッジラベル ══ */ html[data-theme="ink"] .team-panel { padding-left:34px; } html[data-theme="ink"] .team-label { position:absolute; left:0; top:0; bottom:0; width:30px; writing-mode:vertical-rl; text-orientation:mixed; display:flex; align-items:flex-start; justify-content:center; margin:0; padding:14px 0 10px; gap:0; border-bottom:none; border-right:1px solid var(--border); background:var(--bg2); font-family:'Shippori Mincho',serif; font-weight:700; letter-spacing:.2em; } html[data-theme="ink"] .team-label.bl { color:var(--blue); } html[data-theme="ink"] .team-label.rd { color:var(--red); } /* ── チーム/選手行・アイコン ── */ html[data-theme="ink"] .player-row { border-left:2px solid transparent; background:rgba(43,38,33,.02); border-radius:2px; } html[data-theme="ink"] .player-row:hover { background:rgba(179,55,44,.05); border-color:rgba(179,55,44,.2); border-left-color:var(--gold); } html[data-theme="ink"] .player-row.me { background:rgba(179,55,44,.07); border-color:rgba(179,55,44,.25); border-left-color:var(--gold); } html[data-theme="ink"] .champ-icon, html[data-theme="ink"] .ban-icon { border-radius:2px; border:1px solid var(--border); background:var(--bg3); } html[data-theme="ink"] .ban-icon-empty { border-radius:2px; border:1px dashed var(--border); background:var(--bg3); } html[data-theme="ink"] .rank-badge { border-radius:2px; font-weight:600; } /* ── ビルドカード ── */ html[data-theme="ink"] .build-card { clip-path:none; border-radius:2px; background:var(--bg3); border-color:var(--border); } html[data-theme="ink"] .build-card:hover { border-color:var(--gold); box-shadow:0 0 12px rgba(179,55,44,.1); } html[data-theme="ink"] .item-icon { border-radius:2px; } html[data-theme="ink"] .item-icon:hover::after { background:#1C1A17; border-color:var(--border-glow); font-family:'Zen Kaku Gothic New',sans-serif; } html[data-theme="ink"] .builds-scroll::-webkit-scrollbar-thumb { background:var(--border-glow); } /* ── ヘッダー内検索・操作系 ── */ html[data-theme="ink"] .header-search-inner { background:var(--bg2); border-color:var(--border); border-radius:2px; padding-left:6px; } html[data-theme="ink"] .header-search-inner:focus-within { border-color:var(--gold); box-shadow:0 0 0 1px rgba(179,55,44,.2); } html[data-theme="ink"] .refresh-game-btn { border-radius:2px; } html[data-theme="ink"] .live-badge { background:rgba(168,70,47,.12); border-color:rgba(168,70,47,.5); border-radius:2px; } html[data-theme="ink"] .not-in-game-badge { border-radius:2px; } /* ================================================================ INK & VERMILION — LANDING（検索オーバーレイ）v2 v1（浮遊する半透明ガラス片を写真に直置き）はユーザー検収で不合格 （「ダサすぎる」「文字が見にくい」）。単一の不透明和紙パネルに作り直す: 骨格再設計: 中央寄せ縦積み → 画面左42vwを覆う不透明和紙パネル1枚に ロゴ・検索・フッターを収め、右58vwは地図をそのまま見せる非対称構図。 テキストは常にパネルという確実な下地の上にあるため可読性を最優先。 ================================================================ */ html[data-theme="ink"] .search-overlay { align-items:flex-start; justify-content:center; } html[data-theme="ink"] .so-monument { display:none; } /* 和紙パネル本体（不透明・画面左を全高で覆う。右端だけ地図へ滲むように薄くフェード） */ html[data-theme="ink"] .so-content { align-items:flex-start; text-align:left; width:min(600px,42vw); max-width:42vw; min-width:340px; height:100%; justify-content:center; padding:8vh 6vw 6vh 6vw; margin:0; background:linear-gradient(90deg, rgba(243,236,221,.98) 0%, rgba(243,236,221,.98) 82%, rgba(243,236,221,.5) 94%, rgba(243,236,221,0) 100%); box-shadow:10px 0 44px rgba(20,18,15,.16); } html[data-theme="ink"] .so-sub { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:600; letter-spacing:.4em; color:rgba(43,38,33,.6); text-align:left; } html[data-theme="ink"] .so-sub::before { content:none; } html[data-theme="ink"] .so-logo { font-family:'Shippori Mincho',serif; font-weight:700; letter-spacing:.03em; font-size:clamp(2.3rem,5vw,3.4rem); line-height:1.15; color:#241F1A; text-shadow:none; -webkit-text-stroke:0; margin:.4rem 0 1rem; } html[data-theme="ink"] .so-logo span { color:var(--gold); } html[data-theme="ink"] .so-divider { max-width:220px; } html[data-theme="ink"] .so-divider span:first-child, html[data-theme="ink"] .so-divider span:last-child { background:linear-gradient(to right, rgba(179,55,44,.5), transparent) !important; } html[data-theme="ink"] .so-divider-icon svg polygon { fill:var(--gold) !important; } html[data-theme="ink"] .search-box { align-items:flex-start; } html[data-theme="ink"] .so-field-label { text-align:left; font-family:'Shippori Mincho',serif; color:var(--text-dim); } /* 検索窓・履歴: パネル上の通常の不透明カード（ガラス演出はやめ、確実な可読性を優先） */ html[data-theme="ink"] .search-input, html[data-theme="ink"] .search-hash, html[data-theme="ink"] .search-tag-input { font-family:'Zen Kaku Gothic New',sans-serif; } html[data-theme="ink"] .so-corner { display:none; } html[data-theme="ink"] .search-input-wrap { border-radius:2px; caret-color:var(--so-acc); border:1px solid var(--border); background:var(--panel); box-shadow:0 2px 10px rgba(43,38,33,.08); } html[data-theme="ink"] .search-input-wrap:focus-within { border-color:var(--gold); box-shadow:0 0 0 1px rgba(179,55,44,.22); } html[data-theme="ink"] .search-history-item { background:var(--panel); border:1px solid var(--border); color:var(--text-bright); font-family:'Zen Kaku Gothic New',sans-serif; border-radius:2px; } html[data-theme="ink"] .search-history-item:hover { border-color:var(--gold); background:var(--bg2); color:var(--text-bright); } html[data-theme="ink"] .search-history-icon { color:var(--gold); opacity:.7; } html[data-theme="ink"] .search-history-del { color:var(--text-dim); } html[data-theme="ink"] .search-history-del:hover { color:var(--red); } html[data-theme="ink"] .fav-item { border-color:var(--gold) !important; background:rgba(179,55,44,.1) !important; } html[data-theme="ink"] .fav-star { color:var(--gold) !important; } html[data-theme="ink"] #lc-toast { background:var(--panel); border:1px solid var(--border); color:var(--text-bright); font-family:'Zen Kaku Gothic New',sans-serif; } /* 背景の LoL マップ（パネルの外＝右58vw）に和紙×朱/藍の淡いティント */ html[data-theme="ink"] .so-vignette { background: radial-gradient(ellipse 90% 80% at 68% 45%, transparent 25%, rgba(28,26,23,.5) 100%), linear-gradient(to bottom, rgba(28,26,23,.4) 0%, transparent 25%, transparent 55%, rgba(28,26,23,.78) 100%); } html[data-theme="ink"] .so-tint { background: radial-gradient(ellipse 48% 40% at 84% 8%, rgba(179,55,44,.1) 0%, transparent 62%), radial-gradient(ellipse 42% 40% at 78% 92%, rgba(61,90,115,.08) 0%, transparent 62%); } html[data-theme="ink"] .so-grid { display:none; } html[data-theme="ink"] .so-corner-hud { display:none; } /* 右下: 朱印マーク（装飾のみ・地図側） */ html[data-theme="ink"] .search-overlay::after { content:'陣'; position:fixed; right:4vw; bottom:4vh; z-index:5; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--gold); color:#F9F4E8; font-family:'Shippori Mincho',serif; font-size:19px; border-radius:2px; opacity:.88; box-shadow:0 4px 16px rgba(28,26,23,.25); pointer-events:none; } html[data-theme="ink"] .btn-back-home { font-family:'Zen Kaku Gothic New',sans-serif; border-radius:2px; background:var(--panel); border-color:var(--border); color:var(--text-dim); } html[data-theme="ink"] .btn-back-home:hover { border-color:var(--gold); color:var(--gold); } html[data-theme="ink"] .so-footer { left:0; right:auto; width:min(600px,42vw); max-width:42vw; background:rgba(243,236,221,.98); border-top:1px solid var(--border); text-align:left; padding:0.65rem 6vw; } html[data-theme="ink"] .so-footer p { font-family:'Zen Kaku Gothic New',sans-serif; color:var(--text-dim); } /* ── モバイル(≤820px): 全高パネル→中央寄せの縦積みカードに戻す ── */ @media (max-width:820px){ html[data-theme="ink"] .header-search-wrap { order:0; margin:0 0 0 14px; } html[data-theme="ink"] .header-stats, html[data-theme="ink"] .refresh-game-btn, html[data-theme="ink"] .builds-link, html[data-theme="ink"] #apiVersion { order:0; } html[data-theme="ink"] .team-panel { padding-left:12px; } html[data-theme="ink"] .team-label { position:static; width:auto; writing-mode:horizontal-tb; text-orientation:mixed; border-right:none; border-bottom:1px solid var(--border); background:transparent; padding:0 0 5px; margin-bottom:6px; justify-content:flex-start; } html[data-theme="ink"] .so-content { width:100%; max-width:none; height:auto; min-height:100%; padding:1.5rem 1.2rem 7vh; align-items:center; text-align:center; background:rgba(243,236,221,.98); box-shadow:none; } html[data-theme="ink"] .so-sub, html[data-theme="ink"] .so-logo { text-align:center; } html[data-theme="ink"] .so-footer { left:0; width:100%; max-width:none; text-align:center; padding:0.65rem 1rem; } html[data-theme="ink"] .search-box { width:min(420px,92vw); } } /* ================================================================ BLUEPRINT（青焼き製図室）— Layer 3 アダプタ（lol_livecoach ダッシュボード） プルシアンブルー #0E2946 × チョーク白線画 #E9F3FB × 改訂オレンジ #FF7847 一点差し。 タイポ: 見出し=Saira Stencil One(400のみ) / UI=Saira / データ=Azeret Mono。 骨格再設計（詳細: .kiro/specs/theme-switcher-blueprint/requirements.md）: ①BANパネルを右端52px縦列→廃止し、最下段全幅の「改訂欄」水平帯へ移設 （NEXUS=左レール / INK=ヘッダー直下帯 とは別位置） ②.canvas::before で上端に「図面メタ帯」(SHEET №/REV) を骨格グリッドに新設（5行化） ③チームパネル見出しを上部→パネル下端の「FIG.n 図版キャプション」へ反転 ④ボトム行: 対称1fr/1fr+52pxスペーサー → 非対称1.35fr/1fr の2列化 すべて html[data-theme="blueprint"] スコープ（他テーマ・他アプリ非影響）。 ランク帯カラー(--challenger等)は意味色なので上書きしない。 ================================================================ */ html[data-theme="blueprint"] { --bg: #0E2946; --bg2: #0A2038; --bg3: #143659; --panel: #112F51; --surface: #112F51; --surface2: #143659; --surface3: #17406A; --border: #29537E; --border-glow: rgba(159,195,226,.5); --gold: #E9F3FB; --gold2: #FFFFFF; --blue: #5FB0E8; --blue-dim: rgba(95,176,232,.08); --red: #F07D66; --lose: #F07D66; --green: #85D6AD; --win: #85D6AD; --text: #C9DCEC; --text-bright: #F2F8FD; --text-dim: #7E9DBA; --text2: #7E9DBA; --text3: #4E7196; --so-acc: #E9F3FB; --so-rgb: 233,243,251; --bp-orange: #FF7847; --bp-line: #9FC3E2; } html[data-theme="blueprint"], [data-theme="blueprint"] body { font-family:'Saira','M PLUS 1 Code','Noto Sans JP',sans-serif; } /* ── 背景: 青方眼 → チョーク白方眼（12px微細+96px主線）── */ html[data-theme="blueprint"] body::before { background-image: linear-gradient(rgba(233,243,251,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(233,243,251,.05) 1px, transparent 1px), linear-gradient(rgba(233,243,251,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(233,243,251,.02) 1px, transparent 1px); background-size:96px 96px, 96px 96px, 12px 12px, 12px 12px; } /* ── タイポ: データ=Azeret Mono / 見出し・ロゴ=Saira Stencil One ── */ html[data-theme="blueprint"] .hstat-val, html[data-theme="blueprint"] #apiVersion, html[data-theme="blueprint"] .p-level, html[data-theme="blueprint"] .wr-num, html[data-theme="blueprint"] .bc-num, html[data-theme="blueprint"] .bc-wr, html[data-theme="blueprint"] .bc-kda, html[data-theme="blueprint"] .rank-badge, html[data-theme="blueprint"] .search-prog-msg { font-family:'Azeret Mono',monospace; } html[data-theme="blueprint"] .hstat-label, html[data-theme="blueprint"] .ban-team-label, html[data-theme="blueprint"] .live-badge, html[data-theme="blueprint"] .not-in-game-badge, html[data-theme="blueprint"] .header-summoner-name, html[data-theme="blueprint"] .header-search-input, html[data-theme="blueprint"] .header-search-tag-input, html[data-theme="blueprint"] .refresh-game-btn { font-family:'Saira','M PLUS 1 Code',sans-serif; } html[data-theme="blueprint"] .panel-title { font-family:'Saira',sans-serif; font-weight:600; letter-spacing:.2em; color:var(--bp-line); border-bottom:1px solid rgba(159,195,226,.25); padding-bottom:6px; } html[data-theme="blueprint"] .panel-title::before { display:none; } /* ══ 骨格再設計②: 上端の図面メタ帯（グリッド5行化・::beforeが1行目のグリッドアイテム）══ */ html[data-theme="blueprint"] .canvas { grid-template-columns:1fr 1fr; grid-template-rows:22px 48px 1fr 0.9fr 36px; } html[data-theme="blueprint"] .canvas::before { content:'SHEET № LC-01 · LIVE GAME ANALYSIS · PROJECTION: SUMMONERS RIFT · SCALE 1:1 · REV 2026.07'; grid-column:1/-1; grid-row:1; display:flex; align-items:center; padding:0 12px; font-family:'Azeret Mono',monospace; font-size:9px; letter-spacing:.18em; color:rgba(233,243,251,.55); text-transform:uppercase; border:1px solid rgba(233,243,251,.28); background-color:rgba(10,32,56,.55); overflow:hidden; white-space:nowrap; } html[data-theme="blueprint"] header { grid-column:1/-1; grid-row:2; } html[data-theme="blueprint"] #blueTeamPanel { grid-column:1; grid-row:3; } html[data-theme="blueprint"] #redTeamPanel { grid-column:2; grid-row:3; } html[data-theme="blueprint"] .bottom-row { grid-column:1/-1; grid-row:4; } /* ══ 骨格再設計①: BANパネル → 最下段全幅の「改訂欄」帯 ══ */ html[data-theme="blueprint"] #banPanel { grid-column:1/-1; grid-row:5; flex-direction:row; align-items:center; justify-content:center; gap:16px; padding:4px 14px; background:var(--panel); border:1px solid var(--border); } html[data-theme="blueprint"] #banPanel::before { content:'BAN REGISTER'; font-family:'Azeret Mono',monospace; font-size:8px; letter-spacing:.24em; color:var(--text-dim); border-right:1px solid rgba(233,243,251,.25); padding-right:14px; text-transform:uppercase; flex-shrink:0; } html[data-theme="blueprint"] .ban-section { flex-direction:row; align-items:center; gap:8px; flex:0 0 auto; width:auto; } html[data-theme="blueprint"] .ban-team-label { text-align:left; line-height:1.15; margin:0; } html[data-theme="blueprint"] .ban-icons { flex-direction:row; gap:4px; } html[data-theme="blueprint"] .ban-divider { width:1px; height:20px; background:rgba(233,243,251,.35); margin:0; } /* ══ 骨格再設計④: ボトム行 対称+52px → 非対称1.35fr/1fr ══ */ html[data-theme="blueprint"] .bottom-row { grid-template-columns:1.35fr 1fr; } html[data-theme="blueprint"] .bottom-left { grid-column:1; } html[data-theme="blueprint"] .bottom-right { grid-column:2/-1; } /* ── ヘッダー: 図枠タイトル行（ロゴに図番バッジ・メタは縦罫セル）── */ html[data-theme="blueprint"] header { background:var(--panel); border:1px solid var(--border); border-top:1px solid rgba(233,243,251,.5); clip-path:none; } html[data-theme="blueprint"] .logo { font-family:'Saira Stencil One',sans-serif; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--text-bright); display:flex; align-items:center; gap:9px; } html[data-theme="blueprint"] .logo::before { content:'LC'; display:flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0; border:1px solid rgba(233,243,251,.55); color:var(--gold); font-family:'Azeret Mono',monospace; font-size:10px; letter-spacing:.05em; } html[data-theme="blueprint"] .logo span { color:var(--blue); } html[data-theme="blueprint"] .header-stats { gap:0; } html[data-theme="blueprint"] .header-stats > div { border-left:1px solid rgba(233,243,251,.18); padding:1px 16px; } html[data-theme="blueprint"] .header-stats > div:last-child { border-right:1px solid rgba(233,243,251,.18); } html[data-theme="blueprint"] .hstat-label { letter-spacing:.2em; } html[data-theme="blueprint"] .hstat-val { color:var(--gold); } /* ── パネル: ベベルHUD → 白線画の図面ボックス＋隅レジストレーションマーク ── */ html[data-theme="blueprint"] .panel { border-radius:0; clip-path:none; background:var(--panel); border:1px solid var(--border); box-shadow:inset 0 0 0 1px rgba(10,32,56,.6); } html[data-theme="blueprint"] .panel.gold-top { border-top:1px solid rgba(233,243,251,.55); } html[data-theme="blueprint"] .panel.blue-top { border-top:2px solid var(--blue); } html[data-theme="blueprint"] #redTeamPanel.panel.blue-top { border-top:2px solid var(--red); } /* コーナー三角ベベル → 「+」十字レジストレーションマーク */ html[data-theme="blueprint"] .corner-deco { border:none; width:11px; height:11px; top:5px; right:5px; opacity:.7; background: linear-gradient(rgba(159,195,226,.9), rgba(159,195,226,.9)) no-repeat center / 1px 100%, linear-gradient(rgba(159,195,226,.9), rgba(159,195,226,.9)) no-repeat center / 100% 1px; } /* ══ 骨格再設計③: チーム見出し → パネル下端の FIG.n 図版キャプション ══ */ html[data-theme="blueprint"] .team-panel .players { flex:1 1 auto; min-height:0; } html[data-theme="blueprint"] .team-label { order:99; display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0 0; padding:7px 0 0; border-bottom:none; border-top:1px solid rgba(159,195,226,.3); font-family:'Saira',sans-serif; font-weight:600; letter-spacing:.24em; background:var(--panel); position:relative; z-index:2; } html[data-theme="blueprint"] .team-label::before { font-family:'Azeret Mono',monospace; font-weight:400; font-size:9px; color:var(--text-dim); letter-spacing:.12em; } html[data-theme="blueprint"] .team-label.bl::before { content:'FIG.01 /'; } html[data-theme="blueprint"] .team-label.rd::before { content:'FIG.02 /'; } html[data-theme="blueprint"] .team-label.bl { color:var(--blue); } html[data-theme="blueprint"] .team-label.rd { color:var(--red); } /* ── チーム/選手行・アイコン ── */ html[data-theme="blueprint"] .player-row { border-left:1px solid transparent; background:rgba(233,243,251,.025); border-radius:0; } html[data-theme="blueprint"] .player-row:hover { background:rgba(233,243,251,.06); border-color:rgba(233,243,251,.2); border-left-color:var(--bp-orange); } html[data-theme="blueprint"] .player-row.me { background:rgba(255,120,71,.08); border-color:rgba(255,120,71,.3); border-left-color:var(--bp-orange); } html[data-theme="blueprint"] .champ-icon, html[data-theme="blueprint"] .ban-icon { border-radius:0; border:1px solid rgba(159,195,226,.4); background:var(--bg3); } html[data-theme="blueprint"] .ban-icon-empty { border-radius:0; border:1px dashed rgba(159,195,226,.3); background:repeating-linear-gradient(45deg, transparent 0 5px, rgba(233,243,251,.05) 5px 6px); } html[data-theme="blueprint"] .rank-badge { border-radius:0; } /* ── ビルドカード ── */ html[data-theme="blueprint"] .build-card { clip-path:none; border-radius:0; background:var(--bg3); border-color:var(--border); } html[data-theme="blueprint"] .build-card:hover { border-color:rgba(233,243,251,.55); box-shadow:0 0 0 1px rgba(233,243,251,.2); } html[data-theme="blueprint"] .item-icon { border-radius:0; } html[data-theme="blueprint"] .item-icon:hover::after { background:#0A2038; border-color:rgba(233,243,251,.4); font-family:'Saira',sans-serif; } html[data-theme="blueprint"] .builds-scroll::-webkit-scrollbar-thumb { background:rgba(159,195,226,.4); } /* ── ヘッダー内検索・操作系 ── */ html[data-theme="blueprint"] .header-search-inner { background:var(--bg2); border-color:var(--border); border-radius:0; padding-left:6px; } html[data-theme="blueprint"] .header-search-inner:focus-within { border-color:var(--bp-orange); box-shadow:0 0 0 1px rgba(255,120,71,.3); } html[data-theme="blueprint"] .refresh-game-btn { border-radius:0; } html[data-theme="blueprint"] .builds-link { border-radius:0 !important; } html[data-theme="blueprint"] .live-badge { background:rgba(240,125,102,.12); border-color:rgba(240,125,102,.5); border-radius:0; } html[data-theme="blueprint"] .not-in-game-badge { border-radius:0; } /* ================================================================ BLUEPRINT — LANDING（検索オーバーレイ） 骨格再設計: 中央寄せ縦積み＋回転モニュメント → モニュメント/四隅HUD/ パーティクル全廃。画面下段中央に固定した不透明「表題欄（タイトルブロック）」 1枚にロゴ・検索・履歴を収め、上部はマップを方眼オーバーレイ越しに見せる。 検索＝操作面は画面中央帯を維持（恒久ルール）。写真の上に文字を直置きしない。 マップのティントは紗一枚 rgba(14,41,70,.26)（背景をはっきり見せる恒久ルール）。 ================================================================ */ html[data-theme="blueprint"] .search-overlay { align-items:center; justify-content:flex-end; } html[data-theme="blueprint"] .so-monument { display:none; } html[data-theme="blueprint"] .so-particles { display:none; } html[data-theme="blueprint"] .so-corner-hud { display:none; } html[data-theme="blueprint"] .so-corner { display:none; } /* 表題欄パネル本体（不透明・下段中央・白線二重フレーム） */ html[data-theme="blueprint"] .so-content { align-items:stretch; text-align:left; width:min(720px,94vw); margin:0 0 9vh; padding:24px 32px 22px; background:rgba(10,32,56,.97); border:1.5px solid rgba(233,243,251,.55); box-shadow:0 0 0 5px rgba(10,32,56,.6), 0 0 0 6px rgba(233,243,251,.22), 0 18px 50px rgba(4,14,26,.5); } html[data-theme="blueprint"] .so-sub { font-family:'Azeret Mono',monospace; font-weight:400; letter-spacing:.28em; color:rgba(233,243,251,.6); text-align:left; border-bottom:1px solid rgba(233,243,251,.22); padding-bottom:9px; } html[data-theme="blueprint"] .so-sub::before { content:'DWG № LC-2026 · '; color:var(--bp-orange); } html[data-theme="blueprint"] .so-logo { font-family:'Saira Stencil One',sans-serif; font-weight:400; letter-spacing:.08em; text-transform:uppercase; font-size:clamp(2.1rem,4.6vw,3.1rem); line-height:1.1; color:#F2F8FD; text-shadow:none; -webkit-text-stroke:0; margin:.6rem 0 .9rem; } html[data-theme="blueprint"] .so-logo span { color:var(--blue); text-shadow:none; -webkit-text-stroke:0; } html[data-theme="blueprint"] .so-divider { display:none; } html[data-theme="blueprint"] .search-box { align-items:stretch; width:100%; } html[data-theme="blueprint"] .so-field-label { text-align:left; font-family:'Azeret Mono',monospace; letter-spacing:.24em; color:var(--text-dim); } html[data-theme="blueprint"] .search-input, html[data-theme="blueprint"] .search-hash, html[data-theme="blueprint"] .search-tag-input { font-family:'Saira','M PLUS 1 Code',sans-serif; } html[data-theme="blueprint"] .search-input-wrap { border-radius:0; caret-color:var(--bp-orange); border:1px solid rgba(233,243,251,.45); background:var(--bg2); box-shadow:none; } html[data-theme="blueprint"] .search-input-wrap:focus-within { border-color:var(--bp-orange); box-shadow:0 0 0 1px rgba(255,120,71,.3); } /* 検索履歴 = INDEX OF SHEETS（丸囲み連番バルーン付き） */ html[data-theme="blueprint"] #searchHistory { counter-reset:bp-idx; } html[data-theme="blueprint"] .search-history-item { counter-increment:bp-idx; background:var(--panel); border:1px solid var(--border); color:var(--text-bright); font-family:'Saira','M PLUS 1 Code',sans-serif; border-radius:0; } html[data-theme="blueprint"] .search-history-item::before { content:counter(bp-idx, decimal-leading-zero); font-family:'Azeret Mono',monospace; font-size:8.5px; color:var(--text-dim); border:1px solid rgba(233,243,251,.35); border-radius:50%; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; margin-right:7px; flex-shrink:0; } html[data-theme="blueprint"] .search-history-item:hover { border-color:rgba(233,243,251,.6); background:var(--bg3); color:var(--text-bright); } html[data-theme="blueprint"] .search-history-icon { color:var(--gold); opacity:.7; } html[data-theme="blueprint"] .search-history-del { color:var(--text-dim); } html[data-theme="blueprint"] .search-history-del:hover { color:var(--bp-orange); } html[data-theme="blueprint"] .fav-item { border-color:rgba(255,120,71,.7) !important; background:rgba(255,120,71,.12) !important; } html[data-theme="blueprint"] .fav-star { color:var(--bp-orange) !important; } html[data-theme="blueprint"] #lc-toast { background:var(--panel); border:1px solid rgba(233,243,251,.4); color:var(--text-bright); font-family:'Saira','M PLUS 1 Code',sans-serif; border-radius:0; } /* 背景マップ: 紗一枚の青ティント＋チョーク方眼オーバーレイ（測量図の見立て） */ html[data-theme="blueprint"] .so-vignette { background:linear-gradient(to bottom, rgba(4,14,26,.35) 0%, transparent 22%, transparent 60%, rgba(4,14,26,.55) 100%); } html[data-theme="blueprint"] .so-tint { background:rgba(14,41,70,.26); } html[data-theme="blueprint"] .so-grid { display:block; opacity:1; animation:none; background-image: linear-gradient(rgba(233,243,251,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(233,243,251,.07) 1px, transparent 1px), linear-gradient(rgba(233,243,251,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(233,243,251,.03) 1px, transparent 1px); background-size:96px 96px, 96px 96px, 12px 12px, 12px 12px; } /* 右上: 改訂オレンジの検査スタンプ（装飾のみ） */ html[data-theme="blueprint"] .search-overlay::after { content:'CHECKED · APPROVED FOR PLAY'; position:fixed; right:4vw; top:6vh; z-index:5; padding:7px 13px; border:2px solid rgba(255,120,71,.8); color:#FF9C73; font-family:'Azeret Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; transform:rotate(4deg); opacity:.8; pointer-events:none; } html[data-theme="blueprint"] .btn-back-home { font-family:'Saira','M PLUS 1 Code',sans-serif; border-radius:0; background:rgba(10,32,56,.85); border:1px solid rgba(233,243,251,.4); color:var(--text); } html[data-theme="blueprint"] .btn-back-home:hover { border-color:var(--bp-orange); color:var(--bp-orange); } html[data-theme="blueprint"] .so-footer { background:rgba(10,32,56,.92); border-top:1px solid rgba(233,243,251,.3); } html[data-theme="blueprint"] .so-footer p { font-family:'Azeret Mono',monospace; color:var(--text-dim); letter-spacing:.1em; } /* ── モバイル(≤820px): flex縦積みに戻るため帯・非対称を解除 ── */ @media (max-width:820px){ html[data-theme="blueprint"] .canvas::before { display:none; } html[data-theme="blueprint"] #banPanel::before { display:none; } html[data-theme="blueprint"] .team-label { justify-content:flex-start; } html[data-theme="blueprint"] .so-content { width:100%; margin:14vh 0 0; padding:20px 16px 18px; box-shadow:0 0 0 4px rgba(10,32,56,.6), 0 0 0 5px rgba(233,243,251,.2); } html[data-theme="blueprint"] .search-overlay { align-items:center; justify-content:flex-start; } html[data-theme="blueprint"] .search-overlay::after { display:none; } html[data-theme="blueprint"] .search-box { width:100%; } } /* ================================================================ DARKROOM（暗室・銀塩写真ラボ）— Layer 3 アダプタ（lol_livecoach ダッシュボード） マット黒 #141414 × 銀塩シルバー #D9D9D9 × 印画紙白 #EDEBE6 × セーフライト赤 #E23D2E。 タイポ: 見出し=Bebas Neue(400のみ) / UI=Barlow / データ=Courier Prime。 骨格再設計（詳細: .kiro/specs/theme-switcher-darkroom/requirements.md）: ①BANパネルを右端52px縦列→「チームパネルの間」に吊るした中央フィルムストリップ縦列へ （NEXUS=左レール / INK=ヘッダー直下帯 / BLUEPRINT=最下段帯 とは別位置＝中央分離帯） ②.bottom-row::before で「現像プロセスレール」(DEV→STOP→FIX→WASH) をグリッド行として新設 ③ヘッダー統計を「乾燥レールに吊るした印画紙チップ」（白地黒文字のポジ反転＋クリップ）へ ④プレイヤー行をコンタクトシート化（コマ番号 counter 採番＋白ボーダー正方アイコン） すべて html[data-theme="darkroom"] スコープ（他テーマ・他アプリ非影響）。 ランク帯カラー(--challenger等)は意味色なので上書きしない。 ================================================================ */ html[data-theme="darkroom"] { --bg: #141414; --bg2: #0E0E0E; --bg3: #1E1E1E; --panel: #191919; --surface: #191919; --surface2: #1E1E1E; --surface3: #242424; --border: #383838; --border-glow: rgba(138,138,138,.5); --gold: #D9D9D9; --gold2: #EDEBE6; --blue: #7FB4E8; --blue-dim: rgba(127,180,232,.08); --red: #E8705C; --lose: #E8705C; --green: #8FCF9F; --win: #8FCF9F; --text: #C7C7C7; --text-bright: #F2F2F2; --text-dim: #8A8A8A; --text2: #8A8A8A; --text3: #5C5C5C; --so-acc: #D9D9D9; --so-rgb: 217,217,217; --dr-red: #E23D2E; --dr-paper: #EDEBE6; } html[data-theme="darkroom"], [data-theme="darkroom"] body { font-family:'Barlow','IBM Plex Sans JP','Noto Sans JP',sans-serif; } /* ── 背景: 青方眼 → 無地マット黒（方眼なし・粒状はLayer2デコが担当）── */ html[data-theme="darkroom"] body::before { background-image:none; } /* ── タイポ: データ=Courier Prime / 見出し・ロゴ=Bebas Neue ── */ html[data-theme="darkroom"] .hstat-val, html[data-theme="darkroom"] #apiVersion, html[data-theme="darkroom"] .p-level, html[data-theme="darkroom"] .wr-num, html[data-theme="darkroom"] .bc-num, html[data-theme="darkroom"] .bc-wr, html[data-theme="darkroom"] .bc-kda, html[data-theme="darkroom"] .rank-badge, html[data-theme="darkroom"] .search-prog-msg { font-family:'Courier Prime',monospace; } html[data-theme="darkroom"] .hstat-label, html[data-theme="darkroom"] .ban-team-label, html[data-theme="darkroom"] .live-badge, html[data-theme="darkroom"] .not-in-game-badge, html[data-theme="darkroom"] .header-summoner-name, html[data-theme="darkroom"] .header-search-input, html[data-theme="darkroom"] .header-search-tag-input, html[data-theme="darkroom"] .refresh-game-btn { font-family:'Barlow','IBM Plex Sans JP',sans-serif; } html[data-theme="darkroom"] .panel-title { font-family:'Courier Prime',monospace; font-weight:400; letter-spacing:.22em; color:var(--text-dim); text-transform:uppercase; } html[data-theme="darkroom"] .panel-title::before { content:'►'; width:auto; height:auto; background:none; color:var(--dr-red); font-size:8px; line-height:1; } /* ══ 骨格再設計①: BAN右端52px縦列 → チームパネル間の中央吊りフィルム縦列 ══ */ html[data-theme="darkroom"] .canvas { grid-template-columns:1fr 84px 1fr; grid-template-rows:48px 1fr 0.9fr; } html[data-theme="darkroom"] header { grid-column:1/-1; grid-row:1; } html[data-theme="darkroom"] #blueTeamPanel{ grid-column:1; grid-row:2; } html[data-theme="darkroom"] #banPanel { grid-column:2; grid-row:2; } html[data-theme="darkroom"] #redTeamPanel { grid-column:3; grid-row:2; } html[data-theme="darkroom"] .bottom-row { grid-column:1/-1; grid-row:3; } html[data-theme="darkroom"] #banPanel { background-color:#0C0C0C; border:1px solid #2E2E2E; border-radius:3px; background-image: repeating-linear-gradient(180deg, transparent 0 9px, rgba(237,235,230,.16) 9px 15px, transparent 15px 23px), repeating-linear-gradient(180deg, transparent 0 9px, rgba(237,235,230,.16) 9px 15px, transparent 15px 23px); background-size:5px 23px, 5px 23px; background-position:5px 0, calc(100% - 5px) 0; background-repeat:repeat-y, repeat-y; padding:10px 4px; } html[data-theme="darkroom"] #banPanel::before { content:'OUT-TAKES'; font-family:'Courier Prime',monospace; font-size:7px; letter-spacing:.18em; color:var(--text-dim); text-transform:uppercase; flex-shrink:0; margin-bottom:6px; } /* BAN=ボツカット。正方コマ＋赤グリースペンシルの×印（画像の色は保持） */ html[data-theme="darkroom"] .ban-icon { border-radius:2px; border:1px solid rgba(237,235,230,.4); background:var(--bg3); } html[data-theme="darkroom"] .ban-icon::after { content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(45deg, transparent calc(50% - 1px), rgba(226,61,46,.85) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), rgba(226,61,46,.85) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); } html[data-theme="darkroom"] .ban-icon-empty { border-radius:2px; border:1px dashed rgba(138,138,138,.4); background:rgba(237,235,230,.03); } html[data-theme="darkroom"] .ban-divider { width:60%; height:1px; background:rgba(237,235,230,.3); margin:7px 0; } /* ══ 骨格再設計②: ボトム行に「現像プロセスレール」を新設（::beforeがグリッド行）══ */ html[data-theme="darkroom"] .bottom-row { grid-template-columns:1fr 1fr; grid-template-rows:17px 1fr; row-gap:6px; } html[data-theme="darkroom"] .bottom-row::before { content:'PROCESS: DEV 6:30 → STOP 0:30 → FIX 5:00 → WASH 10:00 · PAPER: GELATIN SILVER · GRADE 2'; grid-column:1/-1; grid-row:1; display:flex; align-items:center; padding:0 12px; font-family:'Courier Prime',monospace; font-size:9px; letter-spacing:.14em; color:var(--text-dim); text-transform:uppercase; background-color:#0C0C0C; border:1px solid #2E2E2E; border-radius:2px; overflow:hidden; white-space:nowrap; } html[data-theme="darkroom"] .bottom-left { grid-column:1; grid-row:2; } html[data-theme="darkroom"] .bottom-right { grid-column:2/-1; grid-row:2; } /* ══ 骨格再設計③: ヘッダー統計 → 乾燥レールに吊るした印画紙チップ（ポジ反転）══ */ html[data-theme="darkroom"] header { background:var(--panel); border:1px solid var(--border); border-top:1px solid rgba(217,217,217,.5); border-radius:3px; clip-path:none; } html[data-theme="darkroom"] .logo { font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--text-bright); display:flex; align-items:center; gap:9px; } html[data-theme="darkroom"] .logo::before { content:''; width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--dr-red); box-shadow:0 0 8px rgba(226,61,46,.55); } html[data-theme="darkroom"] .logo span { color:var(--red); } html[data-theme="darkroom"] .header-stats { gap:12px; align-items:center; } html[data-theme="darkroom"] .header-stats > div { position:relative; background:var(--dr-paper); border-radius:2px; padding:2px 10px 3px; margin-top:5px; box-shadow:0 3px 8px rgba(0,0,0,.5); } html[data-theme="darkroom"] .header-stats > div::before { content:''; position:absolute; top:-5px; left:50%; margin-left:-4px; width:8px; height:5px; background:#8A8A8A; clip-path:polygon(0 100%, 50% 0, 100% 100%); } html[data-theme="darkroom"] .hstat-label { color:#6B6B6B; letter-spacing:.16em; } html[data-theme="darkroom"] .hstat-val { color:#161616; } html[data-theme="darkroom"] .header-stats > div .hstat-val span { color:#161616; } /* ── パネル: ベベルHUD → マット黒のネガキャリア（僅かな角丸・銀線）── */ html[data-theme="darkroom"] .panel { border-radius:3px; clip-path:none; background:var(--panel); border:1px solid var(--border); box-shadow:0 14px 40px -18px rgba(0,0,0,.9); } html[data-theme="darkroom"] .panel.gold-top { border-top:1px solid rgba(217,217,217,.55); } html[data-theme="darkroom"] .panel.blue-top { border-top:2px solid var(--blue); } html[data-theme="darkroom"] #redTeamPanel.panel.blue-top { border-top:2px solid var(--red); } /* コーナー三角ベベル → イーゼルブレードのL字 */ html[data-theme="darkroom"] .corner-deco { border:none; width:12px; height:12px; top:4px; right:4px; opacity:.8; background: linear-gradient(rgba(217,217,217,.75), rgba(217,217,217,.75)) no-repeat top right / 100% 2px, linear-gradient(rgba(217,217,217,.75), rgba(217,217,217,.75)) no-repeat top right / 2px 100%; } /* ── チーム見出し: フィルム縁の刻印ラベル（スプロケット付きミニ帯）── */ html[data-theme="darkroom"] .team-label { display:flex; align-items:center; gap:8px; padding:5px 10px; margin-bottom:7px; background-color:#0C0C0C; border:1px solid #2E2E2E; border-radius:2px; font-family:'Courier Prime',monospace; font-weight:700; letter-spacing:.2em; } html[data-theme="darkroom"] .team-label.bl { color:var(--blue); border-bottom:1px solid #2E2E2E; } html[data-theme="darkroom"] .team-label.rd { color:var(--red); border-bottom:1px solid #2E2E2E; } html[data-theme="darkroom"] .team-label::before { font-family:'Courier Prime',monospace; font-weight:400; font-size:9px; color:var(--text-dim); letter-spacing:.1em; } html[data-theme="darkroom"] .team-label.bl::before { content:'ROLL A ►'; } html[data-theme="darkroom"] .team-label.rd::before { content:'ROLL B ►'; } /* ══ 骨格再設計④: プレイヤー行のコンタクトシート化（コマ番号採番＋白縁アイコン）══ */ html[data-theme="darkroom"] .players { counter-reset:dr-frame; } html[data-theme="darkroom"] .player-row { counter-increment:dr-frame; background:#101010; border:1px solid #2A2A2A; border-radius:2px; } html[data-theme="darkroom"] .player-row:hover { background:#1A1A1A; border-color:rgba(217,217,217,.45); } html[data-theme="darkroom"] .player-row.me { background:rgba(226,61,46,.07); border-color:rgba(226,61,46,.5); box-shadow:inset 0 0 0 1px rgba(226,61,46,.25); } html[data-theme="darkroom"] .champ-icon { border-radius:2px; border:2px solid var(--dr-paper); background:var(--bg3); } html[data-theme="darkroom"] .rank-badge { border-radius:2px; } @media (min-width:821px){ html[data-theme="darkroom"] .player-row::before { content:counter(dr-frame, decimal-leading-zero) 'A'; font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:.06em; color:#6B6B6B; flex-shrink:0; width:16px; text-align:center; } } /* ── ビルドカード ── */ html[data-theme="darkroom"] .build-card { clip-path:none; border-radius:3px; background:var(--bg3); border-color:var(--border); } html[data-theme="darkroom"] .build-card:hover { border-color:rgba(217,217,217,.55); box-shadow:0 0 0 1px rgba(217,217,217,.2); } html[data-theme="darkroom"] .item-icon { border-radius:2px; } html[data-theme="darkroom"] .item-icon:hover::after { background:#0E0E0E; border-color:rgba(217,217,217,.4); font-family:'Barlow',sans-serif; } html[data-theme="darkroom"] .builds-scroll::-webkit-scrollbar-thumb { background:rgba(138,138,138,.5); } /* ── ヘッダー内検索・操作系 ── */ html[data-theme="darkroom"] .header-search-inner { background:var(--bg2); border-color:var(--border); border-radius:3px; padding-left:6px; } html[data-theme="darkroom"] .header-search-inner:focus-within { border-color:var(--dr-red); box-shadow:0 0 0 1px rgba(226,61,46,.35); } html[data-theme="darkroom"] .refresh-game-btn { border-radius:3px; } html[data-theme="darkroom"] .builds-link { border-radius:3px !important; } html[data-theme="darkroom"] .live-badge { background:rgba(226,61,46,.12); border-color:rgba(226,61,46,.55); border-radius:2px; color:#FF6A57; } html[data-theme="darkroom"] .not-in-game-badge { border-radius:2px; } /* ================================================================ DARKROOM — LANDING（検索オーバーレイ） 骨格再設計: 中央寄せ縦積み＋回転モニュメント → モニュメント/四隅HUD/ パーティクル全廃。画面中央に「1本の縦フィルムストリップ」（不透明・ 左右スプロケット穴レール）を立て、各コマ＝ロゴ/検索/履歴として縦に収める。 検索＝操作面は画面中央を維持（恒久ルール）。写真の上に文字を直置きしない。 マップのティントはセーフライトの紗一枚 rgba(30,10,8,.24)（背景をはっきり見せる恒久ルール）。 ================================================================ */ html[data-theme="darkroom"] .search-overlay { align-items:center; justify-content:center; } html[data-theme="darkroom"] .so-monument { display:none; } html[data-theme="darkroom"] .so-particles { display:none; } html[data-theme="darkroom"] .so-corner-hud { display:none; } html[data-theme="darkroom"] .so-corner { display:none; } /* 縦フィルムストリップ本体（不透明・左右にスプロケットレール） */ html[data-theme="darkroom"] .so-content { align-items:stretch; text-align:left; width:min(540px,94vw); padding:26px 48px 24px; background:#101010; border:1px solid rgba(217,217,217,.4); border-radius:2px; box-shadow:0 26px 70px rgba(0,0,0,.72); } html[data-theme="darkroom"] .so-content::before, html[data-theme="darkroom"] .so-content::after { content:''; position:absolute; top:0; bottom:0; width:22px; background-color:#0A0A0A; background-image:repeating-linear-gradient(180deg, transparent 0 9px, rgba(237,235,230,.24) 9px 16px, transparent 16px 26px); background-size:9px 26px; background-position:center 0; background-repeat:repeat-y; pointer-events:none; } html[data-theme="darkroom"] .so-content::before { left:0; border-right:1px solid rgba(217,217,217,.22); } html[data-theme="darkroom"] .so-content::after { right:0; border-left:1px solid rgba(217,217,217,.22); } html[data-theme="darkroom"] .so-sub { font-family:'Courier Prime',monospace; font-weight:400; letter-spacing:.26em; color:rgba(217,217,217,.62); text-align:left; border-bottom:1px solid rgba(217,217,217,.2); padding-bottom:9px; } html[data-theme="darkroom"] .so-sub::before { content:'ROLL 06 · '; color:var(--dr-red); } html[data-theme="darkroom"] .so-logo { font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.1em; text-transform:uppercase; font-size:clamp(2.4rem,5vw,3.4rem); line-height:1.05; color:#F2F2F2; text-shadow:none; -webkit-text-stroke:0; margin:.55rem 0 .8rem; } html[data-theme="darkroom"] .so-logo span { color:#FF6A57; text-shadow:none; -webkit-text-stroke:0; } /* コマ間の区切り＝フレームライン */ html[data-theme="darkroom"] .so-divider { max-width:none; margin-bottom:1rem; } html[data-theme="darkroom"] .so-divider span:first-child { background:rgba(217,217,217,.28); } html[data-theme="darkroom"] .so-divider span:last-child { background:rgba(217,217,217,.28); } html[data-theme="darkroom"] .so-divider-icon { opacity:.5; color:var(--text-dim); } html[data-theme="darkroom"] .search-box { align-items:stretch; width:100%; } html[data-theme="darkroom"] .so-field-label { text-align:left; font-family:'Courier Prime',monospace; letter-spacing:.22em; color:var(--text-dim); } html[data-theme="darkroom"] .search-input, html[data-theme="darkroom"] .search-hash, html[data-theme="darkroom"] .search-tag-input { font-family:'Barlow','IBM Plex Sans JP',sans-serif; } html[data-theme="darkroom"] .search-input-wrap { border-radius:2px; caret-color:var(--dr-red); border:1px solid rgba(217,217,217,.35); background:#0C0C0C; box-shadow:none; } html[data-theme="darkroom"] .search-input-wrap:focus-within { border-color:var(--dr-red); box-shadow:0 0 0 1px rgba(226,61,46,.35); } /* 検索履歴 = コンタクトシート（コマ番号＋hoverでポジ反転＝白印画紙） */ html[data-theme="darkroom"] #searchHistory { counter-reset:dr-idx; } html[data-theme="darkroom"] .search-history-item { counter-increment:dr-idx; background:#161616; border:1px solid #333; color:var(--text-bright); font-family:'Barlow','IBM Plex Sans JP',sans-serif; border-radius:2px; } html[data-theme="darkroom"] .search-history-item::before { content:'FR.' counter(dr-idx, decimal-leading-zero); font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:.05em; color:var(--text-dim); margin-right:7px; flex-shrink:0; } html[data-theme="darkroom"] .search-history-item:hover { background:var(--dr-paper); border-color:var(--dr-paper); color:#161616; } html[data-theme="darkroom"] .search-history-item:hover::before { color:#6B6B6B; } html[data-theme="darkroom"] .search-history-icon { color:var(--text-dim); opacity:.8; } html[data-theme="darkroom"] .search-history-item:hover .search-history-icon { color:#6B6B6B; } html[data-theme="darkroom"] .search-history-del { color:var(--text-dim); } html[data-theme="darkroom"] .search-history-item:hover .search-history-del { color:#6B6B6B; } html[data-theme="darkroom"] .search-history-del:hover { color:var(--dr-red); } html[data-theme="darkroom"] .fav-item { border-color:rgba(226,61,46,.7) !important; background:rgba(226,61,46,.1) !important; } html[data-theme="darkroom"] .fav-star { color:#FF6A57 !important; } html[data-theme="darkroom"] #lc-toast { background:#191919; border:1px solid rgba(217,217,217,.4); color:var(--text-bright); font-family:'Barlow','IBM Plex Sans JP',sans-serif; border-radius:3px; } /* 背景マップ: セーフライトの紗一枚（赤黒の薄ティント）・方眼/パーティクルなし */ html[data-theme="darkroom"] .so-vignette { background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 40%, rgba(6,3,2,.55) 100%), linear-gradient(to bottom, rgba(6,3,2,.3) 0%, transparent 24%, transparent 62%, rgba(6,3,2,.6) 100%); } html[data-theme="darkroom"] .so-tint { background:rgba(30,10,8,.24); } html[data-theme="darkroom"] .so-grid { display:none; } /* 右上: セーフライト点灯サイン（装飾のみ） */ html[data-theme="darkroom"] .search-overlay::after { content:'● SAFELIGHT ON'; position:fixed; right:4vw; top:6vh; z-index:5; padding:6px 12px; border:1px solid rgba(226,61,46,.6); border-radius:2px; color:#FF6A57; background:rgba(10,10,10,.55); font-family:'Courier Prime',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.85; pointer-events:none; } html[data-theme="darkroom"] .btn-back-home { font-family:'Barlow','IBM Plex Sans JP',sans-serif; border-radius:2px; background:rgba(10,10,10,.82); border:1px solid rgba(217,217,217,.35); color:var(--text); } html[data-theme="darkroom"] .btn-back-home:hover { border-color:var(--dr-red); color:#FF6A57; } html[data-theme="darkroom"] .so-footer { background:rgba(10,10,10,.92); border-top:1px solid rgba(217,217,217,.25); } html[data-theme="darkroom"] .so-footer p { font-family:'Courier Prime',monospace; color:var(--text-dim); letter-spacing:.1em; } /* ── モバイル(≤820px): flex縦積みに戻るためレール・チップ吊りを解除 ── */ @media (max-width:820px){ html[data-theme="darkroom"] .bottom-row::before { display:none; } html[data-theme="darkroom"] #banPanel::before { display:none; } html[data-theme="darkroom"] #banPanel { background-image:none; padding:6px 8px; } html[data-theme="darkroom"] .header-stats > div { margin-top:2px; } html[data-theme="darkroom"] .search-overlay { justify-content:flex-start; } html[data-theme="darkroom"] .search-overlay::after { display:none; } html[data-theme="darkroom"] .so-content { width:100%; margin:12vh 0 0; padding:22px 34px 20px; } html[data-theme="darkroom"] .so-content::before, html[data-theme="darkroom"] .so-content::after { width:16px; } html[data-theme="darkroom"] .search-box { width:100%; } }