:root { --bg: #0d1117; --surface: #161b22; --surface-2: #1c2128; --border: #30363d; --text: #e6edf3; --text-dim: #8b949e; --link: #c9d1d9; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; min-height: 100vh; } a { color: inherit; text-decoration: none; } button { appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: inherit; } .hidden { display: none !important; } .topnav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; height: 56px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); } .topnav__brand { flex-shrink: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.2px; color: var(--text); padding: 0 20px 0 0; margin-right: 12px; border-right: 1px solid var(--border); height: 100%; display: flex; align-items: center; } .topnav__links { display: flex; align-items: center; height: 100%; flex: 1; } .topnav__spacer { flex: 1; } .topnav__link { height: 100%; display: flex; align-items: center; padding: 0 14px; color: var(--text-dim); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; white-space: nowrap; } .topnav__link:hover { color: var(--text); background: var(--surface-2); } .topnav__link.is-active { color: var(--text); border-bottom-color: var(--text-dim); } .topnav__toggle { display: none; margin-left: auto; background: none; border: none; color: var(--text); width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; } .topnav__toggle svg { width: 20px; height: 20px; } @media (max-width: 720px) { .topnav__toggle { display: flex; align-items: center; justify-content: center; } .topnav__links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); } .topnav.is-open .topnav__links { display: flex; } .topnav__spacer { display: none; } .topnav__link { width: 100%; padding: 12px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); border-left: 2px solid transparent; } .topnav__link:active { background: var(--border); } .topnav__link.is-active { border-left-color: var(--text-dim); } } .page { max-width: 960px; margin: 0 auto; padding: 48px 20px 96px; } .page__title { font-size: 28px; font-weight: 600; margin: 0 0 8px; color: var(--text); } .page__subtitle { font-size: 15px; color: var(--text-dim); margin: 0 0 40px; max-width: 60ch; } .page__subtitle.is-error { color: #d78a8a; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 24px; } .panel + .panel { margin-top: 16px; } .page--wide { max-width: 1200px; } .fleet-status { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; } .fleet-status.is-error { color: #d78a8a; } .fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .fleet-card { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px; cursor: pointer; color: var(--text); font: inherit; transition: background-color 0.15s ease, border-color 0.15s ease; } .fleet-card:hover { background: var(--surface-2); } .fleet-card.is-selected { border-color: var(--text-dim); } .fleet-card__name { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .fleet-card__meta { font-size: 13px; color: var(--text-dim); } .fleet-detail { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); } .fleet-detail__name { font-size: 22px; font-weight: 600; margin: 0 0 16px; } .meta-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; } .meta-list__row { display: flex; gap: 8px; font-size: 14px; } .meta-list__row dt { color: var(--text-dim); min-width: 90px; flex-shrink: 0; } .meta-list__row dd { margin: 0; word-break: break-word; } .tab-row { display: flex; gap: 8px; margin-bottom: 20px; } .tab-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; } .tab-btn:hover { color: var(--text); } .tab-btn.is-active { color: var(--text); border-color: var(--text-dim); } .tab-panel { display: flex; flex-direction: column; gap: 10px; } .tab-panel.hidden { display: none; } .station-row { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .station-row__summary { width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; padding: 14px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .station-row__summary:hover { background: var(--surface-2); } .station-row__name { font-weight: 600; font-size: 14px; } .station-row__meta { font-size: 13px; color: var(--text-dim); white-space: nowrap; } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); margin-right: 6px; } .status-dot.is-online { background: #7ec98f; } .station-detail { padding: 0 16px 16px; border-top: 1px solid var(--border); } .station-detail .meta-list { margin-top: 14px; margin-bottom: 12px; background: var(--bg); } .config-toggle { background: none; border: 1px solid var(--border); color: var(--text-dim); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; } .config-toggle:hover { color: var(--text); } .config-list { margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .config-row { display: flex; gap: 16px; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--border); } .config-row:last-child { border-bottom: none; } .config-row:nth-child(even) { background: var(--surface); } .config-row__key { color: var(--text-dim); flex: 0 0 280px; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .config-row__value { flex: 1; word-break: break-word; min-width: 0; } @media (max-width: 640px) { .config-row { flex-direction: column; gap: 2px; } .config-row__key { flex: none; } } .pop-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .pop-columns--with-positions { grid-template-columns: 1fr 1.4fr 1fr; } @media (max-width: 720px) { .pop-columns { grid-template-columns: 1fr; } .pop-panel--positions { order: -1; } } .pop-panel--positions { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .pop-panel--positions__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 20px 0; } .pop-panel--positions__status { font-size: 12px; color: var(--text-dim); white-space: nowrap; } .pop-panel--positions__status.is-error { color: #d78a8a; } .positions-canvas-wrap { position: relative; width: 100%; height: 420px; margin-top: 14px; } .positions-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; } .positions-canvas-wrap canvas:active { cursor: grabbing; } .pop-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px; } .pop-panel__title { font-size: 16px; font-weight: 600; margin: 0 0 14px; } .pop-row { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; padding: 10px 0; border-bottom: 1px solid var(--border); } .pop-row:last-child { border-bottom: none; } .pop-row--clickable { cursor: pointer; transition: background-color 0.15s ease; } .pop-row--clickable:hover { background: var(--surface-2); } .pop-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14px; } .pop-row__name { font-weight: 500; } .pop-row__stats { font-size: 13px; color: var(--text-dim); white-space: nowrap; } .pop-bar { height: 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; } .pop-bar__fill { height: 100%; background: var(--text-dim); } .pop-arenas { padding: 4px 0 8px 16px; border-left: 2px solid var(--border); margin-bottom: 4px; } .pop-arenas .pop-row__name { font-size: 13px; color: var(--text-dim); font-weight: 400; } .panel h2 { font-size: 1.1rem; margin-top: 0; margin-bottom: 0.75rem; } .panel a { color: #49a0ff; } .home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; margin-top: 40px; } .home-grid > .panel { margin-top: 0; } @media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } } .home-panel h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .home-panel__status { color: var(--text-dim); font-size: 13px; margin: 0 0 14px; } .home-panel__status.is-error { color: #d78a8a; } .home-panel__status.hidden { display: none; } .table-wrap { overflow-x: auto; } .home-table { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 13px; } .home-table th { color: var(--text-dim); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; padding: 0 10px 6px; } .home-table td { background: var(--bg); padding: 8px 10px; white-space: nowrap; } .home-table td:first-child, .home-table th:first-child { color: var(--text-dim); width: 1%; } .home-table td:first-child { border-radius: 5px 0 0 5px; } .home-table td:last-child { border-radius: 0 5px 5px 0; } .home-table th:nth-child(n + 3), .home-table td:nth-child(n + 3) { text-align: right; } .home-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .page--quests { max-width: 1280px; } .quests-heading, .leaderboard-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .quests-heading .page__subtitle { margin-bottom: 28px; } .quest-status { color: var(--text-dim); font-size: 13px; margin: 8px 0 0; text-align: right; white-space: nowrap; } .quest-status.is-error { color: #d78a8a; } .quests-mode-tabs, .category-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .quests-mode-tabs { border-bottom: 1px solid var(--border); margin-bottom: 24px; padding-bottom: 16px; } .quests-mode-tab, .category-tab, .quest-tab, .task-tile, .subtask-tile { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font: inherit; transition: background-color 0.15s ease, border-color 0.15s ease; } .quests-mode-tab { padding: 10px 16px; font-size: 14px; font-weight: 600; } .quests-mode-tab:hover, .category-tab:hover, .quest-tab:hover, .task-tile:hover, .subtask-tile:hover { background: var(--surface-2); } .quests-mode-tab.is-active, .category-tab.is-active, .quest-tab.is-active, .task-tile.is-active, .subtask-tile.is-active { background: #243e70; border-color: #4d8bff; } .category-tabs { margin-bottom: 16px; } .category-tab { padding: 9px 13px; font-size: 13px; text-transform: uppercase; } .explorer-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; } .quest-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px; } .quest-sidebar__label, .section-label { color: var(--text-dim); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 4px 8px 10px; } .quest-tabs { display: flex; flex-direction: column; gap: 6px; } .quest-tab { padding: 10px 11px; text-align: left; font-size: 14px; } .quest-detail { min-height: 500px; } .quest-detail__intro { border-bottom: 1px solid var(--border); margin-bottom: 22px; padding-bottom: 18px; } .quest-detail__intro h2 { font-size: 22px; margin: 0 0 6px; } .quest-detail__intro p, .task-info > p { color: var(--text-dim); margin: 0; } .task-grid, .subtask-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .task-tile { min-height: 78px; padding: 11px; text-align: left; display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; } .task-info { margin-top: 26px; } .task-info h3 { font-size: 18px; margin: 0 0 5px; } .task-info h4 { font-size: 14px; margin: 24px 0 10px; } .subtask-tile { min-height: 82px; padding: 11px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; } .subtask-tile__name { font-size: 14px; font-weight: 600; } .challenge-records { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 20px; } .challenge-records h3 { margin: 0 0 12px; font-size: 17px; } .challenge-records h3 span { color: var(--text-dim); font-size: 13px; font-weight: 400; } .challenge-records table, .leaderboard-table { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 14px; } .challenge-records th, .leaderboard-table th { color: var(--text-dim); font-size: 12px; font-weight: 600; text-align: left; padding: 0 10px 5px; } .challenge-records td, .leaderboard-table td { background: var(--bg); padding: 8px 10px; } .challenge-records td:first-child, .leaderboard-table td:first-child { border-radius: 5px 0 0 5px; } .challenge-records td:last-child, .leaderboard-table td:last-child { border-radius: 0 5px 5px 0; } .leaderboard-toolbar { margin-bottom: 16px; } .leaderboard-toolbar h2 { margin: 0 0 4px; font-size: 20px; } .leaderboard-toolbar p { color: var(--text-dim); font-size: 14px; margin: 0; } .leaderboard-controls { display: flex; gap: 20px; align-items: end; } .control-label { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 6px; } .type-filters { display: flex; flex-wrap: wrap; gap: 6px; max-width: 380px; } .type-filter { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; font-size: 12px; text-transform: capitalize; } .type-filter input { accent-color: #4d8bff; } .sort-control { display: flex; flex-direction: column; color: var(--text-dim); font-size: 12px; gap: 5px; white-space: nowrap; } .sort-control select { color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 7px; font: inherit; } .leaderboard-table-wrap { overflow-x: auto; padding: 16px; } .leaderboard-table { min-width: 780px; } .leaderboard-table td:nth-child(n + 3), .leaderboard-table th:nth-child(n + 3) { text-align: right; } .empty-state { color: var(--text-dim); margin: 10px 0; } .user-search { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 220px; } .user-search__input { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font: inherit; } .user-search__input:focus { outline: none; border-color: #4d8bff; } .user-search__results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; max-height: 220px; overflow-y: auto; z-index: 30; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .user-search__result { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 8px 10px; font: inherit; cursor: pointer; } .user-search__result:hover { background: var(--surface-2); } .search-note { font-size: 12px; color: var(--text-dim); margin: 0; min-height: 14px; } .player-link { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; } .player-link:hover { color: #7db2ff; text-decoration: underline; } .leaderboard-table tr.is-highlighted td { background: #243e70; transition: background-color 0.3s ease; } .player-profile { display: flex; flex-direction: column; gap: 16px; } .player-profile__summary h2 { margin: 0 0 14px; font-size: 22px; } .player-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } .player-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px; text-align: center; } .player-stat__value { display: block; font-size: 20px; font-weight: 700; } .player-stat__label { display: block; margin-top: 4px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .player-profile__challenges h3 { margin: 0 0 12px; font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; } .section-label-inline { color: var(--text-dim); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; } @media (max-width: 780px) { .quests-heading, .leaderboard-toolbar, .leaderboard-controls { flex-direction: column; } .quest-status { text-align: left; white-space: normal; margin: 0 0 20px; } .explorer-layout { grid-template-columns: 1fr; } .quest-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); } .leaderboard-controls { align-items: stretch; gap: 14px; } .type-filters { max-width: none; } .user-search { min-width: 0; } } .site-footer { max-width: 1200px; margin: 0 auto; padding: 20px 20px 40px; text-align: left; color: var(--text-dim); font-size: 13px; border-top: 1px solid var(--border); } .site-footer__link { color: var(--link); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--border); transition: color 0.15s ease, border-color 0.15s ease; } .site-footer__link:hover { color: var(--text); border-color: var(--text-dim); }