/* ========================================================================== No Mercy Tournaments — Premium Esports Redesign ========================================================================== */ :root { --bg: #05060d; --bg-2: #080b1a; --panel: rgba(255, 255, 255, 0.035); --panel-2: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(120, 200, 255, 0.28); --cyan: #26e0ff; --blue: #3b82f6; --purple: #a855f7; --text: #eef2fb; --muted: #93a0bd; --radius: 20px; --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9); --glow-cyan: 0 0 40px -6px rgba(38, 224, 255, 0.55); --maxw: 1200px; --font-head: "Chakra Petch", system-ui, sans-serif; --font-body: "Sora", system-ui, sans-serif; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); overflow-x: clip; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-head); letter-spacing: 0.5px; line-height: 1.05; margin: 0; } ::selection { background: rgba(38, 224, 255, 0.3); color: #fff; } /* Background base gradient */ body::before { content: ""; position: fixed; inset: 0; z-index: -6; background: radial-gradient(1200px 700px at 78% -8%, rgba(59, 130, 246, 0.16), transparent 60%), radial-gradient(900px 620px at 8% 12%, rgba(168, 85, 247, 0.14), transparent 60%), linear-gradient(180deg, #05060d 0%, #060814 55%, #05060d 100%); } /* Animated moving colour sweep for a living background with smooth transitions */ body::after { content: ""; position: fixed; inset: -30%; z-index: -6; pointer-events: none; background: linear-gradient(115deg, transparent 20%, rgba(38, 224, 255, 0.10) 40%, rgba(59, 130, 246, 0.12) 50%, rgba(168, 85, 247, 0.10) 60%, transparent 80%); background-size: 300% 300%; filter: blur(30px); opacity: 0.9; animation: bgSweep 26s ease-in-out infinite alternate; will-change: background-position; } @keyframes bgSweep { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 60% 100%; } } /* ===== Animated FX layers ===== */ .fx-canvas { position: fixed; inset: 0; z-index: -5; width: 100%; height: 100%; opacity: 0.85; pointer-events: none; } .fx-aurora { position: fixed; inset: -20%; z-index: -4; pointer-events: none; filter: blur(60px); opacity: 0.5; background: radial-gradient(40% 40% at 20% 30%, rgba(38, 224, 255, 0.22), transparent 70%), radial-gradient(45% 45% at 80% 40%, rgba(168, 85, 247, 0.2), transparent 70%), radial-gradient(40% 40% at 55% 80%, rgba(59, 130, 246, 0.18), transparent 70%); animation: auroraShift 22s ease-in-out infinite alternate; } @keyframes auroraShift { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 100% { transform: translate3d(4%, 3%, 0) scale(1.12); } } .fx-grid { position: fixed; inset: 0; z-index: -3; pointer-events: none; opacity: 0.35; background-image: linear-gradient(rgba(120, 190, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 190, 255, 0.06) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 80%); } .noise { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .orb { position: fixed; z-index: -3; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: 0.4; } .orb-cyan { width: 420px; height: 420px; top: -80px; right: -60px; background: rgba(38, 224, 255, 0.35); animation: floatY 16s ease-in-out infinite; } .orb-purple { width: 460px; height: 460px; bottom: -120px; left: -80px; background: rgba(168, 85, 247, 0.3); animation: floatY 20s ease-in-out infinite reverse; } @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(40px); } } .scanline { position: fixed; inset: 0; z-index: -2; pointer-events: none !important; opacity: 0.4; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.14) 3px 4px); } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple)); box-shadow: var(--glow-cyan); } .cursor-glow { position: fixed; top: 0; left: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; z-index: -1; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.4s; background: radial-gradient(circle, rgba(38, 224, 255, 0.1), transparent 60%); } /* ===== Layout helpers ===== */ .section { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 110px) clamp(18px, 4vw, 40px); } main { position: relative; z-index: 1; } .section-heading { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; } .section-heading .tag, .tag { display: inline-block; font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(38, 224, 255, 0.06); margin-bottom: 18px; } .section-heading h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); } .section-heading p { color: var(--muted); margin: 16px auto 0; font-size: 1rem; } /* ===== Header / Nav ===== */ .site-header { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px clamp(16px, 4vw, 40px); background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img { height: 54px; width: auto; filter: drop-shadow(0 0 16px rgba(38, 224, 255, 0.6)); transition: transform 0.4s, filter 0.4s; } .brand:hover img { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 26px rgba(38, 224, 255, 0.9)); } .nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); flex: 1; justify-content: flex-end; } .nav-links { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--muted); position: relative; padding: 6px 2px; transition: color 0.25s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: linear-gradient(90deg, var(--cyan), var(--purple)); transition: width 0.3s; } .nav-links a:hover, .nav-links a.active { color: #fff; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .header-socials { display: flex; align-items: center; gap: 8px; } .social-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); transition: all 0.25s; } .social-icon svg { width: 17px; height: 17px; } .social-icon.discord-social:hover { color: #fff; border-color: var(--border-strong); background: rgba(88, 101, 242, 0.18); transform: translateY(-2px); } .social-coming-soon { cursor: default; opacity: 0.55; } .language-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 1px; cursor: pointer; transition: all 0.25s; } .language-toggle i { width: 22px; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.1); position: relative; } .language-toggle i::after { content: ""; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--purple)); transition: transform 0.3s; } html[lang="en"] .language-toggle i::after { transform: translateX(10px); } html[lang="en"] .language-toggle span[data-lang-part="en"] { color: #fff; } html[lang="de"] .language-toggle span[data-lang-part="de"] { color: #fff; } .language-toggle:hover { border-color: var(--border-strong); } .nav-cta { font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.5px; padding: 10px 20px; border-radius: 999px; color: #04121a; white-space: nowrap; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 10px 30px -10px rgba(38, 224, 255, 0.7); transition: transform 0.25s, box-shadow 0.25s; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(38, 224, 255, 0.9); } .menu-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; align-items: center; justify-content: center; } .menu-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.open span:nth-child(2) { opacity: 0; } .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.5px; padding: 13px 26px; border-radius: 12px; border: 1px solid transparent; transition: transform 0.25s, box-shadow 0.25s, background 0.25s, border-color 0.25s; } .btn.primary { color: #04121a; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 12px 34px -12px rgba(38, 224, 255, 0.75); } .btn.primary:hover { transform: translateY(-3px); box-shadow: 0 20px 48px -14px rgba(38, 224, 255, 0.95); } .btn.secondary { color: #fff; background: var(--panel-2); border-color: var(--border-strong); } .btn.secondary:hover { transform: translateY(-3px); background: rgba(38, 224, 255, 0.12); } .btn.ghost { color: var(--text); background: transparent; border-color: var(--border); } .btn.ghost:hover { transform: translateY(-3px); border-color: var(--purple); color: #fff; } .btn.discord-hero { color: #fff; background: rgba(88, 101, 242, 0.16); border-color: rgba(88, 101, 242, 0.5); } .btn.discord-hero:hover { transform: translateY(-3px); background: rgba(88, 101, 242, 0.3); } .discord-mark { color: #8b9bff; } /* ===== Hero ===== */ .hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; min-height: calc(100vh - 68px); justify-content: center; padding-top: clamp(30px, 6vw, 60px); } .hero-content { display: flex; flex-direction: column; align-items: center; max-width: 760px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(38, 224, 255, 0.06); margin-bottom: 30px; } .eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: var(--glow-cyan); animation: pulse 1.8s infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } .hero-logo-wrap { position: relative; display: grid; place-items: center; width: clamp(270px, 44vw, 460px); height: clamp(270px, 44vw, 460px); margin-bottom: 30px; transition: transform 0.25s ease-out; } .hero-logo { width: 88%; height: auto; filter: drop-shadow(0 0 56px rgba(38, 224, 255, 0.7)); animation: logoBounce 4.5s ease-in-out infinite; transition: filter 0.4s ease; } .hero-logo-wrap:hover .hero-logo { filter: drop-shadow(0 0 84px rgba(168, 85, 247, 0.9)); } @keyframes logoBounce { 0%,100% { transform: translateY(6px) rotate(-1.2deg) scale(1); } 50% { transform: translateY(-16px) rotate(1.2deg) scale(1.035); } } .logo-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(38, 224, 255, 0.25); } .orbit-one { inset: 0; animation: haloPulse 3s ease-in-out infinite; } .orbit-two { inset: 12%; border-color: rgba(168, 85, 247, 0.28); animation: haloPulse 3s ease-in-out infinite; animation-delay: 1.5s; } .orbit-one::before, .orbit-two::before { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: var(--glow-cyan); } .orbit-two::before { background: var(--purple); } @keyframes haloPulse { 0%,100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.04); } } .hero-content h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); background: linear-gradient(120deg, #fff 20%, var(--cyan) 55%, var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-content > p { color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 620px; margin: 22px 0 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .hero-panel { width: 100%; max-width: 560px; padding: 24px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); position: relative; } .hero-panel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(38,224,255,0.5), transparent 40%, rgba(168,85,247,0.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .panel-top { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 0.85rem; letter-spacing: 1px; color: var(--muted); margin-bottom: 18px; } .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #38ff9e; box-shadow: 0 0 12px #38ff9e; animation: pulse 1.6s infinite; } .status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .status-grid div { padding: 14px 8px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border); text-align: center; transition: transform 0.25s, border-color 0.25s; } .status-grid div:hover { transform: translateY(-4px); border-color: var(--border-strong); } .status-grid strong { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--cyan); } .status-grid span { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .next-match { margin-top: 16px; padding: 16px; border-radius: 14px; text-align: left; background: linear-gradient(135deg, rgba(38,224,255,0.1), rgba(168,85,247,0.08)); border: 1px solid var(--border-strong); } .next-match > span { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); } .next-match strong { display: block; font-family: var(--font-head); font-size: 1.2rem; margin: 4px 0; } .next-match small { color: var(--muted); } /* ===== Stats strip ===== */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 0; } .stats-strip div { text-align: center; padding: 26px 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); backdrop-filter: blur(10px); transition: transform 0.3s, border-color 0.3s; } .stats-strip div:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--glow-cyan); } .stats-strip strong { display: block; font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.6rem); background: linear-gradient(135deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stats-strip span { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; } /* ===== Rank system ===== */ /* Drei Spalten - dadurch ist jede Reihe genau eine Stufe: Reihe 1 Einstieg, Reihe 2 Fortgeschritten, Reihe 3 Spitze. Die Gruppierung ist damit schon an der Anordnung ablesbar, nicht erst an der Farbe. */ .rank-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 36px; } .rank-system-card { position: relative; padding: 22px 14px; border-radius: 16px; text-align: center; background: var(--panel); border: 1px solid var(--border); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .rank-system-card:hover { transform: translateY(-6px); border-color: var(--border-strong); } .rank-system-card span { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .rank-system-card strong { display: block; font-family: var(--font-head); font-size: 1.25rem; margin-top: 8px; } .rank-card-tier { display: block; margin-top: 6px; font-size: 0.64rem; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--rank-rgb), 0.9); } /* Dieselbe Stufenlogik wie bei den Rangspalten - nur eine Regel je Stufe statt einer je Rang. Die Farbe kommt aus --rank-rgb (siehe Rangsystem). */ .rank-system-card.rank-tier-low { border-color: rgba(var(--rank-rgb), 0.3); background: linear-gradient(160deg, rgba(var(--rank-rgb), 0.07), rgba(255,255,255,0.02)); } .rank-system-card.rank-tier-mid { border-color: rgba(var(--rank-rgb), 0.56); background: linear-gradient(160deg, rgba(var(--rank-rgb), 0.2), rgba(var(--rank-rgb), 0.06)); box-shadow: 0 0 34px -6px rgba(var(--rank-rgb), 0.7), inset 0 0 40px -10px rgba(var(--rank-rgb), 0.7); } .rank-system-card.rank-tier-mid strong { text-shadow: 0 0 14px rgba(var(--rank-rgb), 0.75); } .rank-system-card.rank-tier-high { border-color: rgba(var(--rank-rgb), 0.78); background: linear-gradient(160deg, rgba(var(--rank-rgb), 0.3), rgba(var(--rank-rgb), 0.1)), linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05)); box-shadow: 0 0 50px -6px rgba(var(--rank-rgb), 0.82), inset 0 1px 0 0 rgba(255,255,255,0.14), inset 0 0 54px -9px rgba(var(--rank-rgb), 0.75); } .rank-system-card.rank-tier-high strong { text-shadow: 0 0 20px rgba(var(--rank-rgb), 0.9); } .rank-apply-card, .rank-board-wrap, .stats-strip { margin-top: 8px; } .rank-apply-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 26px; border-radius: var(--radius); margin-bottom: 36px; background: linear-gradient(135deg, rgba(38,224,255,0.08), rgba(168,85,247,0.06)); border: 1px solid var(--border-strong); box-shadow: var(--shadow); } .rank-apply-card h3 { font-size: 1.4rem; margin-bottom: 8px; } .rank-apply-card p { color: var(--muted); max-width: 520px; } .rank-apply-actions { display: flex; flex-wrap: wrap; gap: 12px; } .ranking-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px; } .ranking-tab { padding: 11px 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-family: var(--font-head); font-size: 0.85rem; cursor: pointer; transition: all 0.25s; } .ranking-tab:hover { color: #fff; border-color: var(--border-strong); } .ranking-tab.active { color: #04121a; background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: transparent; } .rank-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: center; margin-bottom: 26px; } .search-box { flex: 1; min-width: 260px; max-width: 420px; display: flex; flex-direction: column; gap: 6px; } .search-box span { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .search-box input { padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: #fff; font-family: var(--font-body); font-size: 0.95rem; } .search-box input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(38,224,255,0.15); } .rank-filter { display: flex; flex-wrap: wrap; gap: 8px; } .filter { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 0.82rem; cursor: pointer; transition: all 0.25s; } .filter:hover { color: #fff; } .filter.active { color: #04121a; background: linear-gradient(135deg, var(--cyan), var(--purple)); border-color: transparent; } .rank-board-wrap { padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); } .rank-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .rank-board-head strong { font-family: var(--font-head); font-size: 1.15rem; } .rank-board-head span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); } .rank-board-head i { width: 8px; height: 8px; border-radius: 50%; background: #38ff9e; box-shadow: 0 0 10px #38ff9e; animation: pulse 1.6s infinite; } /* Wie die Rang-Uebersicht: drei Spalten, also eine Stufe je Reihe. Neun nebeneinander waeren zu schmal fuer Spielernamen. */ .rank-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .rank-column { border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; } .rank-column-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.03); } .rank-column-head strong { font-family: var(--font-head); font-size: 0.95rem; } .rank-column-head span { font-size: 0.75rem; color: var(--cyan); } .rank-column-list { display: flex; flex-direction: column; gap: 6px; padding: 12px; min-height: 60px; } .rank-player { padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,0.04); font-size: 0.9rem; border: 1px solid transparent; transition: all 0.2s; } .rank-player:hover { border-color: var(--border-strong); background: rgba(38,224,255,0.08); } .rank-empty { font-size: 0.82rem; color: var(--muted); opacity: 0.7; padding: 6px 4px; } .rank-column-champion { border-color: rgba(168,85,247,0.4); } .rank-column-champion .rank-column-head span { color: #e9c7ff; } /* ===== Forms / modal cards ===== */ .modal-card { background: rgba(9, 12, 24, 0.92); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(22px, 4vw, 40px); position: relative; box-shadow: var(--shadow); } .inline-rank-form { max-width: 820px; margin: 0 auto; overflow: hidden; } .form-glow-line { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--purple)); } .modal-card h2 { font-size: 1.6rem; margin: 12px 0; } .modal-intro { color: var(--muted); margin-bottom: 20px; } .ranking-info-box { padding: 16px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border-strong); margin-bottom: 22px; } .ranking-info-box ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; padding: 0; list-style: none; } .ranking-info-box li { font-size: 0.88rem; color: var(--muted); } .form-grid { display: grid; gap: 16px; margin-bottom: 16px; } .form-grid.two { grid-template-columns: 1fr 1fr; } .modal-card label { display: flex; flex-direction: column; gap: 7px; font-size: 0.85rem; color: var(--muted); margin-bottom: 16px; } .modal-card input, .modal-card select, .modal-card textarea { padding: 12px 14px; border-radius: 11px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: #fff; font-family: var(--font-body); font-size: 0.95rem; } .modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(38,224,255,0.14); } .modal-card select option { background: #0a0f1e; } .rank-choice-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 16px; } .rank-choice-card legend { font-family: var(--font-head); font-size: 0.95rem; color: var(--cyan); padding: 0 8px; } .rank-choice-card > p { color: var(--muted); font-size: 0.85rem; margin: 4px 0 14px; } .rank-radio-grid { display: flex; flex-wrap: wrap; gap: 10px; } .rank-radio-grid label { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 9px; margin: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); cursor: pointer; color: var(--muted); font-family: var(--font-head); font-size: 0.86rem; letter-spacing: 0.3px; transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; } .rank-radio-grid label::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; flex-shrink: 0; transition: all 0.22s ease; } .rank-radio-grid label:hover { color: #fff; border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(38,224,255,0.7); } .rank-radio-grid label:hover::before { border-color: var(--cyan); } .rank-radio-grid input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .rank-radio-grid label:has(input:checked) { color: #04121a; background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: transparent; box-shadow: 0 12px 28px -10px rgba(38,224,255,0.85); transform: translateY(-1px); } .rank-radio-grid label:has(input:checked)::before { border-color: #04121a; background: #04121a; box-shadow: inset 0 0 0 3px var(--cyan); } .rank-radio-grid label:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; } .upload-card { border: 1px dashed var(--border-strong); border-radius: 14px; padding: 18px; background: var(--panel); margin-bottom: 16px; } .upload-card small { color: var(--muted); font-size: 0.78rem; } .upload-card input[type=file] { padding: 10px; } .discord-note { font-size: 0.85rem; color: var(--muted); } .discord-rank-btn { display: inline-flex; margin-top: 10px; } .inline-link { background: none; border: none; color: var(--cyan); cursor: pointer; text-decoration: underline; font: inherit; padding: 0; } .submit-info-box { padding: 16px 18px; border-radius: 14px; background: rgba(38,224,255,0.06); border: 1px solid var(--border-strong); margin: 8px 0 18px; } .submit-info-box strong { display: block; margin-bottom: 6px; } .submit-info-box p { color: var(--muted); font-size: 0.88rem; margin: 0; } .form-message { min-height: 20px; font-size: 0.9rem; margin: 6px 0; } .form-message[data-type="error"] { color: #ff7a8a; } .form-message[data-type="success"] { color: #4fe0a6; } .rank-submit-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .age-confirm { display: flex; align-items: flex-start; gap: 11px; margin: 4px 0 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-strong); background: rgba(38,224,255,0.05); font-size: 0.9rem; color: #dbe6f6; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; } .age-confirm:hover { border-color: var(--cyan); background: rgba(38,224,255,0.09); } .age-confirm input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; border-radius: 6px; border: 2px solid var(--border-strong); background: transparent; cursor: pointer; position: relative; transition: background-color 0.2s, border-color 0.2s; } .age-confirm input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: var(--cyan); } .age-confirm input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #04121a; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }.rank-submit-hint { font-size: 0.8rem; color: var(--muted); } /* ===== Tournament cards ===== */ .tournament-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; } .tournament-card { position: relative; padding: 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); overflow: hidden; transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s; } .tournament-card::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; pointer-events: none; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(38,224,255,0.14), transparent 60%); } .tournament-card:hover { transform: translateY(-8px); border-color: var(--border-strong); box-shadow: 0 30px 60px -30px rgba(38,224,255,0.5); } .tournament-card:hover::before { opacity: 1; } .card-status { display: inline-block; font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); padding: 5px 12px; border-radius: 999px; background: rgba(38,224,255,0.1); border: 1px solid var(--border-strong); margin-bottom: 14px; } .tournament-card h3 { font-size: 1.4rem; margin-bottom: 18px; } .tournament-meta { display: grid; gap: 12px; margin-bottom: 22px; } .tournament-meta > div { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .tournament-meta span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .tournament-meta strong { font-family: var(--font-head); font-size: 0.98rem; } .prize-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,196,84,0.4); background: linear-gradient(135deg, rgba(255,196,84,0.14), rgba(168,85,247,0.08)); } .prize-row span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: #ffd27a; } .prize-row strong { font-family: var(--font-head); font-size: 1.05rem; color: #ffe6b0; text-shadow: 0 0 12px rgba(255,196,84,0.4); } .tournament-card .btn { width: 100%; } /* Card top row: status pill + host avatar */ .card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-top .card-status { margin-bottom: 0; } .host-avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: visible; padding: 0; border: 2px solid var(--border-strong); background: var(--panel); cursor: pointer; flex-shrink: 0; display: grid; place-items: center; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .host-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .host-avatar span { font-family: var(--font-head); font-size: 0.8rem; color: var(--muted); } .host-avatar .host-avatar-ring { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(38,224,255,0.5); opacity: 0; transition: opacity 0.25s; pointer-events: none; } .host-avatar:hover { border-color: var(--cyan); transform: scale(1.09); box-shadow: 0 0 20px -4px rgba(38,224,255,0.85); } .host-avatar:hover .host-avatar-ring { opacity: 1; } /* Tournament closing soon (< 30 min) — whole card turns urgent amber */ .tournament-card.closing-soon { border-color: rgba(255,140,60,0.6); background: linear-gradient(160deg, rgba(255,140,60,0.15), rgba(255,80,80,0.06)); box-shadow: 0 0 42px -8px rgba(255,140,60,0.5), inset 0 0 70px -22px rgba(255,140,60,0.4); } .tournament-card.closing-soon:hover { box-shadow: 0 30px 60px -30px rgba(255,140,60,0.7); } .tournament-card.closing-soon .card-status { color: #ffb27a; background: rgba(255,140,60,0.16); border-color: rgba(255,140,60,0.55); } .closing-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,140,60,0.5); background: rgba(255,140,60,0.1); font-size: 0.9rem; color: #ffd0ab; } .closing-banner b { font-family: var(--font-head); color: #fff; font-variant-numeric: tabular-nums; font-size: 1.05rem; margin-left: 2px; } .closing-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff8c3c; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(255,140,60,0.6); animation: closingPulse 1.4s ease-out infinite; } @keyframes closingPulse { 0% { box-shadow: 0 0 0 0 rgba(255,140,60,0.6); } 70% { box-shadow: 0 0 0 11px rgba(255,140,60,0); } 100% { box-shadow: 0 0 0 0 rgba(255,140,60,0); } } /* Tournament host (clickable, jumps to team) */ .tournament-host { display: flex; align-items: center; gap: 11px; width: 100%; margin-bottom: 18px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--border-strong); background: rgba(38,224,255,0.06); cursor: pointer; text-align: left; transition: background-color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .tournament-host:hover { background: rgba(38,224,255,0.12); border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 0 20px -6px rgba(38,224,255,0.7); } .tournament-host .th-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; border: 2px solid var(--border-strong); background: var(--panel); } .tournament-host .th-avatar img { width: 100%; height: 100%; object-fit: cover; } .tournament-host .th-initials { font-family: var(--font-head); font-size: 0.82rem; color: var(--muted); } .tournament-host .th-info { display: flex; flex-direction: column; line-height: 1.15; } .tournament-host .th-info small { font-size: 0.62rem; letter-spacing: 1.6px; text-transform: uppercase; color: #26e0ff; font-weight: 700; } .tournament-host .th-info strong { font-family: var(--font-head); font-size: 1rem; color: #eaf6ff; } .tournament-host:hover .th-avatar { border-color: var(--cyan); } /* Team socials + host highlight */ .team-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .team-social { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); transition: all 0.25s; } .team-social svg { width: 15px; height: 15px; } .team-social:hover { color: #fff; border-color: var(--border-strong); transform: translateY(-2px); } .team-card.host-highlight { border-color: var(--cyan) !important; box-shadow: 0 0 50px -6px rgba(38,224,255,0.85), inset 0 0 46px -16px rgba(38,224,255,0.55); transform: translateY(-6px); } .team-card.host-highlight .avatar { box-shadow: 0 0 32px -4px rgba(38,224,255,0.9); } /* Targeting "Markierungsviereck" frame around the highlighted host card */ .team-card.host-highlight::after { content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 4; border-radius: 14px; background: linear-gradient(var(--cyan),var(--cyan)) left top, linear-gradient(var(--cyan),var(--cyan)) left top, linear-gradient(var(--cyan),var(--cyan)) right top, linear-gradient(var(--cyan),var(--cyan)) right top, linear-gradient(var(--cyan),var(--cyan)) left bottom, linear-gradient(var(--cyan),var(--cyan)) left bottom, linear-gradient(var(--cyan),var(--cyan)) right bottom, linear-gradient(var(--cyan),var(--cyan)) right bottom; background-repeat: no-repeat; background-size: 26px 3px, 3px 26px; filter: none !important; animation: none !important; } @keyframes markerBlink { 0%,100% { opacity: 1; } } .empty-state { text-align: center; color: var(--muted); grid-column: 1 / -1; padding: 40px; border: 1px dashed var(--border); border-radius: var(--radius); } /* ===== Modes ===== */ .mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .mode-card { position: relative; padding: 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); transition: transform 0.35s, border-color 0.35s; } .mode-card:hover { transform: translateY(-8px); border-color: var(--border-strong); } .mode-card span { font-family: var(--font-head); font-size: 2.4rem; color: rgba(38,224,255,0.25); } .mode-card h3 { font-size: 1.3rem; margin: 6px 0 12px; } .mode-card p { color: var(--muted); font-size: 0.92rem; } /* ===== Team ===== */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .team-card { position: relative; padding: 28px 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); text-align: center; transition: transform 0.35s, border-color 0.35s; } .team-card:hover { transform: translateY(-8px); border-color: var(--border-strong); } .avatar { width: 70px; height: 70px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; background: linear-gradient(135deg, rgba(38,224,255,0.25), rgba(168,85,247,0.25)); border: 1px solid var(--border-strong); } .team-card h3 { font-size: 1.2rem; } .team-card span { display: block; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); margin: 6px 0 12px; } .team-card p { color: var(--muted); font-size: 0.9rem; } /* Teamkarten immer gleich: Host-Badge vor den Socials, Socials ganz unten. */ .team-card .team-host-marker { display: flex; } .team-card .team-socials { display: flex; } .team-grid { display: block; } .team-category-section { margin: 0 0 48px; } .team-category-heading { margin: 0 0 18px; padding: 0 2px 12px; border-bottom: 1px solid rgba(120,150,190,.18); text-align: left; } .team-category-heading span { color: var(--cyan); font-size: .68rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .team-category-heading h3 { margin: 5px 0 0; font-size: clamp(1.35rem, 2.4vw, 2rem); } .team-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 18px; } .team-category-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 4px auto 0; } .team-category-badges .team-host-marker { margin: 0; } @media (min-width: 1100px) { .team-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ===== Final CTA ===== */ .final-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px; text-align: center; padding: clamp(40px, 6vw, 70px); border-radius: var(--radius); background: linear-gradient(135deg, rgba(38,224,255,0.1), rgba(168,85,247,0.1)); border: 1px solid var(--border-strong); box-shadow: var(--shadow); margin-bottom: 60px; } .final-cta img { width: 90px; filter: drop-shadow(0 0 24px rgba(38,224,255,0.6)); animation: logoBounce 5s ease-in-out infinite; } .final-cta h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } .final-cta p { color: var(--muted); margin-top: 10px; } /* ===== Footer ===== */ .footer { border-top: 1px solid var(--border); background: rgba(6,8,18,0.6); padding: 46px clamp(18px, 4vw, 40px); } .footer-inner { max-width: var(--maxw); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .footer-inner strong { font-family: var(--font-head); font-size: 1.2rem; letter-spacing: 1px; } .footer-inner p { color: var(--muted); font-size: 0.9rem; } .footer-socials { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; } .footer-social-icon { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: rgba(12,16,29,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 26px rgba(0,0,0,.24); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; } .footer-social-icon img { width: 25px; height: 25px; object-fit: contain; filter: brightness(0) invert(1); } .footer-social-icon:hover { transform: translateY(-4px) scale(1.05); border-color: rgba(83,225,255,.55); box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 18px rgba(83,225,255,.18); } .footer-social-discord { background: linear-gradient(145deg, rgba(88,101,242,.30), rgba(12,16,29,.92)); } .footer-social-discord img { filter: brightness(0) saturate(100%) invert(50%) sepia(83%) saturate(3411%) hue-rotate(218deg) brightness(101%) contrast(90%); } .footer-social-x { background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(5,7,13,.95)); } .footer-social-instagram { background: linear-gradient(145deg, rgba(245,133,41,.24), rgba(221,42,123,.22) 52%, rgba(129,52,175,.22)); } .footer-social-instagram img { filter: brightness(0) invert(1); } .footer-social-tiktok { background: linear-gradient(145deg, rgba(37,244,238,.16), rgba(8,10,18,.94) 52%, rgba(254,44,85,.15)); } .footer-social-tiktok img { filter: brightness(0) invert(1) drop-shadow(-2px 0 0 rgba(37,244,238,.65)) drop-shadow(2px 0 0 rgba(254,44,85,.55)); } .footer-social-twitch { background: linear-gradient(145deg, rgba(145,70,255,.28), rgba(12,16,29,.94)); } .footer-social-twitch img { width: 26px; height: 26px; filter: drop-shadow(0 0 7px rgba(183,140,255,.48)); } .footer-discord, .social-coming { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); font-size: 0.82rem; color: var(--muted); } .footer-discord:hover { color: #fff; border-color: var(--border-strong); } .footer-social-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: 0.62rem; font-family: var(--font-head); color: #fff; } .discord-dot { background: #5865f2; } .instagram-dot { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); } .facebook-dot { background: #1877f2; } .x-dot { background: #000; border: 1px solid rgba(255,255,255,0.45); } .tiktok-dot { background: #000; border: 1px solid rgba(38,224,255,0.6); } .twitch-dot { background: #9146ff; } .social-icon[href]:hover { color: #fff; border-color: var(--border-strong); background: rgba(38,224,255,0.12); transform: translateY(-2px); } .avatar-photo { padding: 0; overflow: hidden; } .avatar-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* F1oowz: komplettes Profilbild sauber innerhalb des Avatar-Kästchens zeigen. */ .team-card[data-member-name="f1oowz"] .avatar-photo, .team-card[data-member-name="floowz"] .avatar-photo, .team-card[data-member-name="flowwz"] .avatar-photo, .team-card[data-member="f1oowz"] .avatar-photo, .team-card[data-member="floowz"] .avatar-photo, .team-card[data-member="flowwz"] .avatar-photo { padding: 3px; background: rgba(6, 10, 18, .92); } .team-card[data-member-name="f1oowz"] .avatar-photo img, .team-card[data-member-name="floowz"] .avatar-photo img, .team-card[data-member-name="flowwz"] .avatar-photo img, .team-card[data-member="f1oowz"] .avatar-photo img, .team-card[data-member="floowz"] .avatar-photo img, .team-card[data-member="flowwz"] .avatar-photo img { object-fit: contain; object-position: center; transform: none; border-radius: 14px; } /* Beim ersten Laden nur einen neutralen Ladezustand zeigen – niemals alte Teamdaten. */ .team-grid.team-grid-loading { min-height: 360px; display: grid; place-items: center; } .team-loading-state { margin: 0; padding: 18px 24px; border: 1px solid rgba(120, 150, 190, .18); border-radius: 16px; background: rgba(9, 14, 25, .58); color: var(--muted); font-size: .9rem; letter-spacing: .04em; } #team-rose .avatar-photo img { object-position: center 4%; } .footer-legal { margin-top: 14px; } .footer-legal a { font-size: 0.82rem; color: var(--muted); text-decoration: underline; transition: color 0.25s; } .footer-legal a:hover { color: var(--cyan); } .social-coming { opacity: 0.6; } /* Round back-to-top button */ .footer-top-link { position: fixed; right: 22px; bottom: 22px; z-index: 85; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; color: #04121a; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 12px 30px -8px rgba(38,224,255,0.7); opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity 0.4s, transform 0.4s; } .footer-top-link.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .footer-top-link:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 18px 40px -10px rgba(38,224,255,0.9); } /* ===== Register modal (dialog) ===== */ .register-modal { border: none; padding: 0; background: transparent; max-width: 520px; width: 92%; color: var(--text); } .register-modal::backdrop { background: rgba(3,5,12,0.78); backdrop-filter: blur(6px); } .register-modal .modal-card { width: 100%; } .modal-close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; } .modal-close:hover { border-color: var(--border-strong); } .modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } /* ===== Reveal animations ===== */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; } .reveal.show { opacity: 1; transform: none; } .reveal.delay-1 { transition-delay: 0.1s; } .reveal.delay-2 { transition-delay: 0.2s; } .reveal.delay-3 { transition-delay: 0.3s; } /* ===== Crew panel / admin pages ===== */ .admin-page main { max-width: var(--maxw); margin: 0 auto; } .admin-nav { justify-content: flex-end; } .admin-hero { text-align: center; } .admin-hero h1 { font-size: clamp(2rem, 5vw, 3rem); } .admin-status-card, .crew-gate, .crew-admin, .editor-card, .manage-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .admin-status-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; max-width: 720px; margin: 0 auto; } .crew-gate { max-width: 460px; margin: 0 auto; padding: 30px; display: flex; flex-direction: column; gap: 16px; text-align: center; } .crew-code-label { display: flex; flex-direction: column; gap: 8px; text-align: left; } .crew-code-label input { padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: #fff; } .crew-status { min-height: 20px; font-size: 0.9rem; color: var(--muted); } .crew-admin { padding: 26px; } .crew-admin-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .crew-admin-actions { display: flex; gap: 10px; flex-wrap: wrap; } .editor-grid, .manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .editor-card { padding: 22px; } .manage-card { padding: 22px; margin-top: 18px; } .editor-card label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 0.85rem; color: var(--muted); } .editor-card input, .editor-card select { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: #fff; } .editor-card select option, .manage-card select option { background: #0a0f1e; color: #fff; } .editor-actions { display: flex; gap: 10px; flex-wrap: wrap; } .mini-table { display: flex; flex-direction: column; gap: 8px; } .mini-table .row, .mini-table > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); font-size: 0.88rem; } .mini-table button { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; font-size: 0.8rem; } /* ========================================================================== BANGER EFFECTS — shimmer text, live clock, countdown, neon ticker, glow rings ========================================================================== */ /* Animated shimmer on gradient headlines + big numbers */ .hero-content h1 { background: linear-gradient(110deg, #ffffff 0%, var(--cyan) 30%, var(--purple) 55%, #7dd3fc 75%, #ffffff 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: textShimmer 7s linear infinite; } .stats-strip strong, .status-grid strong { background-size: 220% auto; animation: textShimmer 6s linear infinite; } @keyframes textShimmer { to { background-position: 220% center; } } /* Counter finish pulse */ .counter.pulse { animation: counterPulse 0.6s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes counterPulse { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(38,224,255,0)); } 40% { transform: scale(1.22); filter: drop-shadow(0 0 18px rgba(38,224,255,0.9)); } 100% { transform: scale(1); } } /* Living stats strip — cells float gently (staggered) */ .stats-strip div { animation: floatCell 5s ease-in-out infinite; } .stats-strip div:nth-child(2) { animation-delay: 0.6s; } .stats-strip div:nth-child(3) { animation-delay: 1.2s; } .stats-strip div:nth-child(4) { animation-delay: 1.8s; } @keyframes floatCell { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .stats-strip div:hover { animation-play-state: paused; } /* Live system clock */ .panel-top { position: relative; } .sys-clock { margin-left: auto; font-family: var(--font-head); font-size: 0.9rem; letter-spacing: 2px; color: var(--cyan); text-shadow: 0 0 12px rgba(38,224,255,0.6); font-variant-numeric: tabular-nums; } /* Countdown */ .countdown { margin-top: 14px; } .cd-label { font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .cd-cell { text-align: center; padding: 10px 4px; border-radius: 12px; background: rgba(4, 8, 18, 0.6); border: 1px solid var(--border-strong); position: relative; overflow: hidden; } .cd-cell b { display: block; font-family: var(--font-head); font-size: 1.5rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(38,224,255,0.45); } .cd-cell span { font-size: 0.6rem; letter-spacing: 1px; color: var(--muted); } .cd-cell.tick b { color: var(--cyan); animation: cdTick 1s steps(1) infinite; } @keyframes cdTick { 50% { opacity: 0.55; } } .cd-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 0.85rem; color: var(--cyan); letter-spacing: 1px; } .cd-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #38ff9e; box-shadow: 0 0 12px #38ff9e; animation: pulse 1.4s infinite; } /* Neon scrolling ticker */ .nm-ticker { position: relative; width: 100%; overflow: hidden; padding: 12px 0; margin: 4px 0 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(38,224,255,0.06), rgba(168,85,247,0.06)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .nm-ticker-track { display: inline-flex; white-space: nowrap; min-width: max-content; will-change: transform; animation: tickerScroll 42s linear infinite; } /* Ticker läuft dauerhaft weiter, auch beim Hover. */ .nm-ticker:hover .nm-ticker-track { animation-play-state: running; } .nm-ticker-item { display: inline-flex; align-items: center; padding: 0 26px; font-family: var(--font-head); font-size: 0.9rem; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; } .nm-ticker-item::after { content: "•"; margin-left: 26px; color: var(--cyan); } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Soft pulsing glow behind key cards (gentle blink, no rotation) */ .hero-panel, .rank-apply-card, .final-cta, .rank-system-card.champion { position: relative; } .hero-panel::after, .rank-apply-card::after, .final-cta::after, .rank-system-card.champion::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(130% 130% at 50% 50%, rgba(38,224,255,0.45), rgba(168,85,247,0.3) 55%, transparent 72%); filter: blur(18px); opacity: 0; } .hero-panel::after, .rank-system-card.champion::after { animation: glowBlink 3.4s ease-in-out infinite; } .rank-system-card.champion::after { animation-delay: 0.8s; } .rank-apply-card:hover::after, .final-cta:hover::after { opacity: 0.4; transition: opacity 0.45s ease; } .rank-system-card.champion:hover::after { opacity: 0.7; } @keyframes glowBlink { 0%,100% { opacity: 0.12; } 50% { opacity: 0.5; } } /* Entrance shimmer sweep on premium cards */ .tournament-card, .mode-card, .team-card, .rank-system-card { overflow: hidden; } .tournament-card > *, .mode-card > *, .team-card > * { position: relative; z-index: 1; } /* ===== Responsive ===== */ @media (max-width: 940px) { .menu-toggle { display: flex; } .nav { position: fixed; inset: 62px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; justify-content: flex-start; background: rgba(6,8,18,0.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 18px clamp(16px, 4vw, 40px) 26px; transform: translateY(-140%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); max-height: calc(100vh - 62px); overflow-y: auto; } .nav.open { transform: translateY(0); } .nav-links { flex-direction: column; align-items: stretch; margin: 0; gap: 10px; position: static; transform: none; left: auto; top: auto; } .nav-links a { display: flex; align-items: center; text-align: left; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: #eaf2ff; letter-spacing: 0.3px; transition: background-color 0.25s, border-color 0.25s, transform 0.25s, color 0.25s; } .nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(38,224,255,0.1); border-color: var(--border-strong); transform: translateX(4px); } .nav-links a::after { display: none; } .nav-tools { flex-wrap: wrap; justify-content: space-between; margin-top: 18px; gap: 14px; } .nav-cta { flex: 1; text-align: center; } } @media (max-width: 820px) { .nm-ticker-track { animation-duration: 22s; } .rank-system-grid { grid-template-columns: repeat(2, 1fr); } .rank-board { grid-template-columns: 1fr; } .form-grid.two { grid-template-columns: 1fr; } .editor-grid, .manage-grid { grid-template-columns: 1fr; } .status-grid { grid-template-columns: repeat(2, 1fr); } .stats-strip { grid-template-columns: repeat(2, 1fr); } .rank-apply-card, .crew-admin-top { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .rank-system-grid { grid-template-columns: 1fr; } .hero-actions { width: 100%; } .hero-actions .btn { flex: 1 1 44%; } .btn { padding: 12px 18px; font-size: 0.86rem; } .section { padding-left: 16px; padding-right: 16px; } .footer-top-link { right: 16px; bottom: 16px; } } /* ===== Reduced motion ===== Effects are kept ON for everyone by request: the site should look and animate identically in every browser, even when the OS/browser has "reduce motion" enabled. We only guarantee content stays visible. */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ========================================================================== PERFORMANCE LITE MODE — auto-enabled when the device can't render smoothly (e.g. hardware acceleration disabled). Drops GPU-heavy blur/backdrop/canvas, keeps cheap transform/opacity animations so the site stays fluid everywhere. ========================================================================== */ .perf-lite .fx-canvas, .perf-lite .fx-aurora, .perf-lite .orb, .perf-lite body::after, .perf-lite .hero-panel::after, .perf-lite .rank-apply-card::after, .perf-lite .final-cta::after, .perf-lite .rank-system-card.champion::after { display: none !important; } .perf-lite body::after { display: none !important; } /* Remove expensive glass blur; use solid-ish surfaces instead */ .perf-lite .site-header { background: rgba(6, 8, 18, 0.95); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .perf-lite .hero-panel { background: #0a0f1e; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .perf-lite .register-modal .modal-card, .perf-lite .modal-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .perf-lite .stats-strip div, .perf-lite .tournament-card, .perf-lite .mode-card, .perf-lite .team-card, .perf-lite .rank-board-wrap, .perf-lite .rank-apply-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .perf-lite .register-modal::backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(3,5,12,0.9); } /* Drop soft box-shadow blur on the rank ladder (keep border tint for the look) */ .perf-lite .rank-system-card { box-shadow: none !important; } .perf-lite .cursor-glow { display: none !important; } /* Cheap animations (ticker/counter/clock/shimmer/blink/float/reveal) stay ON. */ /* FIX: Turnier-Buttons immer auf gleicher Höhe */ .tournament-grid { align-items: stretch !important; } .tournament-grid > .tournament-card { display: flex !important; flex-direction: column !important; min-height: 530px; } .tournament-grid > .tournament-card .open-register { margin-top: auto !important; width: 100% !important; } @media (max-width: 700px) { .tournament-grid > .tournament-card { min-height: auto; } } /* Game Modes: 5 nebeneinander + Listen */ .mode-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 18px !important; } .mode-card { min-height: 240px; } .mode-list { list-style: disc; padding-left: 18px; margin: 18px 0 0; color: var(--muted); font-weight: 600; line-height: 1.8; } .mode-list li { margin-bottom: 10px; } .mode-feedback { max-width: 900px; margin: 32px auto 0; text-align: center; color: var(--muted); font-weight: 600; } @media (max-width: 1250px) { .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 850px) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { .mode-grid { grid-template-columns: 1fr !important; } } /* FIX: Game Modes komplett zentriert */ .mode-card { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; } .mode-card span { display: block !important; width: 100% !important; text-align: center !important; margin-bottom: 10px !important; } .mode-card h3 { width: 100% !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .mode-list { list-style: none !important; padding-left: 0 !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; width: 100% !important; } .mode-list li { display: flex !important; justify-content: center !important; align-items: flex-start !important; gap: 8px !important; text-align: center !important; } .mode-list li::before { content: "•"; color: var(--muted); flex: 0 0 auto; } /* FIX: Rose Bild höher anzeigen */ #team-rose .avatar-photo img { object-position: center 4% !important; } .tournament-host .th-avatar img[src*="team-rose"] { object-position: center 4% !important; } /* FIX: Rose Bild komplett anzeigen, nicht abschneiden */ #team-rose .avatar img, #team-rose .avatar-photo img, .tournament-host[data-host="rose"] .th-avatar img, .tournament-host .th-avatar img[src*="team-rose"] { object-fit: contain !important; object-position: center center !important; background: rgba(10, 14, 28, 0.9); padding: 2px; } /* FINAL FIX: Rose Bild komplett sichtbar erzwingen Das Bild wird als Hintergrund mit contain angezeigt, damit nichts abgeschnitten wird. */ #team-rose .avatar.avatar-photo { background: rgba(10, 14, 28, 0.92) url("assets/team-rose.png") center center / contain no-repeat !important; overflow: hidden !important; } #team-rose .avatar.avatar-photo img { opacity: 0 !important; object-fit: contain !important; object-position: center center !important; } .tournament-host[data-host="rose"] .th-avatar { background: rgba(10, 14, 28, 0.92) url("assets/team-rose.png") center center / contain no-repeat !important; overflow: hidden !important; } .tournament-host[data-host="rose"] .th-avatar img { opacity: 0 !important; object-fit: contain !important; object-position: center center !important; } /* FINAL FIX 3: Rose Bild füllt das ganze Avatar-Kästchen aus. Hinweis: Damit keine leeren Ränder entstehen, wird das Bild minimal zugeschnitten. */ #team-rose .avatar.avatar-photo { background: rgba(10, 14, 28, 0.92) url("assets/team-rose.png") center 32% / cover no-repeat !important; overflow: hidden !important; } #team-rose .avatar.avatar-photo img { opacity: 0 !important; } .tournament-host[data-host="rose"] .th-avatar { background: rgba(10, 14, 28, 0.92) url("assets/team-rose.png") center 32% / cover no-repeat !important; overflow: hidden !important; } .tournament-host[data-host="rose"] .th-avatar img { opacity: 0 !important; } /* FINAL: Rose neues Bild - Avatar komplett gefüllt, sauber positioniert */ #team-rose .avatar.avatar-photo { background: rgba(10, 14, 28, 0.92) url("assets/team-rose.png?v=rose-newphoto-1") center center / cover no-repeat !important; overflow: hidden !important; } #team-rose .avatar.avatar-photo img { opacity: 0 !important; } .tournament-host[data-host="rose"] .th-avatar { background: rgba(10, 14, 28, 0.92) url("assets/team-rose.png?v=rose-newphoto-1") center center / cover no-repeat !important; overflow: hidden !important; } .tournament-host[data-host="rose"] .th-avatar img { opacity: 0 !important; } /* Team-Socials: überall gleiche Reihenfolge in einer Linie: Instagram, TikTok, Twitch, X */ .team-socials { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; } .team-social { flex: 0 0 32px; } /* Ranking-Filter: Bei ausgewaehltem Rank bleibt nur dessen Gruppe stehen. Seit dem Umbau auf gestapelte Ranggruppen (statt neun schmaler Spalten) muss die Breite dabei nicht mehr beschnitten werden - die eine Gruppe nutzt die volle Breite des Boards, genau wie im ungefilterten Zustand. */ .rank-board.rank-board-filtered { grid-template-columns: 1fr; justify-content: stretch; } .rank-search-empty { margin: 0; padding: 18px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-weight: 600; } /* Guesthost: Turnierkarte + Teamkarte */ .form-hint { margin: -8px 0 4px; color: var(--muted); font-size: 0.82rem; } .tournament-host.guest-host { cursor: default; } .tournament-host.guest-host:hover { transform: none; } .guest-host .th-avatar, .guest-avatar { background: linear-gradient(135deg, rgba(38,224,255,0.18), rgba(168,85,247,0.22)); border-color: rgba(38,224,255,0.42) !important; } .guest-twitch-icon { margin-left: auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: 1px solid rgba(38,224,255,0.28); background: rgba(255,255,255,0.055); color: var(--text); transition: transform 0.25s, border-color 0.25s, background 0.25s; } .guest-twitch-icon svg { width: 18px; height: 18px; } .guest-twitch-icon:hover { transform: translateY(-2px); border-color: var(--cyan); background: rgba(38,224,255,0.14); } .guest-team-card { border-color: rgba(38,224,255,0.24); } /* FINAL: Rank-Spalten unten leuchten passend zu Newbie bis Champion */ .rank-column { position: relative; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .rank-column::before { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0.55; background: radial-gradient(circle at 20% 0%, rgba(var(--rank-rgb), 0.22), transparent 48%), radial-gradient(circle at 90% 100%, rgba(var(--rank-rgb), 0.14), transparent 52%); } .rank-column-head, .rank-column-list { position: relative; z-index: 1; } .rank-column:hover { transform: translateY(-4px); } /* ========================================================================== RANGSYSTEM — neun Raenge in drei Stufen -------------------------------------------------------------------------- Aufbau: Jeder Rang setzt nur seine Farbe (--rank-rgb). Alles andere - Rahmen, Verlauf, Leuchtstaerke, Textfarbe - kommt aus der Stufenklasse (.rank-tier-low / -mid / -high). Ein zehnter Rang braucht deshalb genau eine Farbzeile und eine Zeile in RANK_DEFINITIONS (script.js). Stufenlogik: low - kuehle, schlichte Toene, KEIN Leuchten (Einstieg) mid - Markenfarben mit spuerbarem Leuchten (Fortgeschritten) high - satte Farben, feiner Innenglanz, staerkeres Leuchten (Spitze) ========================================================================== */ /* --- Farbe je Rang: die einzige Stelle, an der Raenge Farben bekommen --- Die neun Werte bilden EINE durchgehende Farbdrehung von Gruen ueber Teal, Cyan und Blau bis zur Markenfarbe Violett (#a855f7, Rang 7) und weiter zum Champion-Gold. Farbtoene (Stand 2026-08-11, Baender 1-3 und 4-6 gespreizt): LOW 135° → 164° → 179° Gruen → Tuerkisgruen → Tuerkis MID 198° → 215° → 244° Himmelcyan → Azur → Indigo HIGH 271° → 326° → 37° unveraendert Der Farbton allein reicht nicht: bei niedriger Deckkraft ueber dem dunklen Seitenhintergrund lesen sich drei benachbarte Kuehltoene trotzdem als dieselbe Farbe. Deshalb staffelt --rank-step zusaetzlich die Deckkraft innerhalb jedes Bandes (siehe weiter unten). Vorher lagen die drei LOW-Toene nur 6° auseinander (172/174/178) - das war mit blossem Auge kein Verlauf mehr, sondern dreimal dieselbe Farbe. Jetzt wandern innerhalb eines Bandes Farbton UND Saettigung mit, dadurch ist die Steigerung von Rang zu Rang sichtbar. Der Sprung Tuerkis (177°) → Himmelblau (198°) trennt LOW von MID deutlich, ohne dass die Palette auseinanderfaellt. Die Bandenden stehen zusaetzlich in --band-from / --band-to (siehe unten), damit Leiste und Hintergrund des Bandes denselben Verlauf zeichnen. */ /* Die Klassennamen folgen dem ANGEZEIGTEN Rangnamen (siehe rankSlug in script.js). Bei der Umbenennung am 2026-08-11 haben die Positionen ihre Farbe behalten - nur die Namen davor sind gewandert. Rang 3 heisst jetzt Soldier und hat weiterhin das Tuerkis von Position 3, NICHT das fruehere Soldier-Gruen von Position 2. */ .rank-column-newbie, .rank-badge.rank-newbie, .rank-card-newbie, .rank-slot-newbie { --rank-rgb: 88, 204, 116; } .rank-column-rookie, .rank-badge.rank-rookie, .rank-card-rookie, .rank-slot-rookie { --rank-rgb: 46, 206, 162; } .rank-column-soldier, .rank-badge.rank-soldier, .rank-card-soldier, .rank-slot-soldier { --rank-rgb: 34, 218, 214; } .rank-column-veteran, .rank-badge.rank-veteran, .rank-card-veteran, .rank-slot-veteran { --rank-rgb: 34, 190, 255; } .rank-column-elite, .rank-badge.rank-elite, .rank-card-elite, .rank-slot-elite { --rank-rgb: 58, 141, 255; } /* Rang 6 bewusst heller als der reine Farbton verlangt: bei 108,99,250 faellt die Stufen-Beschriftung ("MID · 0") auf 3,8:1 und damit unter die Lesbarkeitsschwelle. 132,124,253 haelt den Farbton bei 244° und kommt auf 4,7:1. */ .rank-column-master, .rank-badge.rank-master, .rank-card-master, .rank-slot-master { --rank-rgb: 132, 124, 253; } .rank-column-hero, .rank-badge.rank-hero, .rank-card-hero, .rank-slot-hero { --rank-rgb: 168, 85, 247; } .rank-column-legend, .rank-badge.rank-legend, .rank-card-legend, .rank-slot-legend { --rank-rgb: 236, 76, 168; } .rank-column-champion, .rank-badge.rank-champion, .rank-card-champion, .rank-slot-champion { --rank-rgb: 255, 184, 72; } /* --- Stellung innerhalb des Bandes: 0 = erster Rang, 2 = letzter --- Damit laesst sich die Deckkraft je Rang staffeln, ohne neun Einzelregeln zu schreiben. Genutzt wird das nur von LOW und MID; HIGH bleibt bewusst flach. */ .rank-slot-newbie, .rank-slot-veteran { --rank-step: 0; } .rank-slot-rookie, .rank-slot-elite { --rank-step: 1; } .rank-slot-soldier, .rank-slot-master { --rank-step: 2; } /* --- Stufe 1-3: Einstieg. Kuehl und ruhig, bewusst ohne Leuchten. --- */ .rank-column.rank-tier-low { border-color: rgba(var(--rank-rgb), 0.34) !important; background: linear-gradient(160deg, rgba(var(--rank-rgb), 0.08), rgba(255,255,255,0.02)) !important; box-shadow: none !important; } /* --- Stufe 4-6: Fortgeschritten. Markenfarben, spuerbares Leuchten. --- */ .rank-column.rank-tier-mid { border-color: rgba(var(--rank-rgb), 0.6) !important; background: linear-gradient(160deg, rgba(var(--rank-rgb), 0.2), rgba(var(--rank-rgb), 0.06)) !important; box-shadow: 0 0 38px -10px rgba(var(--rank-rgb), 0.75), inset 0 0 44px -14px rgba(var(--rank-rgb), 0.7) !important; } /* --- Stufe 7-9: Spitze. Satter Verlauf, feiner Innenglanz. --- */ .rank-column.rank-tier-high { border-color: rgba(var(--rank-rgb), 0.8) !important; background: linear-gradient(160deg, rgba(var(--rank-rgb), 0.3), rgba(var(--rank-rgb), 0.1)), linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05)) !important; box-shadow: 0 0 52px -10px rgba(var(--rank-rgb), 0.85), inset 0 1px 0 0 rgba(255,255,255,0.14), inset 0 0 56px -12px rgba(var(--rank-rgb), 0.8) !important; } /* --- Kopfzeile: eine Regel fuer alle neun Raenge --- */ .rank-column-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rank-column-head strong { color: #f2f6ff; } .rank-column-tier { font-size: 0.66rem; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--rank-rgb), 0.95); opacity: 0.85; } .rank-column-level { font-size: 0.75rem; color: rgba(var(--rank-rgb), 0.95); font-weight: 700; } .rank-column.rank-tier-mid .rank-column-head strong { text-shadow: 0 0 14px rgba(var(--rank-rgb), 0.7); } .rank-column.rank-tier-high .rank-column-head strong { text-shadow: 0 0 20px rgba(var(--rank-rgb), 0.9); } /* -------------------------------------------------------------------------- CHAMPION-AURA (Rang 9) Ein langsam kreisender Lichtschein hinter dem Karteninhalt. Bewusst so gebaut, dass er nur den Compositor beschaeftigt: - animiert wird ausschliesslich "transform: rotate" (kein box-shadow, kein filter, keine Farbwechsel - das waeren Neuzeichnungen pro Bild) - genau EIN zusaetzliches Element, keine Schleife in JavaScript - zentriert ueber negative Aussenabstaende, damit transform frei bleibt - .rank-column hat bereits overflow: hidden, der Schein bleibt in der Karte 14 Sekunden pro Umdrehung: sichtbar als Bewegung, aber ruhig genug, um nicht vom Inhalt abzulenken. -------------------------------------------------------------------------- */ .rank-column-champion::after { content: ""; position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; margin: -90% 0 0 -90%; border-radius: 50%; pointer-events: none; z-index: 0; background: conic-gradient( from 0deg, rgba(255, 196, 84, 0) 0deg, rgba(255, 196, 84, 0.20) 45deg, rgba(255, 122, 80, 0.28) 95deg, rgba(255, 196, 84, 0.14) 150deg, rgba(255, 196, 84, 0) 215deg, rgba(255, 196, 84, 0) 360deg ); animation: nmChampionAura 14s linear infinite; } @keyframes nmChampionAura { to { transform: rotate(1turn); } } /* Ohne Bewegung: der Schein bleibt als ruhiger Verlauf stehen, die Karte verliert also nichts an Wertigkeit - sie bewegt sich nur nicht mehr. */ @media (prefers-reduced-motion: reduce) { .rank-column-champion::after { animation: none; opacity: 0.55; } } /* Sparmodus der Seite (bestehende Mechanik aus performance-mode.js). */ .perf-lite .rank-column-champion::after { animation: none; opacity: 0.45; } .rank-column .rank-player { background: rgba(255,255,255,0.055); border-color: rgba(var(--rank-rgb), 0.13); } .rank-column .rank-player:hover { border-color: rgba(var(--rank-rgb), 0.5); background: rgba(var(--rank-rgb), 0.12); } /* Guesthost: Klick auf Turnier-Host markiert die Guesthost-Karte im Team-Bereich */ .tournament-host.guest-host { cursor: pointer; } .tournament-host.guest-host:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .guest-team-card.host-highlight { border-color: rgba(38, 224, 255, 0.85) !important; box-shadow: 0 0 0 1px rgba(38, 224, 255, 0.5), 0 0 42px -8px rgba(38, 224, 255, 0.9) !important; } /* Guesthost lässt sich wie Crew-Host markieren */ .guest-team-card { cursor: pointer; } .guest-team-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; } .guest-team-card.host-highlight { border-color: var(--cyan) !important; box-shadow: 0 0 58px -6px rgba(38,224,255,0.9), inset 0 0 54px -16px rgba(38,224,255,0.6) !important; transform: translateY(-6px); } .guest-team-card.host-highlight .guest-avatar, .guest-team-card.host-highlight .avatar { box-shadow: 0 0 34px -4px rgba(38,224,255,0.95) !important; } /* Multi-page navigation polish */ .nav-links a.active { color: #fff; } .nav-links a.active::after { width: 100%; } body.page-single main > .section:first-child { padding-top: clamp(70px, 9vw, 120px); } /* FINAL: Modi-Karten sauber ohne Zahlen und ohne Punkte */ .mode-grid-clean .mode-card { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; text-align: center !important; padding: 28px 16px !important; min-height: 255px !important; } .mode-grid-clean .mode-card .mode-name { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 58px !important; margin: 0 0 20px !important; font-family: var(--font-head) !important; font-size: clamp(1.05rem, 1.45vw, 1.35rem) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: 0.4px !important; color: #eef7ff !important; text-shadow: 0 0 16px rgba(38,224,255,0.5) !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; } .mode-grid-clean .mode-card h3 { display: none !important; } .mode-grid-clean .mode-list, .mode-grid-clean .clean-mode-list { list-style: none !important; padding-left: 0 !important; margin: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; color: var(--muted) !important; font-weight: 700 !important; line-height: 1.45 !important; } .mode-grid-clean .mode-list p { margin: 0 !important; max-width: 170px !important; } .mode-grid-clean .mode-list li::marker { content: "" !important; } .mode-grid-clean .mode-card::after { content: ""; width: 76px; height: 3px; border-radius: 999px; margin: 6px auto 18px; order: 1; background: linear-gradient(90deg, var(--cyan), var(--purple)); box-shadow: 0 0 18px rgba(38,224,255,0.45); } .mode-grid-clean .mode-card .mode-name { order: 0; } .mode-grid-clean .mode-card .mode-list { order: 2; } @media (max-width: 1250px) { .mode-grid-clean .mode-card .mode-list p { max-width: 220px !important; } } /* FINAL FIX: Modi-Karten ohne Zahlen, ohne Punkte, sauber geordnet */ .mode-grid-clean .mode-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; padding: 30px 18px !important; min-height: 255px !important; } .mode-grid-clean .mode-card .mode-name { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 54px !important; margin: 0 0 16px !important; font-family: var(--font-head) !important; font-size: clamp(1.05rem, 1.35vw, 1.32rem) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: 0.4px !important; color: #eef7ff !important; text-shadow: 0 0 16px rgba(38,224,255,0.52) !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; } .mode-grid-clean .mode-card > span:not(.mode-name), .mode-grid-clean .mode-card h3 { display: none !important; } .mode-grid-clean .clean-mode-list { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; color: var(--muted) !important; font-weight: 700 !important; line-height: 1.45 !important; } .mode-grid-clean .clean-mode-list p { margin: 0 !important; max-width: 190px !important; } .mode-grid-clean .clean-mode-list::before { content: ""; display: block; width: 76px; height: 3px; border-radius: 999px; margin: 0 auto 6px; background: linear-gradient(90deg, var(--cyan), var(--purple)); box-shadow: 0 0 18px rgba(38,224,255,0.45); } .mode-grid-clean .mode-card::after { display: none !important; } .guest-team-card { cursor: pointer; } /* Host-Bild Glow: aktive Tourney-Hosts leuchten über das Avatar-Bild statt über Karten-Rahmen */ .team-card.host-highlight, .team-card.active-tourney-host { border-color: var(--border) !important; box-shadow: none !important; } .team-card.host-highlight::after, .team-card.active-tourney-host::after { display: none !important; } .team-card.host-highlight .avatar, .team-card.active-tourney-host .avatar { border-color: rgba(255, 220, 125, 0.95) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22), 0 0 18px 6px rgba(255, 216, 108, 0.95), 0 0 46px 16px rgba(255, 150, 40, 0.58), 0 0 80px 26px rgba(38, 224, 255, 0.38) !important; filter: brightness(1.18) saturate(1.25); animation: hostAvatarSheikhGlow 1.45s ease-in-out infinite alternate; } .team-card.host-highlight .avatar img, .team-card.active-tourney-host .avatar img { filter: brightness(1.14) contrast(1.06) saturate(1.18); } .team-card.host-highlight h3, .team-card.active-tourney-host h3 { text-shadow: 0 0 14px rgba(255, 220, 125, 0.55), 0 0 28px rgba(38, 224, 255, 0.35); } @keyframes hostAvatarSheikhGlow { 0% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 0 14px 4px rgba(255, 216, 108, 0.75), 0 0 36px 12px rgba(255, 150, 40, 0.42), 0 0 62px 20px rgba(38, 224, 255, 0.25); } 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28), 0 0 24px 8px rgba(255, 235, 145, 1), 0 0 58px 20px rgba(255, 168, 55, 0.68), 0 0 96px 32px rgba(38, 224, 255, 0.44); } } /* PERFORMANCE: Sofort-Lite-Modus bei deaktivierter Hardwarebeschleunigung */ .perf-lite .fx-grid, .perf-lite .noise, .perf-lite .scanline { opacity: 0.12 !important; } .perf-lite * { transition-duration: 0.18s !important; } .perf-lite .hero-logo, .perf-lite .logo-orbit, .perf-lite .orb, .perf-lite .fx-aurora, .perf-lite .cursor-glow { animation: none !important; } /* LANGSAMER HERZSCHLAG-GLOW FÜR KÄSTCHEN Volle Effekte nur mit GPU/Hardwarebeschleunigung; im Lite-Modus aus. */ html:not(.perf-lite) .hero-panel, html:not(.perf-lite) .stats-strip > div, html:not(.perf-lite) .rank-system-card, html:not(.perf-lite) .rank-apply-card, html:not(.perf-lite) .rank-board-wrap, html:not(.perf-lite) .rank-column, html:not(.perf-lite) .tournament-card, html:not(.perf-lite) .mode-card, html:not(.perf-lite) .team-card, html:not(.perf-lite) .final-cta, html:not(.perf-lite) .next-match { animation: nmCardHeartbeatGlow 6.8s ease-in-out infinite; will-change: box-shadow, filter, background-color; } html:not(.perf-lite) .tournament-card:nth-child(2n), html:not(.perf-lite) .mode-card:nth-child(2n), html:not(.perf-lite) .team-card:nth-child(2n), html:not(.perf-lite) .rank-column:nth-child(2n), html:not(.perf-lite) .rank-system-card:nth-child(2n) { animation-delay: 0.55s; } html:not(.perf-lite) .tournament-card:nth-child(3n), html:not(.perf-lite) .mode-card:nth-child(3n), html:not(.perf-lite) .team-card:nth-child(3n), html:not(.perf-lite) .rank-column:nth-child(3n), html:not(.perf-lite) .rank-system-card:nth-child(3n) { animation-delay: 1.1s; } @keyframes nmCardHeartbeatGlow { 0%, 18%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 48px -34px rgba(0, 0, 0, 0.85), 0 0 0 rgba(38, 224, 255, 0); filter: brightness(1); } 28% { box-shadow: inset 0 0 24px rgba(38, 224, 255, 0.11), 0 22px 56px -30px rgba(38, 224, 255, 0.42), 0 0 42px -18px rgba(38, 224, 255, 0.72), 0 0 70px -36px rgba(168, 85, 247, 0.58); filter: brightness(1.07); } 38% { box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.10), 0 26px 66px -28px rgba(38, 224, 255, 0.55), 0 0 60px -16px rgba(38, 224, 255, 0.85), 0 0 95px -34px rgba(168, 85, 247, 0.72); filter: brightness(1.12); } 48% { box-shadow: inset 0 0 18px rgba(38, 224, 255, 0.08), 0 20px 50px -34px rgba(38, 224, 255, 0.34), 0 0 34px -20px rgba(38, 224, 255, 0.55); filter: brightness(1.04); } 68% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 48px -34px rgba(0, 0, 0, 0.85), 0 0 0 rgba(38, 224, 255, 0); filter: brightness(1); } } /* Bei deaktivierter Hardware-/GPU-Beschleunigung keine schweren Glow-Pulse. */ .perf-lite .hero-panel, .perf-lite .stats-strip > div, .perf-lite .rank-system-card, .perf-lite .rank-apply-card, .perf-lite .rank-board-wrap, .perf-lite .rank-column, .perf-lite .tournament-card, .perf-lite .mode-card, .perf-lite .team-card, .perf-lite .final-cta, .perf-lite .next-match { animation: none !important; will-change: auto !important; filter: none !important; } /* FINAL FIX: Kein Herzschlag-Glow für alle Kästchen. Nur der angeklickte Host/Guesthost leuchtet am Avatar. */ html:not(.perf-lite) .hero-panel, html:not(.perf-lite) .stats-strip > div, html:not(.perf-lite) .rank-system-card, html:not(.perf-lite) .rank-apply-card, html:not(.perf-lite) .rank-board-wrap, html:not(.perf-lite) .rank-column, html:not(.perf-lite) .tournament-card, html:not(.perf-lite) .mode-card, html:not(.perf-lite) .team-card, html:not(.perf-lite) .final-cta, html:not(.perf-lite) .next-match { animation: none !important; will-change: auto !important; } .team-card.host-highlight, .guest-team-card.host-highlight, .team-card.active-tourney-host { border-color: var(--border) !important; box-shadow: none !important; transform: none !important; } .team-card.host-highlight::after, .guest-team-card.host-highlight::after, .team-card.active-tourney-host::after { display: none !important; } .team-card.host-highlight .avatar, .guest-team-card.host-highlight .avatar, .guest-team-card.host-highlight .guest-avatar, .team-card.active-tourney-host .avatar { border-color: rgba(38, 224, 255, 0.95) !important; box-shadow: 0 0 0 3px rgba(38, 224, 255, 0.20), 0 0 22px 7px rgba(38, 224, 255, 0.95), 0 0 58px 18px rgba(38, 224, 255, 0.54), 0 0 92px 28px rgba(168, 85, 247, 0.28) !important; filter: brightness(1.15) saturate(1.22) !important; animation: hostAvatarCyanGlow 1.65s ease-in-out infinite alternate !important; } .team-card.host-highlight .avatar img, .guest-team-card.host-highlight .avatar img, .team-card.active-tourney-host .avatar img { filter: brightness(1.12) contrast(1.06) saturate(1.16) !important; } .team-card.host-highlight h3, .guest-team-card.host-highlight h3, .team-card.active-tourney-host h3 { text-shadow: 0 0 14px rgba(38, 224, 255, 0.72), 0 0 30px rgba(168, 85, 247, 0.28) !important; } @keyframes hostAvatarCyanGlow { 0% { box-shadow: 0 0 0 2px rgba(38, 224, 255, 0.14), 0 0 16px 5px rgba(38, 224, 255, 0.72), 0 0 44px 14px rgba(38, 224, 255, 0.38), 0 0 76px 24px rgba(168, 85, 247, 0.18); } 100% { box-shadow: 0 0 0 4px rgba(38, 224, 255, 0.24), 0 0 28px 9px rgba(38, 224, 255, 1), 0 0 68px 22px rgba(38, 224, 255, 0.60), 0 0 108px 34px rgba(168, 85, 247, 0.34); } } .perf-lite .team-card.host-highlight .avatar, .perf-lite .guest-team-card.host-highlight .avatar, .perf-lite .guest-team-card.host-highlight .guest-avatar { animation: none !important; } /* FINAL: Host-Link-Markierung als großes Kästchen-Glow in Endlosschleife. Nur die per Turnier-Host-Link angeklickte Teamkarte leuchtet. Kein Avatar-Cyan/Blau-Glow. */ .team-card.active-tourney-host { border-color: var(--border) !important; box-shadow: none !important; animation: none !important; } .team-card.active-tourney-host::after { display: none !important; } .team-card.active-tourney-host .avatar, .team-card.active-tourney-host .guest-avatar, .team-card.active-tourney-host .avatar img { animation: none !important; box-shadow: inherit; filter: none !important; } .team-card.host-highlight, .guest-team-card.host-highlight { position: relative; border-color: rgba(255, 255, 255, 0.34) !important; box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.08), 0 0 22px -8px rgba(255, 255, 255, 0.72), 0 0 56px -18px rgba(168, 85, 247, 0.72), 0 0 86px -32px rgba(38, 224, 255, 0.45) !important; transform: none !important; animation: hostCardSlowHeartbeat 3.8s ease-in-out infinite !important; } .team-card.host-highlight::after, .guest-team-card.host-highlight::after { content: "" !important; display: block !important; position: absolute !important; inset: -2px !important; border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.16), transparent 46%), linear-gradient(135deg, rgba(255,255,255,0.18), rgba(168,85,247,0.12), rgba(38,224,255,0.08)); opacity: 0.72; filter: blur(0.2px); animation: hostCardAuraPulse 3.8s ease-in-out infinite !important; } .team-card.host-highlight > *, .guest-team-card.host-highlight > * { position: relative; z-index: 2; } .team-card.host-highlight .avatar, .guest-team-card.host-highlight .avatar, .guest-team-card.host-highlight .guest-avatar { border-color: rgba(255,255,255,0.34) !important; box-shadow: 0 0 18px -8px rgba(255,255,255,0.7) !important; filter: none !important; animation: none !important; } .team-card.host-highlight .avatar img, .guest-team-card.host-highlight .avatar img { filter: none !important; } .team-card.host-highlight h3, .guest-team-card.host-highlight h3 { text-shadow: 0 0 12px rgba(255,255,255,0.45), 0 0 24px rgba(168,85,247,0.35) !important; } @keyframes hostCardSlowHeartbeat { 0%, 100% { border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04), 0 0 18px -10px rgba(255, 255, 255, 0.45), 0 0 42px -24px rgba(168, 85, 247, 0.45), 0 0 68px -38px rgba(38, 224, 255, 0.28); filter: brightness(1.02); } 42% { border-color: rgba(255, 255, 255, 0.52); box-shadow: inset 0 0 46px rgba(255, 255, 255, 0.13), 0 0 34px -8px rgba(255, 255, 255, 0.92), 0 0 80px -16px rgba(168, 85, 247, 0.88), 0 0 118px -30px rgba(38, 224, 255, 0.52); filter: brightness(1.12); } 58% { border-color: rgba(255, 255, 255, 0.38); box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.08), 0 0 24px -10px rgba(255, 255, 255, 0.72), 0 0 58px -22px rgba(168, 85, 247, 0.64), 0 0 90px -38px rgba(38, 224, 255, 0.36); filter: brightness(1.06); } } @keyframes hostCardAuraPulse { 0%, 100% { opacity: 0.38; } 42% { opacity: 0.88; } 58% { opacity: 0.58; } } .perf-lite .team-card.host-highlight, .perf-lite .guest-team-card.host-highlight { animation: none !important; box-shadow: 0 0 22px -8px rgba(255,255,255,0.7) !important; } /* FINAL: Guesthost-Karten auf Team-Seite lassen sich nicht abwählen/umschalten. Markierung kommt nur über den Host-Link in der Turnierkarte. */ .guest-team-card { cursor: default !important; } .guest-team-card .team-social, .guest-team-card a { cursor: pointer !important; } /* FINAL: Herzschlag auf allen Kästchen wieder aktiv lassen. Nur der über Turnier-Host-Link gewählte Host/Guesthost bekommt zusätzlich das stärkere große Karten-Leuchten in Endlosschleife. */ html:not(.perf-lite) .hero-panel, html:not(.perf-lite) .stats-strip > div, html:not(.perf-lite) .rank-system-card, html:not(.perf-lite) .rank-apply-card, html:not(.perf-lite) .rank-board-wrap, html:not(.perf-lite) .rank-column, html:not(.perf-lite) .tournament-card, html:not(.perf-lite) .mode-card, html:not(.perf-lite) .team-card:not(.host-highlight), html:not(.perf-lite) .final-cta, html:not(.perf-lite) .next-match { animation: nmCardHeartbeatGlow 6.8s ease-in-out infinite !important; will-change: box-shadow, filter, background-color !important; } html:not(.perf-lite) .tournament-card:nth-child(2n), html:not(.perf-lite) .mode-card:nth-child(2n), html:not(.perf-lite) .team-card:not(.host-highlight):nth-child(2n), html:not(.perf-lite) .rank-column:nth-child(2n), html:not(.perf-lite) .rank-system-card:nth-child(2n) { animation-delay: 0.55s !important; } html:not(.perf-lite) .tournament-card:nth-child(3n), html:not(.perf-lite) .mode-card:nth-child(3n), html:not(.perf-lite) .team-card:not(.host-highlight):nth-child(3n), html:not(.perf-lite) .rank-column:nth-child(3n), html:not(.perf-lite) .rank-system-card:nth-child(3n) { animation-delay: 1.1s !important; } html:not(.perf-lite) .team-card.host-highlight, html:not(.perf-lite) .guest-team-card.host-highlight { animation: hostCardSlowHeartbeat 3.8s ease-in-out infinite !important; will-change: box-shadow, filter, background-color !important; } /* Guesthost nur über Turnier-Host-Link: normal nicht als extra Teamkarte anzeigen. */ .team-grid:not(.show-linked-guesthost) [data-guest-host-card="true"] { display: none !important; } .perf-lite .hero-panel, .perf-lite .stats-strip > div, .perf-lite .rank-system-card, .perf-lite .rank-apply-card, .perf-lite .rank-board-wrap, .perf-lite .rank-column, .perf-lite .tournament-card, .perf-lite .mode-card, .perf-lite .team-card, .perf-lite .final-cta, .perf-lite .next-match { animation: none !important; will-change: auto !important; filter: none !important; } /* FINAL: Ranking-Bereich ohne Herzschlag, damit dort nicht zu viele Effekte sind. */ html:not(.perf-lite) .rank-system-card, html:not(.perf-lite) .rank-apply-card, html:not(.perf-lite) .rank-board-wrap, html:not(.perf-lite) .rank-column { animation: none !important; will-change: auto !important; filter: none !important; } /* Rose und alle festen Crew-Hosts bekommen über die Turnier-Host-Verlinkung denselben großen Endlos-Glow wie Guesthosts. */ html:not(.perf-lite) .team-card.host-highlight, html:not(.perf-lite) .guest-team-card.host-highlight { animation: hostCardSlowHeartbeat 3.8s ease-in-out infinite !important; } /* FINAL: Rose/feste Hosts blinken genauso wie Guesthosts, wenn sie über die Turnier-Host-Verlinkung geöffnet werden. */ html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight, html:not(.perf-lite).linked-host-highlight-active #team-rose.host-highlight, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="rose"].host-highlight, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="admin"].host-highlight, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="linorayy"].host-highlight, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="moderator"].host-highlight { position: relative !important; border-color: rgba(255, 255, 255, 0.34) !important; box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.08), 0 0 22px -8px rgba(255, 255, 255, 0.72), 0 0 56px -18px rgba(168, 85, 247, 0.72), 0 0 86px -32px rgba(38, 224, 255, 0.45) !important; transform: none !important; animation: hostCardSlowHeartbeat 3.8s ease-in-out infinite !important; } html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight::after, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight::after { content: "" !important; display: block !important; position: absolute !important; inset: -2px !important; border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.16), transparent 46%), linear-gradient(135deg, rgba(255,255,255,0.18), rgba(168,85,247,0.12), rgba(38,224,255,0.08)); opacity: 0.72 !important; animation: hostCardAuraPulse 3.8s ease-in-out infinite !important; } html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight > *, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight > * { position: relative !important; z-index: 2 !important; } /* Kein gelber Avatar-Ring und kein Cyan/Blau-Avatar-Only Glow. Das große Kästchen ist die Markierung. */ html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight .avatar, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight .avatar, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight .guest-avatar { animation: none !important; border-color: rgba(255,255,255,0.34) !important; box-shadow: 0 0 18px -8px rgba(255,255,255,0.7) !important; filter: none !important; } /* Copyright-Zeile sauber lesbar halten. */ .footer p { letter-spacing: 0.01em; } /* FINAL FIX: Rose, Guesthosts und alle festen Tourney-Hosts leuchten exakt gleich, wenn sie über die Turnier-Host-Verlinkung geöffnet werden. */ html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight, html:not(.perf-lite).linked-host-highlight-active #team-rose.host-highlight, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="rose"].host-highlight, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="admin"].host-highlight, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="linorayy"].host-highlight, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="moderator"].host-highlight { position: relative !important; overflow: hidden !important; border-color: rgba(255, 255, 255, 0.36) !important; background: radial-gradient(circle at 50% 28%, rgba(255,255,255,0.075), transparent 44%), linear-gradient(135deg, rgba(38,224,255,0.055), rgba(168,85,247,0.055)), var(--panel) !important; box-shadow: inset 0 0 26px rgba(255,255,255,0.075), 0 0 20px -9px rgba(255,255,255,0.68), 0 0 58px -20px rgba(168,85,247,0.76), 0 0 92px -34px rgba(38,224,255,0.52) !important; filter: brightness(1.04) !important; transform: none !important; animation: nmEqualHostCardGlow 3.8s ease-in-out infinite !important; } html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight::after, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight::after, html:not(.perf-lite).linked-host-highlight-active #team-rose.host-highlight::after, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="rose"].host-highlight::after, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="admin"].host-highlight::after, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="linorayy"].host-highlight::after, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="moderator"].host-highlight::after { content: "" !important; display: block !important; position: absolute !important; inset: -2px !important; border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.18), transparent 46%), linear-gradient(135deg, rgba(255,255,255,0.16), rgba(168,85,247,0.14), rgba(38,224,255,0.10)) !important; opacity: 0.58 !important; filter: blur(0.2px) !important; animation: nmEqualHostAuraGlow 3.8s ease-in-out infinite !important; } html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight > *, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight > *, html:not(.perf-lite).linked-host-highlight-active #team-rose.host-highlight > *, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="rose"].host-highlight > *, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="admin"].host-highlight > *, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="linorayy"].host-highlight > *, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="moderator"].host-highlight > * { position: relative !important; z-index: 2 !important; } /* Bild/Avatar bleibt bei allen gleich ruhig: kein gelber Ring, kein extra Avatar-Glow. */ html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight .avatar, html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight .guest-avatar, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight .avatar, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight .guest-avatar, html:not(.perf-lite).linked-host-highlight-active #team-rose.host-highlight .avatar, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="rose"].host-highlight .avatar { animation: none !important; border-color: rgba(255,255,255,0.34) !important; box-shadow: 0 0 18px -8px rgba(255,255,255,0.7) !important; filter: none !important; } html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight .avatar img, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight .avatar img, html:not(.perf-lite).linked-host-highlight-active #team-rose.host-highlight .avatar img, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="rose"].host-highlight .avatar img { filter: none !important; animation: none !important; } html:not(.perf-lite).linked-host-highlight-active .team-card.host-highlight h3, html:not(.perf-lite).linked-host-highlight-active .guest-team-card.host-highlight h3, html:not(.perf-lite).linked-host-highlight-active #team-rose.host-highlight h3, html:not(.perf-lite).linked-host-highlight-active .team-card[data-member="rose"].host-highlight h3 { text-shadow: 0 0 12px rgba(255,255,255,0.45), 0 0 24px rgba(168,85,247,0.35) !important; } @keyframes nmEqualHostCardGlow { 0%, 100% { border-color: rgba(255,255,255,0.22); box-shadow: inset 0 0 18px rgba(255,255,255,0.04), 0 0 18px -10px rgba(255,255,255,0.45), 0 0 42px -24px rgba(168,85,247,0.45), 0 0 68px -38px rgba(38,224,255,0.28); filter: brightness(1.02); } 42% { border-color: rgba(255,255,255,0.52); box-shadow: inset 0 0 46px rgba(255,255,255,0.13), 0 0 34px -8px rgba(255,255,255,0.92), 0 0 80px -16px rgba(168,85,247,0.88), 0 0 118px -30px rgba(38,224,255,0.52); filter: brightness(1.12); } 58% { border-color: rgba(255,255,255,0.38); box-shadow: inset 0 0 30px rgba(255,255,255,0.08), 0 0 24px -10px rgba(255,255,255,0.72), 0 0 58px -22px rgba(168,85,247,0.64), 0 0 90px -38px rgba(38,224,255,0.36); filter: brightness(1.06); } } @keyframes nmEqualHostAuraGlow { 0%, 100% { opacity: 0.38; } 42% { opacity: 0.88; } 58% { opacity: 0.58; } } /* FINAL: Rose + Halawiits / Guesthost Kein hässlicher Rahmen, kein hartes Blinken. Nur das komplette Team-Kästchen leuchtet ruhig auf. */ .team-card.host-highlight, .guest-team-card.host-highlight, .team-card[data-guest-host-card="true"].host-highlight { position: relative !important; overflow: hidden !important; transform: none !important; border-color: rgba(255,255,255,0.28) !important; outline: none !important; background: radial-gradient(circle at 50% 22%, rgba(38,224,255,0.12), transparent 48%), linear-gradient(145deg, rgba(38,224,255,0.065), rgba(168,85,247,0.075)), var(--panel) !important; box-shadow: inset 0 0 24px rgba(38,224,255,0.055), 0 0 22px -14px rgba(255,255,255,0.48), 0 0 42px -24px rgba(38,224,255,0.58), 0 0 66px -34px rgba(168,85,247,0.52) !important; filter: brightness(1.02) !important; animation: nmCalmLinkedHostGlow 5.2s ease-in-out infinite !important; } .team-card.host-highlight::after, .guest-team-card.host-highlight::after, .team-card[data-guest-host-card="true"].host-highlight::after { content: "" !important; display: block !important; position: absolute !important; inset: -2px !important; border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important; opacity: 0.30 !important; filter: none !important; border: 0 !important; outline: none !important; padding: 0 !important; mask: none !important; -webkit-mask: none !important; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), transparent 48%), linear-gradient(135deg, rgba(38,224,255,0.09), rgba(168,85,247,0.11), rgba(255,255,255,0.045)) !important; animation: nmCalmLinkedHostAura 5.2s ease-in-out infinite !important; } .team-card.host-highlight > *, .guest-team-card.host-highlight > *, .team-card[data-guest-host-card="true"].host-highlight > * { position: relative !important; z-index: 2 !important; } /* Wichtig: Avatar/Bild bekommt KEINEN eigenen Blink-Effekt. */ .team-card.host-highlight .avatar, .guest-team-card.host-highlight .avatar, .guest-team-card.host-highlight .guest-avatar, .team-card[data-guest-host-card="true"].host-highlight .avatar, .team-card[data-guest-host-card="true"].host-highlight .guest-avatar, .team-card.host-highlight .avatar img, .guest-team-card.host-highlight .avatar img, .team-card[data-guest-host-card="true"].host-highlight .avatar img { animation: none !important; transform: none !important; filter: none !important; border-color: rgba(255,255,255,0.26) !important; box-shadow: 0 0 16px -12px rgba(255,255,255,0.55) !important; } /* Guesthost-Karte weiter nicht direkt abwählbar. Twitch bleibt klickbar. */ .guest-team-card { cursor: default !important; } .guest-team-card a, .guest-team-card .team-social { cursor: pointer !important; } @keyframes nmCalmLinkedHostGlow { 0%, 100% { border-color: rgba(255,255,255,0.22); box-shadow: inset 0 0 18px rgba(38,224,255,0.035), 0 0 16px -14px rgba(255,255,255,0.34), 0 0 34px -26px rgba(38,224,255,0.42), 0 0 52px -38px rgba(168,85,247,0.38); filter: brightness(1.00); } 48% { border-color: rgba(255,255,255,0.38); box-shadow: inset 0 0 34px rgba(38,224,255,0.075), 0 0 24px -12px rgba(255,255,255,0.50), 0 0 54px -22px rgba(38,224,255,0.68), 0 0 82px -34px rgba(168,85,247,0.60); filter: brightness(1.055); } } @keyframes nmCalmLinkedHostAura { 0%, 100% { opacity: 0.22; } 48% { opacity: 0.45; } } /* Performance/Lite-Modus: kein Blinken, trotzdem ruhiger statischer Glow. */ .perf-lite .team-card.host-highlight, .perf-lite .guest-team-card.host-highlight, .perf-lite .team-card[data-guest-host-card="true"].host-highlight { animation: none !important; border-color: rgba(255,255,255,0.32) !important; box-shadow: inset 0 0 24px rgba(38,224,255,0.055), 0 0 42px -24px rgba(38,224,255,0.58), 0 0 66px -34px rgba(168,85,247,0.52) !important; } .perf-lite .team-card.host-highlight::after, .perf-lite .guest-team-card.host-highlight::after, .perf-lite .team-card[data-guest-host-card="true"].host-highlight::after { animation: none !important; opacity: 0.30 !important; } /* REALFIX: Halawiits-Blinken komplett aus. Ursache: active-tourney-host konnte zusätzlich auf Guesthost landen. Jetzt werden host-highlight UND active-tourney-host komplett gleich behandelt. */ .team-card.host-highlight, .guest-team-card.host-highlight, .team-card[data-guest-host-card="true"].host-highlight, .team-card.active-tourney-host, .guest-team-card.active-tourney-host, .team-card[data-guest-host-card="true"].active-tourney-host { position: relative !important; overflow: hidden !important; transform: none !important; outline: none !important; border-color: rgba(255,255,255,0.28) !important; background: radial-gradient(circle at 50% 22%, rgba(38,224,255,0.12), transparent 48%), linear-gradient(145deg, rgba(38,224,255,0.065), rgba(168,85,247,0.075)), var(--panel) !important; box-shadow: inset 0 0 24px rgba(38,224,255,0.055), 0 0 42px -24px rgba(38,224,255,0.58), 0 0 66px -34px rgba(168,85,247,0.52) !important; filter: brightness(1.02) !important; animation: nmRealCalmHostGlow 5.8s ease-in-out infinite !important; } .team-card.host-highlight::after, .guest-team-card.host-highlight::after, .team-card[data-guest-host-card="true"].host-highlight::after, .team-card.active-tourney-host::after, .guest-team-card.active-tourney-host::after, .team-card[data-guest-host-card="true"].active-tourney-host::after { content: "" !important; display: block !important; position: absolute !important; inset: -2px !important; border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important; opacity: 0.30 !important; filter: none !important; border: 0 !important; outline: none !important; padding: 0 !important; mask: none !important; -webkit-mask: none !important; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), transparent 48%), linear-gradient(135deg, rgba(38,224,255,0.09), rgba(168,85,247,0.11), rgba(255,255,255,0.045)) !important; animation: nmRealCalmHostAura 5.8s ease-in-out infinite !important; } .team-card.host-highlight > *, .guest-team-card.host-highlight > *, .team-card[data-guest-host-card="true"].host-highlight > *, .team-card.active-tourney-host > *, .guest-team-card.active-tourney-host > *, .team-card[data-guest-host-card="true"].active-tourney-host > * { position: relative !important; z-index: 2 !important; } /* Avatar/Bild komplett ruhig – hier darf GAR KEIN Blinken mehr sein. */ .team-card.host-highlight .avatar, .guest-team-card.host-highlight .avatar, .guest-team-card.host-highlight .guest-avatar, .team-card[data-guest-host-card="true"].host-highlight .avatar, .team-card[data-guest-host-card="true"].host-highlight .guest-avatar, .team-card.active-tourney-host .avatar, .guest-team-card.active-tourney-host .avatar, .guest-team-card.active-tourney-host .guest-avatar, .team-card[data-guest-host-card="true"].active-tourney-host .avatar, .team-card[data-guest-host-card="true"].active-tourney-host .guest-avatar, .team-card.host-highlight .avatar img, .guest-team-card.host-highlight .avatar img, .team-card[data-guest-host-card="true"].host-highlight .avatar img, .team-card.active-tourney-host .avatar img, .guest-team-card.active-tourney-host .avatar img, .team-card[data-guest-host-card="true"].active-tourney-host .avatar img { animation: none !important; transform: none !important; filter: none !important; border-color: rgba(255,255,255,0.26) !important; box-shadow: 0 0 16px -12px rgba(255,255,255,0.55) !important; } /* Guesthost bleibt nicht abwählbar. */ .guest-team-card { cursor: default !important; } .guest-team-card a, .guest-team-card .team-social { cursor: pointer !important; } @keyframes nmRealCalmHostGlow { 0%, 100% { border-color: rgba(255,255,255,0.22); box-shadow: inset 0 0 18px rgba(38,224,255,0.035), 0 0 34px -26px rgba(38,224,255,0.42), 0 0 52px -38px rgba(168,85,247,0.38); filter: brightness(1.00); } 50% { border-color: rgba(255,255,255,0.38); box-shadow: inset 0 0 34px rgba(38,224,255,0.075), 0 0 54px -22px rgba(38,224,255,0.68), 0 0 82px -34px rgba(168,85,247,0.60); filter: brightness(1.055); } } @keyframes nmRealCalmHostAura { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.45; } } /* Lite-Modus: kein Blinken, statisch ruhig. */ .perf-lite .team-card.host-highlight, .perf-lite .guest-team-card.host-highlight, .perf-lite .team-card[data-guest-host-card="true"].host-highlight, .perf-lite .team-card.active-tourney-host, .perf-lite .guest-team-card.active-tourney-host, .perf-lite .team-card[data-guest-host-card="true"].active-tourney-host { animation: none !important; box-shadow: inset 0 0 24px rgba(38,224,255,0.055), 0 0 42px -24px rgba(38,224,255,0.58), 0 0 66px -34px rgba(168,85,247,0.52) !important; } .perf-lite .team-card.host-highlight::after, .perf-lite .guest-team-card.host-highlight::after, .perf-lite .team-card[data-guest-host-card="true"].host-highlight::after, .perf-lite .team-card.active-tourney-host::after, .perf-lite .guest-team-card.active-tourney-host::after, .perf-lite .team-card[data-guest-host-card="true"].active-tourney-host::after { animation: none !important; opacity: 0.30 !important; } /* Sekundäre Team-Funktionen bewusst ruhig statt als goldener Button. */ .team-category-badges { margin-top: 5px !important; } .team-category-badges .team-host-marker { display: inline-flex !important; width: auto !important; margin: 0 !important; padding: 2px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #9db0c5 !important; font-size: .67rem !important; font-weight: 700 !important; letter-spacing: .12em !important; } .team-category-badges .team-host-marker::before { content: "•"; margin-right: 6px; color: var(--cyan); } /* HARD STOP HALAWIITS: Jede dynamische Guesthost-Teamkarte ist komplett animationsfrei. Damit kann Halawiits nicht mehr blinken, egal ob host-highlight, active-tourney-host, alte Klasse oder Lite-Modus greift. */ .team-card[data-guest-host-card="true"], .guest-team-card[data-guest-host-card="true"], .linked-guest-host-card[data-guest-host-card="true"], #team-guest-halawiits { animation: none !important; transition: none !important; transform: none !important; filter: none !important; position: relative !important; overflow: hidden !important; border-color: rgba(255,255,255,0.30) !important; background: radial-gradient(circle at 50% 22%, rgba(38,224,255,0.13), transparent 48%), linear-gradient(145deg, rgba(38,224,255,0.075), rgba(168,85,247,0.08)), var(--panel) !important; box-shadow: inset 0 0 30px rgba(38,224,255,0.06), 0 0 42px -24px rgba(38,224,255,0.62), 0 0 70px -36px rgba(168,85,247,0.55) !important; } .team-card[data-guest-host-card="true"]::before, .team-card[data-guest-host-card="true"]::after, .guest-team-card[data-guest-host-card="true"]::before, .guest-team-card[data-guest-host-card="true"]::after, .linked-guest-host-card[data-guest-host-card="true"]::before, .linked-guest-host-card[data-guest-host-card="true"]::after, #team-guest-halawiits::before, #team-guest-halawiits::after { animation: none !important; transition: none !important; filter: none !important; opacity: 0.32 !important; border: 0 !important; outline: none !important; box-shadow: none !important; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), transparent 48%), linear-gradient(135deg, rgba(38,224,255,0.10), rgba(168,85,247,0.10), rgba(255,255,255,0.04)) !important; content: "" !important; display: block !important; position: absolute !important; inset: -2px !important; border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important; padding: 0 !important; mask: none !important; -webkit-mask: none !important; } .team-card[data-guest-host-card="true"] *, .guest-team-card[data-guest-host-card="true"] *, .linked-guest-host-card[data-guest-host-card="true"] *, #team-guest-halawiits * { animation: none !important; transition: none !important; transform: none !important; filter: none !important; } .team-card[data-guest-host-card="true"] > *, .guest-team-card[data-guest-host-card="true"] > *, .linked-guest-host-card[data-guest-host-card="true"] > *, #team-guest-halawiits > * { position: relative !important; z-index: 2 !important; } .team-card[data-guest-host-card="true"] .avatar, .team-card[data-guest-host-card="true"] .guest-avatar, .guest-team-card[data-guest-host-card="true"] .avatar, .guest-team-card[data-guest-host-card="true"] .guest-avatar, .linked-guest-host-card[data-guest-host-card="true"] .avatar, .linked-guest-host-card[data-guest-host-card="true"] .guest-avatar, #team-guest-halawiits .avatar, #team-guest-halawiits .guest-avatar { animation: none !important; transition: none !important; transform: none !important; filter: none !important; border-color: rgba(255,255,255,0.25) !important; box-shadow: none !important; } /* Auch feste Hosts behalten nur ruhiges Kästchen-Aufleuchten, aber Guesthost blinkt garantiert nicht. */ .team-card.host-highlight:not([data-guest-host-card="true"]) { animation: nmRealCalmHostGlow 5.8s ease-in-out infinite !important; } /* Halawiits/Guesthost nicht abwählbar, Twitch bleibt klickbar. */ .team-card[data-guest-host-card="true"], .guest-team-card, .linked-guest-host-card { cursor: default !important; } .team-card[data-guest-host-card="true"] a, .guest-team-card a, .linked-guest-host-card a, .team-card[data-guest-host-card="true"] .team-social, .guest-team-card .team-social, .linked-guest-host-card .team-social { cursor: pointer !important; } /* Halawiits moderator logo */ #team-moderator .avatar.avatar-photo, .team-card[data-member="moderator"] .avatar.avatar-photo { background: rgba(5, 6, 13, 0.95); } #team-moderator .avatar.avatar-photo img, .team-card[data-member="moderator"] .avatar.avatar-photo img { object-fit: contain; padding: 4px; background: #000; } .tournament-host[data-host="moderator"] .th-avatar img { object-fit: contain; padding: 2px; background: #000; } /* ====================================================================== Crew Control Center Upgrade ====================================================================== */ .admin-page .admin-hero { padding-bottom: 26px; } .status-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .system-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--text); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .system-pill.muted { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 700; } .system-pill[data-type="success"], #connectionStatus[data-type="success"] { color: #9fffdc; } .system-pill[data-type="warn"], #connectionStatus[data-type="warn"] { color: #ffd37a; } .system-pill[data-type="error"], #connectionStatus[data-type="error"] { color: #ff8b9a; } .command-top { position: relative; overflow: hidden; padding: 20px; border: 1px solid rgba(38,224,255,0.16); border-radius: 22px; background: linear-gradient(135deg, rgba(38,224,255,0.08), rgba(168,85,247,0.06)); } .command-top::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.08), transparent); transform: translateX(-100%); animation: commandSweep 7s ease-in-out infinite; } @keyframes commandSweep { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .admin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; } .admin-kpi-card { position: relative; overflow: hidden; min-height: 132px; padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)); box-shadow: 0 18px 45px -28px rgba(38,224,255,0.75); } .admin-kpi-card::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 999px; right: -44px; top: -48px; background: radial-gradient(circle, rgba(38,224,255,0.24), transparent 70%); } .admin-kpi-card span { display: block; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 900; } .admin-kpi-card strong { display: block; margin: 10px 0 4px; font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 0.95; } .admin-kpi-card small { display: block; color: var(--muted); font-size: 0.82rem; } .admin-tabbar { position: sticky; top: 82px; z-index: 15; display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; padding: 8px; border-radius: 18px; border: 1px solid var(--border); background: rgba(5,8,18,0.78); backdrop-filter: blur(16px); box-shadow: 0 18px 50px -34px rgba(0,0,0,0.9); } .admin-tabbar button { flex: 1 1 130px; border: 1px solid transparent; border-radius: 13px; padding: 11px 14px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 900; letter-spacing: 0.04em; transition: transform 0.2s, border-color 0.2s, background 0.2s, color 0.2s; } .admin-tabbar button:hover, .admin-tabbar button.active { color: #fff; border-color: var(--border-strong); background: linear-gradient(135deg, rgba(38,224,255,0.15), rgba(168,85,247,0.12)); transform: translateY(-1px); } .admin-tab-panel[hidden] { display: none !important; } .dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .dashboard-card { margin-top: 0; min-height: 220px; } .hero-dashboard-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: linear-gradient(145deg, rgba(38,224,255,0.12), rgba(168,85,247,0.08)); } .hero-dashboard-card h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin: 8px 0 10px; } .dashboard-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .dashboard-list-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,0.045); } .dashboard-list-row strong { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-list-row span { color: var(--muted); font-size: 0.82rem; text-align: right; } .card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .text-button { border: 0; background: transparent; color: var(--cyan); cursor: pointer; font-weight: 800; } .text-button:hover { text-decoration: underline; } .filter-row { display: flex; gap: 8px; flex-wrap: wrap; } .filter-row.compact input, .filter-row.compact select { min-height: 40px; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--border); background: rgba(255,255,255,0.045); color: var(--text); } .filter-row.compact input { min-width: 180px; } .filter-row.compact select option { background: #0a0f1e; color: #fff; } .tournament-editor-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); align-items: stretch; } /* Ranking-Formular: eine breite Karte statt Formular + Badge-Kasten. Oben Name und Twitch nebeneinander, darunter die drei Kategorien Battle Royal, Rebirth Resurgence und Custom als gleichwertige Spalten. */ .ranking-editor-grid { grid-template-columns: minmax(0, 1fr); } .ranking-multi-form > h3 { margin-bottom: 20px; } .ranking-multi-form .ranking-form-basics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } .ranking-multi-form .ranking-form-basics label { margin-bottom: 6px; } .ranking-multi-form .ranking-category-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 18px 0 4px; padding-top: 20px; border-top: 1px solid var(--border); } .ranking-multi-form .ranking-category-column { padding: 0 26px; } .ranking-multi-form .ranking-category-column + .ranking-category-column { border-left: 1px solid var(--border); } .ranking-multi-form .ranking-category-column:first-child { padding-left: 0; } .ranking-multi-form .ranking-category-column:last-child { padding-right: 0; } .ranking-multi-form .ranking-category-hint { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.6; } .ranking-multi-form .category-pill { font-weight: 800; } .ranking-multi-form .category-pill.category-battle-royal { color: #4ea8ff; } .ranking-multi-form .category-pill.category-rebirth-resurgence { color: #4ade80; } .ranking-multi-form .category-pill.category-customs { color: var(--purple); } /* Die Kategorie-Zeile ist nur Beschriftung - sie bleibt dauerhaft gesperrt, soll aber nicht ausgegraut wirken. */ .ranking-multi-form select.ranking-category-fixed:disabled { opacity: 1; cursor: default; color: #fff; } .ranking-multi-form .editor-actions { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--border); } @media (max-width: 860px) { .ranking-multi-form .ranking-form-basics, .ranking-multi-form .ranking-category-columns { grid-template-columns: 1fr; } .ranking-multi-form .ranking-category-column { padding: 0; } .ranking-multi-form .ranking-category-column + .ranking-category-column { border-left: 0; border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px; } } .guest-host-grid { margin-top: 4px; } .preview-panel { position: sticky; top: 170px; align-self: start; } .preview-card { position: relative; overflow: hidden; padding: 18px; border-radius: 18px; border: 1px solid rgba(38,224,255,0.18); background: radial-gradient(180px 120px at 90% 0%, rgba(38,224,255,0.24), transparent 72%), linear-gradient(150deg, rgba(255,255,255,0.095), rgba(255,255,255,0.035)); box-shadow: var(--glow-cyan); } .preview-card.is-empty { opacity: 0.76; } .preview-topline, .preview-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .preview-topline { justify-content: space-between; color: var(--muted); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .preview-card h4 { margin: 18px 0 14px; font-family: var(--font-head); font-size: clamp(1.6rem, 3vw, 2.2rem); } .preview-meta span { padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; } .preview-prize { margin-top: 18px; padding: 14px; border-radius: 14px; background: rgba(5,8,18,0.55); border: 1px solid var(--border); } .preview-prize small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 900; } .preview-prize strong { font-size: 1.25rem; } .preview-host { margin-top: 12px; color: var(--muted); font-size: 0.9rem; } .status-chip, .status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(38,224,255,0.25); background: rgba(38,224,255,0.10); color: #b8f7ff; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.05em; } .status-beendet, .status-abgesagt, .status-abgelaufen { border-color: rgba(255,139,154,0.28); background: rgba(255,139,154,0.10); color: #ffb5bf; } .status-anmeldung-offnet-bald { border-color: rgba(168,85,247,0.32); background: rgba(168,85,247,0.12); color: #d7b6ff; } .status-anmeldung-offen { border-color: rgba(38,224,255,0.32); background: rgba(38,224,255,0.11); color: #b8f7ff; } .status-wenige-platze, .status-check-in-bald, .status-check-in-offen { border-color: rgba(255,211,122,0.30); background: rgba(255,211,122,0.11); color: #ffdf96; } .status-ausgebucht, .status-check-in-geschlossen { border-color: rgba(255,139,154,0.30); background: rgba(255,139,154,0.11); color: #ffb5bf; } .status-live { border-color: rgba(159,255,220,0.32); background: rgba(159,255,220,0.12); color: #a8ffdf; box-shadow: 0 0 18px -12px rgba(159,255,220,0.9); } .btn.disabled, .btn:disabled { opacity: 0.58; cursor: not-allowed; transform: none !important; } .btn.danger-soft { border-color: rgba(255,139,154,0.28); color: #ffb5bf; } .btn.danger-soft:hover { border-color: rgba(255,139,154,0.55); color: #fff; box-shadow: 0 0 20px -12px rgba(255,139,154,0.9); } .pro-tip { margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--muted); font-size: 0.88rem; } .pro-tip strong { color: #fff; display: block; margin-bottom: 4px; } .upgraded-table { gap: 10px; } .upgraded-table .admin-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) auto; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)); border: 1px solid var(--border); } .upgraded-table .admin-row:hover { border-color: var(--border-strong); background: linear-gradient(135deg, rgba(38,224,255,0.09), rgba(168,85,247,0.055)); } .row-main strong { display: block; font-size: 0.98rem; } .row-main span, .row-meta small { display: block; color: var(--muted); font-size: 0.82rem; } .row-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; } .upgraded-table .mini-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; } .upgraded-table .mini-actions button { border-radius: 999px; background: rgba(255,255,255,0.05); } .upgraded-table .mini-actions button:hover { border-color: var(--border-strong); color: #fff; } .upgraded-table .mini-actions button.danger { border-color: rgba(255,139,154,0.22); color: #ffb5bf; } .archived-row { opacity: 0.9; } .rank-badge-grid { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0; } .rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.75rem; font-weight: 950; letter-spacing: 0.05em; text-transform: uppercase; } /* Abzeichen: Farbe aus --rank-rgb (weiter oben je Rang gesetzt), Leuchtstaerke aus der Stufe. Drei Regeln statt neun - und ein zehnter Rang braucht hier gar keine mehr. */ .rank-badge.rank-tier-low { color: rgb(var(--rank-rgb)); border-color: rgba(var(--rank-rgb), 0.28); } .rank-badge.rank-tier-mid { color: rgb(var(--rank-rgb)); border-color: rgba(var(--rank-rgb), 0.42); box-shadow: 0 0 18px -12px rgba(var(--rank-rgb), 0.85), inset 0 1px 0 rgba(255,255,255,.06); } .rank-badge.rank-tier-high { color: #fff; border-color: rgba(var(--rank-rgb), 0.6); background: linear-gradient(135deg, rgba(var(--rank-rgb), 0.28), rgba(var(--rank-rgb), 0.12)); box-shadow: 0 0 22px -10px rgba(var(--rank-rgb), 0.9), inset 0 1px 0 rgba(255,255,255,.1); } .ranking-info-card { margin-top: 0; } .activity-log { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow: auto; padding-right: 4px; } .activity-item { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 11px; border-radius: 13px; border: 1px solid var(--border); background: rgba(255,255,255,0.045); } .activity-item span { color: var(--muted); font-size: 0.78rem; } .activity-item p { margin: 0; font-size: 0.86rem; } .activity-item.success { border-color: rgba(159,255,220,0.16); } .activity-item.warn { border-color: rgba(255,211,122,0.16); } .setup-grid code { padding: 2px 6px; border-radius: 7px; border: 1px solid var(--border); background: rgba(255,255,255,0.06); color: var(--cyan); } .admin-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px)); pointer-events: none; } .admin-toast { transform: translateY(8px); opacity: 0; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--border); background: rgba(7,10,22,0.94); color: #fff; box-shadow: 0 18px 40px -22px rgba(0,0,0,0.9); transition: opacity 0.22s, transform 0.22s; } .admin-toast.show { opacity: 1; transform: translateY(0); } .admin-toast.success { border-color: rgba(159,255,220,0.26); } .admin-toast.error { border-color: rgba(255,139,154,0.32); } .admin-toast.warn { border-color: rgba(255,211,122,0.28); } .crew-status[data-type="success"] { color: #9fffdc; } .crew-status[data-type="error"] { color: #ff8b9a; } .crew-status[data-type="warn"] { color: #ffd37a; } @media (max-width: 980px) { .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid, .tournament-editor-grid, .ranking-editor-grid { grid-template-columns: 1fr; } .preview-panel { position: static; } .upgraded-table .admin-row { grid-template-columns: 1fr; align-items: flex-start; } .row-meta { align-items: flex-start; } .upgraded-table .mini-actions { justify-content: flex-start; } } @media (max-width: 620px) { .admin-kpi-grid { grid-template-columns: 1fr; } .admin-tabbar { position: static; } .card-title-row { flex-direction: column; } .filter-row.compact, .filter-row.compact input, .filter-row.compact select { width: 100%; } .dashboard-list-row { flex-direction: column; } .dashboard-list-row strong { max-width: 100%; } .dashboard-list-row span { text-align: left; } .activity-item { grid-template-columns: 1fr; } } /* ====================================================================== Crew Security Upgrade: Benutzername, temporäre Session, Rollen-Rechte ====================================================================== */ .crew-login-grid { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; } .crew-session-card { min-width: 230px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(38,224,255,0.18); background: rgba(5,8,18,0.46); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .crew-session-card > span { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .crew-session-card strong { display: block; margin-top: 6px; font-family: var(--font-head); font-size: 1.2rem; } .session-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .session-meta-row small { color: var(--muted); font-size: 0.78rem; } .role-badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(38,224,255,0.28); background: rgba(38,224,255,0.10); color: #b8f7ff; font-size: 0.7rem; font-weight: 950; text-transform: uppercase; letter-spacing: 0.08em; } .role-badge[data-role="owner"] { border-color: rgba(255,255,255,0.38); background: linear-gradient(135deg, rgba(38,224,255,0.18), rgba(168,85,247,0.22)); color: #fff; } .role-badge[data-role="admin"] { border-color: rgba(38,224,255,0.35); color: #8df4ff; } .role-badge[data-role="moderator"] { border-color: rgba(168,85,247,0.32); color: #d1aeff; } .role-badge[data-role="host"] { border-color: rgba(255,211,122,0.32); color: #ffdf96; } .permission-note { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255,211,122,0.20); color: #ffdf96; background: rgba(255,211,122,0.07); font-size: 0.74rem; font-weight: 800; } .permission-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .permission-cloud span { display: inline-flex; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.055); color: var(--text); font-size: 0.74rem; font-weight: 850; } .role-matrix { display: grid; gap: 10px; margin-top: 12px; } .role-matrix div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--border); background: rgba(255,255,255,0.045); } .role-matrix b { color: #fff; } .role-matrix span { color: var(--muted); font-size: 0.82rem; text-align: right; } .editor-card input:disabled, .editor-card select:disabled, .editor-card button:disabled { opacity: 0.55; cursor: not-allowed; } @media (min-width: 720px) { .crew-login-grid { grid-template-columns: 1fr 1fr; } .crew-gate { max-width: 640px; } } /* ====================================================================== Crew Members Upgrade: Profilbilder + Owner Rechteverwaltung ====================================================================== */ .session-profile-row { display: flex; align-items: center; gap: 12px; } .session-profile-row > div > span { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .crew-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(38,224,255,0.32); background: radial-gradient(circle at 30% 20%, rgba(38,224,255,0.24), transparent 44%), linear-gradient(135deg, rgba(38,224,255,0.15), rgba(168,85,247,0.13)); box-shadow: 0 12px 28px -20px rgba(38,224,255,0.9); color: #fff; font-weight: 950; letter-spacing: 0.08em; } .crew-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .crew-avatar img[hidden] { display: none; } .crew-avatar img:not([hidden]) + b { display: none; } .crew-avatar.sm { width: 42px; height: 42px; flex-basis: 42px; font-size: 0.8rem; } .crew-avatar.large { width: 112px; height: 112px; flex-basis: 112px; font-size: 1.4rem; border-width: 2px; } .session-avatar { width: 52px; height: 52px; flex-basis: 52px; } .crew-grid { align-items: stretch; } .profile-card { min-height: 260px; } .profile-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 16px; } .profile-fields label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: 0.86rem; } .profile-fields input, .member-editor-card input, .member-editor-card select { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.035); color: #fff; } .member-editor-card { margin: 12px 0 16px; box-shadow: none; } .member-rights-box { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,0.035); } .compact-title-row { margin-bottom: 8px; } .compact-title-row p { margin: 3px 0 0; } .compact-title-row small { color: #ffdf96; font-weight: 800; } .permission-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; } .permission-check { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.045); color: var(--text); font-size: 0.82rem; font-weight: 800; } .permission-check input { width: auto; accent-color: #26e0ff; } .permission-check input:disabled + span { color: var(--muted); } .switch-label { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 10px !important; margin-top: 25px; } .switch-label input { width: auto; accent-color: #26e0ff; } .crew-members-table { margin-top: 14px; } .crew-member-row { grid-template-columns: minmax(220px, 1.15fr) minmax(120px, auto) minmax(180px, 0.85fr) auto !important; } .member-main { display: flex; align-items: center; gap: 12px; } .member-permission-preview { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .member-permission-preview span { display: inline-flex; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.045); color: var(--muted); font-size: 0.7rem; font-weight: 800; } @media (max-width: 980px) { .crew-member-row { grid-template-columns: 1fr !important; } .member-permission-preview { justify-content: flex-start; } } @media (max-width: 620px) { .profile-editor { grid-template-columns: 1fr; } .permission-check-grid { grid-template-columns: 1fr; } } /* Host/Social/Countdown Update */ .slots-left-banner { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(255, 211, 122, 0.42); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 211, 122, 0.14), rgba(255, 153, 0, 0.08)); color: #ffe4a8; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; } .slots-left-banner strong { font-family: var(--font-head); color: #fff; font-size: 1.15rem; font-variant-numeric: tabular-nums; } .opening-banner { border-color: rgba(168, 85, 247, 0.45); background: linear-gradient(135deg, rgba(168,85,247,0.14), rgba(38,224,255,0.08)); } .status-anmeldung-oeffnet-bald, .tournament-card.registration-not-open .card-status { color: #d8b9ff; background: rgba(168,85,247,0.16); border-color: rgba(168,85,247,0.55); } .status-wenige-platze { color: #ffdf96; background: rgba(255,211,122,0.14); border-color: rgba(255,211,122,0.45); } .status-ausgebucht, .tournament-card.is-full .card-status { color: #ff9aa8; background: rgba(255,85,112,0.14); border-color: rgba(255,85,112,0.45); } .team-host-marker { display: inline-flex; align-items: center; justify-content: center; margin: 4px auto 0; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,211,122,0.4); background: rgba(255,211,122,0.10); color: #ffdf96; font-size: 0.68rem; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; } .social-profile-card .social-fields { display: grid; gap: 12px; } .crew-member-row .row-meta small { line-height: 1.55; } /* Ready fix: ticker removed */ .nm-ticker, .nm-ticker-track, .nm-ticker-item { display: none !important; } /* Final ready: ticker oben überall ausblenden und Login nach erfolgreicher Session hart verstecken */ .nm-ticker, .nm-ticker-track, .nm-ticker-item, #nmTickerTrack { display: none !important; visibility: hidden !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } body.crew-logged-in #crewGate { display: none !important; visibility: hidden !important; } body.crew-logged-in #crewAdmin { display: block; } /* Crew Chat / Tasks / Teilnehmer Update */ body.crew-logged-in #crewGate, body.crew-logged-in .crew-gate { display: none !important; visibility: hidden !important; pointer-events: none !important; } body.crew-logged-in #crewAdmin, body.crew-logged-in .crew-admin { display: block !important; } .discord-announcement-text, .crew-chat-form input, .crew-task-form textarea, .registration-list textarea { width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(8, 10, 22, .72); color: var(--text, #f5f7ff); padding: 14px 16px; font: inherit; resize: vertical; } .discord-announcement-text { min-height: 190px; line-height: 1.55; } .chat-live-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(38, 224, 255, .28); background: rgba(38, 224, 255, .08); color: #a9f7ff; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; box-shadow: 0 0 22px rgba(38, 224, 255, .08); } .chat-live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #8190aa; box-shadow: 0 0 0 rgba(38, 224, 255, 0); } .chat-live-badge.is-live::before { background: #35f7cf; box-shadow: 0 0 15px rgba(53, 247, 207, .85); animation: chatPulse 1.2s ease-in-out infinite; } .chat-live-badge.has-unread { border-color: rgba(255, 209, 102, .45); color: #ffe9a8; background: rgba(255, 209, 102, .10); } .chat-manual-refresh { min-width: 42px; padding-inline: 12px; opacity: .65; } .chat-manual-refresh:hover { opacity: 1; } @keyframes chatPulse { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.35); opacity: 1; } } .crew-chat-card { min-height: 620px; } .crew-chat-list { display: flex; flex-direction: column; gap: 14px; min-height: 380px; max-height: 520px; overflow: auto; padding: 8px; border-radius: 18px; background: rgba(2, 5, 16, .28); border: 1px solid rgba(255,255,255,.08); } .chat-message { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; } .crew-avatar.small { width: 42px; height: 42px; min-width: 42px; } .chat-bubble { padding: 13px 15px; border-radius: 18px; background: linear-gradient(135deg, rgba(42, 219, 255, .10), rgba(150, 88, 255, .08)); border: 1px solid rgba(255,255,255,.10); } .chat-bubble p { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.55; } .chat-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--muted, #aeb4c8); } .chat-meta strong { color: var(--text, #fff); } .crew-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 14px; } .crew-task-form { display: grid; gap: 14px; } .crew-task-list, .registration-list { display: grid; gap: 14px; margin-top: 16px; } .task-item, .registration-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; background: rgba(255,255,255,.045); } .task-item.status-fertig { opacity: .72; } .task-item .row-main span, .registration-item .row-main span, .task-item .row-main small, .registration-item .row-main small { display: block; margin-top: 4px; } .mini-actions button.active-soft { border-color: rgba(42, 219, 255, .55); background: rgba(42, 219, 255, .12); color: #7df2ff; } .danger-text { color: #ff7b9a !important; } @media (max-width: 760px) { .crew-chat-form, .task-item, .registration-item { grid-template-columns: 1fr; } } /* ====================================================================== NO MERCY PRO UI POLISH — cleaner dashboard, premium buttons, readability ====================================================================== */ :root { --success: #79ffd8; --warning: #ffd166; --danger: #ff6b8a; --admin-card: rgba(9, 13, 28, 0.78); --admin-card-soft: rgba(255, 255, 255, 0.055); --admin-line: rgba(255, 255, 255, 0.12); --admin-line-strong: rgba(38, 224, 255, 0.38); } .admin-page body, body.admin-page { background-attachment: fixed; } /* cleaner command center surface */ .admin-page .crew-admin, .admin-page .crew-gate, .admin-page .admin-status-card, .admin-page .editor-card, .admin-page .manage-card { border-color: var(--admin-line); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028)), rgba(5, 8, 18, 0.82); box-shadow: 0 28px 80px -52px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255,255,255,0.075); } .admin-page .crew-admin { border-radius: 30px; padding: clamp(18px, 2.6vw, 32px); } .admin-page .manage-card, .admin-page .editor-card { border-radius: 24px; } .admin-page .manage-card h3, .admin-page .editor-card h3, .admin-page .panel-heading-row h3 { letter-spacing: 0.02em; } .admin-page .manage-card p, .admin-page .editor-card p, .admin-page .form-hint { color: #aab6d6; } /* premium buttons */ .btn, .nav-cta, .mini-table button, .mini-actions button, .text-button { position: relative; isolation: isolate; min-height: 42px; border-radius: 14px; font-family: var(--font-head); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; user-select: none; } .btn, .nav-cta { overflow: hidden; padding: 13px 20px; } .btn::before, .nav-cta::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; opacity: 0; background: linear-gradient(120deg, transparent 10%, rgba(255,255,255,0.28) 48%, transparent 78%); transform: translateX(-120%); transition: opacity .2s ease; } .btn:hover::before, .nav-cta:hover::before { opacity: 1; animation: nmButtonSweep .85s ease; } @keyframes nmButtonSweep { to { transform: translateX(120%); } } .btn.primary, .nav-cta { color: #031018; border-color: rgba(125, 242, 255, 0.75); background: linear-gradient(135deg, #7df2ff 0%, #26e0ff 44%, #4d7cff 100%); box-shadow: 0 20px 44px -24px rgba(38,224,255,.98), inset 0 1px 0 rgba(255,255,255,.55); } .btn.secondary { color: #f8fbff; border-color: rgba(38,224,255,.26); background: linear-gradient(135deg, rgba(38,224,255,.15), rgba(168,85,247,.10)), rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .btn.ghost, .mini-actions button, .mini-table button { color: #dce8ff; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.045); } .btn:hover, .nav-cta:hover, .mini-actions button:hover, .mini-table button:hover { transform: translateY(-2px); border-color: rgba(38,224,255,.45); box-shadow: 0 18px 42px -30px rgba(38,224,255,.9); } .btn:active, .nav-cta:active, .mini-actions button:active, .mini-table button:active { transform: translateY(0) scale(.99); } .btn:focus-visible, .nav-cta:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .mini-actions button:focus-visible { outline: 2px solid rgba(38,224,255,.82); outline-offset: 3px; } .btn.danger-soft, .mini-actions button.danger, .mini-table button.danger { color: #ffc1cb; border-color: rgba(255,107,138,.34); background: rgba(255,107,138,.075); } .btn.danger-soft:hover, .mini-actions button.danger:hover, .mini-table button.danger:hover { color: #fff; border-color: rgba(255,107,138,.72); background: rgba(255,107,138,.14); } .text-button { min-height: auto; padding: 0; color: #8eeeff; text-decoration: none !important; } .text-button:hover { color: #fff; } /* professional login */ .crew-gate { max-width: 760px !important; overflow: hidden; position: relative; } .crew-gate::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: radial-gradient(360px 170px at 12% 0%, rgba(38,224,255,.20), transparent 70%), radial-gradient(320px 180px at 100% 0%, rgba(168,85,247,.18), transparent 72%); } .crew-gate > * { position: relative; } .crew-login-grid { width: 100%; } .crew-code-label span, .editor-card label, .profile-fields label, .crew-task-form label, .participants-grid label { color: #c9d4f0; font-weight: 850; letter-spacing: .02em; } input, select, textarea, .editor-card input, .editor-card select, .profile-fields input, .member-editor-card input, .member-editor-card select, .filter-row.compact input, .filter-row.compact select { border-color: rgba(255,255,255,.13) !important; background: rgba(3, 7, 20, .62) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } input:focus, select:focus, textarea:focus { border-color: rgba(38,224,255,.55) !important; box-shadow: 0 0 0 4px rgba(38,224,255,.08), inset 0 1px 0 rgba(255,255,255,.08); } ::placeholder { color: rgba(180, 192, 220, .58); } /* clean top bar */ .command-top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, auto) auto; align-items: center; gap: 18px; padding: clamp(18px, 2.4vw, 26px); border-radius: 28px; background: radial-gradient(580px 230px at 10% 0%, rgba(38,224,255,.18), transparent 72%), radial-gradient(480px 260px at 100% 20%, rgba(168,85,247,.16), transparent 70%), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.026)); } .command-top::after { opacity: .5; } .command-top h2 { font-size: clamp(1.55rem, 3vw, 2.45rem); } .command-top p { max-width: 620px; margin-bottom: 0; } .crew-session-card { min-width: 260px; padding: 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: rgba(2,6,18,.46); } .session-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .crew-admin-actions { justify-content: flex-end; } /* KPI cards more readable */ .admin-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .admin-kpi-card { min-height: 126px; border-radius: 24px; border-color: rgba(255,255,255,.12); background: radial-gradient(140px 90px at 100% 0%, rgba(38,224,255,.18), transparent 75%), linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); } .admin-kpi-card:nth-child(2)::before { background: radial-gradient(circle, rgba(168,85,247,.22), transparent 70%); } .admin-kpi-card:nth-child(3)::before { background: radial-gradient(circle, rgba(255,211,102,.20), transparent 70%); } .admin-kpi-card:nth-child(4)::before { background: radial-gradient(circle, rgba(121,255,216,.16), transparent 70%); } .admin-kpi-card strong { background: linear-gradient(135deg, #fff, #90f5ff 48%, #c9a9ff); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Quickbar */ .command-quickbar { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr); gap: 18px; align-items: center; margin: 18px 0; padding: 18px; border-radius: 26px; border: 1px solid rgba(38,224,255,.18); background: linear-gradient(135deg, rgba(38,224,255,.075), rgba(168,85,247,.055)), rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .quickbar-copy .tag { margin-bottom: 10px; } .quickbar-copy strong { display: block; font-family: var(--font-head); font-size: 1.15rem; } .quickbar-copy small { display: block; color: var(--muted); margin-top: 4px; } .quickbar-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .quickbar-actions .btn { width: 100%; padding-inline: 12px; } /* Tabbar: clearer navigation */ .admin-tabbar { top: 76px; gap: 7px; flex-wrap: nowrap; overflow-x: auto; padding: 10px; border-radius: 22px; background: rgba(3, 7, 18, .84); border-color: rgba(255,255,255,.12); scrollbar-width: thin; box-shadow: 0 22px 70px -46px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.06); } .admin-tabbar button { flex: 0 0 auto; min-width: 118px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; padding: 12px 14px; color: #aebbd8; white-space: nowrap; } .admin-tabbar button::before { content: "•"; color: var(--cyan); opacity: .75; font-size: .95rem; } .admin-tabbar button[data-admin-tab="dashboard"]::before { content: "⌂"; } .admin-tabbar button[data-admin-tab="tournaments"]::before { content: "🏆"; } .admin-tabbar button[data-admin-tab="participants"]::before { content: "✓"; } .admin-tabbar button[data-admin-tab="chat"]::before { content: "💬"; } .admin-tabbar button[data-admin-tab="tasks"]::before { content: "☑"; } .admin-tabbar button[data-admin-tab="rankings"]::before { content: "★"; } .admin-tabbar button[data-admin-tab="crew"]::before { content: "👥"; } .admin-tabbar button[data-admin-tab="archive"]::before { content: "▣"; } .admin-tabbar button[data-admin-tab="updates"]::before { content: "⬆"; } .admin-tabbar button[data-admin-tab="updates"]::before { content: "⬆"; } .admin-tabbar button[data-admin-tab="settings"]::before { content: "⚙"; } .admin-tabbar button:hover, .admin-tabbar button.active { color: #fff; background: linear-gradient(135deg, rgba(38,224,255,.18), rgba(168,85,247,.13)); border-color: rgba(38,224,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 38px -30px rgba(38,224,255,.8); } /* panel headings */ .panel-heading-row { display: flex; justify-content: space-between; gap: 18px; margin: 4px 0 18px; padding: 18px; border-radius: 24px; border: 1px solid rgba(255,255,255,.105); background: radial-gradient(260px 120px at 0% 0%, rgba(38,224,255,.12), transparent 76%), rgba(255,255,255,.035); } .panel-heading-row .tag { margin-bottom: 10px; } .panel-heading-row h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); } .panel-heading-row p { color: var(--muted); margin: 8px 0 0; } /* dashboard cards */ .dashboard-grid { gap: 18px; } .dashboard-card { min-height: unset; } .hero-dashboard-card { min-height: 260px; border-color: rgba(38,224,255,.20) !important; background: radial-gradient(420px 260px at 100% 0%, rgba(38,224,255,.20), transparent 75%), radial-gradient(320px 190px at 0% 100%, rgba(168,85,247,.14), transparent 75%), rgba(255,255,255,.045) !important; } .dashboard-list-row { align-items: center; border-radius: 16px; padding: 13px 14px; background: rgba(3,7,20,.42); } .dashboard-list-row:hover { border-color: rgba(38,224,255,.28); transform: translateX(2px); } /* tables as clean cards */ .upgraded-table { gap: 12px; } .upgraded-table .admin-row, .task-item, .registration-item { border-radius: 18px; padding: 16px; border-color: rgba(255,255,255,.105); background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.024)), rgba(3, 7, 18, .44); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .upgraded-table .admin-row:hover, .task-item:hover, .registration-item:hover { transform: translateY(-2px); border-color: rgba(38,224,255,.28); box-shadow: 0 20px 50px -42px rgba(38,224,255,.85); } .row-main strong { font-size: 1rem; letter-spacing: .01em; } .row-main span, .row-meta small, .task-item .row-main span, .registration-item .row-main span, .task-item .row-main small, .registration-item .row-main small { color: #a8b4d2; } .row-meta { gap: 8px; } .mini-actions { display: flex; gap: 8px; flex-wrap: wrap; } .mini-actions button, .mini-table button { min-height: 34px; padding: 8px 11px; font-size: .72rem; letter-spacing: .045em; } /* filters */ .card-title-row { align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.075); } .filter-row.compact { padding: 6px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(3,7,20,.36); } .filter-row.compact input, .filter-row.compact select { min-height: 42px; border-radius: 13px !important; } /* status and badges */ .status-chip, .status-badge, .rank-badge, .role-badge, .permission-cloud span, .member-permission-preview span, .permission-note, .system-pill { min-height: 28px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .status-live { animation: nmLivePulse 1.8s ease-in-out infinite; } @keyframes nmLivePulse { 0%,100% { box-shadow: 0 0 0 rgba(121,255,216,0); } 50% { box-shadow: 0 0 28px -12px rgba(121,255,216,.9); } } .role-badge { padding: 7px 10px; } /* preview panel */ .preview-card { border-radius: 24px; padding: 22px; background: radial-gradient(280px 170px at 100% 0%, rgba(38,224,255,.24), transparent 72%), radial-gradient(240px 160px at 0% 100%, rgba(168,85,247,.18), transparent 74%), linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); } .preview-meta span { color: #dbe7ff; background: rgba(3,7,20,.42); } .discord-announcement-text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /* chat / tasks */ .crew-chat-list { border-radius: 22px; background: radial-gradient(340px 220px at 100% 0%, rgba(38,224,255,.08), transparent 70%), rgba(3,7,20,.38); } .chat-message { align-items: end; } .chat-bubble { border-radius: 20px 20px 20px 8px; background: linear-gradient(135deg, rgba(38,224,255,.12), rgba(168,85,247,.08)), rgba(255,255,255,.035); } .crew-chat-form { padding: 10px; border-radius: 22px; border: 1px solid rgba(255,255,255,.09); background: rgba(3,7,20,.38); } .crew-chat-form input { min-height: 48px; } .crew-chat-form .btn { min-height: 48px; } .task-item.status-fertig { opacity: .78; background: rgba(121,255,216,.045); } .task-item.status-in-arbeit { border-color: rgba(255,209,102,.16); } .task-item.status-offen { border-color: rgba(38,224,255,.14); } /* profile/crew */ .crew-avatar { border-color: rgba(38,224,255,.42); box-shadow: 0 18px 38px -24px rgba(38,224,255,.95), inset 0 1px 0 rgba(255,255,255,.12); } .profile-editor { padding: 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: rgba(3,7,20,.32); } .permission-check { border-radius: 14px; } .permission-check:hover { border-color: rgba(38,224,255,.28); background: rgba(38,224,255,.06); } /* responsive improvements */ @media (max-width: 1080px) { .command-top { grid-template-columns: 1fr; align-items: stretch; } .crew-admin-actions { justify-content: flex-start; } .crew-session-card { min-width: 0; } .quickbar-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .command-quickbar { grid-template-columns: 1fr; } .admin-tabbar { position: static; margin-top: 14px; } .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .admin-page .crew-admin { border-radius: 22px; } .admin-kpi-grid { grid-template-columns: 1fr; } .quickbar-actions { grid-template-columns: 1fr; } .admin-tabbar button { min-width: 112px; } .crew-chat-form { grid-template-columns: 1fr; } .panel-heading-row { padding: 15px; } } /* === No Mercy Ops Suite: Notifications, Results, Applications === */ .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; margin-left: .4rem; border-radius: 999px; background: rgba(255, 65, 102, .18); border: 1px solid rgba(255, 65, 102, .45); color: #fff; font-size: .75rem; } .pro-notification-list, .pro-list, .history-grid { display: grid; gap: .85rem; } .pro-notification-list.compact { max-height: 340px; overflow: auto; padding-right: .35rem; } .pro-notification-item, .pro-row, .history-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center; padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 18px 40px rgba(0,0,0,.22); } .pro-row { grid-template-columns: minmax(0, 1.4fr) auto auto; } .pro-notification-item.is-unread, .application-row.is-unread { border-color: rgba(0, 229, 255, .34); box-shadow: 0 0 0 1px rgba(0,229,255,.12), 0 18px 40px rgba(0,0,0,.22); } .pro-notification-item.is-read { opacity: .72; } .notification-dot { width: .75rem; height: .75rem; border-radius: 50%; background: rgba(0, 229, 255, .9); box-shadow: 0 0 18px rgba(0,229,255,.65); } .pro-notification-item.warn .notification-dot, .pro-row.warn { border-color: rgba(255, 190, 75, .35); } .pro-notification-item.warn .notification-dot { background: rgb(255,190,75); box-shadow: 0 0 18px rgba(255,190,75,.55); } .pro-notification-item.danger .notification-dot, .pro-row.danger { border-color: rgba(255, 65, 102, .45); } .pro-notification-item.danger .notification-dot { background: rgb(255,65,102); box-shadow: 0 0 18px rgba(255,65,102,.6); } .pro-notification-item.success .notification-dot { background: rgb(82,255,171); box-shadow: 0 0 18px rgba(82,255,171,.5); } .notification-body, .pro-row .row-main { display: grid; gap: .25rem; min-width: 0; } .notification-body span, .pro-row .row-main span, .pro-row .row-main small, .history-card p { color: rgba(255,255,255,.7); line-height: 1.5; } .pro-row .row-meta { display: grid; gap: .35rem; justify-items: end; color: rgba(255,255,255,.62); } .results-grid, .warnings-grid, .application-public-grid { grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); } .tournament-history .history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .history-card { grid-template-columns: 1fr; align-items: stretch; } .history-card h3 { margin: .15rem 0 .5rem; } .winner-podium { display: grid; gap: .65rem; } .podium-place { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding: .7rem .8rem; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(0,0,0,.22); } .podium-place.first { border-color: rgba(255, 215, 95, .34); background: linear-gradient(135deg, rgba(255,215,95,.12), rgba(255,255,255,.03)); } .crew-application-page .section-heading h1 { font-size: clamp(2.4rem, 6vw, 5rem); margin: .35rem 0; } .public-application-card textarea, .public-application-card input, .public-application-card select { width: 100%; } @media (max-width: 900px) { .pro-row, .pro-notification-item { grid-template-columns: 1fr; align-items: start; } .pro-row .row-meta { justify-items: start; } .results-grid, .warnings-grid, .application-public-grid, .tournament-history .history-grid { grid-template-columns: 1fr; } } /* === Ops Hotfix: öffentliche Ereignisse + Spieler-Notizen === */ .events-grid { grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr); } .public-events-section[hidden] { display: none !important; } .public-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .public-event-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)); box-shadow: 0 24px 70px rgba(0,0,0,.22); padding: 1.25rem; } .public-event-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--accent, #9b5cff), transparent); opacity: .9; } .public-event-card.is-pinned { border-color: rgba(255,255,255,.22); } .public-event-head, .public-event-meta { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } .public-event-head small, .public-event-meta { color: var(--muted, rgba(255,255,255,.66)); font-size: .82rem; } .public-event-card h3 { margin: .85rem 0 .45rem; } .public-event-card p { color: var(--muted, rgba(255,255,255,.72)); line-height: 1.55; } .public-event-card .btn.small { margin-top: 1rem; min-height: 0; padding: .7rem 1rem; font-size: .86rem; } .pro-row.is-muted { opacity: .62; } .pro-row.compact-row { padding: .75rem; } .form-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; } @media (max-width: 850px) { .events-grid { grid-template-columns: 1fr; } } /* === SAFE UPDATE CENTER === */ .update-center-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .update-step-card { position: relative; overflow: hidden; min-height: 240px; } .update-step-card::after { content: ""; position: absolute; width: 140px; height: 140px; right: -60px; top: -60px; border-radius: 999px; background: radial-gradient(circle, rgba(38,224,255,.18), transparent 68%); pointer-events: none; } .update-step-card.safe { border-color: rgba(34, 197, 94, .32); } .update-step-card.danger-note { border-color: rgba(248, 113, 113, .34); } .update-step-number { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; margin-bottom: .8rem; font-weight: 1000; color: #fff; background: linear-gradient(135deg, rgba(38,224,255,.35), rgba(168,85,247,.28)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 16px 45px rgba(0,0,0,.25); } .update-cheatsheet { margin-top: 1rem; } .update-checklist { margin: 1rem 0 0; padding-left: 1.3rem; display: grid; gap: .75rem; color: var(--muted, rgba(255,255,255,.72)); } .update-checklist li::marker { color: var(--accent, #26e0ff); font-weight: 900; } .update-checklist code, .update-step-card code { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .12rem .35rem; background: rgba(0,0,0,.22); color: #fff; } /* Player Notes inline save feedback */ .inline-status { min-height: 20px; margin: 8px 0 2px; font-size: 13px; color: var(--muted, #9aa6c5); } .inline-status.success { color: #73ffc5; } .inline-status.error { color: #ff7aa8; } .pro-row.warn { border-color: rgba(255, 205, 87, .45); } .pro-row.danger { border-color: rgba(255, 99, 132, .55); } /* No Mercy Matchpoint integration */ .matchpoint-public-card { margin-top: 28px; padding: clamp(22px, 4vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(83, 225, 255, .28); border-radius: 22px; background: linear-gradient(135deg, rgba(10, 21, 34, .94), rgba(30, 13, 52, .9)); box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .05); } .matchpoint-public-card h3 { margin: 8px 0; font-size: clamp(1.45rem, 3vw, 2.2rem); } .matchpoint-public-card p { margin: 0; max-width: 720px; } .matchpoint-admin-shell { margin-top: 20px; min-height: 780px; overflow: hidden; border: 1px solid rgba(83, 225, 255, .22); border-radius: 22px; background: #050810; } .matchpoint-admin-shell iframe { display: block; width: 100%; min-height: 920px; border: 0; background: #050810; } @media (max-width: 760px) { .matchpoint-public-card { align-items: flex-start; flex-direction: column; } .matchpoint-admin-shell { min-height: 680px; } .matchpoint-admin-shell iframe { min-height: 800px; } } /* Native Join-Ranking workflow */ .legacy-google-rank-launch[hidden] { display: none !important; } .web-rank-application { max-width: 1120px; margin: 28px auto 0; padding: clamp(22px, 4vw, 42px); border: 1px solid rgba(83,225,255,.24); border-radius: 26px; background: linear-gradient(145deg,rgba(8,17,29,.96),rgba(25,11,43,.94)); box-shadow: 0 28px 90px rgba(0,0,0,.34); } .web-rank-form-head { display: grid; grid-template-columns: minmax(0,.8fr) minmax(280px,1.2fr); gap: 26px; align-items: end; margin-bottom: 28px; } .web-rank-form-head h2 { margin: 8px 0 0; font-size: clamp(2rem,5vw,3.6rem); } .web-rank-form-head p { margin: 0; color: var(--muted); } .web-rank-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .web-rank-form-grid label,.web-rank-form-grid fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; color: #eef8ff; font-weight: 700; } .web-rank-form-grid legend { margin-bottom: 8px; color: #eef8ff; font-weight: 700; } .web-rank-form-grid input,.web-rank-form-grid select,.web-rank-form-grid textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(133,160,190,.25); border-radius: 12px; background: rgba(3,9,18,.84); color: #fff; font: inherit; } .web-rank-form-grid input[type=file] { padding: 10px; } .web-rank-form-grid input:focus,.web-rank-form-grid select:focus,.web-rank-form-grid textarea:focus { outline: 2px solid rgba(83,225,255,.48); border-color: #53e1ff; } .web-rank-form-grid small { color: var(--muted); font-weight: 500; } .web-rank-message { grid-column: 1/-1; } .web-rank-confirm { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0; color: #eef8ff; font-weight: 700; } .web-rank-confirm input { width: 20px; height: 20px; accent-color: #9d62ff; } .web-rank-submit { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .web-rank-submit p { margin: 0; color: var(--muted); } .web-rank-submit p.success { color: #8dffb6; }.web-rank-submit p.error { color: #ff8092; } .rank-column .rank-player { padding-inline: 8px; text-align: left; } .rank-player-twitch { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; min-height: 25px; color: inherit; text-align: left; text-decoration: none; } .rank-player-name { display: block; flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: clamp(.68rem,.72vw,.82rem); letter-spacing: -.015em; } .rank-player-twitch-icon { position: static; width: 23px; height: 23px; flex: 0 0 23px; margin-left: auto; border-radius: 7px; } .rank-player-twitch-icon { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border: 1px solid rgba(201, 165, 255, .35); border-radius: 9px; background: linear-gradient(145deg, rgba(183, 140, 255, .22), rgba(83, 225, 255, .08)); box-shadow: 0 0 14px rgba(183, 140, 255, .18); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .rank-player-twitch-icon img { width: 14px; height: 14px; object-fit: contain; filter: brightness(0) saturate(100%) invert(72%) sepia(74%) saturate(3414%) hue-rotate(222deg) brightness(103%) contrast(101%); } .rank-player-twitch:hover { color: #53e1ff; } .rank-player-twitch:hover .rank-player-twitch-icon { transform: scale(1.06); background: linear-gradient(145deg, rgba(183, 140, 255, .38), rgba(83, 225, 255, .16)); box-shadow: 0 0 18px rgba(183, 140, 255, .36); } @media (max-width:760px){.web-rank-form-head,.web-rank-form-grid{grid-template-columns:1fr}.web-rank-message{grid-column:auto}} /* Ranking application review */ .rank-application-admin-list { display: grid; gap: 18px; margin-top: 22px; } .rank-review-card { padding: 22px; border: 1px solid rgba(130,155,190,.22); border-radius: 20px; background: rgba(6,13,24,.78); } .rank-review-head,.rank-review-actions,.rank-review-links { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .rank-review-head h4 { margin: 4px 0 0; font-size: 1.35rem; } .rank-review-status { padding: 6px 10px; border-radius: 999px; background: rgba(255,190,72,.12); color: #ffd27a; font-size: .75rem; font-weight: 900; text-transform: uppercase; } .rank-review-status[data-status="Angenommen"] { background: rgba(70,255,155,.12); color: #88ffbb; } .rank-review-status[data-status="Abgelehnt"] { background: rgba(255,80,105,.12); color: #ff8fa1; } .rank-review-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 18px 0; } .rank-review-meta div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.035); } .rank-review-meta small { display: block; color: var(--muted); margin-bottom: 4px; } .rank-review-links { justify-content: flex-start; margin-bottom: 18px; } .rank-review-links a { color: #53e1ff; font-weight: 800; } .rank-review-ranks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; } .rank-review-ranks label { display: grid; gap: 7px; font-weight: 700; } .rank-review-ranks select { min-height: 44px; padding: 9px 12px; border: 1px solid rgba(130,155,190,.25); border-radius: 10px; background: #080f1d; color: #fff; } .admin-empty-state { padding: 30px; border: 1px dashed rgba(130,155,190,.24); border-radius: 18px; color: var(--muted); text-align: center; } @media(max-width:760px){.rank-review-meta,.rank-review-ranks{grid-template-columns:1fr}} /* 2026 smooth/balanced performance profile */ .perf-balanced .fx-canvas, .perf-balanced .fx-aurora, .perf-balanced .fx-grid, .perf-balanced .cursor-glow, .perf-balanced .scanline, .perf-balanced .scroll-runes, .perf-balanced .desktop-shards, .perf-balanced .energy-field, body.admin-page .fx-canvas, body.admin-page .fx-aurora, body.admin-page .fx-grid, body.admin-page .cursor-glow, body.admin-page .scanline, body.admin-page .noise, body.admin-page .orb { display: none !important; } .perf-balanced .orb { animation: none !important; opacity: .3; } .perf-balanced .site-header, .perf-balanced .panel, .perf-balanced .manage-card, body.admin-page .site-header, body.admin-page .panel, body.admin-page .manage-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .perf-balanced .tournament-card, .perf-balanced .rank-system-card, .perf-balanced .mode-card, .perf-balanced .team-card { transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* Clear, grouped Crew Control navigation */ body.admin-page .admin-hero { padding-top: 36px; padding-bottom: 18px; } body.admin-page .admin-hero .section-heading h1 { font-size: clamp(2.2rem,5vw,4.4rem); } body.admin-page .crew-panel { padding-top: 18px; } .admin-tab-groups .admin-tab-group-label { color: #7f93aa; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .admin-tab-groups button { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; } .admin-tab-groups button::before { grid-row: 1/3; align-self: center; } .admin-tab-groups button b { font-size: .88rem; line-height: 1.1; } .admin-tab-groups button small { display: block; color: #7f93aa; font-size: .68rem; font-weight: 600; line-height: 1.25; } .admin-tab-groups button.active small { color: #b8d7e7; } .admin-tabbar button[data-admin-tab="matchpoint"]::before { content: "MP"; font-size: .67rem; } .admin-tabbar button[data-admin-tab="ranking-applications"]::before { content: "✓"; } @media (min-width: 1180px) { body.admin-page .crew-admin { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 22px 26px; align-items: start; } body.admin-page .crew-admin > .crew-admin-top, body.admin-page .crew-admin > .admin-kpi-grid, body.admin-page .crew-admin > .command-quickbar { grid-column: 1/-1; } body.admin-page .crew-admin > .admin-tabbar { grid-column: 1; position: sticky; top: 94px; display: grid; grid-template-columns: 1fr; gap: 6px; max-height: calc(100vh - 112px); margin: 0; padding: 14px; overflow-y: auto; border: 1px solid rgba(120,150,185,.18); border-radius: 18px; background: rgba(6,13,24,.94); box-shadow: 0 18px 50px rgba(0,0,0,.22); } body.admin-page .crew-admin > .admin-tabbar .admin-tab-group-label { margin: 10px 8px 2px; } body.admin-page .crew-admin > .admin-tabbar .admin-tab-group-label:first-child { margin-top: 2px; } body.admin-page .crew-admin > .admin-tabbar button { width: 100%; min-width: 0; padding: 10px 11px; border-radius: 11px; } body.admin-page .crew-admin > .admin-tab-panel { grid-column: 2; min-width: 0; margin: 0; } } @media (max-width:1179px) { .admin-tab-groups { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; } .admin-tab-groups .admin-tab-group-label { display: none; } .admin-tab-groups button { flex: 0 0 155px; } } .rank-center-admin-shell iframe { min-height: 980px; } /* Ranking rows: name locked left, Twitch action locked right, one line. */ .ranking-board .rank-player { display: flex; align-items: center; width: 100%; min-width: 0; text-align: left !important; } .ranking-board .rank-player-twitch { display: flex !important; align-items: center; justify-content: space-between !important; width: 100%; min-width: 0; gap: 6px; text-align: left !important; } .ranking-board .rank-player-name { flex: 1 1 auto; min-width: 0; margin: 0; overflow: visible; white-space: nowrap !important; text-align: left !important; font-size: clamp(.6rem, .7vw, .82rem); } .ranking-board .rank-player-twitch-icon { flex: 0 0 27px; margin-right: 0; margin-left: auto !important; } /* Team-Rollensteuerung: jede Auswahl erzeugt einen sichtbaren Bereich. */ .team-visibility-switch { margin-top: 0 !important; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(38,224,255,.25); border-radius: 12px; background: rgba(38,224,255,.055); } .team-category-picker { grid-column: 1 / -1; min-width: 0; margin: 4px 0; padding: 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(3,7,20,.36); } .team-category-picker legend { padding: 0 8px; color: #fff; font-family: var(--font-head); font-weight: 800; } .team-category-picker .form-hint { margin: 2px 0 12px; } .team-category-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; } .team-category-options label { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; min-height: 44px; margin: 0 !important; padding: 10px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(255,255,255,.035); color: #eaf2ff; cursor: pointer; } .team-category-options label:has(input:checked) { border-color: rgba(38,224,255,.48); background: rgba(38,224,255,.10); } .team-category-options input { width: auto !important; accent-color: #26e0ff; } .team-category-options small { color: var(--muted); font-size: .66rem; } @media (max-width: 900px) { .team-category-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .team-category-options { grid-template-columns: 1fr; } } /* Teamkarten: Social-Buttons in jeder Reihe exakt auf gleicher Höhe. */ .team-category-grid { align-items: stretch; } .team-category-grid .team-card { display: flex; flex-direction: column; align-items: center; height: 100%; } .team-category-grid .team-card .team-category-badges { width: 100%; } .team-category-grid .team-card .team-socials { margin-top: auto !important; padding-top: 18px; } /* Team-Fix 2026-07-23: Zusatzfunktionen immer untereinander anzeigen. */ .team-category-grid .team-card .team-category-badges { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; } .team-category-grid .team-card .team-category-badges .team-host-marker { display: flex !important; width: max-content !important; max-width: 100% !important; white-space: nowrap !important; text-align: center !important; } /* Localized file controls for the Join Ranking form */ .localized-file-picker { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; min-height: 46px; overflow: hidden; border: 1px solid rgba(126, 150, 190, .24); border-radius: 10px; background: rgba(4, 8, 20, .72); cursor: pointer; } .localized-file-button { align-self: stretch; display: inline-flex; align-items: center; padding: 0 14px; border-right: 1px solid rgba(126, 150, 190, .24); background: rgba(107, 227, 255, .10); color: #eafaff; font-size: .78rem; font-weight: 800; white-space: nowrap; } .localized-file-name { min-width: 0; padding: 0 12px; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; } .localized-file-picker input[type="file"] { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; cursor: pointer; } .localized-file-picker:focus-within { border-color: rgba(75, 220, 255, .72); box-shadow: 0 0 0 3px rgba(75, 220, 255, .10); } @media (max-width: 560px) { .localized-file-picker { grid-template-columns: 1fr; } .localized-file-button { min-height: 40px; justify-content: center; border-right: 0; border-bottom: 1px solid rgba(126, 150, 190, .24); } .localized-file-name { min-height: 40px; display: flex; align-items: center; justify-content: center; } } /* ========================================================================== COMPACT HEADER NAVIGATION — grouped desktop dropdowns ========================================================================== */ .nav-dropdown { position: relative; display: flex; align-items: center; --nav-dropdown-gap: 13px; --nav-dropdown-width: 210px; } .nav-dropdown-toggle { appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 2px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; position: relative; transition: color 0.25s; } .nav-dropdown-toggle::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple)); transition: width 0.3s; } .nav-dropdown-toggle svg { width: 11px; height: 8px; flex: 0 0 auto; transition: transform 0.25s ease; } .nav-dropdown:hover > .nav-dropdown-toggle, .nav-dropdown:focus-within > .nav-dropdown-toggle, .nav-dropdown.open > .nav-dropdown-toggle, .nav-dropdown.active > .nav-dropdown-toggle { color: #fff; } .nav-dropdown:hover > .nav-dropdown-toggle::after, .nav-dropdown:focus-within > .nav-dropdown-toggle::after, .nav-dropdown.open > .nav-dropdown-toggle::after, .nav-dropdown.active > .nav-dropdown-toggle::after { width: 100%; } .nav-dropdown.open > .nav-dropdown-toggle svg, .nav-dropdown:focus-within:not(.nav-dropdown-dismissed) > .nav-dropdown-toggle svg { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; z-index: 120; top: calc(100% + var(--nav-dropdown-gap)); left: 50%; min-width: var(--nav-dropdown-width); padding: 8px; border: 1px solid rgba(120, 151, 190, 0.24); border-radius: 15px; background: rgba(6, 10, 22, 0.98); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.95), 0 12px 35px -24px rgba(38, 224, 255, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); /* visibility wird nicht weich ueberblendet, sondern verzoegert geschaltet: beim Schliessen erst nach dem Ausblenden (0.2s), beim Oeffnen sofort (siehe Regeln der offenen Zustaende). Das ist wichtig fuer die Tastatur - ein Element mit visibility: hidden nimmt keinen Fokus an, und mit einer Ueberblendung waere es im Moment des Tastendrucks noch unsichtbar. */ transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; } .nav-dropdown-menu::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; border-left: 1px solid rgba(120, 151, 190, 0.24); border-top: 1px solid rgba(120, 151, 190, 0.24); background: rgba(6, 10, 22, 0.98); transform: translateX(-50%) rotate(45deg); } .nav-dropdown-menu a { display: flex; align-items: center; min-height: 42px; padding: 10px 12px; border-radius: 10px; color: #aebbd2; white-space: nowrap; font-size: 0.88rem; font-weight: 650; transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .nav-dropdown-menu a::after { display: none; } .nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { color: #fff; background: linear-gradient(90deg, rgba(38, 224, 255, 0.13), rgba(168, 85, 247, 0.09)); transform: translateX(3px); } @media (min-width: 941px) { /* Dieser Zweig gilt fuer Geraete OHNE Schwebezustand bei breitem Fenster, also vor allem Tablets im Querformat. Dort gibt es kein Schweben, deshalb bleibt dort der Klickpfad ueber die Klasse .open die einzige Bedienung. */ .nav-dropdown.open > .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; } /* Unsichtbare Hover-Bruecke ueber den Abstand zwischen Button und Menue. Sitzt am Trigger (nicht am Menue), macht die Slide-Animation also nicht mit und deckt den Zwischenraum schon waehrend des Einblendens ab. Nur aktiv, solange das Menue offen ist — sonst wuerde sie Klicks abfangen. */ .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 50%; width: max(100%, var(--nav-dropdown-width)); height: var(--nav-dropdown-gap); transform: translateX(-50%); pointer-events: none; } .nav-dropdown.open::after { pointer-events: auto; } } /* Maus und Trackpad: das Menue gehoert an den Schwebezustand und an den Tastaturfokus, nicht an den Klick. ".nav-dropdown-dismissed" ist die Ausnahme fuer die Escape-Taste - ohne sie wuerde :focus-within das Menue sofort wieder oeffnen, sobald der Fokus auf den Knopf zurueckspringt. */ @media (min-width: 941px) and (hover: hover) and (pointer: fine) { .nav-dropdown:hover:not(.nav-dropdown-dismissed) > .nav-dropdown-menu, .nav-dropdown:focus-within:not(.nav-dropdown-dismissed) > .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; } .nav-dropdown:hover:not(.nav-dropdown-dismissed)::after, .nav-dropdown:focus-within:not(.nav-dropdown-dismissed)::after { pointer-events: auto; } /* Der Knopf ist kein Link und loest beim Klicken nichts aus. Der Zeiger darf deshalb keine Hand zeigen - das waere ein Versprechen, das die Navigation nicht einloest. */ .nav-dropdown-toggle { cursor: default; } /* Der Pfeil zeigt den Zustand des Menues an. Da es hier beim Schweben aufgeht, dreht er auch dabei mit - vorher tat er das nur beim Klicken, und den Klick gibt es an dieser Stelle nicht mehr. */ .nav-dropdown:hover:not(.nav-dropdown-dismissed) > .nav-dropdown-toggle svg { transform: rotate(180deg); } } @media (max-width: 940px) { .nav-dropdown { display: grid; width: 100%; } .nav-dropdown-toggle { width: 100%; min-height: 52px; justify-content: space-between; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.03); color: #eaf2ff; font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: 0.3px; } .nav-dropdown-toggle::after { display: none; } .nav-dropdown.active > .nav-dropdown-toggle, .nav-dropdown.open > .nav-dropdown-toggle { border-color: var(--border-strong); background: rgba(38,224,255,0.1); } .nav-dropdown-menu { position: static; display: grid; gap: 7px; min-width: 0; max-height: 0; margin: 0 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; visibility: visible; pointer-events: none; overflow: hidden; transform: none; transition: max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease; } .nav-dropdown-menu::before { display: none; } .nav-dropdown.open > .nav-dropdown-menu { max-height: 300px; margin-top: 2px; margin-bottom: 2px; padding: 5px 0 3px 14px; pointer-events: auto; } .nav-dropdown-menu a { min-height: 46px; padding: 11px 15px; border: 1px solid rgba(120, 151, 190, 0.15); border-radius: 12px; background: rgba(255,255,255,0.025); font-size: 0.92rem; } } /* FINAL FIX 2026-07-24: preserve the original animated background on mobile and desktop. */ html:not(.perf-lite) .fx-canvas, html:not(.perf-lite) .fx-aurora, html:not(.perf-lite) .fx-grid, html:not(.perf-lite) .noise, html:not(.perf-lite) .orb, html:not(.perf-lite) .scanline { display: block !important; } html:not(.perf-lite) .fx-canvas { visibility: visible !important; opacity: 1 !important; } html:not(.perf-lite) .fx-aurora, html:not(.perf-lite) .fx-grid, html:not(.perf-lite) .noise, html:not(.perf-lite) .orb, html:not(.perf-lite) .scanline { visibility: visible !important; } @media (max-width: 940px) { .nav { display: flex; } .nav-links { order: 1; } .nav-tools { order: 2; display: flex; width: 100%; flex-direction: column; align-items: stretch; margin-top: 18px; } .nav-tools .header-socials { order: 1; justify-content: center; } .nav-tools .language-toggle { order: 2; align-self: center; } .nav-tools .nav-cta { order: 3; display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 4px; position: static !important; inset: auto !important; } } /* === NM hardware-acceleration compatibility profile 2026-07-26 === */ /* Applied only when WebGL reports a software renderer or hardware acceleration is unavailable. Full-effect browsers are untouched. */ .perf-lite body { background: #05060d !important; } .perf-lite body::before { background: radial-gradient(900px 560px at 82% 0%, rgba(59,130,246,.13), transparent 62%), radial-gradient(760px 520px at 6% 12%, rgba(168,85,247,.11), transparent 64%), linear-gradient(180deg,#05060d 0%,#070a15 54%,#05060d 100%) !important; } .perf-lite body::after, .perf-lite .fx-canvas, .perf-lite .fx-aurora, .perf-lite .fx-grid, .perf-lite .noise, .perf-lite .orb, .perf-lite .scanline, .perf-lite .cursor-glow, .perf-lite .energy-field, .perf-lite .scroll-runes, .perf-lite .desktop-shards, .perf-lite .particles-layer { display: none !important; } .perf-lite *, .perf-lite *::before, .perf-lite *::after { animation: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; } .perf-lite html { scroll-behavior: auto !important; } .perf-lite .reveal, .perf-lite .reveal.show { opacity: 1 !important; transform: none !important; } .perf-lite .site-header, .perf-lite .nav, .perf-lite .panel, .perf-lite .hero-panel, .perf-lite .tournament-card, .perf-lite .mode-card, .perf-lite .team-card, .perf-lite .rank-system-card, .perf-lite .rank-board-wrap, .perf-lite .rank-apply-card, .perf-lite .final-cta, .perf-lite .stats-strip > div { box-shadow: none !important; } .perf-lite .hero-logo, .perf-lite .brand img, .perf-lite .final-cta img { filter: none !important; } .perf-lite .magnetic:hover, .perf-lite .tournament-card:hover, .perf-lite .mode-card:hover, .perf-lite .team-card:hover, .perf-lite .rank-system-card:hover { transform: none !important; } /* ========================================================================== RANG-SKALA UND SPIELERKARTEN (rank-fusion-20260810) -------------------------------------------------------------------------- Zusammenfuehrung der beiden bisherigen Ranking-Ansichten: - aus der Uebersicht: Rangname, Nummer und Stufe je Rang - aus dem Filter: ein Klick blendet genau einen Rang im Board ein Beides ist jetzt EIN Bauteil, die "Rang-Skala". Damit verschwindet die doppelte Darstellung (3x3-Karten oben, Filterpillen weiter unten). Aufbau: .rank-scale .rank-scale-head Beschriftung + "Alle"-Knopf .rank-scale-bands drei Baender nebeneinander (flex: 1 je Band) .rank-band LOW / MID / HIGH .rank-band-head Bandname + Rangbereich (z. B. "1-3") .rank-band-rail Verlaufsleiste des Bandes .rank-band-tabs drei Tabs, jeder flex: 1 Weil jedes Band ein Drittel der Breite bekommt und darin jeder Tab ein Drittel des Bandes, stehen alle neun Tabs gleich breit in einer Reihe und fuellen den Container vollstaendig. Die Reihenfolge kommt aus dem DOM und damit aus RANK_DEFINITIONS - sie bleibt immer 1 -> 9. ========================================================================== */ /* --- Verlauf je Band: Anfangs- und Endfarbe sind die Farben von Rang 1/3, 4/6 und 7/9 (siehe Farbtabelle im Abschnitt RANGSYSTEM). --- */ .rank-band-low { --band-from: 88, 204, 116; --band-to: 34, 218, 214; } .rank-band-mid { --band-from: 34, 190, 255; --band-to: 132, 124, 253; } .rank-band-high { --band-from: 168, 85, 247; --band-to: 255, 184, 72; } .rank-filter.rank-scale { display: block; margin-bottom: 32px; } .rank-scale-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .rank-scale-lead { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .rank-scale .rank-scale-all { padding: 7px 18px; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .rank-scale .rank-scale-all:hover { color: #fff; border-color: var(--border-strong); } .rank-scale .rank-scale-all.active { color: #04121a; border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--purple)); } /* --- Die drei Baender. Der Abstand zwischen den Baendern ist deutlich groesser als der zwischen den Tabs - dadurch ist die Bandgrenze sichtbar, ohne dass eine Trennlinie noetig waere. --- */ .rank-scale-bands { display: flex; align-items: stretch; gap: clamp(14px, 2.2vw, 30px); } .rank-band { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 9px; } .rank-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; } .rank-band-name { font-family: var(--font-head); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; background: linear-gradient(90deg, rgb(var(--band-from)), rgb(var(--band-to))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .rank-band-range { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; } .rank-band-rail { display: block; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--band-from), 0.9), rgba(var(--band-to), 0.9)); } /* --- Die neun Tabs --- */ .rank-band-tabs { display: flex; gap: 6px; } .rank-scale .rank-tab-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 14px 6px 12px; border-radius: 14px; border: 1px solid rgba(var(--rank-rgb), 0.28); background: linear-gradient(165deg, rgba(var(--rank-rgb), 0.12), rgba(255,255,255,0.02)); color: var(--text); cursor: pointer; transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; } .rank-tab-num { font-family: var(--font-head); font-size: 1.18rem; font-weight: 700; line-height: 1; color: rgb(var(--rank-rgb)); font-variant-numeric: tabular-nums; } .rank-tab-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* Stufen-Intensitaet wie im uebrigen Rangsystem: LOW ruhig, MID leuchtet, HIGH leuchtet staerker und bekommt einen feinen Innenglanz. */ .rank-scale .rank-tab-btn.rank-tier-mid { box-shadow: 0 0 26px -18px rgba(var(--rank-rgb), 0.9); } .rank-scale .rank-tab-btn.rank-tier-high { border-color: rgba(var(--rank-rgb), 0.44); box-shadow: 0 0 30px -16px rgba(var(--rank-rgb), 0.95), inset 0 1px 0 rgba(255,255,255,0.08); } /* LOW und MID mit gestaffelter Deckkraft statt eines festen Werts. Drei benachbarte Kuehltoene bei gleicher Deckkraft lesen sich ueber dem dunklen Hintergrund als dieselbe Farbe - der Farbton allein trug den Verlauf nicht. Jetzt wird jeder Rang innerhalb seines Bandes auch spuerbar dichter: LOW Flaeche 16 % → 26 % → 36 % Rahmen 34 % → 50 % → 66 % MID Flaeche 22 % → 31 % → 40 % Rahmen 40 % → 55 % → 70 % Der Bandmittelwert bleibt dabei ungefaehr da, wo er war - die Stufenleiter LOW ruhiger als MID kippt also nicht. Das Leuchten bleibt der Stufenlogik ueberlassen (LOW gar keins), HIGH ist unveraendert. */ .rank-scale .rank-tab-btn.rank-tier-low { border-color: rgba(var(--rank-rgb), calc(0.34 + 0.16 * var(--rank-step))); background: linear-gradient(165deg, rgba(var(--rank-rgb), calc(0.16 + 0.1 * var(--rank-step))), rgba(255,255,255,0.02)); } .rank-scale .rank-tab-btn.rank-tier-mid { border-color: rgba(var(--rank-rgb), calc(0.4 + 0.15 * var(--rank-step))); background: linear-gradient(165deg, rgba(var(--rank-rgb), calc(0.22 + 0.09 * var(--rank-step))), rgba(255,255,255,0.02)); } /* Die Rangziffer traegt die Farbe ebenfalls - bei den dichteren Flaechen von Rang 3 und 6 wuerde sie darauf verschwinden. Ein leichter Aufhellungs- verlauf haelt sie ueber jeder Fuellung ablesbar. */ .rank-scale .rank-tab-btn.rank-tier-low .rank-tab-num, .rank-scale .rank-tab-btn.rank-tier-mid .rank-tab-num { color: color-mix(in srgb, rgb(var(--rank-rgb)) 100%, #ffffff calc(18% * var(--rank-step))); text-shadow: 0 1px 3px rgba(3, 6, 16, 0.75); } /* Das gedaempfte Grau der Beschriftung faellt auf den dichteren Flaechen unter 3,4:1. Ein helles Neutral haelt sie auf jeder Fuellung lesbar. */ .rank-scale .rank-tab-btn.rank-tier-low .rank-tab-name, .rank-scale .rank-tab-btn.rank-tier-mid .rank-tab-name { color: rgba(226, 238, 252, 0.88); } .rank-scale .rank-tab-btn:hover { transform: translateY(-3px); border-color: rgba(var(--rank-rgb), 0.62); background: linear-gradient(165deg, rgba(var(--rank-rgb), 0.22), rgba(255,255,255,0.03)); } .rank-scale .rank-tab-btn:hover .rank-tab-name { color: #fff; } .rank-scale .rank-tab-btn:focus-visible { outline: 2px solid rgb(var(--rank-rgb)); outline-offset: 2px; } .rank-scale .rank-tab-btn.active { border-color: rgba(var(--rank-rgb), 0.95); background: linear-gradient(165deg, rgba(var(--rank-rgb), 0.38), rgba(var(--rank-rgb), 0.14)); box-shadow: 0 0 0 1px rgba(var(--rank-rgb), 0.35), 0 14px 32px -16px rgba(var(--rank-rgb), 0.9); } .rank-scale .rank-tab-btn.active .rank-tab-num { color: #fff; text-shadow: 0 0 16px rgba(var(--rank-rgb), 0.9); } .rank-scale .rank-tab-btn.active .rank-tab-name { color: #fff; } /* -------------------------------------------------------------------------- CHAMPION (Rang 9) - Tab Ein leiser, warmer Energieschimmer, der langsam im Tab auf und ab zieht. Animiert wird ausschliesslich "transform" auf einem einzelnen Pseudoelement: kein box-shadow, kein filter, keine Farbwechsel - das erledigt der Compositor, ohne die Karte neu zu zeichnen. Kein zusaetzlicher Aussenglow. -------------------------------------------------------------------------- */ .rank-scale .rank-tab-btn.rank-slot-champion { position: relative; overflow: hidden; isolation: isolate; } .rank-scale .rank-tab-btn.rank-slot-champion::before { content: ""; position: absolute; inset: -45% -12%; z-index: -1; pointer-events: none; background: radial-gradient(38% 26% at 32% 88%, rgba(255, 190, 96, 0.34), transparent 70%), radial-gradient(30% 22% at 68% 96%, rgba(255, 128, 74, 0.26), transparent 72%); animation: nmChampionEmber 9s ease-in-out infinite; } @keyframes nmChampionEmber { 0%, 100% { transform: translate3d(0, 7%, 0) scale(1); } 50% { transform: translate3d(0, -9%, 0) scale(1.08); } } /* --- Responsive: Baender untereinander, Reihenfolge bleibt 1 -> 9 --- */ @media (max-width: 1080px) { .rank-scale-bands { flex-wrap: wrap; gap: 18px; } .rank-band { flex: 1 1 100%; } } @media (max-width: 430px) { /* Sehr schmal: lieber waagerecht scrollen als die Rangnamen unlesbar zusammenquetschen. Die Reihenfolge im Band bleibt dabei erhalten. */ .rank-band-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rank-band-tabs::-webkit-scrollbar { display: none; } .rank-scale .rank-tab-btn { flex: 1 0 96px; } } /* ========================================================================== RANKING-BOARD - Ranggruppen mit waagerechten Spielerkarten -------------------------------------------------------------------------- Frueher: neun schmale Spalten nebeneinander, in denen gerade der Name Platz hatte. Jetzt: je Rang eine Gruppe ueber die volle Breite, aufgeteilt in eine schmale Rang-Leiste links und ein dichtes Spieler-Raster rechts. Eine Spielerzeile ist 30 px hoch und enthaelt genau Badge, Name und - falls vorhanden - das Twitch-Symbol. Die Gruppen behalten bewusst die Klasse .rank-column: daran haengen die bestehenden Farb- und Stufenregeln des Rangsystems und die Champion-Aura. ========================================================================== */ /* Die neun Raenge stehen NEBENEINANDER, Rang 1 links bis Rang 9 rechts. Die Reihenfolge kommt aus dem DOM (RANK_DEFINITIONS), das Raster bildet sie nur ab. Neun gleich breite Spalten brauchen mindestens ~1600 px, damit die Namen vollstaendig hineinpassen; darunter wird umbrochen. Bei 3 Spalten ergibt das genau die drei Stufen je Zeile (1-3 / 4-6 / 7-9). */ .rank-board { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; } @media (max-width: 1600px) { .rank-board { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1100px) { .rank-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .rank-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .rank-board { grid-template-columns: 1fr; } } /* Gefiltert oder gesucht: die wenigen Treffer bekommen die volle Breite, die Spieler verteilen sich dann auf viele Unterspalten. */ .rank-board.rank-board-filtered { grid-template-columns: 1fr; } /* Die Ranking-Seite laeuft breiter als der restliche Seiteninhalt: bei 1200 px (--maxw) blieben links und rechts je ~350 px leer, waehrend die Spieler in sechs Spalten gequetscht standen. Mit 97vw passen gut zehn Spalten in eine Reihe. Die Ueberschrift behaelt ihre eigene Maximalbreite und bleibt mittig - nur Skala und Board wachsen mit. */ .section.rankings { max-width: min(1840px, 97vw); } /* Nur Skala und Board profitieren von der vollen Breite. Die Einrank-Karte enthaelt nur Text und zwei Knoepfe - ueber 1840 px klafft dazwischen eine leere Flaeche, deshalb bleibt sie auf der alten Breite und mittig. */ .section.rankings .rank-apply-card { max-width: var(--maxw); margin-inline: auto; } /* Rangkopf oben, darunter die Spieler. Als Flex-Spalte, damit der Spielerbereich die Resthoehe der Rangspalte fuellt - alle neun Spalten sind im Raster gleich hoch. */ .rank-group { display: flex; flex-direction: column; } .rank-group .rank-group-players { flex: 1 1 auto; } /* Zaesur vor MID (Rang 4) und HIGH (Rang 7), damit die drei Stufen nicht nur ueber die Farbe auseinanderzuhalten sind. Seit die Raenge nebeneinander stehen, darf sie NICHT mehr ueber margin-top laufen - das wuerde Rang 4 und 7 gegenueber ihren Nachbarn nach unten versetzen. Stattdessen ein Abstand nach links, und zwar nur in der neunspaltigen Ansicht: sobald umbrochen wird, steht Rang 4 am Zeilenanfang, und ein linker Abstand wuerde die Spalte gegen die Zeile darueber verschieben. Die hellere Oberkante bleibt in jeder Breite. */ /* Zaesur vor MID und HIGH auch an der Oberkante sichtbar machen. Das sind die Raenge 4 und 7 - seit der Umbenennung Veteran und Hero. */ .rank-board .rank-column-veteran, .rank-board .rank-column-hero { border-top-color: rgba(var(--rank-rgb), 0.75) !important; } @media (min-width: 1601px) { .rank-board .rank-column-veteran:not(:first-child), .rank-board .rank-column-hero:not(:first-child) { margin-left: 14px; } } /* Der Herzschlag-Glow ist fuer kleine Kacheln gedacht. Bei neun Gruppen ueber die volle Breite waeren das neun dauerhaft animierte box-shadows - deshalb hier aus. Die Stufenfarbe leuchtet ohnehin schon. */ html:not(.perf-lite) .rank-board .rank-group { animation: none; will-change: auto; } .rank-group:hover { transform: none; } /* Stufenfarbe abschwaechen: Die Werte im Abschnitt RANGSYSTEM sind auf schmale Spalten ausgelegt. Ueber die volle Breite wird daraus eine grosse Farbflaeche, auf der die Schrift kaum noch lesbar ist (Rang 8 war Pink auf Pink). Die Gruppe behaelt deshalb nur Rahmen und einen Hauch Farbe - die Stufe erkennt man weiterhin an Rahmenstaerke und Leuchten, wie im uebrigen Rangsystem. Das !important spiegelt nur die dortigen Regeln, es ueberschreibt sie. */ /* Dieselbe Staffelung wie bei den Tabs, nur gedaempfter - die Rangspalte ist eine viel groessere Flaeche, die Schrift muss darauf lesbar bleiben. */ .rank-board .rank-group.rank-tier-low { border-color: rgba(var(--rank-rgb), calc(0.32 + 0.12 * var(--rank-step))) !important; background: linear-gradient(120deg, rgba(var(--rank-rgb), calc(0.09 + 0.055 * var(--rank-step))), rgba(255,255,255,0.015)) !important; box-shadow: none !important; } .rank-board .rank-group.rank-tier-mid { border-color: rgba(var(--rank-rgb), calc(0.46 + 0.11 * var(--rank-step))) !important; background: linear-gradient(120deg, rgba(var(--rank-rgb), calc(0.13 + 0.05 * var(--rank-step))), rgba(255,255,255,0.02)) !important; box-shadow: 0 0 44px -26px rgba(var(--rank-rgb), 0.9) !important; } .rank-board .rank-group.rank-tier-high { border-color: rgba(var(--rank-rgb), 0.6) !important; background: linear-gradient(120deg, rgba(var(--rank-rgb), 0.14), rgba(255,255,255,0.025)) !important; box-shadow: 0 0 48px -24px rgba(var(--rank-rgb), 0.95), inset 0 1px 0 0 rgba(255,255,255,0.09) !important; } /* Der zusaetzliche Radialschleier aus .rank-column::before wuerde die Flaeche erneut einfaerben - ueber die volle Breite reicht ein Bruchteil davon. */ .rank-board .rank-group::before { opacity: 0.28; } /* ========================================================================== DICHTE ANSICHT — Kopfleiste links, Spieler im Raster daneben -------------------------------------------------------------------------- Vorher lag der Rangkopf als eigene Zeile UEBER den Spielern. Bei neun Raengen waren das neun volle Textzeilen samt Innenabstand, die keinen einzigen Spieler zeigten - der groesste Einzelposten an Hoehe. Jetzt teilt sich die Gruppe waagerecht: [ Rang-Leiste ][ Spieler-Raster ueber die restliche Breite ] Der Kopf verbraucht dadurch keine eigene Hoehe mehr, sondern laeuft neben der ersten Spielerreihe mit. Leere Raenge schrumpfen auf eine einzige Zeile und bleiben trotzdem sichtbar, damit die Skala 1-9 vollstaendig bleibt. ========================================================================== */ /* Einzeiliger Kopf: Badge und Rangname links, Stufe und Anzahl rechts. .rank-column-head bringt justify-content: space-between mit, das wird hier auf flex-start gestellt und die Stufe per margin-left: auto nach rechts geschoben - sonst haengt der Rangname mitten in der Zeile. */ .rank-group .rank-group-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 5px 10px; border-right: 0; border-bottom: 1px solid rgba(var(--rank-rgb), 0.22); background: rgba(6, 9, 20, 0.34); } .rank-board .rank-group .rank-column-tier { opacity: 1; } .rank-group-badge { width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; border-radius: 6px; font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; line-height: 1; color: #fff; border: 1px solid rgba(var(--rank-rgb), 0.55); background: linear-gradient(140deg, rgba(var(--rank-rgb), 0.4), rgba(var(--rank-rgb), 0.12)); font-variant-numeric: tabular-nums; } .rank-group .rank-group-title { flex: 1 1 auto; flex-direction: row; align-items: baseline; gap: 8px; text-align: left; } .rank-group .rank-group-head strong { font-size: 0.84rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-group .rank-column-tier { margin-left: auto; font-size: 0.6rem; letter-spacing: 0.1em; white-space: nowrap; } /* Spalten statt Raster: In einem Raster laufen die Spieler zeilenweise von links nach rechts. Hier sollen sie erst eine Spalte von oben nach unten fuellen und dann in die naechste - das leistet der Mehrspaltensatz. column-width statt column-count, damit die Spaltenzahl automatisch aus der Breite folgt: rund zehn Spalten auf 1920, zwei auf dem Handy. 158 px ist die Untergrenze, bei der die Namen noch vollstaendig hineinpassen. */ .rank-group .rank-group-players { display: block; column-width: 158px; column-gap: 4px; padding: 5px 5px 1px; /* .rank-column-list bringt min-height: 60px mit - das war fuer die alten Spalten gedacht und wuerde hier jede Gruppe auf 60 px aufpolstern. */ min-height: 0; } .rank-group .rank-empty { padding: 5px 4px; font-size: 0.7rem; opacity: 0.5; } /* --- Die Spielerzeile: EINE Zeile, ca. 30 px hoch --- break-inside verhindert, dass der Mehrspaltensatz eine Zeile am Spaltenende auseinanderreisst; der Abstand kommt ueber margin, weil gap im Spaltensatz nur waagerecht wirkt. */ .rank-group .rank-player { display: flex; align-items: center; gap: 7px; break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 4px; min-width: 0; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(var(--rank-rgb), 0.16); background: rgba(255,255,255,0.045); /* Nur Farbwechsel, kein transform: in einem dichten Raster wirkt ein angehobenes Element unruhig, und der Compositor hat nichts zu tun. */ transition: border-color 0.15s ease, background 0.15s ease; } .rank-group .rank-player:hover { border-color: rgba(var(--rank-rgb), 0.6); background: rgba(var(--rank-rgb), 0.14); } /* min-height/box-shadow kommen aus der allgemeinen Badge-Regel weiter oben (Statusabzeichen im Crew-Panel, 28 px). Hier wuerde das die Zeile aufblasen. */ .rank-group .rank-player-badge { width: 20px; height: 20px; flex: 0 0 20px; min-width: 0; min-height: 0; padding: 0; border-radius: 6px; box-shadow: none; font-family: var(--font-head); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; } .rank-group .rank-player-name { font-family: var(--font-head); font-size: 0.84rem; letter-spacing: 0; color: #f2f6ff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-group .rank-player-twitch { flex: 1 1 auto; min-width: 0; justify-content: flex-start; gap: 5px; min-height: 0; } .rank-group .rank-player-twitch .rank-player-name { flex: 0 1 auto; } .rank-group .rank-player-twitch-icon { width: 16px; height: 16px; flex: 0 0 16px; margin-left: 0; border-radius: 5px; } .rank-group .rank-player-twitch-icon img { width: 9px; height: 9px; } .rank-player-score { margin-left: auto; flex: 0 0 auto; font-family: var(--font-head); font-size: 0.74rem; color: #fff; font-variant-numeric: tabular-nums; } .rank-player-score.is-empty { color: var(--muted); } /* -------------------------------------------------------------------------- CHAMPION (Rang 9) - Gruppe Zwei Ebenen, beide nur ueber "transform" animiert: 1. die bestehende kreisende Aura (nmChampionAura) - hier auf eine feste Groesse begrenzt, weil die Gruppe jetzt ueber die volle Breite geht und ein Kreis von 180% der Breite unnoetig viel Flaeche waere 2. ein warmer Schimmer, der langsam durch die Kopfzeile zieht -------------------------------------------------------------------------- */ .rank-group.rank-column-champion::after { width: 520px; height: 520px; aspect-ratio: auto; margin: -260px 0 0 -260px; background: conic-gradient( from 0deg, rgba(255, 184, 72, 0) 0deg, rgba(255, 184, 72, 0.12) 45deg, rgba(255, 122, 80, 0.16) 95deg, rgba(255, 184, 72, 0.08) 150deg, rgba(255, 184, 72, 0) 215deg, rgba(255, 184, 72, 0) 360deg ); } .rank-group.rank-column-champion .rank-group-head { position: relative; overflow: hidden; } .rank-group.rank-column-champion .rank-group-head::after { content: ""; position: absolute; inset: 0 -35%; pointer-events: none; background: linear-gradient(100deg, transparent 22%, rgba(255, 196, 120, 0.15) 46%, rgba(255, 150, 80, 0.10) 57%, transparent 78%); animation: nmChampionSheen 7.5s ease-in-out infinite; } @keyframes nmChampionSheen { 0%, 100% { transform: translate3d(-24%, 0, 0); } 50% { transform: translate3d(24%, 0, 0); } } /* --- Responsive Board --- Bis 620 px ist links keine Leiste mehr unterzubringen, ohne dass die Namen abschneiden. Dort kippt die Gruppe zurueck auf "Kopf oben, Spieler darunter" - der Kopf wird dabei einzeilig gehalten, damit er wenig Hoehe kostet. Das Raster bleibt zweispaltig, solange die Namen lesbar bleiben. */ @media (max-width: 620px) { /* Auf dem Handy steht der Rang schon in der Kopfzeile direkt darueber. Das Badge je Zeile waere die zweite identische Angabe und kostet 27 px, die dem Namen fehlen - ohne es schneidet kein Name mehr ab. */ .rank-group .rank-player-badge { display: none; } .rank-group .rank-group-players { column-width: 138px; } } @media (max-width: 380px) { .rank-group .rank-group-players { column-width: auto; column-count: 1; } } /* --- Bewegung aus: alles bleibt sichtbar, nur eben still --- */ @media (prefers-reduced-motion: reduce) { .rank-scale .rank-tab-btn.rank-slot-champion::before, .rank-group.rank-column-champion .rank-group-head::after { animation: none; } .rank-scale .rank-tab-btn, .rank-group .rank-player { transition: none; } .rank-scale .rank-tab-btn:hover, .rank-group .rank-player:hover { transform: none; } } /* --- Sparmodus der Seite (performance-mode.js) --- */ .perf-lite .rank-scale .rank-tab-btn.rank-slot-champion::before, .perf-lite .rank-group.rank-column-champion .rank-group-head::after { animation: none; opacity: 0.5; } .perf-lite .rank-scale .rank-tab-btn { box-shadow: none !important; } .perf-lite .rank-scale .rank-tab-btn:hover, .perf-lite .rank-group .rank-player:hover { transform: none !important; }