@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* =========================== CSS Custom Properties =========================== */ :root { /* Dark forest theme */ --bg-primary: #0a0f0d; --bg-secondary: #111a16; --bg-tertiary: #162018; --bg-card: #141f19; --bg-card-hover: #1a2b22; --bg-glass: rgba(20, 35, 28, 0.7); --bg-glass-hover: rgba(26, 43, 34, 0.85); /* Accent colors */ --gold: #d4a843; --gold-light: #f0d078; --gold-dim: #a07830; --green-primary: #2ecc71; --green-dim: #1a8a4a; --green-forest: #1b5e36; --emerald: #50c878; --teal: #20b2aa; /* Rarity colors */ --rarity-algemeen: #8fbc8f; --rarity-vrij-algemeen: #4fc3f7; --rarity-zeldzaam: #ffa726; --rarity-zeer-zeldzaam: #ef5350; --rarity-dwaalgast: #ffd700; /* Text colors */ --text-primary: #e8f0eb; --text-secondary: #9cb5a5; --text-muted: #5d7a69; --text-accent: var(--gold-light); /* Borders */ --border-subtle: rgba(46, 204, 113, 0.1); --border-glow: rgba(212, 168, 67, 0.3); /* Shadows */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 30px rgba(46, 204, 113, 0.1); --shadow-gold: 0 0 20px rgba(212, 168, 67, 0.2); /* Doorschijnende vlakken (invoervelden, knoppen) */ --overlay-bg: rgba(255, 255, 255, 0.05); --overlay-bg-strong: rgba(255, 255, 255, 0.08); --overlay-border: rgba(255, 255, 255, 0.15); --overlay-border-soft: rgba(255, 255, 255, 0.1); --header-bg: rgba(10, 15, 13, 0.85); --modal-backdrop: rgba(0, 0, 0, 0.7); color-scheme: dark; /* Misc */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Licht thema: gezet via data-theme="light" op (zie theme.js) */ :root[data-theme="light"] { --bg-primary: #f3f6f1; --bg-secondary: #e9efe6; --bg-tertiary: #e1e9dd; --bg-card: #ffffff; --bg-card-hover: #eef4eb; --bg-glass: rgba(255, 255, 255, 0.75); --bg-glass-hover: rgba(255, 255, 255, 0.9); --gold: #a87b12; --gold-light: #8a6410; --gold-dim: #c9a24a; --green-primary: #1e8e4e; --green-dim: #1a8a4a; --green-forest: #1b5e36; --emerald: #2e9e5b; --teal: #178a84; --rarity-algemeen: #4f7f4f; --rarity-vrij-algemeen: #0277bd; --rarity-zeldzaam: #d35400; --rarity-zeer-zeldzaam: #c62828; --rarity-dwaalgast: #a67c00; --text-primary: #15241b; --text-secondary: #3f5a4a; --text-muted: #6b8577; --border-subtle: rgba(27, 94, 54, 0.15); --border-glow: rgba(168, 123, 18, 0.4); --shadow-card: 0 4px 16px rgba(21, 36, 27, 0.08); --shadow-glow: 0 0 24px rgba(30, 142, 78, 0.15); --shadow-gold: 0 0 16px rgba(168, 123, 18, 0.2); --overlay-bg: rgba(21, 36, 27, 0.03); --overlay-bg-strong: rgba(21, 36, 27, 0.05); --overlay-border: rgba(21, 36, 27, 0.18); --overlay-border-soft: rgba(21, 36, 27, 0.1); --header-bg: rgba(243, 246, 241, 0.85); --modal-backdrop: rgba(21, 36, 27, 0.45); color-scheme: light; } .theme-toggle { font-size: 16px; padding: 8px 12px; } /* =========================== Reset & Base =========================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* Background pattern */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 20% 50%, rgba(46, 204, 113, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(212, 168, 67, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(32, 178, 170, 0.03) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* =========================== Header =========================== */ .header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); padding: 0 24px; } .header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 72px; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); } .logo-icon { font-size: 32px; filter: drop-shadow(0 0 8px rgba(212, 168, 67, 0.4)); } .logo-text { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--emerald)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .logo-year { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: -4px; } .header-nav { display: flex; align-items: center; gap: 8px; } .nav-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--transition); text-decoration: none; font-family: inherit; } .nav-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-glow); } .nav-btn.active { background: var(--bg-card); color: var(--gold-light); border-color: var(--gold-dim); } .nav-btn.primary { background: linear-gradient(135deg, var(--green-forest), var(--green-dim)); border-color: var(--green-dim); color: #fff; } .nav-btn.primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); } /* =========================== Main Layout =========================== */ .main-content { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 24px; } /* =========================== Stats Bar =========================== */ .stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 20px; display: flex; align-items: center; gap: 16px; transition: var(--transition); } .stat-card:hover { border-color: var(--border-glow); transform: translateY(-2px); box-shadow: var(--shadow-card); } .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .stat-icon.players { background: rgba(46, 204, 113, 0.15); } .stat-icon.species { background: rgba(79, 195, 247, 0.15); } .stat-icon.points { background: rgba(212, 168, 67, 0.15); } .stat-icon.rare { background: rgba(239, 83, 80, 0.15); } .stat-info h3 { font-size: 24px; font-weight: 700; line-height: 1.1; } .stat-info p { font-size: 13px; color: var(--text-muted); font-weight: 500; } /* =========================== Dashboard Grid =========================== */ .dashboard-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; } @media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr; } } /* =========================== Cards =========================== */ .card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); } .card-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .card-body { padding: 0; } .card-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--bg-tertiary); color: var(--text-muted); } /* =========================== Leaderboard =========================== */ .leaderboard-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); transition: var(--transition); cursor: pointer; } .leaderboard-item:last-child { border-bottom: none; } .leaderboard-item:hover { background: var(--bg-card-hover); } /* Top 3 special styling */ .leaderboard-item.rank-1 { background: linear-gradient(90deg, rgba(212, 168, 67, 0.08), transparent); border-left: 3px solid var(--gold); } .leaderboard-item.rank-2 { background: linear-gradient(90deg, rgba(192, 192, 192, 0.06), transparent); border-left: 3px solid #c0c0c0; } .leaderboard-item.rank-3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.06), transparent); border-left: 3px solid #cd7f32; } .rank-badge { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; } .rank-1 .rank-badge { background: linear-gradient(135deg, #ffd700, #daa520); color: #1a1a1a; box-shadow: 0 0 16px rgba(255, 215, 0, 0.3); } .rank-2 .rank-badge { background: linear-gradient(135deg, #e0e0e0, #a0a0a0); color: #1a1a1a; } .rank-3 .rank-badge { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; } .rank-badge.default { background: var(--bg-tertiary); color: var(--text-muted); font-size: 14px; } .player-info { min-width: 0; } .player-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-meta { display: flex; align-items: center; gap: 12px; margin-top: 2px; } .player-species-count { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .player-rarity-dots { display: flex; gap: 3px; } .rarity-dot { width: 8px; height: 8px; border-radius: 50%; } .rarity-dot.dwaalgast { background: var(--rarity-dwaalgast); } .rarity-dot.zeer-zeldzaam { background: var(--rarity-zeer-zeldzaam); } .rarity-dot.zeldzaam { background: var(--rarity-zeldzaam); } .player-score { text-align: right; flex-shrink: 0; } .score-points { font-size: 20px; font-weight: 800; color: var(--gold-light); font-family: 'JetBrains Mono', monospace; } .score-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } /* =========================== Recent Activity Feed =========================== */ .activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); transition: var(--transition); } .activity-item:last-child { border-bottom: none; } .activity-item:hover { background: var(--bg-card-hover); } .activity-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; } .activity-content { flex: 1; min-width: 0; } .activity-species { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .activity-species-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .activity-player { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .activity-points { flex-shrink: 0; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--gold); font-family: 'JetBrains Mono', monospace; } /* Rarity badges */ .rarity-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .rarity-badge.algemeen { background: rgba(143, 188, 143, 0.15); color: var(--rarity-algemeen); } .rarity-badge.vrij_algemeen { background: rgba(79, 195, 247, 0.15); color: var(--rarity-vrij-algemeen); } .rarity-badge.zeldzaam { background: rgba(255, 167, 38, 0.15); color: var(--rarity-zeldzaam); } .rarity-badge.zeer_zeldzaam { background: rgba(239, 83, 80, 0.15); color: var(--rarity-zeer-zeldzaam); } .rarity-badge.dwaalgast { background: rgba(255, 215, 0, 0.2); color: var(--rarity-dwaalgast); box-shadow: 0 0 8px rgba(255, 215, 0, 0.15); } /* =========================== Empty States =========================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; } .empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; } .empty-state h3 { font-size: 18px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; } .empty-state p { font-size: 14px; color: var(--text-muted); max-width: 300px; } /* =========================== Player Detail Modal =========================== */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-backdrop); backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition); } .modal-overlay.active { opacity: 1; visibility: visible; } .modal { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); max-width: 640px; width: 90%; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; transform: scale(0.95) translateY(10px); transition: var(--transition); } .modal-overlay.active .modal { transform: scale(1) translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); } .modal-header h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg-tertiary); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: var(--transition); } .modal-close:hover { background: var(--bg-card-hover); color: var(--text-primary); } .modal-body { overflow-y: auto; padding: 20px 24px; flex: 1; } .modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .modal-stat { background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 12px; text-align: center; } .modal-stat-value { font-size: 24px; font-weight: 800; font-family: 'JetBrains Mono', monospace; } .modal-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .species-list { list-style: none; } .species-list-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); } .species-list-item:last-child { border-bottom: none; } .species-name { font-size: 14px; font-weight: 500; } .species-scientific { font-size: 12px; color: var(--text-muted); font-style: italic; } .species-points { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--gold); } /* =========================== Loading State =========================== */ .loading { display: flex; align-items: center; justify-content: center; padding: 40px; } .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border-subtle); border-top-color: var(--green-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* =========================== Animations =========================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-in { animation: fadeInUp 0.4s ease forwards; } .leaderboard-item { animation: fadeInUp 0.3s ease forwards; opacity: 0; } .leaderboard-item:nth-child(1) { animation-delay: 0.05s; } .leaderboard-item:nth-child(2) { animation-delay: 0.1s; } .leaderboard-item:nth-child(3) { animation-delay: 0.15s; } .leaderboard-item:nth-child(4) { animation-delay: 0.2s; } .leaderboard-item:nth-child(5) { animation-delay: 0.25s; } .leaderboard-item:nth-child(6) { animation-delay: 0.3s; } .leaderboard-item:nth-child(7) { animation-delay: 0.35s; } .leaderboard-item:nth-child(8) { animation-delay: 0.4s; } .leaderboard-item:nth-child(9) { animation-delay: 0.45s; } .leaderboard-item:nth-child(10) { animation-delay: 0.5s; } .activity-item { animation: fadeInUp 0.3s ease forwards; opacity: 0; } .activity-item:nth-child(1) { animation-delay: 0.05s; } .activity-item:nth-child(2) { animation-delay: 0.1s; } .activity-item:nth-child(3) { animation-delay: 0.15s; } .activity-item:nth-child(4) { animation-delay: 0.2s; } .activity-item:nth-child(5) { animation-delay: 0.25s; } /* =========================== Last Updated =========================== */ .last-updated { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); padding: 12px 24px; border-top: 1px solid var(--border-subtle); } .update-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-primary); animation: pulse 2s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; box-shadow: 0 0 8px rgba(46, 204, 113, 0.6); } } /* =========================== Scrollbar =========================== */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* =========================== Admin Page Styles =========================== */ .admin-container { max-width: 800px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; } .admin-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-bottom: 24px; } @media (max-width: 640px) { .admin-form { grid-template-columns: 1fr; } } .admin-form input { padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--bg-tertiary); color: var(--text-primary); font-family: inherit; font-size: 14px; outline: none; transition: var(--transition); } .admin-form input:focus { border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1); } .admin-form input::placeholder { color: var(--text-muted); } .btn { padding: 10px 20px; border-radius: var(--radius-sm); border: none; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; } .btn-primary { background: linear-gradient(135deg, var(--green-forest), var(--green-dim)); color: #fff; } .btn-primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); } .btn-danger { background: rgba(239, 83, 80, 0.15); color: var(--rarity-zeer-zeldzaam); border: 1px solid rgba(239, 83, 80, 0.2); } .btn-danger:hover { background: rgba(239, 83, 80, 0.25); } .btn-sm { padding: 6px 12px; font-size: 12px; } .player-list { list-style: none; } .player-list-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); } .player-list-item:last-child { border-bottom: none; } .player-list-info { display: flex; align-items: center; gap: 12px; } .player-list-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; } .player-list-details h4 { font-size: 14px; font-weight: 600; } .player-list-details p { font-size: 12px; color: var(--text-muted); } .player-list-actions { display: flex; gap: 8px; } /* Toast Notifications */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 14px 20px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 14px; box-shadow: var(--shadow-card); animation: slideInRight 0.3s ease, fadeOut 0.3s ease 3s forwards; max-width: 360px; } .toast.success { border-color: rgba(46, 204, 113, 0.3); } .toast.error { border-color: rgba(239, 83, 80, 0.3); } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeOut { to { opacity: 0; transform: translateY(10px); } } /* =========================== Responsive =========================== */ @media (max-width: 768px) { .header-inner { height: 60px; } .logo-text { font-size: 18px; } .main-content { padding: 16px; } .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 12px; } .stat-card { padding: 14px; } .stat-icon { width: 40px; height: 40px; font-size: 18px; } .stat-info h3 { font-size: 20px; } .dashboard-grid { grid-template-columns: 1fr; } .leaderboard-item { padding: 12px 16px; gap: 12px; } .score-points { font-size: 16px; } .modal { width: 95%; max-height: 90vh; border-radius: var(--radius-lg); } } /* =========================== Uitleg puntentelling =========================== */ .help-card > summary { cursor: pointer; list-style: none; } .help-card > summary::-webkit-details-marker { display: none; } .help-card:not([open]) > summary { border-bottom: none; } .help-card > summary:hover { background: var(--bg-card-hover); } .help-toggle { color: var(--text-muted); transition: var(--transition); } .help-card[open] .help-toggle { transform: rotate(180deg); } .help-body { padding: 20px 24px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; } .rarity-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; } .rarity-legend-item { display: flex; align-items: center; gap: 8px; } .rarity-legend-item .rarity-badge { font-size: 12px; padding: 4px 12px; } .rarity-legend-points { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--gold); } .help-list { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .help-list .rarity-dot { display: inline-block; margin: 0 2px 0 4px; } /* =========================== Waarnemingen toevoegen =========================== */ .upload-body { padding: 20px 24px; } .upload-intro { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; } .form-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .text-input { flex: 1; min-width: 180px; padding: 10px 16px; background: var(--overlay-bg); border: 2px solid var(--overlay-border); border-radius: 10px; color: var(--text-primary); font-family: inherit; font-size: 14px; } .text-input.wide { flex: 2; min-width: 240px; } .text-input:focus { outline: none; border-color: var(--green-primary); } .upload-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; } .upload-banner.success { background: rgba(46, 204, 113, 0.1); border: 1px solid rgba(46, 204, 113, 0.3); } .upload-banner.info { background: rgba(52, 152, 219, 0.1); border: 1px solid rgba(52, 152, 219, 0.3); } .upload-banner-icon { font-size: 20px; } .upload-banner-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .upload-banner-text { font-size: 12px; color: var(--text-muted); } .icon-btn { margin-left: auto; padding: 4px 12px; font-size: 12px; cursor: pointer; background: var(--overlay-bg-strong); border: 1px solid var(--overlay-border); border-radius: 6px; color: var(--text-secondary); flex-shrink: 0; } .icon-btn:hover { color: var(--text-primary); } .btn-secondary { padding: 10px 20px; background: var(--overlay-bg-strong); border: 1px solid var(--overlay-border); color: var(--text-secondary); } .btn-secondary:hover { color: var(--text-primary); } .upload-option { padding: 16px; border: 1px solid var(--overlay-border-soft); border-radius: var(--radius-md); margin-top: 16px; } .upload-option.recommended { border-color: rgba(46, 204, 113, 0.35); background: rgba(46, 204, 113, 0.04); } .upload-option-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .option-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 10px; background: rgba(46, 204, 113, 0.15); color: var(--green-primary); } .upload-option-text { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .how-to { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; } .how-to summary { cursor: pointer; color: var(--green-primary); font-weight: 500; } .how-to ol { margin-top: 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; } .how-to a { color: var(--green-primary); } .how-to code { font-family: 'JetBrains Mono', monospace; font-size: 12px; word-break: break-all; } .dropzone { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--overlay-bg); border: 2px dashed var(--overlay-border); border-radius: 10px; color: var(--text-secondary); font-size: 14px; cursor: pointer; transition: var(--transition); overflow-wrap: anywhere; } .dropzone:hover, .dropzone.dragover, .dropzone:focus-within { border-color: var(--green-primary); background: rgba(46, 204, 113, 0.06); } .dropzone.has-file { border-style: solid; color: var(--text-primary); } .dropzone-icon { font-size: 20px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .field-warning { font-size: 13px; color: var(--rarity-zeldzaam); margin-top: 8px; } .upload-result { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 10px; color: var(--text-primary); font-weight: 500; font-size: 14px; line-height: 1.5; } .upload-result.success { background: rgba(46, 204, 113, 0.1); border: 1px solid rgba(46, 204, 113, 0.3); } .upload-result.error { background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.3); } /* Eigen rij in het leaderboard */ .leaderboard-item.is-me { box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.4); } .me-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 1px 6px; margin-left: 6px; border-radius: 8px; background: rgba(46, 204, 113, 0.15); color: var(--green-primary); vertical-align: middle; }