@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root { --bg-main: #07131f; --bg-card: #102133; --border-subtle: #2a3f58; --primary: #0ea5b7; --accent: #f59e0b; --text-main: #e6edf5; --text-subtle: #9fb2c7; --accent-info: #22d3ee; --accent-success: #34d399; --bg-input: #0a1827; --border-main: #3a566f; } /* Theme variants: add classes on or like .theme-light, .theme-dark, .theme-high-contrast */ .theme-light { --bg-main: #f8fafc; --bg-card: #ffffff; --border-subtle: #e6e9ee; --primary: #2563eb; --accent: #16a34a; --text-main: #0f172a; --text-subtle: #475569; --accent-info: #0284c7; --accent-success: #16a34a; --bg-input: #ffffff; --border-main: #c8d4e3; } .theme-high-contrast { --bg-main: #000000; --bg-card: #000000; --border-subtle: #ffffff; --primary: #ffff00; --accent: #00ffff; --text-main: #ffffff; --text-subtle: #ffffff; --accent-info: #00ffff; --accent-success: #00ff00; --bg-input: #000000; --border-main: #ffffff; } /* Awful themes for fun/testing */ .theme-awful-1 { --bg-main: #ff00ff; --bg-card: linear-gradient(45deg,#ff9a00,#ff00ff); --border-subtle: #00ff00; --primary: #00ffff; --accent: #ff0066; --text-main: #000000; --text-subtle: #001100; } .theme-awful-2 { --bg-main: #00ff99; --bg-card: linear-gradient(90deg,#ffff00,#ff0000); --border-subtle: #0000ff; --primary: #ff00ff; --accent: #00ffff; --text-main: #000000; --text-subtle: #222200; } /* Smooth transitions when switching themes */ body, .card, .navbar, .modal-panel { transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease; } .player-name-link { color: var(--text-main); text-decoration: none; font-weight: 600; } .player-name-link:hover { color: var(--primary); text-decoration: underline; } /* Theme select styling for readability */ /* Theme select styling for readability */ select.theme-select, select#themeSelect, select#themeSelectInjected { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-subtle); padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; min-width: 8rem; transition: all 0.2s ease; } select.theme-select:hover, select#themeSelect:hover, select#themeSelectInjected:hover { border-color: var(--border-main); background: var(--bg-input); } /* Ensure select options are readable */ select.theme-select option, select#themeSelect option, select#themeSelectInjected option { background: var(--bg-card); color: var(--text-main); } /* Light theme select overrides */ .theme-light select.theme-select, .theme-light select#themeSelect, .theme-light select#themeSelectInjected { background: #ffffff; color: #0f172a; border-color: #e6e9ee; } .theme-light select.theme-select option, .theme-light select#themeSelect option, .theme-light select#themeSelectInjected option { background: #ffffff; color: #0f172a; } /* Layout selector styling */ select.layout-select, select#layoutSelect, select#layoutSelectInjected { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-subtle); padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.9rem; margin-left: 0.45rem; min-width: 7.5rem; } /* Ensure layout select options are readable */ select.layout-select option, select#layoutSelect option, select#layoutSelectInjected option { background: var(--bg-card); color: var(--text-main); } /* Light theme layout select overrides */ .theme-light select.layout-select, .theme-light select#layoutSelect, .theme-light select#layoutSelectInjected { background: #ffffff; color: #0f172a; border-color: #e6e9ee; } .theme-light select.layout-select option, .theme-light select#layoutSelect option, .theme-light select#layoutSelectInjected option { background: #ffffff; color: #0f172a; } /* Make selector label slightly muted but readable */ .navbar-right label[for="themeSelect"], .navbar-right label[for="themeSelectInjected"] { color: var(--text-subtle); margin-left: 0.5rem; } /* On light theme ensure select remains readable */ .theme-light select.theme-select { background: #f3f4f6; color: #0f172a; border-color: #e5e7eb } .theme-light select.theme-select option { background: #ffffff; color: #0f172a; } .theme-high-contrast select.theme-select { background: #000; color: #fff; border-color: #fff } .theme-high-contrast select.theme-select option { background: #000; color: #fff; } .theme-awful-1 select.theme-select, .theme-awful-2 select.theme-select { background: rgba(255,255,255,0.08); color: #000 } .theme-awful-1 select.theme-select option, .theme-awful-2 select.theme-select option { background: rgba(255,255,255,0.15); color: #000; } /* Profile preferences select styling - same as theme-select */ #preferencesThemeSelect, #preferencesLayoutSelect { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-subtle); } #preferencesThemeSelect option, #preferencesLayoutSelect option { background: var(--bg-card); color: var(--text-main); } .theme-light #preferencesThemeSelect, .theme-light #preferencesLayoutSelect { background: #ffffff; color: #0f172a; border-color: #e6e9ee; } .theme-light #preferencesThemeSelect option, .theme-light #preferencesLayoutSelect option { background: #ffffff; color: #0f172a; } .theme-high-contrast #preferencesThemeSelect, .theme-high-contrast #preferencesLayoutSelect { background: #000; color: #fff; border-color: #fff; } .theme-high-contrast #preferencesThemeSelect option, .theme-high-contrast #preferencesLayoutSelect option { background: #000; color: #fff; } * { box-sizing: border-box; } body { margin: 0; font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif; background: radial-gradient(circle at 12% 8%, rgba(14, 165, 183, 0.2), transparent 36%), radial-gradient(circle at 84% 18%, rgba(245, 158, 11, 0.16), transparent 34%), linear-gradient(140deg, #040b13 0%, #07131f 48%, #0a1c2f 100%); color: var(--text-main); } .page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .help-btn { border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.7); background: rgba(14, 165, 183, 0.12); color: var(--text-main); font-weight: 600; padding: 0.45rem 0.9rem; cursor: pointer; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease; } .help-btn:hover { transform: translateY(-1px); border-color: rgba(34, 211, 238, 0.95); background: rgba(14, 165, 183, 0.2); } .help-overlay { position: fixed; inset: 0; z-index: 4200; display: grid; place-items: center; } .help-overlay.hidden { display: none; } .help-overlay__backdrop { position: absolute; inset: 0; background: rgba(4, 11, 19, 0.25); z-index: 1; } .help-overlay__spotlight { position: absolute; z-index: 2; border-radius: 12px; border: 2px solid rgba(34, 211, 238, 0.85); box-shadow: 0 0 0 9999px rgba(4, 11, 19, 0.58), 0 0 0 6px rgba(34, 211, 238, 0.18); pointer-events: none; transition: top 140ms ease, left 140ms ease, width 140ms ease, height 140ms ease; } .help-overlay__tooltip { position: absolute; max-width: min(380px, 86vw); background: rgba(8, 19, 34, 0.98); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 0.85rem 0.9rem; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55); z-index: 3; } .help-overlay__title { font-weight: 700; margin-bottom: 0.35rem; } .help-overlay__body { font-size: 0.9rem; color: var(--text-subtle); line-height: 1.45; } .help-overlay__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; margin-top: 0.75rem; } .help-highlight { position: relative; z-index: 2; outline: 2px solid rgba(34, 211, 238, 0.85); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.18); border-radius: 10px; } @media (max-width: 720px) { .help-overlay__tooltip { max-width: 92vw; } } /* -------------------------------------------------------------------------- */ /* Directory table: modern selection checkbox + "added" row state */ /* -------------------------------------------------------------------------- */ .table .check-col { width: 132px; min-width: 132px; } .table .actions-col { width: 284px; min-width: 284px; } /* Base table styling (header + rows) */ .table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 820px; } .table thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 0.7rem 0.85rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); background: rgba(17, 24, 39, 0.92); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(8px); } .theme-light .table thead th { background: rgba(255, 255, 255, 0.92); } .theme-high-contrast .table thead th { background: #000; } .table tbody td { padding: 0.65rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--text-main); } .theme-light .table tbody td { border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .table tbody tr:hover { background: rgba(37, 99, 235, 0.06); } /* Sortable header indicators */ .table thead th.sortable { cursor: pointer; position: sticky; padding-right: 2rem; } .table thead th.sortable::after { content: "↕"; position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font-size: 0.8rem; opacity: 0.35; } .table thead th.sortable:hover { color: var(--text-main); } .table thead th.sortable:hover::after { opacity: 0.55; } .table thead th.sorted-asc::after { content: "▲"; opacity: 0.7; } .table thead th.sorted-desc::after { content: "▼"; opacity: 0.7; } /* Checkbox/selection column header stays minimal */ .table thead th.check-col, .table thead th.actions-col { padding-right: 0.85rem; } .check-cell { padding: 0.5rem 0.75rem; } .fav-marker-cell { padding: 0.4rem 0.35rem; text-align: center; } .fav-marker-label { display: inline-flex; align-items: center; justify-content: center; min-height: 1.65rem; padding: 0.16rem 0.62rem; border-radius: 999px; border: 1px solid rgba(52, 211, 153, 0.52); background: linear-gradient(135deg, rgba(16, 185, 129, 0.34), rgba(20, 184, 166, 0.2)); color: #bbf7d0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .you-marker-label { display: inline-flex; align-items: center; justify-content: center; min-height: 1.65rem; padding: 0.16rem 0.62rem; border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.56); background: linear-gradient(135deg, rgba(29, 78, 216, 0.34), rgba(6, 182, 212, 0.22)); color: #dbeafe; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .fav-marker-empty { display: inline-block; width: 100%; min-height: 1.65rem; } .check-wrap { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; cursor: pointer; position: relative; } /* Hide the native checkbox but keep it accessible */ .check-input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* Custom checkbox UI */ .check-ui { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.04); box-shadow: 0 1px 0 rgba(0,0,0,0.25) inset; display: inline-flex; align-items: center; justify-content: center; transition: transform 120ms ease, border-color 160ms ease, background 160ms ease; } .check-ui::after { content: ""; width: 8px; height: 4px; border-left: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(-45deg); margin-top: -1px; } .check-wrap:hover .check-ui { border-color: rgba(37, 99, 235, 0.55); transform: scale(1.03); } .check-input:focus-visible + .check-ui { outline: 2px solid rgba(37, 99, 235, 0.6); outline-offset: 2px; } .check-input:checked + .check-ui { background: rgba(34, 197, 94, 0.22); border-color: rgba(34, 197, 94, 0.75); } .check-input:checked + .check-ui::after { border-left-color: rgba(229, 231, 235, 0.95); border-bottom-color: rgba(229, 231, 235, 0.95); } /* Row state after player was added to game */ tr.row-added { background: linear-gradient(90deg, rgba(34, 197, 94, 0.26), rgba(16, 185, 129, 0.14)); } tr.row-added td { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.12); } /* Row state for checkbox selection (not yet added) */ tr.row-selected { background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.08)); } /* When selected, slightly tint borders too so it reads as intentional */ tr.row-selected td { border-color: rgba(34, 197, 94, 0.34); background: rgba(34, 197, 94, 0.1); } tr.row-favorite { background: linear-gradient(90deg, rgba(250, 204, 21, 0.1), rgba(34, 211, 238, 0.04)); } tr.row-favorite td { border-color: rgba(250, 204, 21, 0.22); } tr.row-selectable { cursor: pointer; } /* Slightly smaller buttons in the table */ .btn-small { padding: 0.3rem 0.55rem; font-size: 0.82rem; border-radius: 6px; } /* -------------------------------------------------------------------------- */ /* Directory action buttons: Stats (info) + Added state */ /* -------------------------------------------------------------------------- */ .btn-info { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border: 1px solid rgba(37, 99, 235, 0.55); background: rgba(37, 99, 235, 0.16); color: var(--text-main); cursor: pointer; transition: transform 120ms ease, background 140ms ease, border-color 140ms ease; } .btn-info:hover { background: rgba(37, 99, 235, 0.24); border-color: rgba(37, 99, 235, 0.75); } .btn-info:active { transform: translateY(1px); } .btn-added { opacity: 0.88; border-color: rgba(34, 197, 94, 0.55) !important; background: rgba(34, 197, 94, 0.14) !important; color: var(--text-main) !important; cursor: default; } .btn-ghost.btn-added:hover { background: rgba(34, 197, 94, 0.14) !important; } /* -------------------------------------------------------------------------- */ /* Tooltips (simple, theme-friendly) */ /* -------------------------------------------------------------------------- */ .has-tooltip { position: relative; } .has-tooltip::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; padding: 0.35rem 0.5rem; font-size: 0.78rem; border-radius: 8px; color: var(--text-main); background: rgba(2, 6, 23, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; } .has-tooltip::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(2, 6, 23, 0.92); opacity: 0; transition: opacity 140ms ease; } .has-tooltip:hover::after, .has-tooltip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(-2px); } .has-tooltip:hover::before, .has-tooltip:focus-visible::before { opacity: 1; } /* -------------------------------------------------------------------------- */ /* Player stats modal */ /* -------------------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 1.25rem; z-index: 60; } .modal-panel { width: min(1100px, 96vw); height: min(78vh, 760px); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; box-shadow: 0 25px 70px rgba(0,0,0,0.5); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-subtle); background: rgba(2, 6, 23, 0.35); backdrop-filter: blur(10px); } .theme-light .modal-header { background: rgba(255, 255, 255, 0.65); } .modal-title { font-weight: 700; letter-spacing: 0.01em; } .modal-actions { display: flex; align-items: center; gap: 0.4rem; } .modal-body { height: calc(100% - 54px); } .modal-iframe { width: 100%; height: 100%; border: 0; background: transparent; } .adhoc-modal-panel { width: min(520px, 96vw); height: auto; max-height: min(92vh, 420px); } .adhoc-modal-panel .modal-body { height: auto; padding: 1rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; } .adhoc-modal-label { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-subtle); } .adhoc-modal-hint { font-size: 0.8rem; color: var(--text-subtle); margin-top: -0.15rem; } .adhoc-modal-actions { justify-content: flex-end; margin-top: 0.15rem; } .local-directory-modal-panel { width: min(1280px, 98vw); height: min(82vh, 780px); } .local-directory-modal-body { height: calc(100% - 54px); padding: 0.9rem 1rem 1rem; overflow: hidden; display: flex; flex-direction: column; gap: 0.5rem; } .local-directory-search-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; align-items: end; } .local-directory-search-actions .btn-primary { min-width: 150px; } .local-directory-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border-subtle); border-radius: 10px; } .local-directory-pagination { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; } .local-directory-table-wrap .table { width: 100%; min-width: 980px; } .dir-table-wrap { overflow: auto; border: 1px solid var(--border-subtle); border-radius: 10px; } .directory-filters-toggle { display: none; } .directory-filters-panel { display: block; } @media (max-width: 900px) { .local-directory-modal-panel { width: min(98vw, 1100px); height: min(88vh, 780px); } .local-directory-search-row { grid-template-columns: 1fr; gap: 0.45rem; } .local-directory-search-actions { width: 100%; } .local-directory-search-actions .btn-primary { width: 100%; min-width: 0; } } a { color: inherit; text-decoration: none; } /* Navbar */ .navbar { height: 56px; background: rgba(2, 6, 23, 0.98); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); } .navbar-left { display: flex; align-items: center; gap: 1rem; } .navbar-logo { width: 90px; height: 90px; border-radius: 0; background: transparent; display:flex;align-items:center;justify-content:center; font-size: 0.9rem; font-weight: 700; color: #020617; flex-shrink: 0; } .navbar-logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; } .navbar-logo-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(2, 6, 23, 0.55); color: #dbeafe; } .navbar-title { font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; color: #f9fafb; } .navbar-subtitle { font-size: 0.7rem; color: var(--text-subtle); margin-top: 0.05rem; } .navbar-right { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--text-subtle); } .navbar-user-name { font-weight: 500; cursor: pointer; min-width: 120px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main); } .navbar-user-name:hover { color: #2563eb; } #logoutBtnTop { padding: 0.4rem 1rem; border-radius: 6px; border: 1px solid rgba(239, 68, 68, 0.3); cursor: pointer; font-size: 0.85rem; font-weight: 500; background: transparent; color: #ef4444; transition: all 0.2s ease; } .header-help-btn { padding: 0.4rem 0.9rem; border-radius: 6px; border: 1px solid rgba(34, 211, 238, 0.45); cursor: pointer; font-size: 0.82rem; font-weight: 600; background: rgba(34, 211, 238, 0.1); color: #e6f6ff; transition: all 0.2s ease; } .header-help-btn:hover { background: rgba(34, 211, 238, 0.2); border-color: rgba(34, 211, 238, 0.7); } .mobile-game-exit-btn { display: none; padding: 0.4rem 1rem; border-radius: 8px; border: 1px solid rgba(34, 211, 238, 0.38); cursor: pointer; font-size: 0.85rem; font-weight: 600; background: rgba(34, 211, 238, 0.1); color: #e6f6ff; transition: all 0.2s ease; } .mobile-game-exit-btn:hover { background: rgba(34, 211, 238, 0.2); border-color: rgba(34, 211, 238, 0.6); } body.game-awful-pro #logoutBtnTop { display: none !important; } body.game-awful-pro .mobile-game-exit-btn { display: inline-flex; align-items: center; justify-content: center; } #logoutBtnTop:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.6); color: #ff5555; } .navbar-avatar { width: 32px; height: 32px; border-radius: 9999px; border: 1.5px solid var(--border-subtle); background: #020617; background-size: cover; background-position: center; flex-shrink: 0; } /* Top-level tabs (Overview / User Directory) */ .top-tabs { position: static; background: linear-gradient(180deg, rgba(4, 11, 19, 0.95), rgba(3, 12, 24, 0.88)); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(8px); padding: 0.48rem 1.25rem; display: flex; align-items: center; gap: 0.46rem; overflow-x: auto; scrollbar-width: thin; } .top-tabs-burger { display: none; width: calc(100% - 2rem); margin: 0.55rem 1rem 0; padding: 0.58rem 0.9rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: rgba(10, 24, 39, 0.85); color: var(--text-main); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; text-align: left; cursor: pointer; } .top-tab { appearance: none; border: 1px solid rgba(86, 131, 182, 0.42); background: linear-gradient(180deg, rgba(12, 30, 49, 0.86), rgba(9, 22, 39, 0.86)); color: #c5d8ee; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0.46rem 0.9rem; border-radius: 0.82rem; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: transform 140ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } .top-tab:hover { transform: translateY(-1px) scale(1.01); border-color: rgba(99, 179, 255, 0.64); color: #f2f8ff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26); } .top-tab:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.55); outline-offset: 2px; } .top-tab.active { background: linear-gradient(135deg, rgba(26, 117, 184, 0.9), rgba(39, 199, 176, 0.78)); border-color: rgba(96, 220, 244, 0.74); color: #f8fbff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 18px rgba(4, 22, 41, 0.35); } .top-tab-utility { border-color: rgba(88, 165, 243, 0.54); background: linear-gradient(135deg, rgba(17, 90, 147, 0.72), rgba(19, 143, 170, 0.62)); color: #e7f5ff; font-weight: 800; } .top-tab-ui-mode-toggle { margin-left: auto; } .hidden { display: none !important; } @media (max-width: 900px) { body.game-awful-pro .navbar { min-height: 56px; height: auto; padding: 0.35rem 0.7rem; align-items: center; flex-wrap: nowrap; gap: 0.4rem; } body.game-awful-pro .navbar-left { width: auto; min-width: 0; flex: 1 1 auto; } body.game-awful-pro #navbarHomeLink { min-width: 0; max-width: 100%; gap: 0.45rem !important; } body.game-awful-pro #navbarHomeLink > div:last-child { min-width: 0; } body.game-awful-pro .navbar-right { width: auto; min-width: 0; flex: 0 1 auto; justify-content: flex-end; flex-wrap: nowrap; gap: 0.32rem; } body.game-awful-pro #logoutBtnTop, body.game-awful-pro #navbarUser, body.game-awful-pro #navbarAvatar { display: none !important; } body.game-awful-pro .mobile-game-exit-btn { display: inline-flex; align-items: center; justify-content: center; } body.game-awful-pro .navbar-logo { width: 48px; height: 48px; } body.game-awful-pro .navbar-title { display: block; min-width: 0; max-width: 100%; font-size: 0.92rem; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.game-awful-pro .navbar-subtitle { display: none; } body.game-awful-pro .header-help-btn, body.game-awful-pro .mobile-game-exit-btn { padding: 0.34rem 0.62rem; font-size: 0.76rem; white-space: nowrap; } } @media (max-width: 720px) { .navbar { height: auto; padding: 0.7rem 1rem; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; } .navbar-left { width: 100%; gap: 0.6rem; } .navbar-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 0.6rem; } .navbar-user-name { min-width: 0; max-width: 100%; } body.game-awful-pro .navbar { min-height: 56px; height: 56px; padding: 0.35rem 0.75rem; align-items: center; flex-wrap: nowrap; gap: 0.45rem; } body.game-awful-pro .navbar-left { width: auto; min-width: 0; flex: 1 1 auto; } body.game-awful-pro .navbar-right { width: auto; flex: 0 0 auto; justify-content: flex-end; gap: 0.4rem; } body.game-awful-pro #logoutBtnTop, body.game-awful-pro #navbarUser, body.game-awful-pro #navbarAvatar { display: none !important; } body.game-awful-pro .mobile-game-exit-btn { display: inline-flex; align-items: center; justify-content: center; } body.game-awful-pro .navbar-logo { width: 52px; height: 52px; } body.game-awful-pro .navbar-title { font-size: 0.94rem; } body.game-awful-pro .navbar-subtitle { display: none; } } @media (max-width: 540px) { .navbar-right button, .navbar-right select, .navbar-right label { width: 100%; } body.game-awful-pro .navbar-right button, body.game-awful-pro .navbar-right select, body.game-awful-pro .navbar-right label { width: auto; } .top-tabs-burger { display: block; } .top-tabs { display: none; padding: 0.5rem 1rem 0.75rem; margin: 0 1rem; border: 1px solid var(--border-subtle); border-radius: 0.85rem; background: rgba(4, 11, 19, 0.98); overflow: visible; } .top-tabs.open { display: flex; flex-direction: column; gap: 0.45rem; } .top-tab { width: 100%; text-align: left; } .page { padding: 1.5rem 1rem 2.25rem; } } @media (max-width: 390px) { .navbar { padding: 0.6rem 0.75rem; } .navbar-logo { width: 62px; height: 62px; } .navbar-title { font-size: 0.92rem; } .navbar-subtitle { font-size: 0.66rem; } .top-tabs-burger { width: calc(100% - 1.5rem); margin: 0.5rem 0.75rem 0; font-size: 0.86rem; padding: 0.52rem 0.75rem; } .top-tabs { margin: 0 0.75rem; padding: 0.45rem 0.55rem 0.6rem; } .page { padding: 1rem 0.75rem 1.7rem; } .card { padding: 1rem 0.85rem; border-radius: 0.82rem; } .card-header { gap: 0.5rem; flex-wrap: wrap; } .overview-stats-grid { grid-template-columns: 1fr; } .overview-pill-grid { grid-template-columns: 1fr; } .overview-pill-group { padding: 0.62rem; } .overview-chart-card { padding: 0.6rem; } } /* Layout */ .page { display: block; max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 3.4rem; opacity: 1; visibility: visible; } h1 { margin: 0; font-size: clamp(1.7rem, 2.5vw, 2.45rem); line-height: 1.06; letter-spacing: 0.01em; font-family: "Sora", "Space Grotesk", sans-serif; } h2 { margin: 0; font-family: "Sora", "Space Grotesk", sans-serif; } .lead { font-size:0.98rem; color:var(--text-subtle); margin: 0.45rem 0 0; } .eyebrow { margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 700; color: var(--accent-info); } .overview-head { margin-bottom: 1rem; } .overview-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1.35rem; padding: 1rem; border-radius: 1rem; background: linear-gradient(120deg, rgba(16, 33, 51, 0.95), rgba(8, 23, 37, 0.96)), radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.16), transparent 40%); border: 1px solid rgba(59, 130, 246, 0.2); box-shadow: 0 20px 44px rgba(0,0,0,0.35); } .hero-copy { display: flex; flex-direction: column; gap: 0.6rem; } .hero-kicker { font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; color: #7dd3fc; font-weight: 700; } .hero-copy h2 { font-size: clamp(1.08rem, 1.8vw, 1.45rem); } .hero-copy p { margin: 0; color: var(--text-subtle); font-size: 0.92rem; max-width: 58ch; } .quick-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; } .metric-card { padding: 0.7rem 0.72rem; border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(5, 16, 28, 0.68); } .metric-value { font-size: 1.05rem; font-weight: 700; color: #f8fafc; line-height: 1.05; } .metric-label { margin-top: 0.23rem; font-size: 0.79rem; color: #93a9c1; } .hero-media { display: grid; gap: 0.6rem; } .placeholder-shot, .placeholder-mini, .recent-image-placeholder { border: 1px dashed rgba(148, 163, 184, 0.42); border-radius: 0.8rem; background: repeating-linear-gradient( -45deg, rgba(15, 23, 42, 0.64), rgba(15, 23, 42, 0.64) 10px, rgba(30, 41, 59, 0.62) 10px, rgba(30, 41, 59, 0.62) 20px ); color: #c7d2fe; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; } .placeholder-shot { min-height: 140px; } .placeholder-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .placeholder-mini { min-height: 70px; } .recent-image-placeholder { min-height: 84px; margin-bottom: 0.7rem; } .grid-main { display:grid; grid-template-columns: minmax(0,1.75fr) minmax(0,1fr); gap:1.5rem; align-items:flex-start; } .overview-single-column { grid-template-columns: minmax(0, 1fr); } @media (max-width: 900px) { .overview-hero { grid-template-columns: 1fr; } .quick-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-main { grid-template-columns:1fr; } } .card { background: var(--bg-card); border-radius: 1rem; padding: 1.4rem 1.3rem 1.4rem; border: 1px solid var(--border-subtle); box-shadow: 0 16px 36px rgba(0,0,0,0.44); } #dashboardPage > .overview-head, #dashboardPage > .grid-main .card { animation: rise-in 420ms ease both; } #dashboardPage > .grid-main .card:nth-child(1) { animation-delay: 110ms; } #dashboardPage > .grid-main .card:nth-child(2) { animation-delay: 170ms; } @keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; } .card-title { font-size:1.06rem; font-weight:700; letter-spacing: 0.01em; font-family: "Sora", "Space Grotesk", sans-serif; } .card-subtitle { font-size:0.82rem; color:var(--text-subtle); line-height: 1.35; } .form-row { display:flex; gap:0.8rem; margin-bottom:0.8rem; flex-wrap:wrap; } .form-group { flex:1 1 140px; min-width:140px; position: relative; } .form-label { display:block; margin-bottom:0.32rem; font-size:0.8rem; color:#b5c4d6; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; } .form-input, .form-select { width:100%; padding:0.62rem 0.78rem; border-radius:0.68rem; border:1px solid #31465d; background: var(--bg-input); color:var(--text-main); font-size:0.9rem; transition: border-color 140ms ease, box-shadow 140ms ease; } .form-input:focus, .form-select:focus { outline: none; border-color: rgba(34, 211, 238, 0.72); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2); } .form-input::placeholder { color:#7f93aa; } .info-icon { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.06); color: var(--text-main); font-weight: 700; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .info-icon:hover { filter: brightness(1.08); } .info-popover { position: absolute; z-index: 10; top: 100%; left: 0; margin-top: 0.35rem; min-width: 240px; max-width: 320px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); padding: 0.75rem 0.85rem; display: none; } .info-popover-title { font-weight: 600; margin-bottom: 0.3rem; } .info-popover-body { font-size: 0.85rem; color: var(--text-subtle); display: grid; gap: 0.25rem; } .helper-text { font-size:0.8rem; color:var(--text-subtle); margin-top:0.25rem; } .btn-primary { padding: 0.7rem 1.35rem; border-radius: 9999px; border: none; cursor: pointer; font-size: 0.93rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #0a1017; box-shadow: 0 12px 24px rgba(10, 16, 23, 0.55); } .btn-primary:hover { filter: brightness(1.06); } /* Continue button: blue outline (transparent fill) */ .btn-continue { padding:0.5rem 0.9rem; border-radius:999px; border:1.5px solid var(--primary); background: transparent; color: var(--primary); font-weight:600; cursor:pointer; } .btn-continue:hover { background: rgba(37,99,235,0.06); } /* End button: red outline */ .btn-end { padding:0.45rem 0.85rem; border-radius:999px; border:1px solid #ef4444; background: transparent; color: #ef4444; font-weight:600; cursor:pointer; } .btn-end:hover { background: rgba(239,68,68,0.06); } .btn-ghost { padding:0.4rem 0.9rem; border-radius:999px; border:1px solid var(--border-subtle); background:var(--bg-input); color:var(--text-main); font-size:0.8rem; cursor:pointer; } .btn-ghost:hover { background:var(--bg-input); filter:brightness(1.05); } .btn-ghost.muted { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.05); } .btn-directory-pick { padding: 0.62rem 1rem; border-radius: 999px; border: 1px solid rgba(26, 200, 164, 0.7); background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(26, 200, 164, 0.92)); color: #f8fafc; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 8px 18px rgba(8, 145, 178, 0.35); transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease; } .btn-directory-pick:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(8, 145, 178, 0.45); } .local-directory-open-actions { display: flex; align-items: center; gap: 0.55rem; margin: 0.55rem 0 0.45rem; flex-wrap: wrap; } .local-directory-open-actions .status-message { margin-left: 0.2rem; } .local-directory-open-actions .btn-directory-pick { min-height: 46px; padding: 0.62rem 1.15rem; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em; } .btn-directory-pick-directory { border: 1px solid rgba(26, 200, 164, 0.7); background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(26, 200, 164, 0.92)); color: #f8fafc; } .btn-directory-pick-favorites { border: 1px solid rgba(245, 158, 11, 0.78); background: linear-gradient(135deg, rgba(180, 83, 9, 0.95), rgba(245, 158, 11, 0.94), rgba(250, 204, 21, 0.9)); color: #111827; box-shadow: 0 8px 18px rgba(217, 119, 6, 0.32); } .btn-directory-pick-favorites:hover { box-shadow: 0 10px 22px rgba(217, 119, 6, 0.42); } .btn-directory-pick-adhoc { border: 1px solid rgba(45, 212, 191, 0.7); background: linear-gradient(135deg, rgba(13, 148, 136, 0.95), rgba(20, 184, 166, 0.92)); color: #ecfeff; box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28); } .btn-directory-pick-adhoc:hover { box-shadow: 0 10px 22px rgba(13, 148, 136, 0.38); } @media (max-width: 720px) { .local-directory-open-actions { align-items: stretch; } .local-directory-open-actions .btn-directory-pick { width: 100%; justify-content: center; text-align: center; } } .status-message { margin-top:0.6rem; font-size:0.85rem; min-height:1.2rem; } .status-ok { color:#bbf7d0; } .status-error { color:#fecaca; } .status-warning { color:#fde68a; } .host-restriction-banner { margin: 0.4rem 0 1rem; padding: 0.8rem 0.95rem; border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.55); background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(30, 64, 175, 0.14)); } .host-restriction-title { font-weight: 700; color: #fef3c7; margin-bottom: 0.25rem; } .host-restriction-text { font-size: 0.9rem; color: #fde68a; } .host-restriction-link { color: #67e8f9; font-weight: 700; text-decoration: underline; } .host-restriction-link:hover { color: #a5f3fc; } .badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:999px; font-size:0.75rem; font-weight:600; } .badge-role { background:#4b5563; } .badge-active { background:#166534; color:#bbf7d0; } .badge-license { background:#7c2d12; color:#fed7aa; } .license-summary-row { display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:0.25rem; } .pill-link { font-size:0.8rem; color:#93c5fd; cursor:pointer; } .pill-link:hover { text-decoration:underline; } .list { list-style:none; margin:0; padding:0; font-size:0.85rem; color:var(--text-subtle); } .list li { padding:0.3rem 0; border-bottom:1px solid rgba(55,65,81,0.7); } .list li:last-child { border-bottom:none; } .list-title { font-weight:500; color:var(--text-main); } /* Tabs for invite card (rectangular and responsive) */ .tabs { display:flex; gap:0.4rem; border-bottom:1px solid rgba(55,65,81,0.9); margin-bottom:0.75rem; align-items:center; flex-wrap:wrap; } .tab { padding:0.45rem 0.7rem; border-radius:8px 8px 0 0; font-size:0.85rem; cursor:pointer; background:transparent; border:1px solid transparent; color:var(--text-subtle); min-width:0; white-space:normal; } .tab:hover { color:var(--text-main); filter:brightness(1.05); } .tab.active { background:linear-gradient(180deg,#0b1220,#071020); border-color:rgba(75,85,99,0.8); border-bottom-color:transparent; color:#e5e7eb; } /* Small screens: make tabs more button-like and stack when needed */ @media (max-width: 600px) { .tabs { gap:0.35rem; } .tab { flex: 1 1 100%; text-align: left; padding:0.6rem 0.75rem; border-radius:6px; font-size:0.9rem; } .tab + .tab { margin-top:0.2rem; } .tab.active { border-bottom-color:transparent; } .quick-metrics { grid-template-columns: 1fr; } .placeholder-row { grid-template-columns: 1fr; } } .invite-section { display:none; } .invite-section.active { display:block; } .player-row { display:flex; justify-content:space-between; align-items:center; padding:0.35rem 0; border-bottom:1px solid rgba(55,65,81,0.5); font-size:0.85rem; } #runningGamesList .player-row { padding: 0.72rem 0.62rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.72rem; margin-bottom: 0.55rem; background: rgba(7, 19, 31, 0.72); } #runningGamesList .player-row:last-child { margin-bottom: 0; } .player-main { display:flex; flex-direction:column; gap:0.15rem; } .player-name-line { display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; } .player-meta { font-size:0.75rem; color:var(--text-subtle); } .player-meta.meta-compact { font-size:0.73rem; color:var(--text-subtle); } .stat-chip { display:inline-flex; align-items:center; gap:0.25rem; padding:0.15rem 0.55rem; border-radius:999px; font-size:0.72rem; background: rgba(255,255,255,0.04); border:1px solid var(--border-subtle); color:var(--text-main); } .stat-chip-muted { color:var(--text-subtle); border-color: rgba(255,255,255,0.12); } .pagination { display:flex; justify-content:space-between; align-items:center; margin-top:0.5rem; font-size:0.8rem; color:var(--text-subtle); } .favorite-toggle { background:none; border:none; cursor:pointer; font-size:1rem; margin-right:0.4rem; color:#6b7280; } .favorite-toggle.favorited { color:#facc15; } /* Selected players list in Start game card */ .players-block-title { margin-top:1.2rem; font-size:0.9rem; font-weight:600; color:#e5e7eb; } .players-block-subtitle { font-size:0.8rem; color:var(--text-subtle); margin-bottom:0.4rem; } .selected-players-list { border-radius:0.7rem; border:1px dashed #374151; padding:0.5rem 0.5rem; max-height:220px; overflow-y:auto; background:#020617; } .selected-player { display:flex; align-items:center; justify-content:space-between; padding:0.35rem 0.4rem; border-radius:0.5rem; margin-bottom:0.25rem; border:1px solid transparent; } .selected-player.dragging { opacity:0.6; border-color:#4b5563; background:#0f172a; } .selected-player-handle { cursor:grab; font-size:0.9rem; margin-right:0.4rem; color:#4b5563; } .selected-player-main { display:flex; align-items:center; gap:0.5rem; flex:1; min-width:0; } .tab.tab-disabled { opacity: 0.5; cursor: not-allowed; } .selected-player-stats { font-size:0.78rem; color:var(--text-subtle); } .selected-player-name { font-size:0.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .selected-player-tags { font-size:0.7rem; color:#9ca3af; } .selected-player-actions { display:flex; align-items:center; gap:0.25rem; } .selected-player-remove { background:none; border:none; cursor:pointer; font-size:0.8rem; color:#fca5a5; } .selected-empty { font-size:0.8rem; color:#6b7280; padding:0.25rem 0.2rem; } /* Column layout */ .left-column, .right-column { min-width: 0; display: block; opacity: 1; visibility: visible; } /* Left column grouping: reduce gap between stacked cards inside left column */ .left-column .card + .card { margin-top: 0.6rem; } .overview-stats-card { overflow: hidden; } .overview-stats-content { display: grid; gap: 1rem; } .overview-stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; } .overview-stat { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 0.75rem; padding: 0.65rem 0.7rem; background: rgba(5, 16, 28, 0.62); display: flex; flex-direction: column; gap: 0.18rem; } .overview-stat span { color: var(--text-subtle); font-size: 0.74rem; } .overview-stat strong { font-size: 1rem; font-weight: 700; } .overview-pill-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .overview-pill-group { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.85rem; padding: 0.72rem; background: rgba(5, 16, 28, 0.5); } .overview-pill-title { font-size: 0.8rem; color: var(--text-subtle); margin-bottom: 0.5rem; } .overview-pill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; } .overview-pill { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.68rem; padding: 0.42rem 0.48rem; background: rgba(15, 23, 42, 0.54); display: flex; flex-direction: column; } .overview-pill span { color: var(--text-subtle); font-size: 0.72rem; } .overview-pill strong { font-size: 0.92rem; font-weight: 700; } .overview-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .overview-chart-card { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.85rem; padding: 0.72rem; background: rgba(5, 16, 28, 0.5); } .overview-data-vault { border: 1px solid rgba(34, 197, 94, 0.28); border-radius: 0.85rem; padding: 0.72rem; background: linear-gradient(150deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08)), rgba(5, 16, 28, 0.5); } .overview-data-vault-grid { margin-top: 0.72rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .overview-data-vault-item { border: 1px solid rgba(99, 102, 241, 0.25); border-radius: 0.68rem; padding: 0.5rem 0.56rem; background: rgba(15, 23, 42, 0.54); display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; } .overview-data-vault-key { color: var(--text-subtle); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; } .overview-data-vault-value { font-size: 0.9rem; font-weight: 700; overflow-wrap: anywhere; } @media (max-width: 980px) { .overview-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .overview-pill-groups { grid-template-columns: 1fr; } .overview-chart-grid { grid-template-columns: 1fr; } .overview-data-vault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .overview-stats-content { gap: 0.75rem; } .overview-stats-grid { gap: 0.45rem; } .overview-stat { padding: 0.56rem 0.58rem; } .overview-stat span { font-size: 0.7rem; line-height: 1.3; } .overview-stat strong { font-size: 0.92rem; } .overview-chart-card { padding: 0.62rem; } .overview-data-vault { padding: 0.62rem; } } @media (max-width: 560px) { .overview-stats-grid { grid-template-columns: 1fr; } .overview-pill-group { padding: 0.6rem; } .overview-pill-grid { grid-template-columns: 1fr; } .overview-pill span { font-size: 0.7rem; line-height: 1.25; } .overview-pill strong { font-size: 0.88rem; } .overview-chart-card canvas { width: 100% !important; height: 120px !important; } .overview-data-vault-grid { grid-template-columns: 1fr; } .overview-data-vault-key { font-size: 0.65rem; } .overview-data-vault-value { font-size: 0.84rem; } } @media (max-width: 720px) { #directoryView .directory-filters-toggle { display: inline-flex; width: 100%; justify-content: center; margin-bottom: 0.45rem; min-height: 38px; padding: 0.4rem 0.7rem; font-size: 0.95rem; } #directoryView .directory-filters-panel { display: none; } #directoryView .directory-filters-panel.open { display: block; margin-top: 0.2rem; padding: 0.35rem 0; } #directoryView .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-bottom: 0.35rem; } #directoryView .form-group { min-width: 0; width: 100%; max-width: none !important; } #directoryView .form-group.dir-filter-search { grid-column: 1 / -1; } #directoryView .form-group.dir-filter-page-size { display: none; } #directoryView .form-label { display: none; } #directoryView .form-input, #directoryView .form-select { padding: 0.42rem 0.62rem; font-size: 0.88rem; min-height: 36px; border-radius: 0.6rem; } #directoryView .directory-fav-first { margin: 0.1rem 0 0.25rem; } #directoryView .directory-fav-first label { font-size: 0.8rem; } #directoryView .local-directory-pagination { flex-wrap: wrap; justify-content: center; gap: 0.45rem; } #directoryView .dir-table-wrap { border: none; border-radius: 0; background: transparent; overflow: auto; } #directoryView .table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0 0.45rem; } #directoryView .table thead { display: none; } #directoryView .table tbody { display: block; width: 100%; } #directoryView .table tbody tr { display: block; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 0.72rem; padding: 0.52rem 0.62rem; background: rgba(5, 16, 28, 0.58); } #directoryView .table tbody td { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; width: 100%; padding: 0.3rem 0; border: 0; text-align: right; overflow-wrap: anywhere; } #directoryView .table tbody td::before { content: attr(data-label); color: var(--text-subtle); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; } #directoryView .table tbody td.check-cell::before, #directoryView .table tbody td.fav-marker-cell::before, #directoryView .table tbody td.actions-cell::before { content: ""; } #directoryView .table tbody td.check-cell { justify-content: flex-start; padding-top: 0.1rem; } #directoryView .table tbody td.fav-marker-cell { justify-content: flex-start; padding-top: 0.1rem; } #directoryView .table tbody td.actions-cell { justify-content: stretch; text-align: left; } #directoryView .table tbody td.actions-cell .action-buttons { width: 100%; display: grid; grid-template-columns: 2.3rem 2.3rem minmax(0, 1fr); gap: 0.35rem; } #directoryView .table tbody td.actions-cell .btn { width: 100%; text-align: center; } #directoryView .table tbody td.actions-cell .btn-add { white-space: normal; } } @media (max-width: 560px) { #directoryView .table tbody td { font-size: 0.9rem; } #directoryView .table tbody td.actions-cell .action-buttons { grid-template-columns: 1fr; } } /* Small badge used above cards */ .card-badge { display:inline-block; font-size:0.75rem; color:var(--text-main); background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.03); padding: 0.18rem 0.5rem; border-radius: 999px; margin-bottom: 0.5rem; } /* Action buttons container – horizontal layout */ .action-buttons { display: flex; align-items: center; gap: 0.45rem; justify-content: flex-start; flex-wrap: wrap; } .table .actions-cell .btn { min-height: 2.25rem; padding: 0.42rem 0.72rem; border-radius: 0.74rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease; } .table .actions-cell .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.42); } .table .actions-cell .action-buttons { display: grid; width: 100%; grid-template-columns: 2.3rem 2.3rem minmax(0, 1fr); gap: 0.45rem; align-items: center; justify-content: start; } /* Stats button styling */ .btn-stats { background: rgba(14, 116, 144, 0.14); border: 1px solid rgba(34, 211, 238, 0.55); color: #67e8f9; } .btn-stats:hover:not(:disabled) { background: rgba(14, 116, 144, 0.24); border-color: rgba(103, 232, 249, 0.82); } /* Add button styling */ .btn-add { min-width: 0; width: 100%; padding: 0.48rem 0.9rem; border-radius: 0.74rem; border: 1px solid rgba(16, 185, 129, 0.72); background: linear-gradient(135deg, rgba(16, 185, 129, 0.96), rgba(5, 150, 105, 0.96)); color: #ecfdf5; font-size: 0.9rem; line-height: 1.15; white-space: nowrap; } .btn-add:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16, 185, 129, 0.32); } .btn-favorite-toggle { min-width: 2rem; width: 2rem; height: 2rem; padding: 0; font-size: 1rem; line-height: 1; color: #facc15; border-color: rgba(250, 204, 21, 0.5); } .btn-favorite-toggle.is-active { background: rgba(250, 204, 21, 0.16); border-color: rgba(250, 204, 21, 0.8); } .btn-row-select { min-width: 2rem; width: 2rem; height: 2rem; padding: 0; color: #facc15; border-color: rgba(250, 204, 21, 0.56); background: rgba(15, 23, 42, 0.62); } .btn-row-select.is-active { background: rgba(250, 204, 21, 0.2); border-color: rgba(250, 204, 21, 0.9); } .btn-row-select.is-favorite { color: #fde047; border-color: rgba(250, 204, 21, 0.95); background: linear-gradient(145deg, rgba(120, 53, 15, 0.45), rgba(250, 204, 21, 0.18)); box-shadow: inset 0 0 0 1px rgba(253, 224, 71, 0.25); } .btn-row-select.is-active.is-favorite { color: #fff7cc; border-color: rgba(250, 204, 21, 1); background: radial-gradient(circle at 32% 28%, rgba(255, 247, 191, 0.55), rgba(250, 204, 21, 0.26) 42%, rgba(120, 53, 15, 0.52)); box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22), 0 8px 16px rgba(120, 53, 15, 0.26); } .table tbody tr.row-favorite td.fav-marker-cell { background: linear-gradient(90deg, rgba(250, 204, 21, 0.18), rgba(250, 204, 21, 0.06)); } .table tbody tr.row-selected.row-favorite td.fav-marker-cell { background: linear-gradient(90deg, rgba(250, 204, 21, 0.26), rgba(34, 197, 94, 0.14)); } .btn-favorite-action { border: 1px solid rgba(250, 204, 21, 0.58); background: rgba(250, 204, 21, 0.15); color: #fde68a; } .btn-favorite-action.is-active { background: rgba(250, 204, 21, 0.25); } .btn-adhoc-delete { border: 1px solid rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.14); color: #fecaca; } .btn-icon-square { min-width: 2.3rem; width: 2.3rem; height: 2.3rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.72rem; font-size: 0.96rem; } .btn-add.btn-selected { border-color: rgba(52, 211, 153, 0.78); background: linear-gradient(135deg, rgba(4, 120, 87, 0.95), rgba(5, 150, 105, 0.95)); } .btn-add.btn-approval { border-color: rgba(250, 204, 21, 0.72); background: linear-gradient(135deg, rgba(217, 119, 6, 0.96), rgba(202, 138, 4, 0.96)); color: #fff7ed; } .btn-add.btn-verify { border-color: rgba(56, 189, 248, 0.72); background: linear-gradient(135deg, rgba(14, 116, 144, 0.96), rgba(2, 132, 199, 0.96)); color: #ecfeff; } .btn-added, .btn-add:disabled, .btn-icon-square:disabled, .btn-row-select:disabled { opacity: 0.62; cursor: not-allowed; box-shadow: none; transform: none; } .btn-add:disabled { border-color: rgba(71, 85, 105, 0.8); background: rgba(51, 65, 85, 0.78); color: #cbd5e1; } .adhoc-pill { display: inline-flex; align-items: center; margin-left: 0.4rem; padding: 0.12rem 0.42rem; border-radius: 999px; border: 1px solid rgba(250, 204, 21, 0.5); background: rgba(250, 204, 21, 0.15); color: #fde68a; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .muted-cell { color: var(--text-subtle); font-size: 0.85em; } .directory-fav-first { margin: 0.2rem 0 0.35rem; } .directory-fav-first label { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-subtle); font-size: 0.84rem; } .directory-fav-first input[type="checkbox"] { width: 16px; height: 16px; } /* Keep min-avg numeric filters visually consistent with themed inputs */ #directoryView .dir-filter-min-avg .form-input[type="number"], .user-directory-modal .dir-filter-min-avg .form-input[type="number"] { appearance: textfield; -moz-appearance: textfield; padding-right: 0.78rem; } #directoryView .dir-filter-min-avg .form-input[type="number"]::-webkit-outer-spin-button, #directoryView .dir-filter-min-avg .form-input[type="number"]::-webkit-inner-spin-button, .user-directory-modal .dir-filter-min-avg .form-input[type="number"]::-webkit-outer-spin-button, .user-directory-modal .dir-filter-min-avg .form-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ===== Remote Match Styles ===== */ .remote-player-item { padding: 0.75rem; margin-bottom: 0.5rem; background: rgba(37, 99, 235, 0.08); border: 1px solid var(--border-subtle); border-radius: 0.375rem; transition: all 0.2s ease; } .remote-player-item.disconnected { opacity: 0.6; background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.2); } .remote-player-item:hover { background: rgba(37, 99, 235, 0.12); border-color: var(--accent-info); } .remote-player-item .player-name { font-weight: 600; color: var(--text-main); margin-bottom: 0.25rem; } .remote-player-item .player-status { font-size: 0.85rem; color: var(--text-subtle); } .remote-video { border-radius: 0.25rem; object-fit: cover; } .remote-game-info { background: rgba(37, 99, 235, 0.1); padding: 1rem; border-radius: 0.5rem; font-size: 0.95rem; } .remote-game-info .game-status { font-size: 1.1rem; font-weight: 600; color: var(--accent-info); text-transform: uppercase; margin-bottom: 0.5rem; } .remote-game-info .game-active { margin-bottom: 0.5rem; } .remote-game-info .game-turn { font-size: 0.85rem; color: var(--text-subtle); } .remote-game-winner { font-size: 1.2rem; font-weight: 700; color: var(--accent-success); text-align: center; margin-top: 1rem; } .btn-secondary { background: rgba(37, 99, 235, 0.15); border: 1px solid var(--accent-info); color: var(--accent-info); padding: 0.65rem 1rem; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s ease; font-size: 0.95rem; font-weight: 500; } .btn-secondary:hover:not(:disabled) { background: rgba(37, 99, 235, 0.25); border-color: var(--accent-info); } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } .remote-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;transition:all 0.3s ease;} .remote-video-grid.zoom-0 video{width:100%;height:140px;background:#000;border-radius:0.5rem;object-fit:contain;} .remote-video-grid.zoom-1 video{width:100%;height:160px;background:#000;border-radius:0.5rem;object-fit:contain;} .remote-video-grid.zoom-2 video{width:100%;height:200px;background:#000;border-radius:0.5rem;object-fit:contain;} .remote-video-grid.zoom-3 video{width:100%;height:250px;background:#000;border-radius:0.5rem;object-fit:contain;} .remote-video-grid.zoom-4 video{width:100%;height:300px;background:#000;border-radius:0.5rem;object-fit:contain;} .remote-video-pill{display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--text-subtle);} .remote-video-pill .dot{width:8px;height:8px;border-radius:999px;background:var(--border-subtle);} .remote-video-pill.connected .dot{background:var(--accent-success);} .remote-join-code-panel { margin-bottom: 0.9rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(34, 211, 238, 0.42); border-radius: 0.75rem; background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(34, 211, 238, 0.12)); } .remote-join-code-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 0.35rem; } .remote-join-code-value { font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 800; line-height: 1; letter-spacing: 0.2em; color: #e6f6ff; padding: 0.28rem 0.2rem 0.34rem; border: 1px dashed rgba(34, 211, 238, 0.5); border-radius: 0.55rem; text-align: center; background: rgba(5, 16, 28, 0.6); } .remote-join-code-help { margin-top: 0.45rem; font-size: 0.82rem; color: var(--text-subtle); } .remote-join-code-actions { margin-top: 0.5rem; display: flex; justify-content: flex-end; } .btn-icon{ background:rgba(37,99,235,0.1); border:1px solid var(--accent-info); color:var(--accent-info); padding:0.4rem 0.6rem; border-radius:0.375rem; cursor:pointer; transition:all 0.2s ease; font-size:1rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; } .btn-icon:hover:not(:disabled){ background:rgba(37,99,235,0.25); } .btn-icon:disabled{ opacity:0.5; cursor:not-allowed; } /* Companion download card */ .companion-body { display: flex; flex-direction: column; gap: 0.4rem; } .companion-pilot-banner { border: 1px solid rgba(245, 158, 11, 0.65); background: linear-gradient(135deg, rgba(180, 83, 9, 0.22), rgba(245, 158, 11, 0.14)); border-radius: 0.7rem; padding: 0.75rem 0.85rem; margin-bottom: 0.35rem; box-shadow: 0 8px 18px rgba(120, 53, 15, 0.24); } .companion-pilot-title { font-weight: 800; font-size: 0.96rem; color: #fde68a; letter-spacing: 0.01em; } .companion-pilot-text { margin-top: 0.28rem; color: #fef3c7; font-size: 0.9rem; line-height: 1.4; } .companion-version { font-weight: 600; } .companion-downloads { display: flex; flex-direction: column; gap: 0.35rem; } .companion-downloads .download-item { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; padding: 0.45rem 0.55rem; border: 1px solid var(--border-subtle); border-radius: 0.45rem; } .companion-downloads .download-meta { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.9rem; } .companion-downloads .download-meta .label { font-weight: 600; } .companion-notes { font-size: 0.9rem; color: var(--text-subtle); } #directoryView:not(.directory-picker-mode) #dirTable .btn-add { display: none; } #directoryView .directory-search-row { margin: 0.2rem 0 0.55rem; } #directoryView .directory-search-row .form-label { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb1c8; } #directoryView .directory-search-row .form-input { min-height: 48px; font-size: 1.08rem; border-radius: 14px; } #directoryView .directory-filters-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin-bottom: 0.5rem; } #directoryView .directory-filters-panel { display: none; margin-top: 0.2rem; } #directoryView .directory-filters-panel.open { display: block; } #directoryView .directory-picker-actions { gap: 0.45rem; align-items: center; } #directoryView .directory-picker-close { min-width: 38px; width: 38px; height: 38px; padding: 0; font-size: 1.05rem; line-height: 1; } #directoryView #dirApplySelectedBtn[disabled] { opacity: 0.45; filter: grayscale(0.3); cursor: not-allowed; box-shadow: none; } #directoryView .card-header { align-items: flex-start; } @media (max-width: 720px) { #directoryView .directory-picker-actions { width: 100%; justify-content: flex-end; } #directoryView .directory-search-row .form-input { min-height: 42px; font-size: 1rem; border-radius: 12px; } }