/* ================================================================ Arena Dark Theme — Unified dark mode for all Player Portal pages Prefix: ad- (arena-dark) Apply .arena-dark class to or outermost wrapper. ================================================================ */ /* ── Base dark palette ── */ .arena-dark { --ad-bg: #0d1117; --ad-bg-raised: #161b22; --ad-bg-card: #1c2128; --ad-bg-input: #0d1117; --ad-border: rgba(255,255,255,.08); --ad-border-accent: rgba(255,255,255,.12); --ad-text: #e6edf3; --ad-text-muted: rgba(255,255,255,.5); --ad-text-secondary: #8b949e; --ad-accent: #00abe4; --ad-accent-rgb: 0,171,228; --ad-accent-hover: #0095c8; --ad-glow: rgba(0,171,228,.15); --ad-danger: #ef4444; --ad-success: #22c55e; --ad-warning: #f59e0b; /* Apply dark background to body itself */ background: #0d1117; color: #e6edf3; } /* ================================================================ Auth page overrides (.arena-dark .au-*) ================================================================ */ .arena-dark .au-page { background: linear-gradient(160deg, #0a0f1a 0%, #0d1117 50%, #0a1020 100%); } .arena-dark .au-card { background: var(--ad-bg-card); border-color: var(--ad-border-accent); box-shadow: 0 4px 24px rgba(0,0,0,.4); } .arena-dark .au-card__title { color: var(--ad-text); } .arena-dark .au-card__subtitle, .arena-dark .au-card__subtitle .au-label__sub { color: var(--ad-text-secondary); } .arena-dark .au-tabs { border-bottom-color: var(--ad-border); } .arena-dark .au-tabs__btn { color: var(--ad-text-secondary); } .arena-dark .au-tabs__btn:hover { color: var(--ad-text); } .arena-dark .au-tabs__btn--active { color: var(--ad-accent); border-bottom-color: var(--ad-accent); } .arena-dark .au-label { color: var(--ad-text); } .arena-dark .au-label__sub { color: var(--ad-text-secondary); } .arena-dark .au-input { background: var(--ad-bg-input); border-color: var(--ad-border-accent); color: var(--ad-text); } .arena-dark .au-input::placeholder { color: var(--ad-text-muted); } .arena-dark .au-input:focus { border-color: var(--ad-accent); box-shadow: 0 0 0 3px rgba(var(--ad-accent-rgb), .2); } .arena-dark .au-input--error { border-color: var(--ad-danger); } .arena-dark .au-hint { color: var(--ad-text-muted); } .arena-dark .au-btn--primary { background: var(--ad-accent); color: #fff; } .arena-dark .au-btn--primary:hover { background: var(--ad-accent-hover); } .arena-dark .au-btn--outline { color: var(--ad-accent); border-color: var(--ad-accent); background: transparent; } .arena-dark .au-btn--outline:hover { background: rgba(var(--ad-accent-rgb), .1); } .arena-dark .au-btn--success { background: var(--ad-success); } .arena-dark .au-btn--success:hover { background: #16a34a; } .arena-dark .au-link { color: var(--ad-accent); } .arena-dark .au-divider { color: var(--ad-text-muted); } .arena-dark .au-divider::before, .arena-dark .au-divider::after { background: var(--ad-border); } .arena-dark .au-alert--error { background: rgba(239,68,68,.1); color: #fca5a5; border-color: rgba(239,68,68,.3); } .arena-dark .au-alert--success { background: rgba(34,197,94,.1); color: #86efac; border-color: rgba(34,197,94,.3); } .arena-dark .au-alert--info { background: rgba(var(--ad-accent-rgb), .1); color: #7dd3fc; border-color: rgba(var(--ad-accent-rgb), .3); } .arena-dark .au-alert--warning { background: rgba(245,158,11,.1); color: #fcd34d; border-color: rgba(245,158,11,.3); } .arena-dark .au-notice { background: rgba(245,158,11,.1); color: #fcd34d; border-color: rgba(245,158,11,.3); } .arena-dark .au-section { color: var(--ad-accent); border-bottom-color: var(--ad-border); } .arena-dark .au-check { color: var(--ad-text-secondary); } /* ================================================================ Bottom nav dark override ================================================================ */ .arena-dark .bn-nav { background: #161b22; border-top-color: rgba(255,255,255,.06); box-shadow: 0 -4px 16px rgba(0,0,0,.3); } .arena-dark .bn-item { color: #8b949e; } .arena-dark .bn-item:hover { color: #c9d1d9; } .arena-dark .bn-item.active { color: var(--ad-accent); } .arena-dark .bn-item.active::before { background: var(--ad-accent); } .arena-dark .bn-item.danger { color: #f87171; } .arena-dark .bn-item.danger:hover { color: #ef4444; } /* ================================================================ Game top menu dark override ================================================================ */ .arena-dark .game-top-menu { background: var(--game-primary, var(--ad-bg-raised)); border-bottom: 3px solid rgba(255,255,255,.1); } .arena-dark .game-top-menu .game-brand { color: #fff; } .arena-dark .game-top-menu .game-nav-link { color: rgba(255,255,255,.7); } .arena-dark .game-top-menu .game-nav-link:hover { background: rgba(255,255,255,.15); color: #fff; } .arena-dark .game-top-menu .game-nav-link.active { background: rgba(255,255,255,.2); color: #fff; } /* ================================================================ Shared dark page components ================================================================ */ /* Generic dark page background */ .arena-dark .ad-page { background: var(--ad-bg); min-height: 100vh; color: var(--ad-text); } /* Dark card */ .arena-dark .ad-card, .arena-dark .card { background: var(--ad-bg-card); border-color: var(--ad-border); color: var(--ad-text); } /* Dark form controls (Bootstrap) */ .arena-dark .form-control, .arena-dark .form-select { background: var(--ad-bg-input); border-color: var(--ad-border-accent); color: var(--ad-text); } .arena-dark .form-control:focus, .arena-dark .form-select:focus { border-color: var(--ad-accent); box-shadow: 0 0 0 3px rgba(var(--ad-accent-rgb), .2); } .arena-dark .form-control::placeholder { color: var(--ad-text-muted); } /* Dark text utilities */ .arena-dark .text-muted { color: var(--ad-text-secondary) !important; } .arena-dark .text-dark { color: var(--ad-text) !important; } /* Dark background utilities */ .arena-dark .bg-white { background: var(--ad-bg-card) !important; } .arena-dark .bg-light { background: var(--ad-bg-raised) !important; } /* Dark borders */ .arena-dark .border { border-color: var(--ad-border) !important; } .arena-dark .border-2 { border-color: var(--ad-border-accent) !important; } /* Dark badge/pill */ .arena-dark .badge { border-color: var(--ad-border); } /* Dark table */ .arena-dark table { color: var(--ad-text); } .arena-dark .table { --bs-table-bg: transparent; --bs-table-color: var(--ad-text); --bs-table-border-color: var(--ad-border); } /* Dark pagination */ .arena-dark .page-link { background: var(--ad-bg-card); border-color: var(--ad-border); color: var(--ad-text-secondary); } .arena-dark .page-link:hover { background: var(--ad-bg-raised); color: var(--ad-accent); } .arena-dark .page-item.active .page-link { background: var(--ad-accent); border-color: var(--ad-accent); color: #fff; } /* Dark scrollbar */ .arena-dark ::-webkit-scrollbar { width: 8px; height: 8px; } .arena-dark ::-webkit-scrollbar-track { background: var(--ad-bg); } .arena-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; } .arena-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); } /* ================================================================ My Profile (mp-*) dark overrides ================================================================ */ .arena-dark .mp-page { background: #0d1117; } .arena-dark .mp-info-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(0,0,0,.4); } .arena-dark .mp-info-grid { border-bottom-color: rgba(255,255,255,.06); } .arena-dark .mp-info-cell { border-right-color: rgba(255,255,255,.06); } .arena-dark .mp-info-label { color: #8b949e; } .arena-dark .mp-info-value { color: #e6edf3; } .arena-dark .mp-address { color: #8b949e; } .arena-dark .mp-address i { color: var(--ad-accent); } .arena-dark .mp-restricted { color: #8b949e; } .arena-dark .mp-restricted i { color: #6e7681; } .arena-dark .mp-section-icon.perf { background: rgba(var(--ad-accent-rgb),.12); color: var(--ad-accent); } .arena-dark .mp-section-label { color: #e6edf3; } .arena-dark .mp-section-sub { color: #8b949e; } .arena-dark .mp-game-tab { background: #1c2128; border-color: rgba(255,255,255,.1); color: #8b949e; } .arena-dark .mp-game-tab:hover { background: #262c36; color: #c9d1d9; } .arena-dark .mp-game-tab.active { background: var(--ad-accent); border-color: var(--ad-accent); color: #fff; } .arena-dark .mp-kpi-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.3); } .arena-dark .mp-kpi-season-tag.cur { background: rgba(34,197,94,.15); color: #86efac; border-color: rgba(34,197,94,.3); } .arena-dark .mp-kpi-season-tag.prev { background: rgba(255,255,255,.06); color: #8b949e; border-color: rgba(255,255,255,.1); } .arena-dark .mp-kpi-title { color: #e6edf3; } .arena-dark .mp-sub-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 6px rgba(0,0,0,.3); } .arena-dark .mp-sub-head { border-bottom-color: rgba(255,255,255,.06); color: #e6edf3; } .arena-dark .mp-sub-head i { color: #6e7681; } .arena-dark .mp-col-panel { border-right-color: rgba(255,255,255,.06); } .arena-dark .mp-col-label { color: #8b949e; } .arena-dark .mp-rank-big { color: #e6edf3; } .arena-dark .mp-rank-big .denom { color: #6e7681; } .arena-dark .mp-rank-pts { color: #8b949e; } .arena-dark .mp-rank-none { color: #6e7681; } .arena-dark .mp-break-row { border-bottom-color: rgba(255,255,255,.04); } .arena-dark .mp-break-name { color: #c9d1d9; } .arena-dark .mp-break-evt { color: #e6edf3; } .arena-dark .mp-break-pts { color: #6e7681; } .arena-dark .mp-lb-row { border-bottom-color: rgba(255,255,255,.04); } .arena-dark .mp-lb-row:hover { background: rgba(255,255,255,.03); } .arena-dark .mp-lb-rank { color: #8b949e; } .arena-dark .mp-lb-avatar { border-color: rgba(255,255,255,.12); } .arena-dark .mp-lb-avatar-ph { background: #30363d; } .arena-dark .mp-lb-name { color: #e6edf3; } .arena-dark .mp-lb-name a:hover { color: var(--ad-accent); } /* ================================================================ My Events (me-*) dark overrides ================================================================ */ .arena-dark .me-page { background: #0d1117; } .arena-dark .me-section-icon.live { background: rgba(220,38,38,.15); color: #f87171; } .arena-dark .me-section-icon.ended { background: rgba(255,255,255,.06); color: #6e7681; } .arena-dark .me-section-label { color: #e6edf3; } .arena-dark .me-section-count { background: rgba(255,255,255,.08); color: #8b949e; } .arena-dark .me-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.3); } .arena-dark .me-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.5); } .arena-dark .me-cal { background: #161b22; border-right-color: rgba(255,255,255,.06); } .arena-dark .me-cal-tile { border-color: rgba(255,255,255,.1); background: #1c2128; box-shadow: 0 3px 8px rgba(0,0,0,.3); } .arena-dark .me-cal-body { border-top-color: rgba(255,255,255,.15); } .arena-dark .me-cal-day { color: #e6edf3; } .arena-dark .me-cal-dow { color: #8b949e; } .arena-dark .me-cal-year { color: #6e7681; } .arena-dark .me-timepill { color: #c9d1d9; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); } .arena-dark .me-event-name { color: #e6edf3; } .arena-dark .me-event-name:hover { color: var(--ad-accent); } .arena-dark .me-store { color: #8b949e; } .arena-dark .me-badge.open-tag { background: rgba(var(--ad-accent-rgb),.12); border-color: rgba(var(--ad-accent-rgb),.3); color: var(--ad-accent); } .arena-dark .me-badge.ended-tag { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #6e7681; } .arena-dark .me-badge.rank-gold { background: rgba(217,119,6,.15); border-color: rgba(217,119,6,.3); color: #fcd34d; } .arena-dark .me-badge.rank-silver { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #c9d1d9; } .arena-dark .me-badge.rank-bronze { background: rgba(180,83,9,.15); border-color: rgba(180,83,9,.3); color: #fdba74; } .arena-dark .me-badge.rank-other { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #8b949e; } /* ================================================================ My Decks (md-*) dark overrides ================================================================ */ .arena-dark .md-page { background: #0d1117; } .arena-dark .md-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.3); } .arena-dark .md-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.5); } .arena-dark .md-action-btn { border-color: rgba(255,255,255,.12); background: rgba(22,27,34,.92); color: #c9d1d9; } .arena-dark .md-action-btn:hover { background: #1c2128; } .arena-dark .md-action-btn.danger { color: #f87171; } .arena-dark .md-action-btn.cover { color: var(--ad-accent); } .arena-dark .md-card-img { background: #161b22; } .arena-dark .md-card-no-img { color: #6e7681; } .arena-dark .md-card-body { } .arena-dark .md-card-name { color: #e6edf3; } .arena-dark .md-card-game { color: #8b949e; } .arena-dark .md-card-date { color: #6e7681; } .arena-dark .md-card-count { color: #8b949e; } /* Empty state */ .arena-dark .md-empty { color: #6e7681; } /* ================================================================ OnExchange / Reward Shop (ox-*) dark overrides ================================================================ */ .arena-dark .ox-page { background: #0d1117; } .arena-dark .ox-msg.success { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.3); } .arena-dark .ox-msg.error { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.3); } .arena-dark .ox-msg.info { background: rgba(var(--ad-accent-rgb),.12); color: #7dd3fc; border-color: rgba(var(--ad-accent-rgb),.3); } .arena-dark .ox-filter { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 1px 4px rgba(0,0,0,.3); } .arena-dark .ox-filter-label { color: #6e7681; } .arena-dark .ox-filter select { background: #0d1117; border-color: rgba(255,255,255,.12); color: #c9d1d9; } .arena-dark .ox-filter select:focus { border-color: var(--ad-accent); } .arena-dark .ox-reset { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #8b949e; } .arena-dark .ox-reset:hover { background: rgba(255,255,255,.1); } .arena-dark .ox-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.3); } .arena-dark .ox-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.5); } .arena-dark .ox-card-img-wrap { background: #161b22; } .arena-dark .ox-card-no-img { color: #6e7681; } .arena-dark .ox-card-name { color: #e6edf3; } .arena-dark .ox-card-desc { color: #8b949e; } /* ================================================================ My Rewards (mr-*) dark overrides ================================================================ */ .arena-dark .mr-page { background: #0d1117; } .arena-dark .mr-tab { background: #1c2128; color: #8b949e; border-color: rgba(255,255,255,.1); } .arena-dark .mr-tab:hover { background: #262c36; color: #c9d1d9; } .arena-dark .mr-tab.active { background: #0369a1; color: #fff; border-color: #0369a1; } .arena-dark .mr-order-card { background: #1c2128; border-color: rgba(255,255,255,.08); } .arena-dark .mr-order-img-wrap { background: #161b22; border-color: rgba(255,255,255,.08); } .arena-dark .mr-order-no-img { color: #6e7681; } .arena-dark .mr-order-name { color: #e6edf3; } .arena-dark .mr-order-meta { color: #6e7681; } .arena-dark .mr-status.pending { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fcd34d; } .arena-dark .mr-detail-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #c9d1d9; } .arena-dark .mr-form-card { border-top-color: rgba(255,255,255,.06); } .arena-dark .mr-form-label { color: #8b949e; } .arena-dark .mr-form-card select { color: #c9d1d9; background: #0d1117; border-color: rgba(255,255,255,.12); } .arena-dark .mr-hint { color: #6e7681; } .arena-dark .mr-summary-card { background: #1c2128; border-color: rgba(255,255,255,.08); } .arena-dark .mr-summary-row { border-bottom-color: rgba(255,255,255,.06); } .arena-dark .mr-summary-partner { color: #e6edf3; } .arena-dark .mr-summary-total { color: #8b949e; } .arena-dark .mr-summary-th { color: #6e7681; background: #161b22; border-bottom-color: rgba(255,255,255,.06); } .arena-dark .mr-summary-table td { border-bottom-color: rgba(255,255,255,.04); color: #c9d1d9; } /* ================================================================ Event Session (es-*) dark overrides ================================================================ */ .arena-dark .es-page { background: #0d1117; color: #e6edf3; } .arena-dark .es-stage-pill.ended { background: rgba(255,255,255,.06); color: #8b949e; border-color: rgba(255,255,255,.12); } .arena-dark .es-badge-inline.pending { background: rgba(255,255,255,.06); color: #8b949e; } /* Event info section */ .arena-dark .es-info-section { background: #1c2128; border-color: rgba(255,255,255,.08); } .arena-dark .es-info-row { border-bottom-color: rgba(255,255,255,.06); color: #c9d1d9; } .arena-dark .es-info-row:nth-child(even) { background: rgba(255,255,255,.02); } .arena-dark .es-info-label { color: #8b949e; } /* Decklist section */ .arena-dark .es-deck-section { background: #1c2128; border-color: rgba(255,255,255,.08); } /* Arena section */ .arena-dark .es-arena-section { background: #1c2128; border-color: rgba(255,255,255,.08); } /* Table (standings) */ .arena-dark .es-table-wrap { background: #1c2128; border-color: rgba(255,255,255,.08); } .arena-dark .es-table thead th { background: #161b22; border-bottom-color: rgba(255,255,255,.1); color: #8b949e; } .arena-dark .es-table tbody td { color: #c9d1d9; border-bottom-color: rgba(255,255,255,.04); } .arena-dark .es-table tbody tr:hover { background: rgba(255,255,255,.03); } .arena-dark .es-table tbody tr.rank-gold td { background: rgba(217,119,6,.08); } .arena-dark .es-table tbody tr.rank-silver td { background: rgba(255,255,255,.03); } .arena-dark .es-table tbody tr.rank-bronze td { background: rgba(180,83,9,.08); } .arena-dark .es-player-id { color: #6e7681; } /* Upload boxes */ .arena-dark .es-upload-box { border-color: rgba(255,255,255,.1); background: #161b22; } /* Generic card containers in session */ .arena-dark .es-card { background: #1c2128; border-color: rgba(255,255,255,.08); } .arena-dark .es-card-header { background: #161b22; color: #e6edf3; border-bottom-color: rgba(255,255,255,.06); } .arena-dark .es-card-body { color: #c9d1d9; } /* Info bar */ .arena-dark .es-info-bar { color: #8b949e; border-bottom-color: rgba(255,255,255,.06); } /* Section labels */ .arena-dark .es-section-label { color: #8b949e; } /* Registration form */ .arena-dark .es-form-label { color: #e6edf3; } .arena-dark .es-form-hint { color: #6e7681; } .arena-dark .es-select { background: #0d1117; border-color: rgba(255,255,255,.12); color: #e6edf3; } .arena-dark .es-select:focus { border-color: var(--ad-accent); box-shadow: 0 0 0 3px rgba(var(--ad-accent-rgb),.15); } .arena-dark .es-badge-inline.success { background: rgba(34,197,94,.15); color: #86efac; } /* Results table */ .arena-dark .es-results { background: #1c2128; border-color: rgba(255,255,255,.08); } /* Joined banner */ .arena-dark .es-joined-banner { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #86efac; } .arena-dark .es-joined-warn { color: #fbbf24; } /* QR image */ .arena-dark .es-qr { border-color: rgba(255,255,255,.12); } /* Prize text */ .arena-dark .es-prize-text, .arena-dark .es-card-body a { color: var(--ad-accent); } /* File input */ .arena-dark input[type="file"] { color: #c9d1d9; } /* Session Run (TO admin) dark overrides */ .arena-dark .sr-page { background: #0d1117; } .arena-dark .sr-topbar { background: #161b22; border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 2px 8px rgba(0,0,0,.3); } .arena-dark .sr-topbar-title { color: #e6edf3; } .arena-dark .sr-back { color: #8b949e; } .arena-dark .sr-back:hover { color: #e6edf3; } .arena-dark .sr-stage-pill.reg { background: rgba(37,99,235,.15); color: #60a5fa; border-color: rgba(37,99,235,.3); } .arena-dark .sr-stage-pill.live { background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.3); } .arena-dark .sr-stage-pill.done { background: rgba(34,197,94,.15); color: #86efac; border-color: rgba(34,197,94,.3); } .arena-dark .sr-event-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 12px rgba(0,0,0,.3); } .arena-dark .sr-event-name { color: #e6edf3; } .arena-dark .sr-event-meta { color: #8b949e; } .arena-dark .sr-badge { background: rgba(255,255,255,.06); color: #8b949e; border-color: rgba(255,255,255,.1); } .arena-dark .sr-badge.fee { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.3); } .arena-dark .sr-badge.free { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.3); } .arena-dark .sr-badge.count { background: rgba(99,102,241,.12); color: #a5b4fc; border-color: rgba(99,102,241,.3); } .arena-dark .sr-badge.qr { background: #0d1117; border-color: rgba(255,255,255,.12); } .arena-dark .sr-btn.cancel { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.3); } .arena-dark .sr-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 10px rgba(0,0,0,.3); } .arena-dark .sr-card-header { background: #161b22; border-bottom-color: rgba(255,255,255,.06); } .arena-dark .sr-card-title { color: #e6edf3; } .arena-dark .sr-card-sub { color: #6e7681; } .arena-dark .sr-card-body { color: #c9d1d9; } /* Stats bar dark */ .arena-dark .sr-stats-bar { border-bottom-color: rgba(255,255,255,.06); } .arena-dark .sr-stat { background: rgba(255,255,255,.06); color: #8b949e; } .arena-dark .sr-stat .sr-stat-num { color: #e6edf3; } .arena-dark .sr-stat.checkin { background: rgba(34,197,94,.12); color: #86efac; } .arena-dark .sr-stat.checkin .sr-stat-num { color: #86efac; } .arena-dark .sr-stat.paid { background: rgba(37,99,235,.12); color: #93c5fd; } .arena-dark .sr-stat.paid .sr-stat-num { color: #93c5fd; } .arena-dark .sr-stat.deck { background: rgba(124,58,237,.12); color: #c4b5fd; } .arena-dark .sr-stat.deck .sr-stat-num { color: #c4b5fd; } .arena-dark .sr-stat.waitlist { background: rgba(245,158,11,.12); color: #fcd34d; } .arena-dark .sr-stat.waitlist .sr-stat-num { color: #fcd34d; } /* Check-in window dark */ .arena-dark .sr-checkin-window { color: #8b949e; border-bottom-color: rgba(255,255,255,.06); } .arena-dark .sr-checkin-window .sr-window-time { color: #e6edf3; } /* Tabs dark */ .arena-dark .sr-tab { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #6e7681; } .arena-dark .sr-tab.active { background: #1c2128; color: #a5b4fc; border-bottom-color: #1c2128; } .arena-dark .sr-tab-panels { border-top-color: rgba(255,255,255,.08); } /* Pairing table dark */ .arena-dark .sr-pairing-table thead tr { background: #161b22; border-bottom-color: rgba(255,255,255,.08); } .arena-dark .sr-pairing-table th { color: #8b949e; } .arena-dark .sr-pairing-table td { color: #c9d1d9; border-bottom-color: rgba(255,255,255,.04); } .arena-dark .sr-pairing-table tbody tr:hover { background: rgba(255,255,255,.03); } .arena-dark .sr-player-name { color: #e6edf3; } .arena-dark .sr-player-pts { color: #8b949e; } .arena-dark .sr-score-input { background: #0d1117; border-color: rgba(255,255,255,.12); color: #e6edf3; } .arena-dark .sr-score-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); } .arena-dark .sr-score-input:disabled { background: #161b22; color: #6e7681; } .arena-dark .sr-round-status.pending { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(245,158,11,.3); } .arena-dark .sr-round-status.done { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.3); } /* Challenger grid (player cards in session) */ .arena-dark .cl-card { background: #1c2128; border-color: rgba(255,255,255,.08); box-shadow: 0 2px 6px rgba(0,0,0,.3); } .arena-dark .cl-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.5); } .arena-dark .cl-status-bar { background: rgba(255,255,255,.06); } .arena-dark .cl-avatar { border-color: rgba(255,255,255,.12); } .arena-dark .cl-card.checked-in .cl-avatar { border-color: #16a34a; } .arena-dark .cl-name { color: #e6edf3; } .arena-dark .cl-icon { color: #4b5563; } .arena-dark .cl-icon.ok { color: #3b82f6; } .arena-dark .cl-icon.chk-ok { color: #22c55e; } .arena-dark .cl-icon.danger { color: #f87171; } .arena-dark .cl-pay-badge.approved { background: rgba(34,197,94,.15); color: #86efac; } .arena-dark .cl-pay-badge.pending { background: rgba(245,158,11,.15); color: #fcd34d; } .arena-dark .cl-pay-badge.rejected { background: rgba(239,68,68,.15); color: #fca5a5; } .arena-dark .cl-mark-paid { background: rgba(var(--ad-accent-rgb),.15); color: var(--ad-accent); } .arena-dark .cl-mark-paid:hover { background: rgba(var(--ad-accent-rgb),.25); } .arena-dark .cl-wl-badge { background: rgba(217,119,6,.15); color: #fcd34d; } .arena-dark .cl-pay-act.approve { background: rgba(34,197,94,.15); color: #22c55e; } .arena-dark .cl-pay-act.reject { background: rgba(239,68,68,.15); color: #f87171; } .arena-dark .cl-waitlist-sep { color: #fbbf24; } .arena-dark .cl-waitlist-sep::before, .arena-dark .cl-waitlist-sep::after { background: rgba(251,191,36,.2); } /* ================================================================ Event List dark overrides (legacy pages) ================================================================ */ .arena-dark .div-body { color: #e6edf3; } .arena-dark .rounded { border-color: rgba(255,255,255,.08) !important; } /* ================================================================ Game-specific arena background (already dark, ensure consistency) ================================================================ */ .arena-dark .ga-page { background: #0d1117; } .arena-dark .la-page { background: #0d1117; } .arena-dark .ar-page { background: #0a0f1e; } /* ================================================================ Game content pages dark overrides (card search, rules, FAQ) ================================================================ */ .arena-dark .game-arena-bg { background: #0d1117; } .arena-dark .game-content-card { background: #1c2128; border-top-color: var(--ad-accent); box-shadow: 0 2px 16px rgba(0,0,0,.3); } .arena-dark .game-section-heading { color: #e6edf3; border-bottom-color: rgba(255,255,255,.1); } .arena-dark .game-faq details { border-color: rgba(255,255,255,.08); } .arena-dark .game-faq details summary { background: rgba(255,255,255,.04); color: #e6edf3; } .arena-dark .game-faq details[open] summary { background: rgba(255,255,255,.07); } .arena-dark .game-faq details .faq-body { background: #1c2128; color: #c9d1d9; } .arena-dark .game-search-box { background: #1c2128; border-color: rgba(255,255,255,.1); } .arena-dark .game-filter-panel { background: #161b22; border-color: rgba(255,255,255,.08); } .arena-dark .game-event-card { border-color: rgba(255,255,255,.1); background: #1c2128; } .arena-dark .game-video-wrapper { border-color: rgba(255,255,255,.1); } .arena-dark .game-doc-link { color: var(--ad-accent); } .arena-dark .game-doc-link:hover { color: var(--ad-accent-hover); } /* ================================================================ Profile Edit (pe-*) dark overrides ================================================================ */ .arena-dark .pe-page { background: #0d1117; } .arena-dark .pe-back { background: var(--ad-bg-card); border-color: var(--ad-border-accent); color: var(--ad-text-secondary); } .arena-dark .pe-back:hover { background: var(--ad-bg-raised); } .arena-dark .pe-topbar-title { color: var(--ad-text); } .arena-dark .pe-topbar-sub { color: var(--ad-text-secondary); } .arena-dark .pe-card { background: var(--ad-bg-card); border-color: var(--ad-border); } .arena-dark .pe-card-head { color: var(--ad-text); border-bottom-color: var(--ad-border); } .arena-dark .pe-card-head i { color: var(--ad-text-secondary); } .arena-dark .pe-form-wrap label { color: var(--ad-text-secondary); } .arena-dark .pe-form-wrap input[type="text"], .arena-dark .pe-form-wrap input[type="email"], .arena-dark .pe-form-wrap input[type="tel"], .arena-dark .pe-form-wrap input[type="number"], .arena-dark .pe-form-wrap input[type="password"], .arena-dark .pe-form-wrap textarea, .arena-dark .pe-form-wrap select { background: var(--ad-bg-input); border-color: var(--ad-border-accent); color: var(--ad-text); } .arena-dark .pe-form-wrap input:focus, .arena-dark .pe-form-wrap textarea:focus, .arena-dark .pe-form-wrap select:focus { border-color: var(--ad-accent); background: var(--ad-bg-raised); box-shadow: 0 0 0 3px rgba(var(--ad-accent-rgb), .15); } .arena-dark .pe-form-wrap .helptext { color: var(--ad-text-muted); } .arena-dark .pe-form-wrap input[type="file"] { color: var(--ad-text-secondary); } /* ================================================================ Legacy event list & change-password pages dark overrides ================================================================ */ .arena-dark .div-body { color: var(--ad-text); } /* Catch-all: Bootstrap heading classes */ .arena-dark h1, .arena-dark h2, .arena-dark h3, .arena-dark h4, .arena-dark h5, .arena-dark h6 { color: var(--ad-text); } /* Links in dark mode */ .arena-dark a { color: var(--ad-accent); } .arena-dark a:hover { color: var(--ad-accent-hover); } /* Bootstrap btn overrides */ .arena-dark .btn-outline-primary { color: var(--ad-accent); border-color: var(--ad-accent); } .arena-dark .btn-outline-primary:hover { background: var(--ad-accent); color: #fff; } /* ACTIVE EVENTS section divider text */ .arena-dark .section-title, .arena-dark .event-section-title { color: var(--ad-text); } /* ================================================================ Event list button text (Find Events) in dark mode ================================================================ */ .arena-dark .btn-event-list { box-shadow: 0 2px 6px rgba(0,0,0,.3); } /* ================================================================ Event List Body (evl-*) dark overrides ================================================================ */ .arena-dark .evl-heading-line { background: var(--ad-border-accent); } .arena-dark .evl-card { background: var(--ad-bg-card); border-color: var(--ad-border); box-shadow: 0 4px 14px rgba(0,0,0,.3); } .arena-dark .evl-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.5); } .arena-dark .evl-poster { background: var(--ad-bg-raised); } .arena-dark .evl-name { color: var(--ad-text); } .arena-dark .evl-empty { color: var(--ad-text-secondary); } /* ================================================================ Card Search Modal (cm-*) dark overrides ================================================================ */ .arena-dark .cm-content { background: #1c2128; border-color: rgba(255,255,255,.08); } .arena-dark .cm-img-panel { background: #161b22; overflow: hidden; } .arena-dark .cm-img-panel img { border-radius: 14px; } .arena-dark .cm-name { color: #e6edf3; } .arena-dark .cm-meta { color: #8b949e; } .arena-dark .cm-tag-outline { border-color: rgba(255,255,255,.15); color: #c9d1d9; } .arena-dark .cm-tag-light { background: rgba(255,255,255,.06); color: #c9d1d9; } .arena-dark .cm-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #c9d1d9; } .arena-dark .cm-stat-label { color: #8b949e; } .arena-dark .cm-stat-value { color: #e6edf3; } .arena-dark .cm-textbox { background: #161b22; border-color: rgba(255,255,255,.08); color: #c9d1d9; } .arena-dark .cm-flavor { color: #6e7681; } .arena-dark .cm-special { color: #c9d1d9; } .arena-dark .cm-special div { color: #c9d1d9; } .arena-dark .cm-special-cutin { background: rgba(255,152,0,.1); border-color: rgba(255,152,0,.25); } .arena-dark .cm-special-disguise { background: rgba(76,175,80,.1); border-color: rgba(76,175,80,.25); } .arena-dark .cm-special-hirameki { background: rgba(33,150,243,.1); border-color: rgba(33,150,243,.25); } .arena-dark .cm-special-burst { background: rgba(233,30,99,.1); border-color: rgba(233,30,99,.25); } .arena-dark .cm-subtitle { color: #e6edf3; } .arena-dark .cm-divider { background: rgba(255,255,255,.08); } .arena-dark .cm-footer { background: #161b22; border-top-color: rgba(255,255,255,.08); } .arena-dark .cm-footer-info { color: #6e7681; } .arena-dark .cm-btn-nav { background: #1c2128; border-color: rgba(255,255,255,.12); color: #c9d1d9; } .arena-dark .cm-btn-nav:hover:not(:disabled) { background: #262c36; border-color: rgba(255,255,255,.2); } .arena-dark .cm-btn-faq { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #c9d1d9; } .arena-dark .cm-btn-faq:hover { background: rgba(255,255,255,.1); } .arena-dark .cm-faq-panel { background: #161b22; color: #c9d1d9; } .arena-dark .cm-team-badge { background: rgba(255,255,255,.06); color: #c9d1d9; border-color: rgba(255,255,255,.1); } .arena-dark .cm-copyright { color: #6e7681; padding-top: 12px; flex-shrink: 0; } /* ================================================================ Deck Builder Card Info Modal dark overrides ================================================================ */ .arena-dark .card-section { background: #161b22; border-color: rgba(255,255,255,.1); } .arena-dark .card-section h4 { color: #e6edf3; } .arena-dark .card-section .body { color: #c9d1d9; } .arena-dark .card-pill { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #c9d1d9; } .arena-dark .card-modal-img { background: #161b22; border-color: rgba(255,255,255,.08); } .arena-dark .modal-tab { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #8b949e; } .arena-dark .modal-tab:hover { color: #c9d1d9; } .arena-dark .modal-tab.active { background: var(--ad-accent); border-color: var(--ad-accent); color: #fff; } .arena-dark .skill-box { background: #161b22; border-color: rgba(255,255,255,.1); } .arena-dark .skill-title { color: #e6edf3; } /* ================================================================ Bootstrap modal dark overrides ================================================================ */ .arena-dark .modal-content { background: #1c2128; border-color: rgba(255,255,255,.08); color: #e6edf3; } .arena-dark .modal-header { border-bottom-color: rgba(255,255,255,.08); } .arena-dark .modal-footer { border-top-color: rgba(255,255,255,.08); } .arena-dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ================================================================ Card search page — Bootstrap input-group dark overrides ================================================================ */ .arena-dark .input-group-text { background: #161b22; border-color: rgba(255,255,255,.12); color: #c9d1d9; } .arena-dark .form-control-sm { background: var(--ad-bg-input); border-color: var(--ad-border-accent); color: var(--ad-text); } .arena-dark .btn-outline-secondary { color: #8b949e; border-color: rgba(255,255,255,.15); } .arena-dark .btn-outline-secondary:hover { background: rgba(255,255,255,.08); color: #c9d1d9; border-color: rgba(255,255,255,.2); } /* ================================================================ Game Select Modal (gm-*) dark overrides ================================================================ */ .arena-dark .gm-sheet { background: #1c2128; box-shadow: 0 -8px 40px rgba(0,0,0,.5); } .arena-dark .gm-header { border-bottom-color: rgba(255,255,255,.08); } .arena-dark .gm-header-title { color: #e6edf3; } .arena-dark .gm-close { background: rgba(255,255,255,.08); color: #8b949e; } .arena-dark .gm-close:hover { background: rgba(255,255,255,.12); } .arena-dark .gm-game-btn { border-color: rgba(255,255,255,.1); background: #161b22; } .arena-dark .gm-game-btn:hover { border-color: var(--ad-accent); } .arena-dark .gm-game-btn i { color: #6e7681; } .arena-dark .gm-footer { border-top-color: rgba(255,255,255,.08); } .arena-dark .gm-cancel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #8b949e; } .arena-dark .gm-cancel:hover { background: rgba(255,255,255,.1); } /* ================================================================ Cover Picker Modal (cv-*) dark overrides ================================================================ */ .arena-dark .cv-sheet { background: #1c2128; box-shadow: 0 20px 60px rgba(0,0,0,.5); } /* ================================================================ Snap Modal (snap-*) dark overrides ================================================================ */ .arena-dark .snap-sheet { background: #1c2128; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .arena-dark .snap-header { border-bottom-color: rgba(255,255,255,.08); } .arena-dark .snap-title { color: #e6edf3; } .arena-dark .snap-sub { color: #8b949e; } .arena-dark .snap-close { color: #8b949e; } .arena-dark .snap-close:hover { color: #e6edf3; } /* ================================================================ Card catalog — rounded corners to clip white card corners ================================================================ */ .cc_img_list, .dm_img_list, .hk_img_list, .wc_img_list { border-radius: 14px; overflow: hidden; } .div_cc_img, .div_dm_img, .div_hk_img, .div_wc_img { border-radius: 14px; overflow: hidden; }