/* ============================================================ THEME — CSS custom properties Default: Solarized Dark. Toggled via [data-theme="light"] on . ============================================================ */ :root { /* Solarized Dark */ --bg: #002b36; --bg2: #073642; --card: #00212b; --card-border:#0a4555; --border: #124050; --hover: rgba(255, 255, 255, 0.04); --fg-em: #93a1a1; /* base1 — emphasized */ --fg: #839496; /* base0 — body text */ --fg-mid: #7a8f95; /* midpoint — between fg and fg-dim */ --fg-dim: #586e75; /* base01 — secondary */ --fg-faint:#3d5560; /* very faint */ --accent: #dc322f; --accent-hover: #c12020; --green: #2aa198; --yellow: #b58900; --blue: #268bd2; --win-bg: rgba(42, 161, 152, 0.12); --warn-bg: rgba(181, 137, 0, 0.12); } [data-theme="light"] { /* Solarized Light */ --bg: #fdf6e3; --bg2: #eee8d5; --card: #f5efe0; --card-border:#cdc3ae; --border: #d3c9b5; --hover: rgba(0, 0, 0, 0.05); --fg-em: #586e75; /* base01 */ --fg: #657b83; /* base00 */ --fg-mid: #7c8e94; /* midpoint — between fg and fg-dim */ --fg-dim: #93a1a1; /* base1 */ --fg-faint:#aab8b8; --accent: #dc322f; --accent-hover: #c12020; --green: #2aa198; --yellow: #b58900; --blue: #268bd2; --win-bg: rgba(42, 161, 152, 0.12); --warn-bg: rgba(181, 137, 0, 0.12); } /* ============================================================ RESET & BASE ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; transition: background 0.2s, color 0.2s; } .container { max-width: 700px; margin: 0 auto; padding: 2rem 1rem; } /* ============================================================ HEADER & NAV ============================================================ */ header { text-align: center; margin-bottom: 2rem; position: relative; padding-top: 2.2rem; } header h1 { font-family: 'UnifrakturMaguntia', serif; font-size: 2.4rem; color: var(--accent); letter-spacing: 0.05em; font-weight: 400; } .subtitle { color: var(--fg-dim); margin-top: 0.25rem; } .title-link { color: inherit; text-decoration: none; } .title-link:hover { opacity: 0.85; } .site-nav { margin-top: 0.75rem; display: flex; justify-content: center; gap: 1.5rem; font-size: 0.9rem; } .site-nav a { color: var(--fg-dim); text-decoration: none; } .site-nav a:hover { color: var(--fg-em); } .nav-rss-link { display: inline-flex; align-items: center; } .nav-rss-icon { width: 1em; height: 1em; vertical-align: middle; } /* Theme toggle */ .theme-toggle { position: absolute; right: 0; top: 0; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.3rem 0.45rem; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--fg-em); border-color: var(--fg-dim); } /* Difficulty 3-state segmented switch */ .difficulty-switch { position: absolute; left: 0; top: 0; display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; line-height: 1; } .difficulty-switch input[type="radio"] { display: none; } .difficulty-switch label { padding: 0.3rem 0.38rem; cursor: pointer; color: var(--fg-dim); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border-right: 1px solid var(--border); background: transparent; user-select: none; transition: color 0.15s, background 0.15s; } .difficulty-switch label:last-child { border-right: none; } .difficulty-switch label:hover { color: var(--fg-em); } #diff-easy:checked + label { color: var(--blue); background: rgba(38, 139, 210, 0.12); } #diff-medium:checked + label { color: var(--fg-em); background: var(--hover); } #diff-hard:checked + label { color: var(--accent); background: rgba(220, 50, 47, 0.12); } #diff-xhard:checked + label { color: var(--yellow); background: rgba(181, 137, 0, 0.12); } /* Blue dot on difficulties with an incomplete daily game */ .difficulty-switch label:not(.daily-done)::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); vertical-align: super; margin-left: 2px; opacity: 0.85; } /* Result blurb (shown after win/gave-up) */ .result-blurb { margin-top: 0.5rem; margin-bottom: 1rem; } .post-game-actions { margin: 0.5rem 0 1rem; text-align: center; } .new-game-link { color: var(--accent); text-decoration: none; font-size: 0.9rem; } .new-game-link:hover { text-decoration: underline; } .share-btn { background: none; border: 1px solid var(--fg-dim); color: var(--fg); border-radius: 4px; padding: 0.2rem 0.7rem; font-size: 0.9rem; cursor: pointer; } .share-btn:hover { border-color: var(--fg); } /* ============================================================ GUESS FORM ============================================================ */ .guess-form { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .input-wrapper { flex: 1; position: relative; } .guess-form input[type="text"] { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 6px; background: var(--bg2); color: var(--fg-em); font-size: 1rem; } .guess-form input[type="text"]:focus { outline: none; border-color: var(--accent); } .guess-form button { padding: 0.75rem 1.5rem; border: none; border-radius: 6px; background: var(--accent); color: var(--bg); font-size: 1rem; cursor: pointer; } .guess-form button:hover { background: var(--accent-hover); } /* ============================================================ AUTOCOMPLETE ============================================================ */ .autocomplete-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 0 0 6px 6px; max-height: 300px; overflow-y: auto; z-index: 10; } .autocomplete-item { padding: 0.5rem 1rem; cursor: pointer; display: flex; justify-content: space-between; } .autocomplete-item:hover, .autocomplete-item.active { background: var(--hover); } .ac-iso { color: var(--fg-dim); font-size: 0.85rem; } .ac-alias { color: var(--fg-dim); font-size: 0.85rem; font-style: italic; } /* ============================================================ FEEDBACK ============================================================ */ .error { color: var(--accent); margin-bottom: 1rem; padding: 0.5rem; border: 1px solid var(--accent); border-radius: 6px; } .guess-count { color: var(--fg-dim); margin-bottom: 1rem; } .daily-badge { text-align: center; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 0.8rem; } .win-banner { background: var(--win-bg); border: 2px solid var(--green); color: var(--green); padding: 1rem; border-radius: 8px; text-align: center; margin-bottom: 1.5rem; font-size: 1.1rem; } .gave-up-banner { background: var(--warn-bg); border: 2px solid var(--yellow); color: var(--yellow); padding: 1rem; border-radius: 8px; text-align: center; margin-bottom: 1.5rem; font-size: 1.1rem; } /* ============================================================ FAMILY BLURB BOX ============================================================ */ .blurb-box { margin-top: 1.25rem; background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.95rem; } .blurb-header { font-weight: bold; margin-bottom: 0.3rem; color: var(--fg-em); } .blurb-header a { color: var(--blue); text-decoration: none; } .blurb-header a:hover { text-decoration: underline; } .blurb-body { color: var(--fg); } .blurb-stat { color: var(--fg-em); font-weight: bold; } .blurb-label { color: var(--fg-dim); font-size: 0.85rem; font-variant: small-caps; margin-right: 0.2rem; } .blurb-links { float: right; font-weight: normal; } .blurb-ext-link { color: var(--blue); font-size: 0.8rem; text-decoration: none; margin-left: 0.4rem; } .blurb-ext-link:hover { text-decoration: underline; } .blurb-map, .info-panel-map { float: right; max-width: 160px; max-height: 160px; width: auto; height: auto; border-radius: 4px; margin: 0 0 0.5rem 0.75rem; background: #e8e8e8; display: block; } /* Clearfix so blurb-box expands around the floated image */ .blurb-box::after { content: ""; display: table; clear: both; } .blurb-wiki { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--card-border); color: var(--fg); font-size: 0.88rem; line-height: 1.5; } /* ============================================================ AES ENDANGERMENT BADGES ============================================================ */ .blurb-aes, .info-panel-aes { font-size: 0.78rem; font-variant: small-caps; padding: 0.1rem 0.35rem; border-radius: 3px; font-weight: bold; } .aes-not-endangered { background: #0a2a0a; color: #4dbb4d; } .aes-threatened { background: #2a2a0a; color: #c8c84d; } .aes-shifting { background: #2a1a0a; color: #d4884d; } .aes-moribund { background: #2a0a0a; color: #d45a4d; } .aes-nearly-extinct { background: #2a0a18; color: #d44d8a; } .aes-extinct { background: #1a1a1a; color: #888; } [data-theme="light"] .aes-not-endangered { background: #d4f0d4; color: #1a6b1a; } [data-theme="light"] .aes-threatened { background: #f0f0d4; color: #6b6b00; } [data-theme="light"] .aes-shifting { background: #f0e8d4; color: #7a3500; } [data-theme="light"] .aes-moribund { background: #f0d4d4; color: #7a1a1a; } [data-theme="light"] .aes-nearly-extinct { background: #f0d4e8; color: #7a1a4a; } [data-theme="light"] .aes-extinct { background: #e0e0e0; color: #555; } /* ============================================================ GAME TREE ============================================================ */ .tree-container { margin-top: 1rem; } .tree, .tree ul { list-style: none; padding-left: 1.5rem; } .tree { padding-left: 0; } .tree-node { position: relative; padding: 0.2rem 0; } .tree ul { border-left: 1px solid var(--border); margin-left: 0.5rem; } .tree li { padding-left: 1rem; } .tree ul > li::before { content: ""; position: absolute; left: -1rem; top: 0.75rem; width: 1rem; border-bottom: 1px solid var(--border); } .node-label { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.4rem; border-radius: 3px; } .family-node > .node-label { color: var(--fg-dim); } .guess-node > .node-label { background: var(--bg2); color: var(--fg-em); } .guess-marker { color: var(--accent); font-weight: bold; margin-right: 0.25rem; } .hint-node > .node-label { color: var(--yellow); font-style: italic; } .target-placeholder > .node-label { color: var(--green); font-style: italic; font-weight: bold; } .target-revealed > .node-label { background: var(--green); color: var(--bg); font-weight: bold; } /* ============================================================ HINT BUTTON ============================================================ */ .hint-button { padding: 0.5rem 1rem; border: 1px solid var(--yellow); border-radius: 6px; background: transparent; color: var(--yellow); font-size: 0.9rem; cursor: pointer; } .hint-button:hover { background: var(--warn-bg); } /* ============================================================ STATS PAGE ============================================================ */ .stats-page { max-width: 480px; margin: 0 auto; padding: 0 0.5rem; } .stats-title { text-align: center; font-size: 1.1rem; letter-spacing: 0.08em; margin-bottom: 1rem; color: var(--fg-em); } .stats-tabs { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 1.2rem; } .stats-tab { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--fg); cursor: pointer; font-size: 0.85rem; padding: 0.3rem 0.8rem; transition: background 0.15s, color 0.15s; } .stats-tab:hover { background: var(--hover); } .stats-tab.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: bold; } .stats-summary { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; } .stats-summary-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .stats-num { font-size: 1.6rem; font-weight: bold; color: var(--fg-em); line-height: 1; } .stats-label { font-size: 0.7rem; color: var(--fg-mid); text-transform: uppercase; letter-spacing: 0.05em; } .stats-section-title { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mid); text-align: center; margin-bottom: 0.8rem; } .stats-histogram { margin-bottom: 1rem; } .hist-chart-area { display: flex; align-items: flex-end; gap: 4px; height: 120px; border-bottom: 1px solid var(--border); padding-bottom: 2px; } .hist-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .hist-count-above { font-size: 0.68rem; font-weight: bold; color: var(--fg-em); min-height: 1em; line-height: 1; margin-bottom: 2px; } .hist-bar { width: 100%; background: var(--green); border-radius: 3px 3px 0 0; transition: height 0.3s ease; } .hist-bar-loss { background: var(--accent); } .hist-bar-empty { background: var(--fg-faint); opacity: 0.4; } .hist-label { font-size: 0.72rem; color: var(--fg-mid); text-align: center; margin-top: 4px; white-space: nowrap; } .stats-note { text-align: center; color: var(--fg-mid); font-size: 0.9rem; margin-top: 1rem; } /* ============================================================== FOOTER ============================================================ */ .footer { margin-top: 2rem; text-align: center; } .footer a { color: var(--accent); text-decoration: none; } .footer a:hover { text-decoration: underline; } /* ============================================================ LANGUAGES PAGE ============================================================ */ .languages-count { color: var(--fg-dim); margin-bottom: 1rem; } .search-form { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .search-input { flex: 1; padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 6px; background: var(--bg2); color: var(--fg-em); font-size: 1rem; } .search-input:focus { outline: none; border-color: var(--accent); } .search-form button { padding: 0.75rem 1.5rem; border: none; border-radius: 6px; background: var(--accent); color: var(--bg); font-size: 1rem; cursor: pointer; } .languages-list { columns: 2; column-gap: 2rem; } .language-entry { padding: 0.2rem 0; break-inside: avoid; } .lang-iso { color: var(--fg-dim); font-size: 0.85rem; } /* ============================================================ EXPLORE PAGE — MINDMAP TREE ============================================================ */ .explore-header { margin-bottom: 1.2rem; padding-top: 2rem; /* clear toolbar buttons */ color: var(--fg-mid); font-size: 0.85rem; } /* Root list */ .explore-tree { list-style: none; padding: 0; margin: 0; } /* Children list — indented with connector lines */ .explore-children { list-style: none; padding: 0.1rem 0 0.1rem 1.8rem; margin: 0; position: relative; /* Slide-in on appear */ animation: exploreSlideIn 0.15s ease; } @keyframes exploreSlideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Vertical connector line running alongside siblings */ .explore-children::before { content: ''; position: absolute; left: 0.55rem; top: 0.72rem; bottom: 0.72rem; width: 1px; background: var(--border); pointer-events: none; } /* Horizontal branch to each row */ .explore-children > li { position: relative; } .explore-children > li::before { content: ''; position: absolute; left: -1.25rem; top: 0.72rem; width: 1.1rem; height: 1px; background: var(--border); pointer-events: none; } /* Family node chip */ .explore-node { margin: 0.1rem 0; } .explore-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.28rem 0.6rem 0.28rem 0.35rem; border-radius: 8px; cursor: pointer; user-select: none; transition: background 0.12s; } .explore-row:hover { background: var(--hover); } /* Top-level families get a bordered chip */ .explore-tree > .explore-node > .explore-row { border: 1px solid var(--border); padding: 0.32rem 0.65rem 0.32rem 0.4rem; margin-bottom: 0.15rem; } .explore-tree > .explore-node > .explore-row:hover { background: var(--hover); border-color: var(--fg-faint); } /* Chevron — rotates 90° when expanded */ .explore-toggle { background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: 0.8rem; width: 1rem; height: 1rem; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, color 0.12s; pointer-events: none; /* click lands on row */ } .explore-node[data-expanded="true"] > .explore-row .explore-toggle { transform: rotate(90deg); color: var(--accent); } .explore-toggle-placeholder { display: inline-block; width: 1rem; flex-shrink: 0; } /* Family name */ .explore-name { flex: 1; color: var(--fg-em); font-size: 0.9rem; min-width: 0; } /* Language count badge */ .explore-lang-count { color: var(--fg-faint); font-size: 0.72rem; font-variant-numeric: tabular-nums; background: rgba(128, 128, 128, 0.12); padding: 0.05rem 0.35rem; border-radius: 10px; } /* Language leaf */ .lang-leaf { display: flex; align-items: center; gap: 0.45rem; padding: 0.18rem 0.6rem 0.18rem 0.35rem; margin: 0.05rem 0; border-radius: 6px; color: var(--fg-dim); font-size: 0.85rem; } .lang-leaf:hover { background: var(--hover); } .explore-top-leaf { border: 1px solid var(--border); margin-bottom: 0.1rem; padding: 0.28rem 0.6rem; } .cross-link-entry { font-style: italic; } .cross-link { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 2px; font-size: 0.85rem; } .cross-link:hover { color: var(--blue); } .explore-main { position: relative; } /* Wide-mode container (toggled by full-width button) */ .container.wide { max-width: 95vw; padding: 0 2rem; } /* Explore toolbar (top-right of explore-main) */ .explore-toolbar { position: absolute; top: 0; right: 0; display: flex; gap: 0.4rem; z-index: 5; } .explore-tool-btn { background: none; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 1rem; padding: 0.28rem 0.5rem; line-height: 1; color: var(--fg); transition: background 0.12s, border-color 0.12s, opacity 0.12s; opacity: 0.55; } .explore-tool-btn:hover { background: var(--hover); border-color: var(--fg-faint); opacity: 1; } .explore-tool-btn.active, .explore-tool-btn.mm-active { background: var(--hover); border-color: var(--fg-dim); opacity: 1; } /* ============================================================ MINDMAP ============================================================ */ /* .mm-toggle styles are inherited from .explore-tool-btn */ #mm-container { width: 100%; height: calc(100vh - 12rem); min-height: 540px; position: relative; overflow: hidden; border-radius: 8px; } .mm-controls { position: absolute; bottom: 0.75rem; right: 0.75rem; display: flex; align-items: flex-end; gap: 0.5rem; z-index: 10; } .mm-pan-btns { display: grid; grid-template-columns: repeat(3, 2rem); grid-template-rows: repeat(2, 2rem); gap: 0.25rem; } #mm-pan-up { grid-column: 2; grid-row: 1; } #mm-pan-left { grid-column: 1; grid-row: 2; } #mm-pan-down { grid-column: 2; grid-row: 2; } #mm-pan-right { grid-column: 3; grid-row: 2; } .mm-zoom-btns { display: flex; flex-direction: column; gap: 0.25rem; } .mm-zoom-btn { width: 2rem; height: 2rem; background: var(--card); border: 1px solid var(--border); border-radius: 6px; color: var(--fg-em); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s; user-select: none; } .mm-zoom-btn:hover { background: var(--hover); } .mm-svg { width: 100%; height: 100%; display: block; cursor: grab; border: 2px solid var(--border); border-radius: 8px; background: var(--bg); overflow: visible; /* let panned/zoomed nodes render outside SVG box; container clips */ } .mm-svg:active { cursor: grabbing; } /* Node elements */ .mm-node { cursor: pointer; } .mm-more { cursor: pointer; opacity: 0.65; } .mm-more:hover { opacity: 1; } .mm-body { /* fill and stroke set per-node in JS; these are fallbacks */ stroke-width: 2.5; transition: opacity 0.14s; } .mm-node:hover .mm-body { opacity: 0.8; } .mm-node.mm-expanded .mm-body { opacity: 0.9; } .mm-lang .mm-body { stroke-dasharray: 4 3; } @keyframes mmPulse { from { opacity: 0.35; } to { opacity: 1; } } .mm-node.mm-loading .mm-body { animation: mmPulse 0.65s infinite alternate; } .mm-expand-dot { fill: var(--fg-faint); pointer-events: none; transition: fill 0.14s; } .mm-node:hover .mm-expand-dot { fill: var(--fg-dim); } .mm-node.mm-expanded .mm-expand-dot { fill: var(--accent); } .mm-label { fill: var(--fg-em); font-size: 20px; font-family: inherit; pointer-events: none; user-select: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; } .mm-count { fill: var(--fg-faint); font-size: 16px; pointer-events: none; user-select: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; } .mm-edge { stroke: var(--border); stroke-width: 1; fill: none; } /* Info badge — appears on node hover */ .mm-info-badge { opacity: 0; transition: opacity 0.14s; cursor: pointer; } .mm-node:hover .mm-info-badge { opacity: 1; } .mm-info-badge circle { fill: var(--blue); } .mm-info-i { fill: var(--bg); font-size: 8px; font-weight: bold; pointer-events: none; user-select: none; } /* ============================================================ INFO PANEL (explore side panel) ============================================================ */ .info-panel { background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.9rem; margin: 0.5rem 0 0.3rem 0; overflow: hidden; } .info-panel-close { float: right; background: none; border: none; color: var(--fg-faint); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .info-panel-close:hover { color: var(--fg-dim); } .info-panel-name { font-size: 1rem; color: var(--fg-em); margin-bottom: 0.4rem; } .info-panel-count { color: var(--blue); font-size: 0.85rem; margin-bottom: 0.3rem; } .info-panel-speakers { color: var(--green); font-size: 0.85rem; margin-bottom: 0.3rem; } .info-panel-links { font-size: 0.82rem; margin-bottom: 0.3rem; } .info-ext-link, .info-glotto-link { color: var(--blue); text-decoration: none; } .info-ext-link:hover, .info-glotto-link:hover { text-decoration: underline; } .info-panel-wiki { margin-top: 0.5rem; color: var(--fg); font-size: 0.85rem; line-height: 1.5; } .info-loading { color: var(--fg-faint); font-style: italic; } /* ============================================================ INFO BUTTON (shared) ============================================================ */ .info-btn { background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: 0.8rem; padding: 0 0.1rem; line-height: 1; opacity: 0.5; transition: opacity 0.1s; } .info-btn:hover, .info-btn.info-btn-active { opacity: 1; color: var(--blue); } @media (max-width: 600px) { .guess-form { flex-wrap: wrap; } .guess-form .input-wrapper { flex: 1 1 100%; } .guess-form button { flex: 1; } } /* About page */ .about-page { max-width: 600px; margin: 2rem auto; line-height: 1.7; color: var(--fg); } .about-page h2 { margin-bottom: 1rem; } .about-page h3 { margin: 1.5rem 0 0.4rem; color: var(--fg-em); } .about-page a { color: var(--green); } .about-page a:hover { color: var(--fg-em); } /* Autonyms (native-script language names) */ .info-panel-autonym, .blurb-autonym { font-size: 1.1em; color: var(--fg-em); opacity: 0.75; } .blurb-autonym { margin-left: 0.5em; font-size: 0.95em; } /* ── Site footer ─────────────────────────────────────────────── */ .site-footer { display: flex; justify-content: center; align-items: center; padding: 1.5rem 0 1rem; margin-top: 2rem; border-top: 1px solid var(--border); opacity: 0.45; transition: opacity 0.2s; } .site-footer:hover { opacity: 0.85; } .footer-gitlab-link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--fg-dim); text-decoration: none; font-size: 0.75rem; } .footer-gitlab-logo { width: 16px; height: 16px; flex-shrink: 0; } /* ── Explore difficulty filter bar ───────────────────────────── */ .explore-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.75rem; padding: 0.4rem 0; } .explore-filter-label { font-size: 0.78rem; color: var(--fg-dim); margin-right: 0.2rem; user-select: none; } .explore-diff-btn { display: inline-flex; align-items: center; gap: 0.3em; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--fg-dim); font-size: 0.75rem; padding: 0.18rem 0.65rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; } .explore-diff-btn:hover { background: var(--hover); color: var(--fg); border-color: var(--fg-dim); } .explore-diff-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .explore-diff-count { font-size: 0.68rem; opacity: 0.75; } .explore-diff-btn.active .explore-diff-count { opacity: 0.85; } /* Filtered tree items */ .explore-out-pool { display: none; } .explore-in-pool { /* normal style; slight highlight via border-left accent */ }