/* ============================================= TopWar S3453 Dashboard — Unified Design System Light/Dark mode via [data-theme] on Font: Inter (UI) + JetBrains Mono (data) Spacing: 8px base grid ============================================= */ /* --- Theme Tokens: Light (default) --- */ :root, [data-theme="light"] { --bg: #f5f7fa; --bg-alt: #edf0f4; --surface: #ffffff; --surface-alt: #f8f9fb; --surface-hover: #f0f2f6; --text: #111827; --text-2: #4b5563; --text-3: #6b7280; --text-4: #9ca3af; --border: #e5e7eb; --border-light: #f0f1f3; --border-focus: #2563eb; --primary: #2563eb; --primary-soft: rgba(37,99,235,0.08); --green: #16a34a; --green-soft: rgba(22,163,74,0.10); --red: #dc2626; --red-soft: rgba(220,38,38,0.10); --red-dim: rgba(220,38,38,0.20); --blue: #2563eb; --blue-soft: rgba(37,99,235,0.10); --blue-dim: rgba(37,99,235,0.25); --yellow: #d97706; --yellow-soft: rgba(217,119,6,0.10); --purple: #7c3aed; --purple-soft: rgba(124,58,237,0.10); --cyan: #0891b2; --army: #16a34a; --army-soft: rgba(22,163,74,0.10); --af: #2563eb; --af-soft: rgba(37,99,235,0.10); --navy: #dc2626; --navy-soft: rgba(220,38,38,0.10); --win: #16a34a; --loss: #dc2626; --sidebar-bg: #ffffff; --sidebar-hover: #f3f4f6; --sidebar-active: #eff6ff; --sidebar-border: #e5e7eb; --topbar-bg: #ffffff; --chart-grid: rgba(0,0,0,0.05); --chart-text: #6b7280; --chart-border: rgba(0,0,0,0.06); --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03); --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-data: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace; --radius: 8px; --radius-sm: 6px; --radius-xs: 4px; color-scheme: light; } /* --- Theme Tokens: Dark --- */ [data-theme="dark"] { --bg: #0f1117; --bg-alt: #161921; --surface: #1a1e2a; --surface-alt: #212636; --surface-hover: #252a3a; --text: #e2e5eb; --text-2: #a0a6b5; --text-3: #6b7188; --text-4: #4a4f62; --border: #2a2e3c; --border-light: #22263a; --border-focus: #8ab4f8; --primary: #8ab4f8; --primary-soft: rgba(138,180,248,0.12); --green: #34d058; --green-soft: rgba(52,208,88,0.12); --red: #f85149; --red-soft: rgba(248,81,73,0.12); --red-dim: rgba(248,81,73,0.25); --blue: #8ab4f8; --blue-soft: rgba(138,180,248,0.12); --blue-dim: rgba(138,180,248,0.30); --yellow: #f0b429; --yellow-soft: rgba(240,180,41,0.12); --purple: #a78bfa; --purple-soft: rgba(167,139,250,0.12); --cyan: #22d3ee; --army: #34d058; --army-soft: rgba(52,208,88,0.12); --af: #8ab4f8; --af-soft: rgba(138,180,248,0.12); --navy: #f85149; --navy-soft: rgba(248,81,73,0.12); --win: #34d058; --loss: #f85149; --sidebar-bg: #13161f; --sidebar-hover: #1a1e2a; --sidebar-active: #1e2435; --sidebar-border: #232738; --topbar-bg: #13161f; --chart-grid: rgba(255,255,255,0.04); --chart-text: #6b7188; --chart-border: rgba(255,255,255,0.06); --shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.25); color-scheme: dark; } /* ============ Reset & Base ============ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } /* Base size — scaled by JS via data-scale */ html[data-scale="85"] { font-size: 13.6px; } html[data-scale="90"] { font-size: 14.4px; } html[data-scale="95"] { font-size: 15.2px; } html[data-scale="100"] { font-size: 16px; } html[data-scale="105"] { font-size: 16.8px; } html[data-scale="110"] { font-size: 17.6px; } html[data-scale="115"] { font-size: 18.4px; } html[data-scale="120"] { font-size: 19.2px; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); display: flex; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 0.875rem; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ============ Sidebar ============ */ .sidebar { width: 220px; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; } .sidebar-header { padding: 20px 18px 14px; border-bottom: 1px solid var(--sidebar-border); } .sidebar-header h2 { font-family: var(--font-data); font-size: 1.2rem; font-weight: 700; color: var(--primary); } .sidebar-header .subtitle { color: var(--text-3); font-size: 0.72rem; font-weight: 500; margin-top: 2px; } .sidebar-nav { list-style: none; padding: 2px 0; } .sidebar-nav li a { display: flex; align-items: center; gap: 10px; padding: 7px 18px; color: var(--text-2); text-decoration: none; font-size: 0.82rem; font-weight: 500; border-left: 3px solid transparent; transition: background 0.12s, color 0.12s; } .sidebar-nav li a:hover { background: var(--sidebar-hover); color: var(--text); text-decoration: none; } .sidebar-nav li a.active { background: var(--sidebar-active); color: var(--primary); border-left-color: var(--primary); font-weight: 600; } .sidebar-nav li a .nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } .sidebar-divider { height: 1px; background: var(--sidebar-border); margin: 4px 16px; } .sidebar-scroll { flex: 1; overflow-y: auto; padding: 4px 0; } .nav-group { margin-bottom: 4px; } .nav-group + .nav-group { border-top: 1px solid var(--sidebar-border); padding-top: 4px; } .nav-section-label { padding: 10px 20px 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-2); opacity: 0.85; } .sidebar-footer { padding: 12px 18px; border-top: 1px solid var(--sidebar-border); } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; cursor: pointer; width: 100%; } .theme-toggle-track { width: 36px; height: 20px; border-radius: 10px; background: var(--border); position: relative; transition: background 0.2s; flex-shrink: 0; } [data-theme="dark"] .theme-toggle-track { background: var(--primary); } .theme-toggle-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } [data-theme="dark"] .theme-toggle-thumb { transform: translateX(16px); } .theme-toggle-label { font-size: 0.72rem; font-weight: 500; color: var(--text-3); } /* Font scale control */ .scale-control { display: flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; } .scale-btn { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--text-2); font-size: 0.82rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; line-height: 1; } .scale-btn:hover { background: var(--surface-hover); color: var(--text); } .scale-btn:active { background: var(--primary-soft); } .scale-label { flex: 1; text-align: center; font-size: 0.68rem; font-weight: 600; font-family: var(--font-data); color: var(--text-3); min-width: 36px; } /* ============ Content ============ */ .content { flex: 1; margin-left: 220px; display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); } .topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); position: sticky; top: 0; z-index: 5; } .topbar h1 { font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .clock { font-family: var(--font-data); color: var(--text-3); font-size: 0.8rem; font-variant-numeric: tabular-nums; } .page-body { padding: 20px 32px; flex: 1; max-width: 1400px; width: 100%; margin: 0 auto; } /* ============ KPI Cards ============ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); } .kpi-card .label { color: var(--text-3); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .kpi-card .value { font-family: var(--font-data); font-size: 1.65rem; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; } .kpi-card .sub { color: var(--text-3); font-size: 0.78rem; } .kpi-card.green .value { color: var(--green); } .kpi-card.red .value { color: var(--red); } .kpi-card.blue .value { color: var(--blue); } .kpi-card.yellow .value { color: var(--yellow); } /* ============ Charts ============ */ .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 20px; } .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); } .chart-card h3 { font-size: 0.82rem; font-weight: 600; color: var(--text-3); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.03em; } .chart-card canvas { width: 100% !important; max-height: 220px; } .chart-card .chart-wrap { position: relative; max-height: 220px; } .chart-card.compact canvas { max-height: 160px; } /* ============ Tables ============ */ .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .table-card .table-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .table-card .table-header h3 { font-size: 0.88rem; font-weight: 600; color: var(--text-2); } table { width: 100%; border-collapse: collapse; } th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; white-space: nowrap; } th { color: var(--text-3); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; background: var(--surface-alt); cursor: pointer; user-select: none; } th:hover { color: var(--text-2); } th.sorted { color: var(--primary); } th .sort-arrow { font-size: 0.55rem; margin-left: 3px; color: var(--primary); } tr:hover td { background: var(--surface-hover); } td a { color: var(--primary); text-decoration: none; font-weight: 500; } td a:hover { text-decoration: underline; } td.mono { font-family: var(--font-data); font-size: 0.8rem; } /* ============ Badges ============ */ .badge { display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: 0.76rem; font-weight: 600; } .badge-green { background: var(--green-soft); color: var(--green); } .badge-red { background: var(--red-soft); color: var(--red); } .badge-blue { background: var(--blue-soft); color: var(--blue); } .badge-yellow { background: var(--yellow-soft); color: var(--yellow); } .badge-purple { background: var(--purple-soft); color: var(--purple); } .badge-gray { background: var(--surface-alt); color: var(--text-3); } /* Status dot */ .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; } .status-dot.success { background: var(--green); } .status-dot.failed { background: var(--red); } .status-dot.partial { background: var(--yellow); } /* ============ Forms / Controls ============ */ .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } input[type="text"], input[type="search"], select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 0.82rem; outline: none; transition: border-color 0.15s; } input:focus, select:focus { border-color: var(--border-focus); } select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } [data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7188' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); } /* ============ Pagination ============ */ .pagination, .bi-pagination { display: flex; justify-content: center; align-items: center; gap: 2px; padding: 14px 0; } .pagination button:not(.bi-page-btn) { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-ui); font-size: 0.82rem; transition: background 0.12s; } .pagination button:not(.bi-page-btn):hover { background: var(--surface-hover); } .pagination button:not(.bi-page-btn):disabled { opacity: 0.4; cursor: default; } .pagination .page-info { color: var(--text-3); font-size: 0.82rem; } /* ============ Change Feed ============ */ .change-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; } .change-item:last-child { border-bottom: none; } .change-icon { font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; } .change-body { flex: 1; } .change-body .name { font-weight: 600; } .change-body .detail { color: var(--text-2); margin-top: 2px; } .change-body .date { color: var(--text-3); font-size: 0.72rem; margin-top: 2px; } /* ============ Alliance Cards ============ */ .alliance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px; } .alliance-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; box-shadow: var(--shadow-sm); } .alliance-card:hover { border-color: var(--primary); box-shadow: var(--shadow); } .alliance-card .tag { font-family: var(--font-data); color: var(--primary); font-size: 1rem; font-weight: 700; } .alliance-card .name { color: var(--text-3); font-size: 0.82rem; margin-bottom: 12px; } .alliance-card .stats { display: flex; gap: 16px; } .alliance-card .stat-item .stat-val { font-family: var(--font-data); font-weight: 700; font-size: 1rem; } .alliance-card .stat-item .stat-lbl { color: var(--text-3); font-size: 0.7rem; } /* ============ Profile Card ============ */ .profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .profile-info h2 { margin-bottom: 4px; font-size: 1.2rem; } .profile-info .uid { color: var(--text-3); font-family: var(--font-data); font-size: 0.78rem; margin-bottom: 14px; } .profile-stats { display: flex; gap: 24px; flex-wrap: wrap; } .profile-stat .val { font-family: var(--font-data); font-size: 1.15rem; font-weight: 700; } .profile-stat .lbl { color: var(--text-3); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } /* ============ Filter Bar ============ */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow-sm); } .filter-bar label { color: var(--text-3); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } /* ================================================================ BATTLE INTELLIGENCE Components ================================================================ */ /* ========= Stat Strip ========= */ .bi-strip { display: flex; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; } .bi-metric { flex: 1; background: var(--surface); padding: 14px 10px; text-align: center; min-width: 0; } .bi-metric-val { display: block; font-family: var(--font-data); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; } .bi-metric-label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 5px; } .bi-metric-sub { display: block; font-family: var(--font-data); font-size: 0.7rem; color: var(--text-3); margin-top: 2px; } .bi-metric-val.army { color: var(--army); } .bi-metric-val.af { color: var(--af); } .bi-metric-val.navy { color: var(--navy); } /* ========= Suppression Reference ========= */ .bi-supp-ref { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; margin-bottom: 16px; font-family: var(--font-data); font-size: 0.72rem; font-weight: 500; color: var(--text-4); } .bi-supp-ref .node { padding: 3px 10px; border-radius: var(--radius-xs); font-weight: 600; } .bi-supp-ref .node.army { color: var(--army); background: var(--army-soft); } .bi-supp-ref .node.af { color: var(--af); background: var(--af-soft); } .bi-supp-ref .node.navy { color: var(--navy); background: var(--navy-soft); } .bi-supp-ref .arrow { color: var(--text-4); font-size: 0.9rem; } .bi-supp-ref .cycle-label { margin-left: 12px; color: var(--text-4); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; } /* ========= BI Panels ========= */ .bi-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-sm); } .bi-panel-head { padding: 12px 16px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; } .bi-panel-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin: 0; } .bi-panel-body { padding: 14px 16px; } .bi-section-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; } /* ========= Analytics 2x2 Grid ========= */ .bi-analytics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } /* ========= Composition Bar ========= */ .bi-comp-bar { display: flex; height: 32px; border-radius: var(--radius-xs); overflow: hidden; margin-bottom: 12px; } .bi-comp-seg { display: flex; align-items: center; justify-content: center; font-family: var(--font-data); font-size: 0.72rem; font-weight: 600; min-width: 36px; transition: opacity 0.12s; } .bi-comp-seg:hover { opacity: 0.85; } .bi-comp-seg.army { background: var(--army-soft); color: var(--army); } .bi-comp-seg.af { background: var(--af-soft); color: var(--af); } .bi-comp-seg.navy { background: var(--navy-soft); color: var(--navy); } [data-theme="dark"] .bi-comp-seg.army { background: rgba(52,208,88,0.2); color: #34d058; } [data-theme="dark"] .bi-comp-seg.af { background: rgba(77,142,255,0.2); color: #4d8eff; } [data-theme="dark"] .bi-comp-seg.navy { background: rgba(248,81,73,0.2); color: #f85149; } .bi-comp-legend { display: flex; gap: 16px; justify-content: center; } .bi-comp-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-2); } /* ========= Dot ========= */ .bi-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-right: 10px; box-shadow: 0 0 4px currentColor; } .bi-dot.army { background: var(--army); box-shadow: 0 0 5px var(--army); } .bi-dot.af { background: var(--af); box-shadow: 0 0 5px var(--af); } .bi-dot.navy { background: var(--navy); box-shadow: 0 0 5px var(--navy); } /* ========= Data Bars ========= */ .bi-bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .bi-bar-row + .bi-bar-row { border-top: 1px solid var(--border-light); } .bi-bar-label { width: 100px; font-size: 0.8rem; font-weight: 500; color: var(--text-2); flex-shrink: 0; text-transform: capitalize; } .bi-bar-track { flex: 1; height: 20px; background: var(--surface-alt); border-radius: 3px; overflow: hidden; display: flex; } .bi-bar-fill { height: 100%; display: flex; align-items: center; padding: 0 6px; font-family: var(--font-data); font-size: 0.65rem; font-weight: 600; white-space: nowrap; min-width: fit-content; } .bi-bar-fill.win { background: var(--green-soft); color: var(--green); } .bi-bar-fill.loss { background: var(--red-soft); color: var(--red); } [data-theme="dark"] .bi-bar-fill.win { background: rgba(52,208,88,0.25); color: #34d058; } [data-theme="dark"] .bi-bar-fill.loss { background: rgba(248,81,73,0.2); color: #f85149; } .bi-bar-fill.ml-offensive { background: rgba(246,185,59,0.25); } .bi-bar-fill.ml-defensive { background: rgba(52,152,219,0.25); } .bi-bar-fill.ml-suppression { background: rgba(155,89,182,0.25); } .bi-bar-fill.ml-process { background: rgba(16,185,129,0.25); } [data-theme="dark"] .bi-bar-fill.ml-offensive { background: rgba(246,185,59,0.35); } [data-theme="dark"] .bi-bar-fill.ml-defensive { background: rgba(52,152,219,0.35); } [data-theme="dark"] .bi-bar-fill.ml-suppression { background: rgba(155,89,182,0.35); } [data-theme="dark"] .bi-bar-fill.ml-process { background: rgba(16,185,129,0.35); } /* ML Feature Bars — wide labels, category dots */ .ml-feat-row { display: grid; grid-template-columns: 12px 180px 1fr 52px; align-items: center; gap: 8px; padding: 5px 0; } .ml-feat-row + .ml-feat-row { border-top: 1px solid var(--border-light); } .ml-feat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ml-feat-dot.c-power { background: #ef4444; } .ml-feat-dot.c-suppression { background: #a855f7; } .ml-feat-dot.c-process { background: #10b981; } .ml-feat-dot.c-buff { background: #3b82f6; } .ml-feat-dot.c-setup { background: #f59e0b; } .ml-feat-label { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-feat-bar { height: 16px; background: var(--surface-alt); border-radius: 3px; overflow: hidden; } .ml-feat-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; } .ml-feat-fill.c-power { background: rgba(239,68,68,0.35); } .ml-feat-fill.c-suppression { background: rgba(168,85,247,0.35); } .ml-feat-fill.c-process { background: rgba(16,185,129,0.35); } .ml-feat-fill.c-buff { background: rgba(59,130,246,0.3); } .ml-feat-fill.c-setup { background: rgba(245,158,11,0.3); } [data-theme="dark"] .ml-feat-fill.c-power { background: rgba(239,68,68,0.45); } [data-theme="dark"] .ml-feat-fill.c-suppression { background: rgba(168,85,247,0.45); } [data-theme="dark"] .ml-feat-fill.c-process { background: rgba(16,185,129,0.45); } [data-theme="dark"] .ml-feat-fill.c-buff { background: rgba(59,130,246,0.4); } [data-theme="dark"] .ml-feat-fill.c-setup { background: rgba(245,158,11,0.4); } .ml-feat-pct { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-2); text-align: right; } .ml-feat-legend { display: flex; gap: 16px; padding: 10px 0 2px; font-size: 11px; color: var(--text-3); flex-wrap: wrap; } .ml-feat-legend-item { display: flex; align-items: center; gap: 5px; } .ml-feat-rank { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); width: 18px; text-align: right; } /* ========= Tooltips ========= */ [data-tip] { cursor: help; } .tip-box { position: fixed; background: var(--surface); color: var(--text-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-size: 0.72rem; font-family: var(--font-ui); font-weight: 400; line-height: 1.45; white-space: normal; max-width: 300px; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.15); pointer-events: none; opacity: 0; transition: opacity 0.12s; } .tip-box.show { opacity: 1; } [data-theme="dark"] .tip-box { background: #1e2433; border-color: var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .bi-bar-stat { font-family: var(--font-data); font-size: 0.72rem; color: var(--text-3); width: 85px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* ========= Hero Ranking ========= */ .bi-hero-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .bi-hero-row + .bi-hero-row { border-top: 1px solid var(--border-light); } .bi-hero-rank { font-family: var(--font-data); font-size: 0.7rem; color: var(--text-4); width: 20px; text-align: right; flex-shrink: 0; } .bi-hero-name { font-size: 0.8rem; font-weight: 500; color: var(--text); width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bi-hero-bar { flex: 1; height: 12px; background: var(--surface-alt); border-radius: 2px; overflow: hidden; display: flex; } .bi-hero-bar .win { background: var(--green-soft); } .bi-hero-bar .loss { background: var(--red-soft); } [data-theme="dark"] .bi-hero-bar .win { background: rgba(52,208,88,0.3); } [data-theme="dark"] .bi-hero-bar .loss { background: rgba(248,81,73,0.2); } .bi-hero-used { font-family: var(--font-data); font-size: 0.65rem; color: var(--text-3); width: 65px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; } /* ========= Mechanic Tags ========= */ .mech-tag { display: inline-block; font-size: 0.5rem; font-weight: 700; padding: 1px 3px; border-radius: 3px; line-height: 1; letter-spacing: 0.02em; vertical-align: middle; } .mech-tag.dmg { background: rgba(248,81,73,0.15); color: #e5534b; } .mech-tag.def { background: rgba(54,154,230,0.15); color: #369ae6; } .mech-tag.deb { background: rgba(174,124,255,0.15); color: #ae7cff; } .mech-tag.aoe { background: rgba(255,166,87,0.15); color: #ffa657; } .mech-tag.rage { background: rgba(255,106,106,0.15); color: #ff6a6a; } .mech-tag.buf { background: rgba(52,208,88,0.15); color: #34d058; } [data-theme="dark"] .mech-tag.dmg { background: rgba(248,81,73,0.25); color: #f85149; } [data-theme="dark"] .mech-tag.def { background: rgba(54,154,230,0.25); color: #58a6ff; } [data-theme="dark"] .mech-tag.deb { background: rgba(174,124,255,0.25); color: #bc8cff; } [data-theme="dark"] .mech-tag.aoe { background: rgba(255,166,87,0.25); color: #ffa657; } [data-theme="dark"] .mech-tag.rage { background: rgba(255,106,106,0.25); color: #ff7b72; } [data-theme="dark"] .mech-tag.buf { background: rgba(52,208,88,0.25); color: #3fb950; } /* ========= BI Filter Bar ========= */ .bi-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow-sm); } .bi-filter label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } .bi-filter select, .bi-filter input { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); font-family: var(--font-data); font-size: 0.78rem; padding: 6px 10px; border-radius: var(--radius-xs); outline: none; } .bi-filter select:focus, .bi-filter input:focus { border-color: var(--border-focus); } .bi-filter select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; } /* ========= BI Dense Table ========= */ .bi-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .bi-table th { padding: 9px 10px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); background: var(--surface-alt); text-align: left; cursor: pointer; user-select: none; white-space: nowrap; } .bi-table th:hover { color: var(--text-2); } .bi-table th.sorted { color: var(--primary); } .bi-table th .sort-arrow { font-size: 0.52rem; margin-left: 3px; color: var(--primary); } .bi-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); } .bi-table tr:hover td { background: var(--surface-hover); } .bi-table td.mono { font-family: var(--font-data); font-size: 0.76rem; } .bi-table td a { color: var(--primary); text-decoration: none; font-weight: 500; } .bi-table td a:hover { text-decoration: underline; } .bi-table .alliance-link { color: var(--text-3); font-size: 0.72rem; font-family: var(--font-data); } .bi-table .alliance-link:hover { color: var(--text-2); } /* Row army indicator */ .bi-table tr[data-army="Army"] td:first-child { box-shadow: inset 3px 0 0 var(--army); } .bi-table tr[data-army="Air Force"] td:first-child { box-shadow: inset 3px 0 0 var(--af); } .bi-table tr[data-army="Navy"] td:first-child { box-shadow: inset 3px 0 0 var(--navy); } /* Inline win rate bar */ .bi-winrate { display: inline-flex; align-items: center; gap: 5px; } .bi-winrate-bar { width: 36px; height: 4px; background: var(--surface-alt); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; } .bi-winrate-bar .fill { height: 100%; border-radius: 2px; display: block; } /* ========= Tags & Badges ========= */ .bi-army-tag { font-family: var(--font-data); font-size: 0.68rem; font-weight: 600; padding: 3px 8px; border-radius: 3px; display: inline-block; } .bi-army-tag.army { color: var(--army); background: var(--army-soft); } .bi-army-tag.af { color: var(--af); background: var(--af-soft); } .bi-army-tag.navy { color: var(--navy); background: var(--navy-soft); } .bi-result { font-family: var(--font-data); font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 3px; display: inline-block; } .bi-result.win { color: var(--win); background: var(--green-soft); } .bi-result.loss { color: var(--loss); background: var(--red-soft); } .bi-role { font-family: var(--font-data); font-size: 0.68rem; font-weight: 500; padding: 3px 7px; border-radius: 3px; background: var(--surface-alt); color: var(--text-3); display: inline-block; } .bi-supp { font-family: var(--font-data); font-size: 0.66rem; font-weight: 600; padding: 2px 7px; border-radius: 3px; display: inline-block; } .bi-supp.advantage { color: var(--army); background: var(--army-soft); } .bi-supp.disadvantage { color: var(--navy); background: var(--navy-soft); } .bi-supp.mirror { color: var(--purple); background: var(--purple-soft); } .bi-supp.neutral { color: var(--text-3); background: var(--surface-alt); } .bi-val { font-family: var(--font-data); font-size: 0.72rem; font-weight: 500; display: inline-block; } .bi-val.offense { color: var(--red); } .bi-val.defense { color: var(--green); } .bi-w { color: var(--win); font-weight: 600; } .bi-l { color: var(--loss); font-weight: 600; } /* ========= Battle Log ========= */ .bi-log { max-height: 400px; overflow-y: auto; } .bi-log-entry { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-bottom: 1px solid var(--border-light); font-size: 0.8rem; } .bi-log-entry:last-child { border-bottom: none; } .bi-log-entry:hover { background: var(--surface-hover); } .bi-log-result { font-family: var(--font-data); font-size: 0.68rem; font-weight: 700; width: 56px; text-align: center; padding: 3px 0; border-radius: 3px; flex-shrink: 0; } .bi-log-result.aw { color: var(--win); background: var(--green-soft); } .bi-log-result.dw { color: var(--af); background: var(--af-soft); } .bi-log-player { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; } .bi-log-player a { color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bi-log-player a:hover { color: var(--primary); } .bi-log-detail { font-family: var(--font-data); font-size: 0.68rem; color: var(--text-4); } .bi-log-vs { color: var(--text-4); font-size: 0.68rem; font-weight: 600; flex-shrink: 0; } /* ========= Report Control ========= */ .bi-win { font-family: var(--font-data); font-size: 0.66rem; font-weight: 700; color: var(--win); background: var(--green-soft); padding: 3px 7px; border-radius: 3px; display: inline-block; } .bi-loss { font-family: var(--font-data); font-size: 0.66rem; font-weight: 700; color: var(--loss); background: var(--red-soft); padding: 3px 7px; border-radius: 3px; display: inline-block; } .bi-supp-badge { font-family: var(--font-data); font-size: 0.64rem; font-weight: 600; padding: 2px 6px; border-radius: 3px; display: inline-block; } .bi-supp-badge.supp-adv { color: var(--army); background: var(--army-soft); } .bi-supp-badge.supp-dis { color: var(--loss); background: var(--red-soft); } .bi-supp-badge.supp-mir { color: var(--purple); background: var(--purple-soft); } .bi-supp-badge.supp-neu { color: var(--text-3); background: var(--surface-alt); } .slot-badge { display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 0.6rem; font-weight: 600; background: rgba(59, 130, 246, 0.12); color: rgb(59, 130, 246); margin-left: 4px; vertical-align: middle; } [data-theme="dark"] .slot-badge { background: rgba(59, 130, 246, 0.18); color: rgb(96, 165, 250); } .svs-badge { display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.5px; background: rgba(168, 85, 247, 0.12); color: rgb(168, 85, 247); margin-left: 4px; vertical-align: middle; } [data-theme="dark"] .svs-badge { background: rgba(168, 85, 247, 0.18); color: rgb(192, 132, 252); } .bi-btn { font-family: var(--font-data); font-size: 0.76rem; font-weight: 600; color: var(--text); background: var(--primary); color: #fff; border: none; padding: 6px 16px; border-radius: 4px; cursor: pointer; } .bi-btn:hover { opacity: 0.85; } .bi-pagination { display: flex; justify-content: center; align-items: center; gap: 2px; padding: 16px 0; } .bi-page-btn { font-family: var(--font-data); font-size: 0.78rem; font-weight: 500; color: var(--text-2); background: transparent; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; min-width: 36px; text-align: center; transition: background 0.15s, color 0.15s; } .bi-page-btn:hover:not(:disabled):not(.active) { background: var(--surface-hover); color: var(--text); } .bi-page-btn.active { background: var(--primary); color: #fff; font-weight: 600; } .bi-page-btn:disabled { opacity: 0.25; cursor: default; } .bi-page-btn.bi-page-nav { font-weight: 600; color: var(--text-3); padding: 6px 14px; } .bi-page-btn.bi-page-nav:hover:not(:disabled) { color: var(--primary); background: var(--surface-hover); } .bi-page-dots { color: var(--text-4); font-size: 0.74rem; padding: 0 2px; letter-spacing: 1px; } /* ========= Player Profile ========= */ .bi-profile-header { display: flex; align-items: center; gap: 16px; padding: 20px 16px; flex-wrap: wrap; } .bi-profile-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .bi-profile-uid { font-family: var(--font-data); font-size: 0.76rem; color: var(--text-3); margin-top: 2px; } .bi-profile-alliance { font-family: var(--font-data); font-size: 0.7rem; font-weight: 600; color: var(--primary); background: var(--primary-soft); padding: 3px 8px; border-radius: var(--radius-xs); text-decoration: none; margin-left: 6px; } .bi-profile-alliance:hover { text-decoration: none; opacity: 0.85; } .bi-profile-stats { display: flex; gap: 1px; background: var(--border); border-radius: var(--radius-xs); overflow: hidden; margin: 0 16px 16px; } .bi-profile-stat { background: var(--surface-alt); padding: 10px 16px; text-align: center; flex: 1; } .bi-profile-stat .val { font-family: var(--font-data); font-size: 1.05rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .bi-profile-stat .lbl { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; } /* ========= Army Cards ========= */ .bi-army-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; } .bi-army-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .bi-army-card-head { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); } .bi-army-card-head .type { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.85rem; } .bi-army-card-head .power { font-family: var(--font-data); font-size: 1rem; font-weight: 700; } .bi-army-card-head.army { border-top: 3px solid var(--army); } .bi-army-card-head.af { border-top: 3px solid var(--af); } .bi-army-card-head.navy { border-top: 3px solid var(--navy); } .bi-army-card-head.army .power { color: var(--army); } .bi-army-card-head.af .power { color: var(--af); } .bi-army-card-head.navy .power { color: var(--navy); } .bi-army-card-bar { height: 3px; display: flex; } .bi-army-card-bar .win-seg { background: var(--win); } .bi-army-card-bar .loss-seg { background: var(--loss); } .bi-army-card-body { padding: 8px 16px 12px; } .bi-army-card-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 0.8rem; } .bi-army-card-row + .bi-army-card-row { border-top: 1px solid var(--border-light); } .bi-army-card-row .k { color: var(--text-3); font-size: 0.7rem; font-weight: 500; } .bi-army-card-row .v { font-family: var(--font-data); font-size: 0.7rem; font-weight: 500; color: var(--text); } /* ========= Chart Grid ========= */ .bi-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .bi-chart canvas { width: 100% !important; max-height: 200px; } /* ========= Back Link ========= */ .bi-back { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--text-3); text-decoration: none; margin-bottom: 16px; } .bi-back:hover { color: var(--primary); text-decoration: none; } /* ========= Loading / Empty ========= */ .bi-loading { text-align: center; padding: 48px 24px; color: var(--text-3); font-size: 0.82rem; } .bi-empty { text-align: center; padding: 24px; color: var(--text-4); font-size: 0.75rem; } /* ========= Scrollbar ========= */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--text-4); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* ========= Report Detail Page ========= */ .bi-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .bi-report-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .bi-report-side.winner { border-color: var(--win); border-width: 2px; } .rp-side-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .rp-side-head.army { background: var(--army-soft); color: var(--army); } .rp-side-head.af { background: var(--af-soft); color: var(--af); } .rp-side-head.navy { background: var(--navy-soft); color: var(--navy); } .rp-result { font-size: 0.65rem; padding: 2px 8px; border-radius: var(--radius-xs); font-weight: 700; } .rp-result.win { background: var(--green-soft); color: var(--green); } .rp-result.loss { background: var(--red-soft); color: var(--red); } .rp-side-body { padding: 14px; } .rp-player { margin-bottom: 12px; } .rp-player-name { font-size: 0.88rem; font-weight: 600; color: var(--primary); text-decoration: none; } .rp-player-name:hover { text-decoration: underline; } .rp-uid { display: block; font-size: 0.65rem; color: var(--text-4); font-family: var(--font-data); margin-top: 2px; } .rp-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 12px; } .rp-stat { display: flex; flex-direction: column; gap: 1px; } .rp-stat-label { font-size: 0.62rem; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.04em; } .rp-stat-value { font-size: 0.76rem; color: var(--text); } .rp-profile-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.68rem; color: var(--text-3); padding: 8px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); margin-bottom: 12px; } .rp-heroes-title, .rp-effects-title { font-size: 0.68rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .rp-hero { border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden; } .rp-hero-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer; background: var(--surface-alt); font-size: 0.74rem; transition: background 0.15s; } .rp-hero-head:hover { background: var(--surface-hover); } .rp-hero-name { font-weight: 600; color: var(--text); flex: 1; } .rp-hero-star { color: var(--yellow); font-size: 0.65rem; } .rp-hero-toggle { color: var(--text-4); font-size: 0.65rem; transition: transform 0.2s; } .rp-hero.open .rp-hero-toggle { transform: rotate(180deg); } .rp-hero-detail { display: none; padding: 8px 10px 10px; font-size: 0.7rem; } .rp-hero.open .rp-hero-detail { display: block; } .rp-hero-section { margin-bottom: 8px; } .rp-section-title { font-size: 0.6rem; font-weight: 600; color: var(--text-4); text-transform: uppercase; margin-bottom: 4px; } .rp-skill-list { display: flex; flex-wrap: wrap; gap: 4px; } .rp-mastery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .rp-skill { padding: 2px 6px; background: var(--primary-soft); color: var(--primary); border-radius: var(--radius-xs); font-size: 0.62rem; font-weight: 500; } /* Skill icon cards (battle reports) — 2 columns */ .rp-skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .rp-skill-card { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: 6px; min-width: 0; } .rp-skill-icon { width: 32px; height: 32px; border-radius: 5px; object-fit: contain; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); } .rp-skill-placeholder { background: linear-gradient(135deg, var(--surface-alt), var(--border-light)); } .rp-skill-info { min-width: 0; } .rp-skill-name { font-size: 0.65rem; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .rp-skill-lv { font-size: 0.58rem; color: var(--text-4); font-weight: 500; } /* Titan gear grid — 3 rows × 2 columns */ .rp-gear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .rp-gear { border: 1px solid var(--border-light); border-radius: var(--radius-xs); overflow: hidden; } .rp-gear-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--surface-alt); font-size: 0.62rem; } .rp-gear-slot-img { width: 30px; height: 30px; border-radius: 4px; object-fit: contain; flex-shrink: 0; border: 1px solid var(--border); } .rp-gear-slot-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .rp-gear-slot { font-weight: 600; color: var(--text-2); font-size: 0.6rem; } .rp-gear-effect { font-size: 0.52rem; padding: 1px 4px; background: var(--purple-soft); color: var(--purple); border-radius: var(--radius-xs); font-weight: 600; white-space: nowrap; display: inline-block; } .rp-gear-stars { color: var(--yellow); font-size: 0.5rem; } .rp-gear-stats { padding: 2px 6px; } .rp-gear-stat { display: flex; justify-content: space-between; font-size: 0.56rem; color: var(--text-3); padding: 0.5px 0; } /* Collapsible panels */ .rp-collapsible-panel > .rp-panel-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; } .rp-collapsible-panel > .rp-panel-toggle .rp-hero-toggle { transition: transform 0.2s; } .rp-collapsible-panel.collapsed > .rp-panel-toggle .rp-hero-toggle { transform: rotate(-90deg); } .rp-collapsible-panel > .rp-panel-body { transition: max-height 0.4s ease, opacity 0.2s; max-height: 50000px; opacity: 1; overflow: visible; } .rp-collapsible-panel.collapsed > .rp-panel-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; } .rp-collapsible-panel.collapsed > .bi-panel-actions { display: none; } .rp-effects-list { display: flex; flex-wrap: wrap; gap: 4px; } .rp-effect { padding: 3px 8px; background: var(--purple-soft); color: var(--purple); border-radius: var(--radius-xs); font-size: 0.65rem; font-weight: 500; } /* Banner */ .rp-banner { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; } .rp-banner-side { display: flex; align-items: center; gap: 10px; flex: 1; text-align: center; justify-content: center; } .rp-banner-info { display: flex; flex-direction: column; align-items: center; gap: 3px; } .rp-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; } .rp-avatar-placeholder { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--surface-alt), var(--border-light)); border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .rp-avatar-placeholder::after { content: ''; width: 20px; height: 20px; background: var(--border); border-radius: 50%; } .rp-banner-side a { font-size: 0.88rem; font-weight: 700; color: var(--text); text-decoration: none; } .rp-banner-side a:hover { color: var(--primary); text-decoration: underline; } .rp-banner-side .mono { font-size: 0.74rem; color: var(--text-2); } .rp-banner-result { display: flex; flex-direction: column; align-items: center; gap: 4px; } .rp-banner-vs { font-size: 0.65rem; font-weight: 700; color: var(--text-4); letter-spacing: 0.08em; } .rp-banner-outcome { font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-sm); letter-spacing: 0.04em; } .rp-banner-outcome.atk-win { background: var(--green-soft); color: var(--green); } .rp-banner-outcome.def-win { background: var(--blue-soft); color: var(--blue); } .rp-banner-meta { display: flex; justify-content: center; gap: 16px; padding: 6px 16px 12px; font-size: 0.62rem; color: var(--text-4); font-family: var(--font-data); } /* Damage bar */ .rp-damage-bar-wrap { padding: 4px 16px 8px; } .rp-damage-bar { display: flex; height: 22px; border-radius: 11px; overflow: hidden; background: var(--surface-alt); border: 1px solid var(--border-light); } .rp-damage-fill { display: flex; align-items: center; justify-content: center; min-width: 32px; transition: width 0.4s ease; } .rp-damage-fill.atk { background: linear-gradient(90deg, #e74c3c, #c0392b); } .rp-damage-fill.def { background: linear-gradient(90deg, #2980b9, #3498db); } .rp-damage-label { font-size: 0.62rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); white-space: nowrap; } .rp-damage-legend { display: flex; justify-content: space-between; padding: 4px 4px 0; font-size: 0.58rem; color: var(--text-4); font-family: var(--font-data); } /* Decoration cards */ .rp-decor-grid { display: flex; flex-wrap: wrap; gap: 6px; } .rp-decor-card { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: 6px; } .rp-decor-icon { width: 32px; height: 32px; border-radius: 5px; object-fit: contain; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); } .rp-decor-info { min-width: 0; } .rp-decor-name { font-size: 0.65rem; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .rp-decor-buff { font-size: 0.55rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .rp-decor-level { font-size: 0.52rem; color: var(--cyan); font-weight: 700; background: rgba(0,200,200,0.08); padding: 0 3px; border-radius: 3px; } /* Setup Comparison panel */ .rp-comp-section { margin-bottom: 16px; } .rp-comp-title { font-size: 0.76rem; font-weight: 700; margin-bottom: 8px; color: var(--text-1); } .rp-comp-table { border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; } .rp-comp-header { display: grid; grid-template-columns: 1fr 2fr 1fr; padding: 6px 10px; background: var(--surface-alt); font-size: 0.62rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; } .rp-comp-header span:first-child { text-align: left; } .rp-comp-header span:nth-child(2) { text-align: center; } .rp-comp-header span:last-child { text-align: right; } .rp-comp-row { display: grid; grid-template-columns: 1fr 2fr 1fr; padding: 5px 10px; border-top: 1px solid var(--border-light); font-size: 0.68rem; align-items: center; } .rp-comp-row:hover { background: var(--surface-alt); } .rp-comp-cell { font-family: var(--font-data); } .rp-comp-cell.center { text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; } .rp-comp-cell:first-child { text-align: left; color: var(--green); } .rp-comp-cell:last-child { text-align: right; color: var(--blue); } .rp-comp-cell.miss { opacity: 0.3; } .rp-comp-miss { color: var(--text-4); } .rp-comp-higher { font-weight: 700; color: var(--yellow) !important; } .rp-comp-buff { font-size: 0.62rem; opacity: 0.7; } .rp-comp-icon { width: 28px; height: 28px; border-radius: 4px; object-fit: contain; vertical-align: middle; } /* Decoration diff tags */ .rp-dtag { display: inline-block; font-size: 0.55rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px; vertical-align: middle; } .rp-dtag.atk-only { background: rgba(34,197,94,0.15); color: var(--green); } .rp-dtag.def-only { background: rgba(59,130,246,0.15); color: var(--blue); } .rp-dtag.diff-lvl { background: rgba(234,179,8,0.15); color: var(--yellow); } /* Decoration category filter bar */ .rp-cat-bar { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .rp-cat-btn { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px; font-size: 0.68rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.15s; } .rp-cat-btn:hover { border-color: var(--primary); color: var(--text-2); } .rp-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } .rp-cat-cnt { font-weight: 400; opacity: 0.7; margin-left: 2px; } /* Toggle switch */ .rp-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 0.72rem; font-weight: 500; color: var(--text-2); } .rp-toggle input { display: none; } .rp-toggle-slider { width: 34px; height: 18px; background: var(--border); border-radius: 9px; position: relative; transition: background 0.2s; } .rp-toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--text-3); border-radius: 50%; transition: transform 0.2s, background 0.2s; } .rp-toggle input:checked + .rp-toggle-slider { background: var(--primary); } .rp-toggle input:checked + .rp-toggle-slider::after { transform: translateX(16px); background: #fff; } .rp-comp-summary { text-align: center; margin-top: 12px; padding: 10px 16px; border-top: 1px solid var(--border); font-weight: 700; font-size: 0.82rem; background: var(--surface-alt); border-radius: 0 0 6px 6px; text-transform: uppercase; letter-spacing: 0.5px; } .rp-comp-summary.atk-win { color: #4ade80; background: rgba(74,222,128,0.08); } .rp-comp-summary.def-win { color: #fb7185; background: rgba(251,113,133,0.08); } .rp-comp-summary-detail { display: block; font-weight: 500; font-size: 0.68rem; color: var(--text-2); margin-top: 4px; text-transform: none; letter-spacing: 0; } .rp-comp-side-by-side { display: flex; gap: 12px; } .rp-comp-col { flex: 1; } .rp-comp-col.atk { border-left: 3px solid var(--green); padding-left: 8px; } .rp-comp-col.def { border-left: 3px solid var(--blue); padding-left: 8px; } .rp-comp-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.7rem; font-weight: 500; } /* Insights */ .rp-insight { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.74rem; line-height: 1.5; color: var(--text-2); margin-bottom: 6px; } .rp-insight.good { background: var(--green-soft); } .rp-insight.alert { background: var(--red-soft); } .rp-insight.neutral { background: var(--surface-alt); } .rp-insight-icon { font-weight: 700; font-size: 0.68rem; flex-shrink: 0; width: 18px; text-align: center; } .rp-insight.good .rp-insight-icon { color: var(--green); } .rp-insight.alert .rp-insight-icon { color: var(--red); } .rp-insight.neutral .rp-insight-icon { color: var(--text-3); } /* H2H */ .rp-h2h { display: flex; align-items: center; gap: 12px; font-size: 0.76rem; color: var(--text-2); padding: 4px 0; } /* ============ Responsive ============ */ @media (max-width: 1100px) { .bi-analytics { grid-template-columns: 1fr; } .bi-chart-grid { grid-template-columns: 1fr; } .bi-strip { flex-wrap: wrap; } .bi-metric { min-width: 100px; } .bi-report-grid { grid-template-columns: 1fr; } } /* ================================================================ PLAYER ANALYSIS Components (pa-*) ================================================================ */ /* Confidence Bar */ .pa-confidence { padding: 12px 16px; } .pa-conf-bar { height: 6px; background: var(--surface-alt); border-radius: 3px; overflow: hidden; margin-bottom: 8px; } .pa-conf-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } .pa-conf-text { font-size: 0.78rem; color: var(--text-2); } .pa-conf-text strong { color: var(--text); } .pa-conf-mismatch { font-size: 0.72rem; color: var(--yellow); margin-top: 6px; padding: 6px 10px; background: rgba(234,179,8,0.08); border-radius: 6px; border-left: 3px solid var(--yellow); } .pa-mismatch-icon { margin-right: 4px; } .pa-mismatch-row { opacity: 0.55; } .pa-mm-badge { display: inline-block; font-size: 0.55rem; font-weight: 700; color: var(--yellow); background: rgba(234,179,8,0.15); padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: middle; } /* Tabs */ .pa-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .pa-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--text-2); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .pa-tab:hover { background: var(--surface-hover); color: var(--text); } .pa-tab-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; } /* Titan Improvement */ .ti-summary-stat { text-align: center; padding: 8px 14px; background: var(--surface-alt); border-radius: var(--radius); border: 1px solid var(--border); min-width: 60px; } .ti-summary-val { font-size: 1.2rem; font-weight: 700; font-family: var(--font-mono); } .ti-summary-lbl { font-size: 0.65rem; color: var(--text-3); margin-top: 2px; } .ti-urgent { background: rgba(239,68,68,0.04); } .ti-warn { background: rgba(234,179,8,0.04); } .ti-hero-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; } .ti-hero-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.15s; } .ti-hero-head:hover { background: var(--surface-hover); } .ti-hero-name { font-weight: 600; flex: 1; } .ti-hero-avg { font-size: 0.78rem; font-weight: 600; font-family: var(--font-mono); } .ti-hero-detail { display: none; padding: 0 14px 12px; } .ti-hero-card.open .ti-hero-detail { display: block; } .ti-hero-card.open .rp-hero-toggle { transform: rotate(180deg); } .ti-slot { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .ti-slot:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .ti-slot-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .ti-stat-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .ti-stat-name { width: 180px; min-width: 140px; font-size: 0.72rem; color: var(--text-2); } /* Setup Card */ .pa-setup-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .pa-setup-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--green-soft); color: var(--green); margin-bottom: 8px; } .pa-setup-hero { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 6px; } .pa-setup-details { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-3); margin-bottom: 8px; } .pa-setup-record { display: flex; align-items: center; gap: 8px; font-family: var(--font-data); font-size: 0.8rem; } .pa-setup-wr { font-weight: 700; color: var(--text); font-size: 1rem; } .pa-setup-sample { font-size: 0.68rem; color: var(--text-4); } /* Matchup Grid */ .pa-matchup-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); } .pa-matchup-item { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xs); padding: 8px 12px; min-width: 120px; } .pa-matchup-label { font-size: 0.68rem; color: var(--text-3); margin-bottom: 4px; } .pa-matchup-record { font-family: var(--font-data); font-size: 0.72rem; } /* Setup List */ .pa-setup-list-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-4); margin-bottom: 6px; } .pa-setup-list { display: flex; flex-direction: column; gap: 4px; } .pa-setup-mini { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius-xs); font-size: 0.74rem; } .pa-setup-mini-heroes { flex: 1; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .pa-setup-mini-form { color: var(--text-3); font-size: 0.68rem; white-space: nowrap; } .pa-setup-mini-record { font-family: var(--font-data); font-size: 0.68rem; white-space: nowrap; } .pa-setup-mini-wr { font-family: var(--font-data); font-weight: 700; font-size: 0.72rem; color: var(--text); min-width: 40px; text-align: right; } /* Radar Chart */ .pa-radar-wrap { max-width: 380px; margin: 0 auto 20px; } /* Rank Cards */ .pa-rank-section { margin-bottom: 16px; } .pa-rank-army { margin-bottom: 8px; } .pa-rank-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .pa-rank-card { background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 10px; text-align: center; } .pa-rank-val { font-family: var(--font-data); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .pa-rank-card.good .pa-rank-val { color: var(--green); } .pa-rank-card.mid .pa-rank-val { color: var(--text); } .pa-rank-card.low .pa-rank-val { color: var(--red); } .pa-rank-label { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-4); margin: 4px 0; } .pa-rank-bar { height: 3px; background: var(--surface); border-radius: 2px; overflow: hidden; } .pa-rank-fill { height: 100%; border-radius: 2px; } .pa-rank-card.good .pa-rank-fill { background: var(--green); } .pa-rank-card.mid .pa-rank-fill { background: var(--primary); } .pa-rank-card.low .pa-rank-fill { background: var(--red); } /* Equipment Inspection */ .pa-inspect-section { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); } .pa-inspect-title { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 8px; } .pa-inspect-row { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; } .pa-inspect-k { font-size: 0.68rem; font-weight: 600; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.04em; min-width: 70px; flex-shrink: 0; padding-top: 2px; } /* Process Stats */ .pa-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; } .pa-process-stat { background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px; text-align: center; } .pa-process-val { font-family: var(--font-data); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } .pa-process-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-4); margin-top: 4px; } /* --- Report Detail: New Sections --- */ .bi-val-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; } .bi-val-badge.offense { background: var(--red-soft); color: var(--red); } .bi-val-badge.defense { background: var(--blue-soft); color: var(--blue); } .bi-val-badge.base { background: var(--surface-alt); color: var(--text-3); } .bi-val-badge.none { background: var(--surface-alt); color: var(--text-4); } .rp-section-block { margin: 10px 0; padding: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--surface-alt); } .rp-section-block .rp-section-title { font-size: 0.68rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .rp-subsection { margin: 6px 0; } .rp-sub-label { display: block; font-size: 0.6rem; font-weight: 600; color: var(--text-4); text-transform: uppercase; margin-bottom: 3px; } /* Collapsible sections */ .rp-collapsible .rp-collapse-body { display: none; margin-top: 6px; } .rp-collapsible.open .rp-collapse-body { display: block; } .rp-collapsible .rp-hero-toggle { transition: transform 0.2s; } .rp-collapsible.open .rp-hero-toggle { transform: rotate(180deg); } /* Buff summary bars */ .rp-buff-stats { display: flex; flex-direction: column; gap: 4px; } .rp-buff-row { display: grid; grid-template-columns: 50px 1fr 60px; align-items: center; gap: 6px; } .rp-buff-label { font-size: 0.65rem; font-weight: 600; color: var(--text-2); } .rp-buff-bar-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } .rp-buff-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; } .rp-buff-val { font-size: 0.65rem; text-align: right; color: var(--text-2); } .rp-buff-detail { grid-column: 2 / -1; font-size: 0.58rem; color: var(--text-4); padding-left: 2px; margin-top: -2px; } .rp-source-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-light); } .rp-source-item { font-size: 0.58rem; color: var(--text-4); padding: 1px 6px; background: var(--surface); border-radius: var(--radius-xs); border: 1px solid var(--border-light); } /* Enigma beasts */ .rp-enigma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; } .rp-enigma-beast { padding: 6px 8px; border: 1px solid var(--border-light); border-radius: var(--radius-xs); background: var(--surface); } .rp-beast-header { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; } .rp-beast-stars { color: var(--yellow); } .rp-beast-level { font-weight: 600; color: var(--text-2); } .rp-beast-buff { font-size: 0.6rem; color: var(--text-3); margin-top: 2px; } /* Enigma fields */ .rp-field-grid { display: grid; gap: 4px; } .rp-field { padding: 4px 8px; border: 1px solid var(--border-light); border-radius: var(--radius-xs); background: var(--surface); } .rp-field-head { font-size: 0.62rem; font-weight: 600; color: var(--text-3); } .rp-field-slot { font-size: 0.58rem; color: var(--text-3); } /* Decorations sublimes */ .rp-sublime-list { display: flex; flex-direction: column; gap: 2px; } .rp-sublime-item { font-size: 0.6rem; color: var(--text-3); font-family: var(--font-data); } .rp-sublime-more { font-size: 0.6rem; color: var(--text-4); font-style: italic; margin-top: 2px; } /* Skins */ .rp-skin-grid { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.65rem; color: var(--text-3); } /* Confidence tier labels */ .bi-conf-tiers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; font-size: 0.6rem; color: var(--text-4); } .bi-conf-tier { padding: 2px 8px; border-radius: var(--radius-xs); border: 1px solid var(--border-light); background: var(--surface); } .bi-conf-tier.active { font-weight: 700; color: var(--text); border-color: var(--primary); background: var(--primary-soft); } /* Battle Buff Comparison table */ .bb-tabs { display: flex; gap: 4px; margin-bottom: 12px; } .bb-tab { padding: 6px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-2); color: var(--text-2); cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.15s; } .bb-tab:hover { border-color: var(--primary); color: var(--primary); } .bb-tab.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; } .bb-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .bb-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--border); } .bb-row:last-child { border-bottom: none; } .bb-header { background: var(--bg-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); } .bb-header .bb-val { padding: 10px 12px; } .bb-header .bb-stat { padding: 10px 8px; } .bb-cell { padding: 7px 12px; font-size: 13px; } .bb-cell.bb-stat { text-align: center; color: var(--text-2); font-size: 12px; min-width: 150px; white-space: nowrap; } .bb-cell.bb-val { display: flex; align-items: center; gap: 6px; } .bb-cell.bb-val:first-child { justify-content: flex-end; text-align: right; } .bb-cell.bb-val:last-child { justify-content: flex-start; text-align: left; } .bb-cell.bb-higher { font-weight: 600; color: var(--green); } .bb-cell .mono { min-width: 70px; } .bb-cell.bb-val:first-child .mono { text-align: right; } .bb-bar-wrap { flex: 1; height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; max-width: 120px; } .bb-bar-wrap.bb-left { order: -1; display: flex; justify-content: flex-end; } .bb-bar { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .bb-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .bb-src-title { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .bb-src-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: var(--text-3); } .bb-src-row .mono { color: var(--text-2); } /* --- Effect Analysis --- */ .ea-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .ea-summary-side { background: var(--bg-2); border-radius: 8px; padding: 12px 16px; border: 1px solid var(--border); } .ea-summary-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 8px; } .ea-summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; } .ea-summary-row .mono { font-weight: 600; } .ea-cat-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; } .ea-cat-tab { padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-2); color: var(--text-2); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.15s; } .ea-cat-tab:hover { border-color: var(--primary); color: var(--primary); } .ea-cat-tab.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; } .ea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ea-col-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .ea-effect { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 6px; transition: background 0.15s; } .ea-effect:hover { background: var(--bg-2); } .ea-effect.zero-dmg { opacity: 0.55; } .ea-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .ea-dot.debuff { background: #ef4444; } .ea-dot.shield { background: #3b82f6; } .ea-dot.damage_buff { background: #22c55e; } .ea-dot.control { background: #eab308; } .ea-dot.special_effect { background: #8b5cf6; } .ea-dot.defense_buff { background: #06b6d4; } .ea-dot.other { background: #6b7280; } .ea-info { flex: 1; min-width: 0; } .ea-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ea-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .ea-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; } .ea-badge.source { background: var(--bg-2); border: 1px solid var(--border); color: var(--text-3); } .ea-badge.procs { background: var(--bg-2); color: var(--text-2); font-weight: 600; } .ea-badge.amp-pos { background: rgba(34,197,94,0.15); color: #22c55e; font-weight: 600; } .ea-badge.amp-neg { background: rgba(239,68,68,0.15); color: #ef4444; font-weight: 600; } .ea-badge.round { background: var(--bg-2); color: var(--text-3); } .ea-dmg { font-size: 13px; font-weight: 600; white-space: nowrap; text-align: right; flex-shrink: 0; padding-top: 2px; } .ea-empty { text-align: center; padding: 24px; color: var(--text-3); font-size: 13px; } @media (max-width: 768px) { .ea-grid { grid-template-columns: 1fr; } .ea-summary { grid-template-columns: 1fr; } } /* --- Battle Heatmap --- */ .hm-wrap { overflow-x: auto; } .hm-side-by-side { display: flex; gap: 24px; flex-wrap: wrap; } .hm-section { flex: 1; min-width: 320px; } .hm-title { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-2); } .hm-players { display: flex; gap: 16px; margin-bottom: 8px; font-size: 11px; color: var(--text-3); } .hm-player-label strong { color: var(--text); } .hm-grid { display: inline-grid; gap: 2px; font-size: 11px; } .hm-corner { background: transparent; } .hm-col-label, .hm-row-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-3); display: flex; align-items: center; padding: 2px 6px; white-space: nowrap; } .hm-col-label { justify-content: center; writing-mode: vertical-lr; transform: rotate(180deg); min-height: 60px; } .hm-row-label { justify-content: flex-end; } .hm-cell { min-width: 52px; min-height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; cursor: default; transition: transform 0.1s; position: relative; color: #fff; } .hm-cell:hover { transform: scale(1.08); z-index: 2; } .hm-cell.zero { background: var(--surface-alt); color: var(--text-4); } /* Heatmap color scale: 0=cool to 1=hot */ .hm-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--text-3); } .hm-legend-bar { height: 10px; width: 180px; border-radius: 5px; background: linear-gradient(90deg, #1e3a5f, #2563eb, #eab308, #dc2626); } /* --- Battle Timeline --- */ .bt-container { position: relative; } .bt-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .bt-btn { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--font-ui); transition: background 0.15s; } .bt-btn:hover { background: var(--surface-hover); } .bt-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } .bt-slider { flex: 1; min-width: 120px; accent-color: var(--primary); } .bt-round-label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); min-width: 90px; } .bt-speed { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); } /* Timeline bars */ .bt-bars { display: flex; flex-direction: column; gap: 4px; } .bt-bar-row { display: flex; align-items: center; gap: 8px; height: 26px; } .bt-bar-label { font-size: 11px; font-weight: 500; width: 65px; text-align: right; color: var(--text-3); flex-shrink: 0; } .bt-bar-track { flex: 1; height: 18px; background: var(--surface-alt); border-radius: 4px; overflow: hidden; position: relative; } .bt-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; position: relative; } .bt-bar-fill.atk { background: rgba(37,99,235,0.6); } .bt-bar-fill.def { background: rgba(220,38,38,0.6); } .bt-bar-val { font-family: var(--font-mono); font-size: 11px; width: 80px; color: var(--text-2); } /* Death timeline sparkline */ .bt-death-row { display: flex; gap: 2px; align-items: flex-end; height: 40px; margin-top: 8px; } .bt-death-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 3px; transition: height 0.3s, opacity 0.3s; } .bt-death-bar.atk { background: rgba(37,99,235,0.5); } .bt-death-bar.def { background: rgba(220,38,38,0.5); } .bt-death-bar.future { opacity: 0.15; } /* Power chart area */ .bt-power-chart { height: 120px; margin-top: 12px; } /* Deploy order visualization */ .bt-deploy { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .bt-deploy-unit { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 5px; font-size: 11px; font-weight: 500; font-family: var(--font-mono); border: 1px solid var(--border); opacity: 0.3; transition: opacity 0.3s, border-color 0.3s; } .bt-deploy-unit.deployed { opacity: 1; } .bt-deploy-unit.atk { border-color: rgba(37,99,235,0.4); color: var(--primary); } .bt-deploy-unit.def { border-color: rgba(220,38,38,0.4); color: var(--red); } .bt-deploy-unit.deployed.atk { background: rgba(37,99,235,0.08); border-color: var(--primary); } .bt-deploy-unit.deployed.def { background: rgba(220,38,38,0.08); border-color: var(--red); } .bt-deploy-num { font-size: 9px; color: var(--text-4); } /* Event log */ .bt-events { max-height: 160px; overflow-y: auto; font-size: 11px; font-family: var(--font-mono); border: 1px solid var(--border); border-radius: 6px; padding: 8px; background: var(--surface-alt); margin-top: 10px; } .bt-ev { padding: 2px 0; color: var(--text-3); } .bt-ev .atk-c { color: var(--primary); } .bt-ev .def-c { color: var(--red); } .bt-ev .dmg { color: var(--yellow); } .bt-ev .death { color: var(--red); font-weight: 600; } .bt-ev .shield-c { color: var(--cyan); } @media (max-width: 768px) { .sidebar { width: 60px; } .sidebar-header h2 { font-size: 0.9rem; } .sidebar-header .subtitle { display: none; } .sidebar-nav li a { padding: 10px; font-size: 0; } .sidebar-nav li a .nav-icon { font-size: 1.1rem; } .sidebar-footer { display: none; } .content { margin-left: 60px; } .chart-grid { grid-template-columns: 1fr; } .topbar { padding: 12px 16px; } .page-body { padding: 14px 16px; } .profile-stats { flex-direction: column; gap: 8px; } .bb-cell.bb-stat { min-width: 100px; font-size: 11px; } .bb-bar-wrap { max-width: 60px; } .bb-sources { grid-template-columns: 1fr; } }