/* ============================================ STATS PANEL Charts, mana curve, synergy stats, widgets ============================================ */ /* Stats Charts Layout */ .stats-charts { display: flex; gap: 16px; margin-bottom: 20px; } /* Main Grid Layout */ .stats-grid-main { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "arch" "cons" "mana" "type" "color" "prod" "rare" "tags" "actor" "synd" "weak" "func" "syng" "comb"; } /* Base Area Assignments */ .grid-item-arch { grid-area: arch; } .grid-item-cons { grid-area: cons; } .grid-item-mana { grid-area: mana; } .grid-item-type { grid-area: type; } .grid-item-color { grid-area: color; } .grid-item-prod { grid-area: prod; } .grid-item-rare { grid-area: rare; } .grid-item-tags { grid-area: tags; } .grid-item-actor { grid-area: actor; } /* Effect Focus (actor-volume) widget */ .actor-volume-body { display: flex; flex-direction: column; justify-content: center; flex: 1; } .actor-volume-empty { padding: 16px 4px; color: var(--text-muted, #888); font-size: 0.85rem; } .actor-pie-container { width: 100%; } .actor-legend { min-width: 150px; } .actor-legend-row { width: 100%; } .actor-label { flex: 1 1 auto; } .grid-item-synd { grid-area: synd; } .grid-item-weak { grid-area: weak; } .grid-item-func { grid-area: func; } .grid-item-syng { grid-area: syng; } .grid-item-comb { grid-area: comb; } /* Size-query container so the score bar responds to the panel's actual width (the builder's panels resize independently of the viewport). Overlays rendered by stats widgets are portaled to , so the layout containment this creates cannot capture their fixed positioning. */ .stats-panel { container-type: inline-size; } .stats-score-bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; align-items: stretch; } /* When six across would squeeze the widgets, split the row in half (3 + 3) instead of orphaning one widget onto its own row. */ @container (max-width: 1150px) { .stats-score-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (max-width: 600px) { .stats-score-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stats-score-bar .stat-item { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 140px; padding: 12px; background: var(--widget-bg); border: 1px solid var(--border-color); border-radius: 8px; } .stats-score-bar .stat-item .stat-label { font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; color: var(--chart-title-color); text-align: center; flex-shrink: 0; margin-bottom: 8px; } .stats-score-bar .stat-item .stat-value { font-size: 2.2em; font-weight: 700; text-align: center; } .stats-score-bar .stat-item .widget-content { flex: 1; display: flex; align-items: center; justify-content: center; } .stats-score-bar .stat-item .widget-extras { flex-shrink: 0; text-align: center; } /* Chart Container */ .chart-container { background: var(--widget-bg); border-radius: 12px; padding: 12px; border: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; min-height: 250px; position: relative; } .chart-title { font-size: 0.85em; color: var(--chart-title-color); margin: 0 0 10px 0; text-align: center; } /* Mana Curve */ .mana-curve { height: 100px; flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; } .curve-bars { display: flex; align-items: flex-end; justify-content: space-around; height: 80px; gap: 4px; } .curve-bar-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 80px; position: relative; } .curve-bar { width: 100%; min-width: 20px; max-width: 30px; min-height: 8px; background: linear-gradient(to top, var(--accent-color), var(--accent-hover)); border-radius: 4px 4px 0 0; display: flex; align-items: flex-start; justify-content: center; position: relative; transition: height 0.3s ease; } .bar-count, .bar-total { font-size: 0.65em; color: var(--text-color); margin-bottom: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); white-space: nowrap; } .curve-label { font-size: 0.7em; color: var(--text-muted); margin-top: 4px; display: inline-flex; align-items: center; gap: 1px; } /* Scryfall symbol glyphs used as chart keys (curve x-axis, color legend) */ .stats-mana-symbol { width: 14px; height: 14px; display: inline-block; vertical-align: middle; } .curve-label .stats-mana-symbol { width: 13px; height: 13px; } /* Stacked bar for 0 CMC column */ .stacked-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 100%; } .spell-bar { background: linear-gradient(to top, var(--type-land), rgba(var(--color-accent-rgb), 0.3)) !important; border-radius: 0 !important; } .land-bar { background: linear-gradient(to top, var(--type-land), rgba(var(--color-accent-rgb), 0.3)) !important; border-radius: 0 !important; } .stacked-bar .curve-bar:first-child { border-radius: 4px 4px 0 0; } .mana-bars { flex: 1; display: flex; align-items: flex-end; justify-content: space-around; padding-bottom: 8px; width: 100%; } .bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } /* Stats Row 2 */ .stats-row-2 { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; align-items: stretch; } .stats-row-2 .stat-item { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--widget-bg); border-radius: 12px; min-width: 100px; min-height: 130px; } .stats-row-2 .stat-label { font-size: 0.85em; color: var(--text-muted); font-weight: 500; text-align: center; flex-shrink: 0; } .stats-row-2 .stat-value { font-size: 1.6em; font-weight: 700; color: var(--accent-color); flex: 1; display: flex; align-items: center; justify-content: center; } .stats-row-2 .type-breakdown { flex: 1; min-width: 200px; } .stats-color-row { display: flex; gap: 16px; margin-bottom: 16px; } /* Stat Item */ .stat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 20px; background: var(--widget-bg); border: 1px solid var(--glass-border); border-radius: 8px; min-width: 80px; position: relative; } /* Circular "?" help button pinned to a stat widget's corner */ .stat-help-btn { position: absolute; bottom: 5px; right: 5px; width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 50%; background: var(--accent-bg); color: var(--text-muted); cursor: pointer; opacity: 0.65; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .stat-help-btn:hover, .stat-help-btn:focus-visible { opacity: 1; color: var(--accent-color); border-color: var(--accent-color); transform: scale(1.08); } .stat-help-btn-icon { width: 13px; height: 13px; flex: 0 0 13px; } .stat-label { font-size: 0.7em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .stat-value { font-size: 1.5em; font-weight: bold; color: var(--accent-color); } /* Type Breakdown */ .type-breakdown { flex: 1; min-width: 200px; } .type-bars { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; width: 100%; } .type-bar-row { display: flex; align-items: center; gap: 8px; } .type-label { font-size: 0.7em; color: var(--text-muted); width: 34px; text-align: center; flex-shrink: 0; } /* Mana-font type glyphs (same set as the Advanced Search type buttons) */ .type-label i { font-size: 1.5em; color: var(--text-secondary); } .type-bar-container { flex: 1; height: 12px; background: var(--chart-bar-track); border: 1px solid var(--chart-bar-track-border); border-radius: 4px; overflow: hidden; } .type-bar { height: 100%; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--chart-bar-fill-outline); transition: width 0.3s ease; } .type-count { font-size: 0.75em; color: var(--text-secondary); width: 24px; text-align: right; } /* Color/Rarity Pie Charts */ .color-pie, .rarity-pie { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; } .pie-chart-container { display: flex; align-items: center; justify-content: center; gap: 24px; flex: 1; padding: 8px; } .pie-chart { width: 110px; height: 110px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .pie-legend { display: flex; flex-direction: column; gap: 8px; justify-content: center; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85em; } .legend-color { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .legend-label { color: var(--text-secondary); white-space: nowrap; } /* Synergy Stats */ .synergy-stats { padding: 10px; } .stats-title { margin: 0 0 16px 0; color: var(--accent-color); font-size: 1.1em; } .synergy-title { font-size: 1em; color: var(--text-secondary); margin: 16px 0 10px 0; } .synergy-count { margin: 0 0 10px 0; color: var(--text-muted); font-size: 0.9em; } .synergy-count strong { color: var(--accent-color); font-size: 1.2em; } /* Shared "a filter is active" banner (Combos + Synergies tabs) — a search query, a disabled category/effect filter, or (Combos only) a precise cross-tab jump from the Genome drawer's "See combo details". */ .filter-status-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 12px 0; padding: 6px 10px; background: var(--entry-hover-bg); border-radius: 6px; font-size: 0.85em; color: var(--text-secondary); } .filter-status-clear-btn { flex: 0 0 auto; max-width: fit-content; margin-left: auto; } /* Footer section of a combo widget — divider matches the header's `.info-header`. */ .combo-genome-link-row { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border-color); } /* Jumps back to the Genome tab with this combo's primary card focused. */ .combo-view-genome-btn { font-size: 0.78em; padding: 4px 10px; } .synergy-filter-row { margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .synergy-dropdown { flex: 1; padding: 10px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; color: var(--text-color); font-size: 1em; cursor: pointer; } .synergy-dropdown:focus { outline: none; border-color: var(--accent-color); } .synergy-badge-count { background: var(--accent-color); color: var(--bg-color); font-weight: bold; padding: 2px 10px; border-radius: 12px; font-size: 0.9em; min-width: 30px; text-align: center; } .synergy-badge-count.empty { background: var(--bg-secondary); color: var(--text-muted); } .no-synergies { color: var(--text-muted); font-style: italic; text-align: center; padding: 20px; } /* Flat synergy-pair list (Synergy tab) */ .synergy-pair-list, .addition-discovery-list { display: flex; flex-direction: column; gap: 10px; --synergy-card-preview-height: clamp(150px, 34vh, 380px); /* What a preview is *allowed* to take across, from the height it would reach at the standard 63:88 card ratio. The previews are laid out from this width rather than from their height, so a pair shrinks to whatever column it is in — a narrow docked pane included — instead of being cut off by it. Reading the height variable here means the clamps below still decide the size. */ --synergy-card-preview-width: calc(var(--synergy-card-preview-height) * 63 / 88); --synergy-group-card-width: clamp(107px, 24.3vh, 272px); } @supports (height: 1svh) { .synergy-pair-list, .addition-discovery-list { --synergy-card-preview-height: clamp(150px, 34svh, 380px); --synergy-group-card-width: clamp(107px, 24.3svh, 272px); } } .synergy-pair-row { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; background: var(--widget-bg); border: 1px solid var(--border-color); border-radius: 8px; box-sizing: border-box; } /* Centered header: title on line 1, category + strength on line 2. */ .synergy-pair-header { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; text-align: center; } .synergy-pair-meta { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; flex-wrap: wrap; } /* Cards row: image | direction | image — only the SVG between them. */ .synergy-pair-cards { display: flex; align-items: flex-start; justify-content: center; gap: 10px; width: 100%; } .synergy-pair-card { display: flex; flex-direction: column; align-items: center; gap: 6px; /* One preview wide at most, and free to shrink below that: two of these plus the arrow always fit their row. */ flex: 0 1 var(--synergy-card-preview-width); min-width: 0; text-align: center; } .synergy-pair-img { display: flex; justify-content: center; width: 100%; padding: 0; background: none; border: none; appearance: none; cursor: pointer; border-radius: 6px; overflow: hidden; line-height: 0; transition: transform 0.12s, box-shadow 0.12s; } @media (hover: hover) and (pointer: fine) { .synergy-pair-img:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } } /* The image fills the width its card was given, so it is as large as the clamps allow when there is room and no larger than its column when there is not. */ .synergy-pair-thumb { width: 100%; height: auto; display: block; border-radius: 6px; } .synergy-pair-name { font-size: 0.82em; font-weight: 600; color: var(--text-color); line-height: 1.2; } .synergy-pair-role { font-size: 0.72em; font-weight: 600; color: var(--accent-color); opacity: 0.95; text-align: center; line-height: 1.2; max-width: 100%; } .synergy-pair-direction { display: flex; align-items: center; justify-content: center; /* Centred between two previews whose height now follows their width. */ align-self: center; opacity: 0.9; flex-shrink: 0; color: var(--accent-color); } @media (max-width: 768px) { .synergy-pair-row { padding: 12px; } .synergy-pair-cards { gap: 8px; } } .synergy-pair-why { width: 100%; font-size: 0.95em; font-weight: 600; color: var(--text-color); line-height: 1.35; text-align: center; } .synergy-pair-category { font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); } /* Strength meter (right side of the header band) */ .synergy-pair-strength { display: flex; align-items: center; gap: 8px; flex: 0 1 200px; min-width: 120px; } .synergy-strength-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border-color, rgba(255, 255, 255, 0.12)); overflow: hidden; } .synergy-strength-fill { height: 100%; border-radius: 3px; background: var(--accent-color); transition: width 0.2s ease; } .synergy-strength-label { font-size: 0.72em; font-weight: 700; color: var(--text-muted); min-width: 34px; text-align: right; } /* Summary line under every entry's title: "N cards · M synergies". */ .synergy-pair-subtitle { font-size: 0.78em; font-weight: 600; color: var(--text-muted); line-height: 1.2; text-align: center; } /* Relational "pairing line": one sentence describing how the two cards' axes fit together. */ .synergy-pair-description { width: 100%; max-width: 46ch; margin: 0.15rem auto 0; font-size: 0.8em; font-weight: 500; color: var(--text-muted); line-height: 1.35; text-align: center; font-style: italic; } /* ── Consolidated shared-trait group row ───────────────────────────────────── A clique of cards that all share one trait (every flier, every Goblin) shown as a single entry: same row/header shell as a pair, with a wrapping grid of every card so the volume of the collection reads at a glance. Thumbnails are sized to match the pair widget's images exactly (so cards never look inconsistently scaled) — the group simply grows taller. */ .synergy-group-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px; width: 100%; } .synergy-group-card { display: flex; flex-direction: column; align-items: center; gap: 6px; /* Width chosen so the height-auto image lands at the same height as `.synergy-pair-thumb` (≈ 0.716 card aspect × that height clamp), keeping every preview the same size. */ width: var(--synergy-group-card-width); max-width: 100%; padding: 0; background: none; border: none; appearance: none; cursor: pointer; } .synergy-group-thumb { width: 100%; height: auto; display: block; border-radius: 6px; transition: transform 0.12s, box-shadow 0.12s; } @media (hover: hover) and (pointer: fine) { .synergy-group-card:hover .synergy-group-thumb { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } } .synergy-group-name { font-size: 0.82em; font-weight: 600; color: var(--text-color); line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Action bar (search · filter · sort) */ .synergy-action-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } /* `.standard-text-field` is `width: 100%`, so as a flex item in a wrapping row it claimed the whole first line and pushed Filter and Sort onto their own -- at every width, however much room was left over. As a sharing flex item it gives them the space when there is space. */ .synergy-action-bar > .standard-text-field { position: relative; flex: 1 1 240px; width: auto; min-width: 0; } /* Keep Filter + Sort as one responsive unit. When the full toolbar no longer fits, this unit wraps intact below the search field and the flexible search field fills its first row. */ .synergy-action-controls { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; max-width: 100%; } .synergy-action-controls .synergy-sort-select { min-width: 0; } .synergy-search-input { flex: 1; min-width: 160px; padding: 9px 12px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; color: var(--text-color); font-size: 0.95em; } .synergy-search-input:focus { outline: none; border-color: var(--accent-color); } .synergy-filter-wrap { position: relative; } .synergy-toolbar-btn { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; color: var(--text-color); font-size: 0.9em; cursor: pointer; white-space: nowrap; } .synergy-toolbar-btn:hover { border-color: var(--accent-color); } .synergy-toolbar-btn.active { border-color: var(--accent-color); color: var(--accent-color); } .synergy-filter-popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 120; min-width: min(280px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: 60vh; box-sizing: border-box; overflow-y: auto; background: var(--widget-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); } .synergy-filter-popover.combo-filter-popover { min-width: min(360px, calc(100vw - 24px)); width: min(420px, calc(100vw - 24px)); } .combo-filter-popover .synergy-filters-grid { grid-template-columns: 1fr; gap: 6px; } .combo-filter-popover .filter-item { gap: 10px; padding: 7px 8px; } .combo-filter-popover .filter-name { line-height: 1.25; white-space: normal; overflow-wrap: anywhere; } .combo-filter-popover .filter-count { margin-left: auto; flex-shrink: 0; } .synergy-sort-select { padding: 9px 12px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; color: var(--text-color); font-size: 0.9em; cursor: pointer; } .synergy-sort-select:focus { outline: none; border-color: var(--accent-color); } .synergy-list { display: flex; flex-direction: column; gap: 8px; } /* Stats Synergy Container */ .stats-synergy-container { background: var(--widget-bg); border-radius: 8px; padding: 12px; margin-top: 8px; } .stats-synergy-container .info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } .stats-synergy-container .info-header .info-name { font-weight: bold; color: var(--accent-color); font-size: 1.1em; } .stats-synergy-container .info-header .info-synergies { color: var(--text-secondary); font-size: 0.9em; } /* ============================================ COMBO WIDGET — redesigned layout ============================================ */ /* Produces tags row */ .combo-produces-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .combo-produce-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; font-size: 0.78em; font-weight: 600; background: rgba(var(--color-accent-rgb, 59, 130, 246), 0.1); color: var(--accent-light, #60a5fa); border: 1px solid rgba(var(--color-accent-rgb, 59, 130, 246), 0.3); white-space: nowrap; } /* Card images row */ /* Combo pieces share the available width (the more pieces, the narrower each), growing as large as the row allows — same responsive sizing approach as the Synergy-tab card previews. */ .combo-images-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; margin-bottom: 12px; } .combo-piece-wrapper { flex: 1 1 130px; min-width: 0; max-width: clamp(130px, 32vw, 320px); cursor: pointer; text-align: center; } .combo-piece-img { width: 100%; height: auto; display: block; border-radius: 4.75% / 3.5%; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .combo-piece-wrapper:hover .combo-piece-img { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7); } .combo-piece-name { display: block; margin-top: 0.55rem; color: var(--text-color); font-size: 0.82rem; font-weight: 700; line-height: 1.2; } .combo-piece-placeholder { flex: 1 1 130px; min-width: 0; max-width: clamp(130px, 32vw, 320px); aspect-ratio: 488 / 680; border-radius: 8px; background: var(--widget-bg); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 0.8em; color: var(--text-muted); } /* Description text */ .combo-description { font-size: 0.85em; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.5; font-style: italic; } /* Steps list */ .combo-steps { margin: 0; padding: 0; list-style: none; counter-reset: combo-step; display: flex; flex-direction: column; gap: 6px; } .combo-steps > li { counter-increment: combo-step; display: flex; align-items: flex-start; gap: 10px; font-size: 0.85em; line-height: 1.55; color: var(--text-color); position: relative; min-height: 28px; } .combo-steps > li::before { content: counter(combo-step); min-width: 22px; height: 22px; border-radius: 50%; background: var(--accent-gradient); color: var(--button-primary-text, white); font-size: 0.8em; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; position: relative; z-index: 1; } .combo-steps > li:not(:last-child)::after { content: ""; position: absolute; top: 23px; bottom: -7px; left: 10px; width: 2px; background: color-mix(in srgb, var(--accent-color) 55%, var(--border-color)); } /* Grouped Interactions Container */ .grouped-interactions-container { display: flex; gap: 20px; background: var(--widget-bg); border-radius: 8px; padding: 15px; } .focus-card-column { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .focus-card-image img { /* width: 100%; - REMOVED: Conflicts with .card-image-wrapper max-width sizing */ border-radius: 4.75% / 3.5%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); } .focus-card-name { font-weight: bold; color: var(--accent-color); text-align: center; font-size: 0.9em; } .interactions-list-column { flex: 1; display: flex; flex-direction: column; gap: 15px; } .synergy-group { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: flex-start; } .synergy-group-header { width: 100%; font-size: 0.85em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 4px; align-self: flex-start; } /* Partner Links */ .partner-link { display: inline-block; cursor: pointer; transition: color 0.2s ease; position: relative; padding: 2px 0; } .partner-link:hover { color: var(--accent-light); } .interaction-row { display: flex; align-items: center; padding: 4px 0 4px 15px; } .interaction-row:hover { background: var(--entry-hover-bg); border-radius: 4px; } .interaction-partner-name { flex: 1; text-align: left; font-weight: normal; color: var(--text-color); } .synergy-pair { display: flex; align-items: center; padding: 4px 0 4px 12px; font-size: 0.85em; color: var(--text-muted); } .pair-card { color: var(--text-color); } .pair-connector { margin: 0 8px; color: var(--accent-color); } .pair-card.hoverable { position: relative; cursor: pointer; font-weight: 500; } .pair-card.hoverable:hover { color: var(--accent-color); } /* Salt Score Widget */ .salt-score-widget { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--widget-bg); border-radius: 12px; min-width: 140px; min-height: 130px; } .salt-score-widget .stat-label { display: flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--text-muted); font-weight: 500; flex-shrink: 0; } /* salt-value: unique sizing for the salt percentage display */ .salt-value { font-size: 2em; font-weight: 700; line-height: 1; } .salt-total { font-size: 0.65em; color: var(--text-secondary); margin-top: 2px; padding: 2px 8px; background: var(--widget-bg); border-radius: 10px; } .salt-badge { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--widget-bg); border: 1px solid; border-radius: 8px; width: 100%; } .salt-badge-value { font-size: 1.3em; font-weight: 700; line-height: 1; } .salt-badge-label { font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .no-salt-data { color: var(--text-muted); font-style: italic; font-size: 0.85em; } /* CMC Widget */ .cmc-widget { min-width: 120px; } .cmc-content { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; } .cmc-extras { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; } .cmc-label { font-size: 0.9em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .cmc-flavor { font-size: 0.7em; color: var(--text-muted); font-style: italic; text-align: center; } /* Generic Widget Layout */ .widget-content { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; } .widget-extras { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; } .widget-label { font-size: 0.9em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .widget-flavor { font-size: 0.7em; color: var(--text-muted); font-style: italic; text-align: center; max-width: 140px; } .widget-pct { font-size: 0.7em; color: var(--text-secondary); padding: 2px 8px; background: var(--accent-bg); border-radius: 10px; } .bracket-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; } /* Sized to match .widget-pct so the Bracket tile lines up with its siblings */ .bracket-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 8px; border: none; border-radius: 10px; background: var(--accent-bg); color: var(--text-secondary); font-size: 0.7em; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .bracket-badge:hover, .bracket-badge:focus-visible { background: var(--accent-bg-hover); color: var(--accent-color); transform: translateY(-1px); } .bracket-badge-icon { width: 12px; height: 12px; flex: 0 0 12px; } /* Archetype Radar Chart */ .archetype-display { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; width: 100%; height: 100%; padding: 0; position: relative; } .radar-svg { width: 100%; max-width: 250px; max-height: 250px; overflow: visible; flex-shrink: 1; } .radar-grid { fill: none; stroke: var(--input-border); stroke-width: 1px; } .radar-axis { stroke: var(--input-border); stroke-width: 1px; } .radar-data { fill: var(--accent-bg); fill-opacity: 1; stroke: var(--accent-color); stroke-width: 2px; transition: all 0.5s ease-out; } .radar-point { fill: var(--accent-color); transition: all 0.5s ease-out; } .radar-label { fill: var(--text-muted); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .archetype-summary { margin-top: 4px; text-align: center; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); width: 100%; } /* Badge Styling */ .archetype-badge { position: relative; /* bottom: 8px; Removed relative to container */ /* left: 50%; Removed */ /* transform: translateX(-50%); Removed */ margin-top: -8px; /* Slight pull-up closer to chart */ margin-bottom: 4px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)); border: 1.5px solid var(--radar-color); border-radius: 20px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--radar-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); max-width: 90%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } /* Multi-color gradient border for combined archetypes */ .archetype-badge.multi { border: 2px solid transparent; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)) padding-box, linear-gradient(90deg, var(--color-1), var(--color-2)) border-box; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } /* Mobile Overrides */ /* ============================================ RESPONSIVE GRID LAYOUTS ============================================ */ /* Mobile Stack (< 1024px) */ @media (max-width: 1023px) { .stats-grid-main { display: flex; flex-direction: column; gap: 12px; } .stats-score-bar .stat-item { width: auto !important; min-height: 110px; padding: 10px; } .stats-grid-main .chart-container { height: auto !important; min-height: 180px; max-height: none !important; } /* Radar chart mobile overrides */ .grid-item-arch .chart-container { min-height: 280px !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .archetype-radar .archetype-display { position: relative !important; height: auto !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .archetype-radar .radar-svg { max-width: 220px !important; } .weakness-checklist, .synergy-cluster-list { columns: 1 !important; } .weakness-row { flex-direction: row; justify-content: space-between; gap: 4px; } .weakness-info { min-width: 0; flex: 1; } .weakness-name { font-size: 0.78em; } .weakness-level { font-size: 0.65em; padding: 1px 5px; } } /* Analysis-grid columns respond to the PANEL's width (container query on .stats-panel), not the viewport: the builder's panels resize independently of the window. Below the two-column minimum the base single-column layout applies, so widgets never get squeezed under their usable width. */ /* Standard panel width: two columns */ @container (min-width: 800px) { .stats-grid-main { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "arch cons" "mana type" "color prod" "rare tags" "actor synd" "weak weak" "func func" "syng syng" "comb comb"; } } /* Wide panel: three columns. Every row is fully assigned — no "." filler cells (they render as visible gaps) and no multi-column spans next to a single widget (they read as imbalanced sizing). */ @container (min-width: 1250px) { .stats-grid-main { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "arch tags cons" "mana rare type" "color prod actor" "synd synd synd" "weak weak weak" "func func func" "syng syng comb"; } } /* ============================================ NEW STATS INSIGHT ROWS (Rows 4 & 5) ============================================ */ /* ============================================ MANA PRODUCTION CHART ============================================ */ .mana-production-container { min-height: 240px; } .mana-prod-subtitle { font-size: 0.75em; color: var(--text-muted); text-align: center; margin-bottom: 10px; font-style: italic; } .mana-prod-empty { color: var(--text-muted); font-style: italic; font-size: 0.85em; text-align: center; padding: 16px 0; } .mana-prod-bars { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; padding: 4px 0; } /* Each color row: symbol | dual-bar group | warning */ .mana-prod-row { display: flex; align-items: center; gap: 6px; } .mana-prod-symbol { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .mana-sym-img { width: 20px; height: 20px; object-fit: contain; } /* Two-bar group (pips on top, srcs below) */ .mana-prod-bar-group { flex: 1; display: flex; flex-direction: column; gap: 3px; } .mana-prod-bar-row { display: flex; align-items: center; gap: 5px; } .mana-prod-bar-label { font-size: 0.62em; color: var(--text-muted); width: 26px; text-align: right; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em; } .mana-prod-bar-track { flex: 1; height: 11px; background: var(--chart-bar-track); border: 1px solid var(--chart-bar-track-border); border-radius: 4px; overflow: hidden; } .mana-prod-bar { height: 100%; border-radius: 4px; min-width: 2px; box-shadow: inset 0 0 0 1px var(--chart-bar-fill-outline); transition: width 0.35s ease; } .pip-bar { opacity: 1.0; } .src-bar { filter: brightness(0.78); } .mana-prod-bar-count { font-size: 0.65em; color: var(--text-muted); width: 18px; text-align: right; flex-shrink: 0; } /* Warning column */ .mana-prod-warn-col { width: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .mana-warn-badge { font-size: 0.85em; color: var(--warning-color); cursor: default; } /* Legend row at bottom */ .mana-prod-legend { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; font-size: 0.7em; color: var(--text-muted); } .mana-leg-pip { color: var(--accent-color); font-weight: 600; } .mana-leg-src { color: var(--text-secondary); } .mana-leg-warn { color: var(--warning-color); } /* ============================================ RELIABILITY DIAMOND (Consistency Widget) ============================================ */ .reliability-diamond-container { min-height: 240px; } .reliability-diamond { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; } /* SVG diamond chart */ .diamond-svg { width: 100%; max-width: 200px; max-height: 200px; overflow: visible; } .diamond-data { fill: var(--accent-bg); stroke: var(--accent-color); stroke-width: 2px; transition: all 0.5s ease-out; } .radar-node { cursor: help; transition: r 0.15s ease-out, opacity 0.15s; opacity: 0.9; } .radar-node:hover { r: 6; opacity: 1; } /* Label overrides — keep same size as archetype radar labels */ .diamond-label { fill: var(--text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Numeric score table below the diamond */ .diamond-scores { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 4px; } .diamond-score-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 8px; border-radius: 5px; background: var(--entry-bg); font-size: 0.78em; transition: background 0.15s; } .diamond-score-row:hover { background: var(--entry-hover-bg); } .diamond-score-row.score-warn { border-left: 2px solid var(--warning-color); } .diamond-axis-name { color: var(--text-secondary); font-weight: 500; } .diamond-axis-score-group { display: flex; align-items: baseline; gap: 2px; } .diamond-axis-value { font-weight: 700; font-size: 0.9em; text-align: right; } .diamond-axis-target { color: var(--text-muted); font-size: 0.85em; } @media (max-width: 768px) { .diamond-scores { grid-template-columns: 1fr; } .diamond-score-row { gap: 10px; } .diamond-axis-name { min-width: 0; } .diamond-axis-score-group { flex: 0 0 auto; white-space: nowrap; } } /* Hint list */ .diamond-hints { width: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } /* Standardized Stat Insights */ .stat-insight { font-size: 0.74em; margin: 0; padding: 6px 10px; border-radius: 0 4px 4px 0; border-left: 3px solid transparent; line-height: 1.4; display: flex; align-items: flex-start; gap: 6px; width: 100%; box-sizing: border-box; animation: fadeIn 0.3s ease-out; } .stat-insight-icon { flex-shrink: 0; font-size: 1.1em; margin-top: 2px; } .stat-insight-content { flex: 1; display: inline; } .insight-warning { color: var(--warning-color); background: rgba(255, 215, 0, 0.06); border-left-color: var(--warning-color); } .insight-critical { color: var(--danger-color); background: rgba(255, 77, 77, 0.06); border-left-color: var(--danger-color); } .insight-info { color: var(--type-instant); background: rgba(52, 152, 219, 0.06); border-left-color: var(--type-instant); } .insight-success { color: var(--success-color); background: rgba(76, 175, 80, 0.06); border-left-color: var(--success-color); } .curve-insights { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 12px; } .insights-list { display: flex; flex-direction: column; gap: 8px; } /* ============================================ TAG CLOUD ============================================ */ .tag-cloud-container { min-height: 240px; display: flex; flex-direction: column; } /* Toggle Button in footer */ .tag-cloud-toggle { font-size: 0.72em; padding: 3px 8px; background: var(--accent-bg); border: 1px solid var(--accent-color); border-radius: 10px; color: var(--accent-color); cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; font-family: inherit; } .tag-cloud-toggle:hover { background: var(--accent-color); color: var(--bg-color); } .tag-cloud-footer { display: flex; justify-content: flex-end; padding-right: 8px; margin-top: auto; } .tag-cloud-empty { color: var(--text-muted); font-style: italic; font-size: 0.85em; text-align: center; padding: 20px 0; flex: 1; display: flex; align-items: center; justify-content: center; } /* Chip cloud wrapper */ .tag-cloud-chips { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px; line-height: 1.8; } /* Individual pill chip */ .tag-cloud-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 14px; border: 1px solid transparent; font-weight: 600; letter-spacing: 0.02em; cursor: default; transition: opacity 0.2s, transform 0.15s; } .tag-cloud-chip:hover { opacity: 0.85; transform: scale(1.06); } /* Count badge inside chip */ .tag-cloud-count { font-size: 0.72em; font-weight: 500; opacity: 0.75; background: var(--accent-bg); border: 1px solid var(--accent-color); padding: 0 4px; border-radius: 6px; min-width: 14px; text-align: center; } /* ============================================ SYNERGY DENSITY SCORE ============================================ */ .synergy-density-container { min-height: 240px; } .synergy-density-empty { color: var(--text-muted); font-style: italic; font-size: 0.85em; text-align: center; padding: 20px 0; } .synergy-density-body { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; } /* Donut ring */ .synergy-donut-wrapper { display: flex; flex-direction: column; align-items: center; gap: 4px; } .synergy-donut { overflow: visible; transition: all 0.4s ease; } .synergy-donut-pct { font-size: 13px; font-weight: 700; fill: var(--text-color); } .synergy-donut-label { font-size: 0.74em; color: var(--text-muted); font-style: italic; text-transform: capitalize; letter-spacing: 0.04em; } /* Cluster list */ .synergy-cluster-list { width: 100%; columns: 1; gap: 16px; } @media (min-width: 900px) { .synergy-cluster-list { columns: 2; } } @media (min-width: 1400px) { .synergy-cluster-list { columns: 3; } } .synergy-cluster-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin-bottom: 4px; border-radius: 6px; font-size: 0.78em; transition: background 0.15s; break-inside: avoid; } .synergy-cluster-row:hover { background: var(--entry-hover-bg); } .cluster-name { flex: 1; font-weight: 500; color: var(--text-color); } .cluster-edges { font-size: 0.85em; color: var(--text-muted); min-width: 20px; text-align: right; } .synergy-cluster-more { color: var(--text-muted); font-size: 0.76em; font-style: italic; padding: 4px 8px; break-inside: avoid; } .synergy-density-empty-inline { width: 100%; padding: 4px 8px; } /* ============================================ Vulnerability PROFILE ============================================ */ .weakness-profile-container { min-height: 240px; } /* Card Link in Suggestions */ .card-link-suggestion { color: var(--accent-color); cursor: pointer; text-decoration: none; font-weight: 600; transition: all 0.2s ease; border-bottom: 1px solid transparent; /* Subtle space where underline would be */ padding-bottom: 1px; } .card-link-suggestion:hover { color: var(--accent-light, #c0c0ff); border-bottom: 1px solid var(--accent-glow); filter: brightness(1.1); } .weakness-checklist { width: 100%; columns: 1; gap: 12px; } @media (min-width: 900px) { .weakness-checklist { columns: 2; } } .weakness-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; margin-bottom: 8px; border-radius: 8px; border-left: 3px solid transparent; background: var(--entry-bg); transition: background 0.15s; flex-wrap: wrap; break-inside: avoid; } .weakness-row:hover { background: var(--entry-hover-bg); } .check-healthy { border-left-color: var(--success-color); } .check-minor { border-left-color: var(--type-instant); } .check-moderate { border-left-color: var(--warning-color); } .check-critical { border-left-color: var(--danger-color); } .weakness-icon { font-size: 0.9em; flex-shrink: 0; margin-top: 1px; } .weakness-info { display: flex; flex-direction: column; flex: 1; min-width: 100px; } .weakness-name { font-size: 0.82em; font-weight: 600; color: var(--text-color); } .weakness-count { font-size: 0.72em; color: var(--text-muted); } .weakness-level { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; align-self: flex-start; } .check-healthy .weakness-level { background: rgba(76, 175, 80, 0.15); color: var(--success-color); } .check-minor .weakness-level { background: rgba(52, 152, 219, 0.15); color: var(--type-instant); } .check-moderate .weakness-level { background: var(--warning-bg); color: var(--warning-color); } .check-critical .weakness-level { background: var(--danger-bg); color: var(--danger-color); } .weakness-hint { width: 100%; margin: 4px 0 0 0; font-size: 0.74em; color: var(--text-secondary); font-style: italic; line-height: 1.4; } /* ============================================ FUNCTIONAL CURVE — CAST TIMING WINDOW ============================================ */ .functional-curve-container { min-height: 240px; } /* ── Main wrapper ── */ .fc-main-wrapper { display: flex; flex-direction: column; gap: 8px; width: 100%; position: relative; } /* ── Heat Map ── */ .fc-heatmap-section { width: 100%; overflow-x: auto; padding-bottom: 2px; } .fc-heat-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0; } .fc-heat-cmc-header { width: 36px; font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; text-align: right; padding-right: 6px; vertical-align: bottom; padding-bottom: 4px; } .fc-heat-turn-header { font-size: 9px; font-weight: 600; color: var(--text-muted); text-align: center; padding-bottom: 4px; vertical-align: bottom; } .fc-heat-cmc-label { font-size: 9px; font-weight: 700; color: var(--text-secondary); text-align: right; padding-right: 6px; vertical-align: middle; white-space: nowrap; } .fc-heat-row { height: 22px; } .fc-heat-cell { text-align: center; vertical-align: middle; border-radius: 2px; cursor: default; transition: filter 0.12s, border-color 0.12s; position: relative; } .fc-heat-cell:hover { filter: brightness(1.35); border-color: var(--border-hover) !important; z-index: 2; } /* High-coverage cell marker dot */ .fc-heat-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-secondary); vertical-align: middle; } .fc-heat-turn-label { font-size: 0.72em; color: var(--text-muted); text-align: center; margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; } /* ── Lane Toggle Button ── */ .fc-lane-toggle { align-self: center; background: var(--button-bg); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-muted); font-size: 0.72em; padding: 4px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; font-family: inherit; letter-spacing: 0.03em; z-index: 10; position: relative; } .fc-lane-toggle:hover { background: var(--entry-hover-bg); color: var(--text-color); } /* ── Swim Lane Section ── */ .chart-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .chart-title-row.centered { justify-content: center; position: relative; } .chart-title-row.centered .fc-axis-hint { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .chart-title-row .chart-title { margin: 0; } /* Wrapper holds the SVG + tooltip */ .fc-wrapper { position: relative; width: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .fc-plot-svg { width: 100%; height: auto; display: block; overflow: visible; } .fc-empty { color: var(--text-muted); font-style: italic; font-size: 0.85em; text-align: center; padding: 20px 0; } .fc-axis-hint { font-size: 0.7em; color: var(--text-muted); font-style: italic; letter-spacing: 0.04em; opacity: 0.8; } /* ── SVG text elements ── */ .fc-axis-label { font-size: 8px; fill: var(--text-muted, #777); font-family: inherit; } .fc-axis-label-main { font-size: 10px; font-weight: 700; fill: var(--text-secondary, #bbb); font-family: inherit; letter-spacing: 0.05em; text-transform: uppercase; } .fc-band-label { font-size: 8px; font-weight: 700; fill: var(--text-secondary, #999); font-family: inherit; } .fc-grid-line { stroke: var(--border-color); stroke-width: 1; } /* ── Swim lane segment colors ── */ .fc-seg { rx: 0.5; transition: filter 0.15s, opacity 0.15s, stroke 0.15s; pointer-events: none; } /* Sweet Spot — bright teal; fully opaque so it paints over the heat map background */ .fc-seg-sweet { fill: var(--fc-sweet-spot); opacity: 1.0; } /* Declining Value — warm orange; fully opaque over heat map */ .fc-seg-declining { fill: var(--fc-less-value); opacity: 1.0; } /* Reactive — complementary warm color; slightly more opaque so it shows over heat map */ .fc-seg-reactive { fill: var(--fc-reactive); opacity: 0.80; } /* Reliability marker — dot at expected_turn (where avg hand can cast it) */ .fc-dot-expected { fill: var(--fc-sweet-spot); stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.5px; filter: drop-shadow(0 0 1.5px rgba(45, 212, 196, 0.6)); pointer-events: none; } .fc-window-arrow { font-size: 8px; fill: var(--fc-less-value); font-family: inherit; font-weight: bold; pointer-events: none; } /* ── Swim lane hover highlighting ── */ .fc-window { transition: transform 0.1s; pointer-events: all; } .fc-row-highlighter { opacity: 0; transition: opacity 0.1s; fill: rgba(255, 255, 255, 0.08); pointer-events: none; } .fc-window:hover .fc-row-highlighter { opacity: 1; } .fc-window:hover .fc-seg { filter: brightness(1.35) contrast(1.1); opacity: 1; stroke: rgba(255, 255, 255, 0.7) !important; stroke-width: 0.4px; } .fc-window:hover .fc-dot-expected { filter: brightness(1.5) drop-shadow(0 0 3px rgba(45, 212, 196, 1)); stroke: white !important; } .fc-hover-target { cursor: crosshair; pointer-events: all !important; } /* ── Tooltip ── */ .fc-tooltip { position: absolute; pointer-events: none; background: var(--card-bg, #1a1b26); border: 1px solid var(--border-color, #414868); border-radius: 4px; padding: 6px 12px; font-size: 11px; color: var(--text-color, #c0caf5); white-space: nowrap; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); z-index: 1000; } /* ── Controls bar (button row below SVG) ── */ .fc-controls-row { display: flex; justify-content: flex-end; padding: 4px 0; } /* ── Legend (3 items) ── */ .fc-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; font-size: 0.72em; color: var(--text-muted); } .fc-legend-item { display: flex; align-items: center; gap: 5px; } .fc-legend-item::before { content: ""; display: inline-block; border-radius: 2px; width: 10px; height: 3px; } .fc-leg-sweet::before { background: #2dd4c4; } .fc-leg-declining::before { background: #f39c12; } .fc-leg-reactive::before { background: #3498db; opacity: 0.6; } /* X spell legend: gradient orange (less value) -> teal (sweet spot) */ .fc-leg-x-spell::before { background: linear-gradient(to right, #f39c12 40%, #2dd4c4 60%); } /* Teal arrow on X spell lines (always-scaling indicator) */ .fc-window-arrow-sweet { font-size: 8px; fill: #2dd4c4; font-family: inherit; font-weight: bold; pointer-events: none; } /* ============================================ ANALYSIS PANEL SCROLL CONTAINER Shared outer wrapper for Combos and Synergies panels ============================================ */ .analysis-panel-scroll { display: flex; flex-direction: column; flex: 1; overflow-y: auto; padding: 0 20px 20px; } @media (max-width: 1023px) { .analysis-panel-scroll { padding: 0 8px 20px; } } /* Synergy Grouping Controls */ .synergy-pair-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-color); } .synergy-expand-btn { background: transparent; border: none; color: var(--accent-color); font-size: 0.8em; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 4px; transition: background 0.2s; } .synergy-expand-btn:hover { background: rgba(var(--color-accent-rgb), 0.1); } .synergy-cycle-controls { grid-column: 2; display: flex; align-items: center; gap: 12px; background: var(--widget-bg); padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border-color); } .synergy-nav-btn { background: transparent; border: none; color: var(--text-color); font-size: 1.1em; cursor: pointer; padding: 0 6px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .synergy-nav-btn:hover:not(:disabled) { color: var(--accent-color); } .synergy-nav-btn:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.5; } .synergy-cycle-count { font-size: 0.75em; color: var(--text-secondary); min-width: 45px; text-align: center; } .synergy-report-btn { grid-column: 3; justify-self: end; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--widget-bg); border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; font-weight: 800; line-height: 1; transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s; } .synergy-report-btn:hover { color: var(--accent-color); border-color: var(--accent-color); background: rgba(var(--color-accent-rgb), 0.1); transform: translateY(-1px); } .modal-content.synergy-report-modal { width: 720px; max-width: 95vw; max-height: 90vh; background: var(--popup-bg); border: 1px solid var(--popup-border); border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; } .modal-content.synergy-report-modal .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.02); } .modal-content.synergy-report-modal .modal-header h3 { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--text-primary); } .modal-content.synergy-report-modal .synergy-report-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; flex: 1; } .modal-content.synergy-report-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.02); } .modal-content.synergy-report-modal p { margin: 0; color: var(--text-secondary); line-height: 1.5; } .synergy-report-copy { display: flex; flex-direction: column; gap: 12px; } .modal-content.synergy-report-modal a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-color); font-weight: 700; text-decoration: none; } .modal-content.synergy-report-modal a:hover { text-decoration: underline; } .synergy-report-capture { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--widget-bg); border: 1px solid var(--border-color); border-radius: 8px; } .capture-label { color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .synergy-report-card-list { display: flex; flex-wrap: wrap; gap: 6px; } .synergy-report-card-chip { padding: 3px 7px; background: rgba(var(--color-accent-rgb), 0.14); border: 1px solid rgba(var(--color-accent-rgb), 0.35); border-radius: 6px; color: var(--text-color); font-size: 0.78rem; } /* Synergy Density insight banners stretch the full widget width */ .synergy-density-insights { width: 100%; margin-top: 10px; } /* Deck-aware addition discovery shared by the Synergies and Combos tabs. */ .addition-mode-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 16px; margin: 12px 0; } .addition-mode-row .synergy-count { margin: 0; } .addition-explore-btn { flex: 0 0 auto !important; width: auto !important; max-width: max-content; margin-left: auto; border-color: rgba(var(--color-accent-rgb), 0.55); background: rgba(var(--color-accent-rgb), 0.12); color: var(--accent-color); white-space: nowrap; } .addition-discovery { display: flex; flex-direction: column; gap: 14px; width: 100%; padding-top: 8px; } .addition-discovery > .synergy-action-bar, .addition-discovery > .filter-status-banner { margin-bottom: 0; } .addition-discovery > .filter-status-banner { margin-top: 0; } .addition-discovery-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; box-sizing: border-box; padding: 10px 16px; background: var(--background-color, var(--panel-bg)); border-bottom: 1px solid var(--border-color); } .addition-discovery-header > div { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; gap: 2px; } .addition-discovery-header strong { color: var(--text-color); font-size: 1rem; } .addition-discovery-header span { color: var(--text-muted); font-size: 0.75rem; } .addition-discovery-back { flex: 0 0 auto; width: auto; max-width: max-content; margin-left: auto; min-height: 34px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--widget-bg); color: var(--text-color); cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 700; white-space: nowrap; } .addition-discovery-back:hover, .addition-discovery-back:focus-visible { border-color: var(--accent-color); color: var(--accent-color); } .addition-discovery-status, .addition-discovery-empty { margin: 0; padding: 28px 18px; border: 1px dashed var(--border-color); border-radius: 10px; color: var(--text-muted); text-align: center; } .addition-discovery-empty p { margin: 0 0 12px; } .addition-discovery-list { display: flex; flex-direction: column; gap: 14px; width: 100%; } .addition-discovery-list > .addition-discovery-empty { box-sizing: border-box; width: 100%; } @keyframes addition-discovery-candidate-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .addition-discovery-candidate-enter { opacity: 0; animation: addition-discovery-candidate-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--addition-index, 0) * 65ms); will-change: opacity, transform; } .addition-candidate-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--widget-bg); box-shadow: 0 5px 18px rgba(0, 0, 0, 0.14); } .addition-candidate-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .addition-candidate-card > header > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .addition-candidate-card > header strong { color: var(--text-color); overflow-wrap: anywhere; } .addition-candidate-card > header span:not(.addition-impact-badge) { color: var(--text-muted); font-size: 0.78rem; } .addition-impact-badge, .addition-new-label { display: inline-flex; align-items: center; width: max-content; padding: 3px 7px; border: 1px solid rgba(var(--color-accent-rgb), 0.45); border-radius: 999px; background: rgba(var(--color-accent-rgb), 0.12); color: var(--accent-color); font-size: 0.7rem; font-weight: 800; white-space: nowrap; } .addition-category-chips { display: flex; flex-wrap: wrap; gap: 5px; } .addition-category-chips span { padding: 3px 7px; border-radius: 999px; background: var(--accent-bg); color: var(--text-secondary); font-size: 0.68rem; font-weight: 700; } .addition-pair-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; } .addition-pair-cards > div, .addition-new-card { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--text-secondary); font-size: 0.78rem; text-align: center; } .addition-new-card { padding: 8px; border: 1px dashed var(--accent-color); border-radius: 9px; background: rgba(var(--color-accent-rgb), 0.06); } .addition-connector { color: var(--accent-color); font-size: 1.2rem; } .addition-reason { padding: 10px; border-radius: 8px; background: rgba(var(--color-accent-rgb), 0.06); } .addition-reason p { margin: 7px 0 0; color: var(--text-secondary); font-size: 0.82rem; line-height: 1.45; } .addition-candidate-card > footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 34px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-color); color: var(--text-muted); font-size: 0.78rem; } .addition-add-control { grid-column: 3; justify-self: end; flex: 0 0 auto !important; margin-left: auto; } .synergy-addition-row, .combo-addition-card { width: 100%; box-sizing: border-box; } .synergy-addition-row .addition-category-chips { justify-content: center; } .synergy-addition-row .synergy-pair-cards, .combo-addition-images { padding-top: 30px; } .synergy-addition-row .synergy-pair-card { position: relative; box-sizing: content-box; padding: 12px 8px 8px; border: 1px solid transparent; } .synergy-addition-row .synergy-pair-card.addition-new-card, .combo-addition-images .combo-piece-wrapper.addition-new-card { border: 1px dashed var(--accent-color); background: rgba(var(--color-accent-rgb), 0.06); } .synergy-addition-row .addition-new-label, .combo-addition-images .addition-new-label { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 1; box-shadow: 0 0 0 4px var(--widget-bg); } .synergy-addition-row .synergy-pair-direction { margin-top: 9px; } .addition-candidate-footer { min-height: 38px; } .combo-addition-card { margin-top: 0; border: 1px solid var(--border-color); } .combo-addition-images { align-items: flex-start; } .combo-addition-images .combo-piece-wrapper { position: relative; flex: 0 0 var(--synergy-group-card-width); width: var(--synergy-group-card-width); max-width: 100%; box-sizing: content-box; padding: 12px 8px 8px; border: 1px solid transparent; } .combo-addition-images .addition-new-card { flex-basis: var(--synergy-group-card-width); max-width: 100%; box-sizing: content-box; } .combo-addition-images .combo-piece-img { width: 100%; height: auto; } .combo-addition-card .combo-steps { width: min(100%, 920px); margin: 0 auto; } .combo-addition-footer { margin-top: 14px; } .combo-addition-layout { display: grid; grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr); gap: 14px; align-items: center; } .combo-addition-details { display: flex; flex-direction: column; gap: 9px; min-width: 0; color: var(--text-secondary); font-size: 0.82rem; } .combo-owned-pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 110px)); gap: 9px; } .combo-owned-piece { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--text-color); font-size: 0.7rem; text-align: center; } .combo-owned-piece-image { display: block; width: 100%; } @media (max-width: 640px) { .synergy-pair-list, .addition-discovery-list { --synergy-card-preview-height: clamp(118px, 29vh, 250px); --synergy-group-card-width: clamp(84px, 34vw, 150px); } @supports (height: 1svh) { .synergy-pair-list, .addition-discovery-list { --synergy-card-preview-height: clamp(118px, 29svh, 250px); } } .addition-mode-row { align-items: center; } .addition-explore-btn { align-self: flex-end; width: auto !important; } .addition-discovery-header { align-items: center; } .addition-discovery-back { align-self: flex-start; width: auto; margin-left: 0; } .stats-synergy-container .info-header { flex-direction: column; align-items: flex-start; gap: 4px; } .stats-synergy-container .info-header .info-name, .stats-synergy-container .info-header .info-synergies, .synergy-pair-header, .synergy-pair-why, .synergy-pair-subtitle, .synergy-pair-description { text-align: left; } .synergy-pair-header { align-items: flex-start; } .synergy-pair-description { margin-left: 0; margin-right: 0; } .combo-images-row { gap: 8px; } .synergy-addition-row .synergy-pair-cards { gap: 14px; } .combo-piece-wrapper, .combo-addition-images .combo-piece-wrapper, .combo-addition-images .addition-new-card { flex: 0 1 calc(50% - 4px); width: calc(50% - 4px); max-width: 150px; box-sizing: border-box; } .combo-addition-images .combo-piece-wrapper, .synergy-addition-row .synergy-pair-card { padding: 12px 6px 6px; } .synergy-addition-row .synergy-pair-card { box-sizing: border-box; } .addition-candidate-footer { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .synergy-addition-row .synergy-pair-direction { height: auto; min-height: 100%; margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .addition-discovery-candidate-enter { opacity: 1; animation: none; transform: none; will-change: auto; } } /* A descriptor under a widget label (the vendor a price came from): the same italic voice as the flavour lines, on its own row. */ .stat-sublabel { display: block; font-size: 0.7em; line-height: 1.1; color: var(--text-muted); font-style: italic; text-align: center; margin: 0 0 8px; } .price-widget .stat-label { margin-bottom: 1px; } /* A shade more solid than the widgets it floats over, so the list beneath does not read through the checkboxes. */ .synergy-filter-popover { background: color-mix(in srgb, var(--bg-color) 96%, transparent); } /* Synergy report modal on the BaseModal shell: the body keeps its stacked sections, and the copy/link styling that used to key off .modal-content. */ .base-modal.synergy-report-modal .base-modal-body { display: flex; flex-direction: column; gap: 18px; } .base-modal.synergy-report-modal p { margin: 0; color: var(--text-secondary); line-height: 1.5; } .base-modal.synergy-report-modal a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-color); font-weight: 700; text-decoration: none; } .base-modal.synergy-report-modal a:hover { text-decoration: underline; }