/* Aurora SMP – App Styles (Dashboard, Tickets, Cases, Staff …) Gleiche Design-Sprache wie die Landing Page: Nordlicht-Gradients, dunkle Atmosphäre, Oxanium/Sora Typografie. */ @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&family=Sora:wght@300;400;500;600;700&display=swap'); :root { --bg: #02080f; --bg-deep: #051018; --bg-ink: #0a1c28; --panel: rgba(11, 30, 42, 0.55); --panel-solid: #0b1e2a; --panel-alt: rgba(15, 38, 50, 0.55); --panel-hover: rgba(18, 46, 58, 0.7); --border: rgba(159, 231, 255, 0.14); --border-soft: rgba(159, 231, 255, 0.07); --border-strong: rgba(159, 231, 255, 0.34); --text: #e8f7ff; --text-dim: #8aa4b5; --text-faint: #56707f; --ice: #9fe7ff; --teal: #3dd6c6; --mint: #7dffc0; --violet: #b3a2ff; --amber: #ffc875; --red: #ff6b81; --blue: var(--ice); --purple: var(--violet); --pink: var(--red); --brand-gradient: linear-gradient(120deg, #7dd3fc 0%, #c4b5fd 100%); --violet-gradient: linear-gradient(120deg, #7dd3fc 0%, #c4b5fd 65%, #3dd6c6 100%); --danger-gradient: linear-gradient(120deg, #ffb0bb 0%, var(--red) 100%); --radius: 12px; --radius-lg: 20px; --font-display: 'Oxanium', sans-serif; --font-body: 'Sora', sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { position: relative; background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- Ambient aurora atmosphere (all app pages) ---------- */ body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; } body::before { background: radial-gradient(ellipse 60% 38% at 12% -8%, rgba(61, 214, 198, 0.16), transparent 55%), radial-gradient(ellipse 50% 32% at 92% -4%, rgba(159, 231, 255, 0.12), transparent 55%), radial-gradient(ellipse 55% 40% at 50% 112%, rgba(179, 162, 255, 0.10), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 45%, var(--bg) 100%); } body::after { opacity: 0.5; background-image: radial-gradient(1.5px 1.5px at 10% 15%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 26% 32%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1.5px 1.5px at 46% 8%, rgba(255, 255, 255, 0.45), transparent), radial-gradient(1px 1px at 66% 22%, rgba(255, 255, 255, 0.35), transparent), radial-gradient(1.5px 1.5px at 84% 12%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1px 1px at 92% 34%, rgba(255, 255, 255, 0.3), transparent); background-repeat: no-repeat; } h1, h2, h3, h4, .brand-word { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0 0 6px; font-weight: 700; } a { color: var(--ice); text-decoration: none; } a:hover { text-decoration: underline; } p { color: var(--text-dim); line-height: 1.6; } code { background: rgba(159, 231, 255, 0.1); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: 0.85em; color: var(--ice); } /* ---------- Page-enter animation hooks ---------- Nur wenn JS aktiv ist (Klasse .js auf , wird per Inline-Script sofort gesetzt) werden Elemente initial ausgeblendet, damit app.js sie einblenden kann. Ohne JS bleibt alles normal sichtbar (progressive enhancement). */ .js [data-animate], .js .content .content-header, .js .content .page-head, .js .content .panel, .js .content .stat-box, .js .content .list-row, .js .content .item-card, .js .content .shop-product-card, .js .content .party-card, .js .content .guideline-row, .js .auth-box { opacity: 0; } .js [data-animate], .js .content .content-header, .js .content .page-head, .js .auth-box { transform: translateY(16px); } .js .content .panel, .js .content .stat-box { transform: translateY(20px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-animate], .js .content .content-header, .js .content .page-head, .js .content .panel, .js .content .stat-box, .js .content .list-row, .js .content .item-card, .js .content .shop-product-card, .js .content .party-card, .js .content .guideline-row, .js .auth-box { opacity: 1 !important; transform: none !important; } } /* ---------- Auth shell (login screen) ---------- */ .auth-shell { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; } .auth-box { position: relative; text-align: center; max-width: 440px; padding: 44px 36px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); backdrop-filter: blur(14px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); } .auth-box::before { content: ''; position: absolute; left: 10%; right: 10%; top: -30%; height: 60%; background: linear-gradient(100deg, transparent 10%, rgba(61, 214, 198, 0.35) 40%, rgba(159, 231, 255, 0.25) 60%, transparent 85%); filter: blur(30px); opacity: 0.7; mix-blend-mode: screen; z-index: -1; border-radius: 50%; } .auth-box img.brand-logo { width: 88px; height: auto; margin-bottom: 18px; border-radius: 14px; box-shadow: 0 0 0 1px var(--border), 0 18px 40px -18px rgba(61, 214, 198, 0.5); } .auth-box h1 { font-size: 2rem; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .btn-login { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 14px 30px; border-radius: var(--radius); background: var(--brand-gradient); color: #031018; font-weight: 700; font-family: var(--font-display); border: none; cursor: pointer; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), filter 0.2s ease; } .btn-login:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(61, 214, 198, 0.55); text-decoration: none; } /* ---------- App shell (sidebar + content) ---------- */ .app-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; margin-left: 258px; } .sidebar { width: 258px; flex-shrink: 0; background: linear-gradient(190deg, rgba(10, 27, 38, 0.96) 0%, rgba(4, 12, 18, 0.98) 60%); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 22px 16px; position: fixed; top: 0; left: 0; z-index: 30; height: 100vh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; backdrop-filter: blur(10px); transform: none; } .sidebar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 100%; height: 260px; background: radial-gradient(ellipse 90% 60% at 20% 0%, rgba(61, 214, 198, 0.16), transparent 70%); pointer-events: none; z-index: -1; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; margin-bottom: 6px; border-bottom: 1px solid var(--border-soft); } .sidebar-brand img { width: 34px; height: 34px; border-radius: 8px; } .sidebar-brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .sidebar-role { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); padding: 16px 10px 6px; font-weight: 600; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); color: var(--text-dim); font-size: 0.9rem; font-weight: 500; position: relative; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .sidebar-nav a::before { content: ''; width: 17px; height: 17px; flex-shrink: 0; background-color: currentColor; opacity: 0.85; mask-image: var(--nav-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E")); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--nav-icon); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .sidebar-nav a[href="/staff"] { --nav-icon: var(--icon-dashboard); } .sidebar-nav a[href="/staff/cases"] { --nav-icon: var(--icon-case); } .sidebar-nav a[href="/staff/tickets"] { --nav-icon: var(--icon-ticket); } .sidebar-nav a[href="/staff/appeals"] { --nav-icon: var(--icon-appeal); } .sidebar-nav a[href="/staff/players"] { --nav-icon: var(--icon-search); } .sidebar-nav a[href="/staff/guidelines"] { --nav-icon: var(--icon-book); } .sidebar-nav a[href="/dashboard"] { --nav-icon: var(--icon-dashboard); } .sidebar-nav a[href="/shop"] { --nav-icon: var(--icon-star); } .sidebar-nav a[href="/cases"] { --nav-icon: var(--icon-case); } .sidebar-nav a[href="/tickets"] { --nav-icon: var(--icon-ticket); } .sidebar-nav a[href="/appeals"] { --nav-icon: var(--icon-appeal); } .sidebar-nav a[href="/warnings"] { --nav-icon: var(--icon-warning); } .sidebar-nav a[href="/profile/link"] { --nav-icon: var(--icon-link); } .sidebar-nav a:hover { background: var(--border-soft); color: var(--text); text-decoration: none; transform: translateX(2px); } .sidebar-nav a.active { background: linear-gradient(100deg, rgba(61, 214, 198, 0.16), rgba(159, 231, 255, 0.06)); color: var(--text); box-shadow: inset 3px 0 0 0 var(--teal); } .sidebar-foot { border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 10px; } .sidebar-user { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; } .sidebar-user-name { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-logout { font-size: 0.78rem; color: var(--text-faint); } .sidebar-logout:hover { color: var(--red); } /* ---------- Main content ---------- */ .content { flex: 1; min-width: 0; padding: 34px 44px 64px; position: relative; } .content-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } .content-header h1 { font-size: 1.8rem; background: linear-gradient(120deg, var(--text) 40%, var(--ice) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .content-sub { color: var(--text-dim); margin-top: -4px; } /* ---------- Page head (ChamberWar-style workspace header) ---------- */ .page-back { margin: 0 0 12px; font-size: 0.88rem; } .page-back a { color: var(--text-dim); } .page-back a:hover { color: var(--ice); text-decoration: none; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); backdrop-filter: blur(10px); position: relative; overflow: hidden; flex-wrap: wrap; } .page-head::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(159, 231, 255, 0.5), transparent); } .page-head__main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; flex: 1 1 280px; } .page-head__avatar { width: 64px; height: 64px; border-radius: 10px; image-rendering: pixelated; border: 1px solid var(--border-strong); box-shadow: 0 0 0 3px rgba(61, 214, 198, 0.12); flex-shrink: 0; background: var(--panel-solid); } .page-head__text { min-width: 0; } .page-head__eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--teal); margin-bottom: 4px; } .page-head__title { font-size: 1.55rem; margin: 0 0 6px; background: linear-gradient(120deg, var(--text) 40%, var(--ice) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.2; word-break: break-word; } .page-head__subtitle { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .page-head__subtitle strong { color: var(--teal); font-weight: 600; } .page-head__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; } .page-head__facts { display: flex; gap: 18px; margin: 0; } .page-head__facts dt { color: var(--text-faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .page-head__facts dd { margin: 2px 0 0; font-weight: 600; color: var(--text); font-size: 0.86rem; } .page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } /* ---------- Item cards (ticket / appeal lists) ---------- */ .item-list { display: flex; flex-direction: column; gap: 10px; } .item-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; backdrop-filter: blur(8px); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .item-card:hover { border-color: var(--border-strong); background: var(--panel-hover); text-decoration: none; transform: translateY(-2px); box-shadow: 0 18px 36px -28px rgba(61, 214, 198, 0.45); } .item-card__avatar { width: 48px; height: 48px; border-radius: 8px; image-rendering: pixelated; border: 1px solid var(--border); flex-shrink: 0; background: var(--panel-solid); } .item-card__body { flex: 1; min-width: 0; } .item-card__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .item-card__title-row strong { font-size: 0.98rem; color: var(--text); font-weight: 600; } .item-card__meta { font-size: 0.8rem; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 4px 6px; } .item-card__preview { margin-top: 6px; font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Panels / lists ---------- */ .panel { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; backdrop-filter: blur(10px); overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(159, 231, 255, 0.5), transparent); } .panel:hover { border-color: var(--border-strong); box-shadow: 0 24px 48px -30px rgba(61, 214, 198, 0.25); } .panel h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; } .grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; } .stat-box { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; backdrop-filter: blur(10px); overflow: hidden; transition: transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease; } .stat-box::after { content: ''; position: absolute; right: -30%; top: -40%; width: 70%; height: 120%; background: radial-gradient(circle, rgba(61, 214, 198, 0.16), transparent 70%); pointer-events: none; } .stat-box:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 20px 40px -24px rgba(159, 231, 255, 0.3); } .stat-box .stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; } .stat-box .stat-label { color: var(--text-dim); font-size: 0.82rem; margin-top: 4px; } .panel-cta { background: linear-gradient(135deg, rgba(61, 214, 198, 0.1), rgba(159, 231, 255, 0.04)); border: 1px dashed var(--border-strong); } .panel-cta .btn { margin-top: 6px; } .profile-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .rank-badge { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; color: #041018; background: linear-gradient(120deg, var(--rank-color, var(--ice)), var(--rank-color2, var(--teal))); box-shadow: 0 8px 20px -10px rgba(61, 214, 198, 0.55); } .clan-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.82rem; font-weight: 600; } .clan-chip::before { content: ''; width: 13px; height: 13px; background-color: var(--teal); mask-image: var(--icon-clan); mask-size: contain; mask-repeat: no-repeat; -webkit-mask-image: var(--icon-clan); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; } .grid-stats-tight { margin-bottom: 0; } .list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 6px; border-bottom: 1px solid var(--border-soft); border-radius: 8px; transition: background 0.18s ease, padding-left 0.18s ease; } .list-row:hover { background: rgba(159, 231, 255, 0.04); padding-left: 12px; } .list-row:last-child { border-bottom: none; } .list-row-title { font-weight: 600; color: var(--text); } .list-row-meta { font-size: 0.8rem; color: var(--text-faint); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .empty-state { color: var(--text-faint); padding: 22px 4px; font-size: 0.9rem; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); } /* ---------- Category tags (tickets) ---------- */ .category-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.72rem; font-weight: 600; } .category-tag::before { content: ''; width: 12px; height: 12px; flex-shrink: 0; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: var(--icon-tag); -webkit-mask-image: var(--icon-tag); } .category-player_conflict { color: var(--red); } .category-player_conflict::before { mask-image: var(--icon-users); -webkit-mask-image: var(--icon-users); } .category-support { color: var(--ice); } .category-support::before { mask-image: var(--icon-life-buoy); -webkit-mask-image: var(--icon-life-buoy); } .category-bug { color: var(--amber); } .category-bug::before { mask-image: var(--icon-bug); -webkit-mask-image: var(--icon-bug); } .category-other { color: var(--text-dim); } .category-other::before { mask-image: var(--icon-tag); -webkit-mask-image: var(--icon-tag); } /* ---------- Badges (with icons) ---------- */ :root { --icon-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='black' stroke='none'/%3E%3C/svg%3E"); --icon-progress: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); --icon-resolved: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); --icon-escalated: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 17H2.5z'/%3E%3Cpath d='M12 10v4'/%3E%3Ccircle cx='12' cy='17' r='0.4' fill='black'/%3E%3C/svg%3E"); --icon-merged: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.4'/%3E%3Ccircle cx='6' cy='18' r='2.4'/%3E%3Ccircle cx='18' cy='12' r='2.4'/%3E%3Cpath d='M6 8.4V15a3 3 0 0 0 3 3'/%3E%3Cpath d='M6 8.4a5 5 0 0 0 5 4.6h2.6'/%3E%3C/svg%3E"); --icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); --icon-locked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 19v-1.5a3.5 3.5 0 0 0-3.5-3.5h-5A3.5 3.5 0 0 0 4 17.5V19'/%3E%3Ccircle cx='9' cy='7.5' r='3'/%3E%3Cpath d='M17 19v-1.5a3.3 3.3 0 0 0-2-3'/%3E%3Cpath d='M14.5 4.6a3 3 0 0 1 0 5.8'/%3E%3C/svg%3E"); --icon-life-buoy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M6 6l3.4 3.4M18 6l-3.4 3.4M6 18l3.4-3.4M18 18l-3.4-3.4'/%3E%3C/svg%3E"); --icon-bug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='8.5' width='10' height='10' rx='4'/%3E%3Cpath d='M12 8.5V6M9.5 5l1.7 1.7M14.5 5l-1.7 1.7M4.5 12h2.7M17 12h2.5M5.5 17.5l2-1.7M18.5 17.5l-2-1.7'/%3E%3C/svg%3E"); --icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3.5H6a1.5 1.5 0 0 0-1.5 1.5v6.5c0 .4.16.78.44 1.06l8.5 8.5a1.5 1.5 0 0 0 2.12 0l6.5-6.5a1.5 1.5 0 0 0 0-2.12l-8.5-8.5A1.5 1.5 0 0 0 12.5 3.5z'/%3E%3Ccircle cx='9' cy='9' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E"); --icon-clan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l3.5 7.2 7.5 1.1-5.5 5.2 1.3 7.5L12 19.9l-6.8 3.6 1.3-7.5-5.5-5.2 7.5-1.1z'/%3E%3C/svg%3E"); --icon-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13' y='3.5' width='7.5' height='4.5' rx='1.5'/%3E%3Crect x='13' y='10.5' width='7.5' height='10' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7.5' height='7' rx='1.5'/%3E%3C/svg%3E"); --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.8 6.2 6.7 1-4.9 4.7 1.2 6.6-5.8-3.2L6.2 21l1.2-6.6-4.9-4.7 6.7-1z'/%3E%3C/svg%3E"); --icon-case: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12' rx='2'/%3E%3Cpath d='M8 7.5V6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1.5'/%3E%3Cpath d='M3 12.5h18'/%3E%3C/svg%3E"); --icon-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4z'/%3E%3Cpath d='M10 6v12' stroke-dasharray='2 2'/%3E%3C/svg%3E"); --icon-appeal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v11H9l-5 5z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E"); --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); --icon-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2 2 0 0 1 6 3.5h13.5v15.5H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19V5.5'/%3E%3C/svg%3E"); --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 17H2.5z'/%3E%3Cpath d='M12 10v4'/%3E%3Ccircle cx='12' cy='17' r='0.4' fill='black'/%3E%3C/svg%3E"); --icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5l5-5'/%3E%3Cpath d='M11 6.5l1-1a3.5 3.5 0 0 1 5 5l-1 1'/%3E%3Cpath d='M13 17.5l-1 1a3.5 3.5 0 0 1-5-5l1-1'/%3E%3C/svg%3E"); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid transparent; white-space: nowrap; } .badge::before { content: ''; width: 12px; height: 12px; flex-shrink: 0; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: var(--icon-open); -webkit-mask-image: var(--icon-open); } .badge-open { background: rgba(159, 231, 255, 0.12); color: var(--ice); border-color: rgba(159, 231, 255, 0.32); } .badge-progress { background: rgba(61, 214, 198, 0.14); color: var(--teal); border-color: rgba(61, 214, 198, 0.34); } .badge-progress::before { mask-image: var(--icon-progress); -webkit-mask-image: var(--icon-progress); } .badge-resolved { background: rgba(125, 255, 192, 0.12); color: var(--mint); border-color: rgba(125, 255, 192, 0.32); } .badge-resolved::before { mask-image: var(--icon-resolved); -webkit-mask-image: var(--icon-resolved); } .badge-escalated { background: rgba(255, 200, 117, 0.14); color: var(--amber); border-color: rgba(255, 200, 117, 0.34); } .badge-escalated::before { mask-image: var(--icon-escalated); -webkit-mask-image: var(--icon-escalated); } .badge-merged { background: rgba(159, 231, 255, 0.06); color: var(--text-faint); border-color: var(--border); } .badge-merged::before { mask-image: var(--icon-merged); -webkit-mask-image: var(--icon-merged); } .badge-danger { background: rgba(255, 107, 129, 0.14); color: var(--red); border-color: rgba(255, 107, 129, 0.34); } .badge-danger::before { mask-image: var(--icon-danger); -webkit-mask-image: var(--icon-danger); } .badge-locked { background: rgba(255, 107, 129, 0.2); color: #ffb0bb; border-color: rgba(255, 107, 129, 0.42); } .badge-locked::before { mask-image: var(--icon-locked); -webkit-mask-image: var(--icon-locked); } /* Domain-specific status text values used directly as badge suffix (e.g. badge-open/accepted/rejected/tempban…) */ .badge-accepted { background: rgba(125, 255, 192, 0.12); color: var(--mint); border-color: rgba(125, 255, 192, 0.32); } .badge-accepted::before { mask-image: var(--icon-resolved); -webkit-mask-image: var(--icon-resolved); } .badge-rejected { background: rgba(255, 107, 129, 0.14); color: var(--red); border-color: rgba(255, 107, 129, 0.34); } .badge-rejected::before { mask-image: var(--icon-danger); -webkit-mask-image: var(--icon-danger); } .badge-none { background: rgba(159, 231, 255, 0.06); color: var(--text-faint); border-color: var(--border); } .badge-none::before { mask-image: var(--icon-open); -webkit-mask-image: var(--icon-open); } .badge-warning { background: rgba(255, 200, 117, 0.14); color: var(--amber); border-color: rgba(255, 200, 117, 0.34); } .badge-warning::before { mask-image: var(--icon-warning); -webkit-mask-image: var(--icon-warning); } .badge-tempban { background: rgba(255, 200, 117, 0.14); color: var(--amber); border-color: rgba(255, 200, 117, 0.34); } .badge-tempban::before { mask-image: var(--icon-escalated); -webkit-mask-image: var(--icon-escalated); } .badge-permban { background: rgba(255, 107, 129, 0.14); color: var(--red); border-color: rgba(255, 107, 129, 0.34); } .badge-permban::before { mask-image: var(--icon-danger); -webkit-mask-image: var(--icon-danger); } .badge-system_perm { background: rgba(255, 107, 129, 0.2); color: #ffb0bb; border-color: rgba(255, 107, 129, 0.42); } .badge-system_perm::before { mask-image: var(--icon-locked); -webkit-mask-image: var(--icon-locked); } .badge-perm { background: rgba(255, 107, 129, 0.14); color: var(--red); border-color: rgba(255, 107, 129, 0.34); } .badge-perm::before { mask-image: var(--icon-danger); -webkit-mask-image: var(--icon-danger); } .badge-temp { background: rgba(255, 200, 117, 0.14); color: var(--amber); border-color: rgba(255, 200, 117, 0.34); } .badge-temp::before { mask-image: var(--icon-escalated); -webkit-mask-image: var(--icon-escalated); } /* ---------- Forms ---------- */ form.stack { display: flex; flex-direction: column; gap: 16px; max-width: 640px; } label { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; display: block; } input[type="text"], input[type="number"], select, textarea { width: 100%; background: rgba(6, 16, 22, 0.6); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.92rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } textarea { min-height: 120px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(61, 214, 198, 0.16); } .field { display: flex; flex-direction: column; } .field-row { display: flex; gap: 14px; flex-wrap: wrap; } .field-row .field { flex: 1; min-width: 160px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-alt); color: var(--text); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: transform 0.18s var(--ease-out), border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .btn:hover { border-color: var(--border-strong); background: var(--panel-hover); text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.98); } .btn-primary { background: var(--brand-gradient); border: none; color: #031018; } .btn-primary:hover { box-shadow: 0 16px 30px -16px rgba(61, 214, 198, 0.55); } .btn-danger { background: var(--danger-gradient); border: none; color: #1a0509; } .btn-danger:hover { box-shadow: 0 16px 30px -16px rgba(255, 107, 129, 0.5); } .btn-sm { padding: 7px 14px; font-size: 0.78rem; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- Alerts ---------- */ .alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.88rem; border: 1px solid transparent; display: flex; align-items: flex-start; gap: 10px; } .alert-success { background: rgba(125, 255, 192, 0.1); color: #b9ffdd; border-color: rgba(125, 255, 192, 0.3); } .alert-error { background: rgba(255, 107, 129, 0.1); color: #ffc3cc; border-color: rgba(255, 107, 129, 0.3); } .alert-info { background: rgba(159, 231, 255, 0.1); color: #d3f2ff; border-color: rgba(159, 231, 255, 0.3); } /* ---------- Chat / message thread ---------- */ .thread-panel__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; max-height: min(58vh, 640px); overflow-y: auto; padding: 4px 2px 8px; scroll-behavior: smooth; } .thread__empty { color: var(--text-faint); text-align: center; padding: 24px 8px; margin: 0; } .thread-msg { display: flex; align-items: flex-start; gap: 12px; max-width: min(720px, 92%); } .thread-msg--staff { align-self: flex-start; } .thread-msg--player, .thread-msg--own { align-self: flex-end; flex-direction: row-reverse; } .thread-msg--own .thread-msg__bubble { background: rgba(61, 214, 198, 0.14); border-color: rgba(61, 214, 198, 0.34); } .thread-msg--staff .thread-msg__bubble { background: rgba(179, 162, 255, 0.1); border-color: rgba(179, 162, 255, 0.28); } .thread-msg--accepted .thread-msg__bubble { background: rgba(125, 255, 192, 0.1); border-color: rgba(125, 255, 192, 0.3); } .thread-msg--rejected .thread-msg__bubble { background: rgba(255, 107, 129, 0.1); border-color: rgba(255, 107, 129, 0.3); } .thread-msg.is-staff { border-left: none; } .thread-msg__avatar { width: 40px; height: 40px; border-radius: 8px; image-rendering: pixelated; border: 1px solid var(--border); flex-shrink: 0; background: var(--panel-solid); } .thread-msg__wrap { min-width: 0; } .thread-msg__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-size: 0.75rem; color: var(--text-faint); } .thread-msg--player .thread-msg__meta, .thread-msg--own .thread-msg__meta { justify-content: flex-end; } .thread-msg__name { color: var(--text); font-size: 0.82rem; } .thread-msg__role { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(179, 162, 255, 0.14); color: var(--violet); border: 1px solid rgba(179, 162, 255, 0.28); } .thread-msg__role--player { background: rgba(61, 214, 198, 0.12); color: var(--teal); border-color: rgba(61, 214, 198, 0.28); } .thread-msg__bubble { background: var(--panel-alt); border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px 14px; color: var(--text); white-space: pre-wrap; word-break: break-word; font-size: 0.9rem; line-height: 1.55; } .thread-msg-head { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-faint); margin-bottom: 6px; } .thread-msg-body { color: var(--text); white-space: pre-wrap; font-size: 0.9rem; } .thread-reply { border-top: 1px solid var(--border-soft); padding-top: 16px; } .thread-closed-note { margin: 0; padding: 12px 14px; border-radius: var(--radius); border: 1px dashed var(--border); color: var(--text-faint); font-size: 0.88rem; background: rgba(159, 231, 255, 0.03); } .staff-actions-panel { border-color: rgba(179, 162, 255, 0.28); background: linear-gradient(135deg, rgba(179, 162, 255, 0.08), rgba(11, 30, 42, 0.55)); } .staff-actions-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .staff-actions-panel__link { margin: 14px 0 0; } .appeal-ban-panel__row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .appeal-ban-panel__reason { margin: 0; color: var(--text); flex: 1; min-width: 200px; } .form-panel .field-hint, .field-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-faint); line-height: 1.4; } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .appeal-decide-actions .btn-danger { order: 2; } .text-faint { color: var(--text-faint); } /* ---------- Case parties / skin preview ---------- */ .party-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; } .party-card { display: flex; align-items: center; gap: 12px; background: var(--panel-alt); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; transition: border-color 0.2s ease, transform 0.2s ease; } .party-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .party-card img.skin-face { width: 42px; height: 42px; border-radius: 8px; image-rendering: pixelated; border: 1px solid var(--border); } .party-card-name { font-weight: 600; } .party-card-role { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; } /* ---------- Guidelines table ---------- */ .guideline-row { display: grid; grid-template-columns: 1.4fr 2fr auto auto; gap: 14px; align-items: center; padding: 13px 6px; border-bottom: 1px solid var(--border-soft); font-size: 0.87rem; border-radius: 8px; transition: background 0.18s ease; } .guideline-row:hover { background: rgba(159, 231, 255, 0.04); } .severity-low { color: var(--mint); font-weight: 600; } .severity-medium { color: var(--amber); font-weight: 600; } .severity-high { color: #ff9f6b; font-weight: 600; } .severity-critical { color: var(--red); font-weight: 600; } /* ---------- Mobile topbar / hamburger ---------- */ .mobile-topbar { display: none; position: sticky; top: 0; z-index: 70; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(2, 8, 15, 0.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); } .mobile-topbar-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; } .mobile-topbar-brand img { width: 28px; height: 28px; border-radius: 6px; } .menu-toggle { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; } .menu-toggle-bar { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } body.nav-open .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .menu-toggle-bar:nth-child(2) { opacity: 0; } body.nav-open .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .sidebar-backdrop { display: none; } /* ---------- Digitaler Shop (einheitlich mit Dashboard) ---------- */ .shop-balance-panel { margin-bottom: 18px; } .shop-balance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .shop-balance-label { display: block; margin-bottom: 4px; color: var(--text-faint); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; } .shop-balance-grid strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); } .shop-balance-stars { color: var(--amber); } .shop-balance-coins { color: var(--ice); } .shop-product-list { gap: 12px; } .shop-product-card { align-items: stretch; } .shop-product-prices { margin-top: 8px; gap: 10px 16px; } .shop-product-prices span { color: var(--text-dim); font-weight: 600; } .shop-product-actions { margin-top: 14px; } .shop-product-actions form { display: inline-flex; } @media (max-width: 700px) { .shop-balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Responsive / Off-Canvas ---------- */ @media (max-width: 860px) { .mobile-topbar { display: flex; } .app-shell { flex-direction: column; margin-left: 0; min-height: calc(100vh - 66px); min-height: calc(100dvh - 66px); } .sidebar { position: fixed; top: 0; left: 0; z-index: 60; width: min(300px, 88vw); height: 100vh; height: 100dvh; transform: translate3d(-110%, 0, 0); transition: transform 0.24s ease; box-shadow: none; pointer-events: none; visibility: hidden; } body.nav-open .sidebar { transform: translate3d(0, 0, 0); box-shadow: 18px 0 48px rgba(0, 0, 0, 0.5); pointer-events: auto; visibility: visible; } .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 55; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.58); border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .sidebar-backdrop[hidden] { display: none !important; } body.nav-open { overflow: hidden; touch-action: none; } .content { padding: 20px 16px 48px; width: 100%; } .content-header h1 { font-size: 1.4rem; } .page-head { padding: 16px; } .page-head__title { font-size: 1.28rem; } .page-head__aside { width: 100%; align-items: flex-start; } .page-head__facts { width: 100%; justify-content: flex-start; } .page-head__actions { width: 100%; justify-content: flex-start; } .page-head__avatar { width: 52px; height: 52px; } .item-card { align-items: flex-start; flex-wrap: wrap; } .item-card .badge { margin-left: auto; } .thread { max-height: none; } .thread-msg { max-width: 100%; } .grid-stats { grid-template-columns: 1fr 1fr; } .list-row { flex-direction: column; align-items: flex-start; gap: 8px; } .field-row { flex-direction: column; } .guideline-row { grid-template-columns: 1fr; } .party-grid { grid-template-columns: 1fr; } .btn-row, .form-actions { width: 100%; } .btn-row .btn, .btn-row form, .form-actions .btn { flex: 1 1 auto; } } @media (max-width: 480px) { .grid-stats { grid-template-columns: 1fr; } } /* ================= Community-Ideen ================= */ .idea-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .idea-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .idea-filters .field { min-width: 150px; } .idea-filters label { font-size: 0.72rem; } .idea-filters select { padding: 9px 12px; } .idea-guest-note { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-alt); color: var(--text-dim); font-size: 0.84rem; } .idea-guest-note a { color: var(--ice); font-weight: 600; } .idea-list { display: flex; flex-direction: column; gap: 10px; } .idea-card { display: flex; align-items: stretch; gap: 16px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); backdrop-filter: blur(8px); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .idea-card:hover { border-color: var(--border-strong); background: var(--panel-hover); transform: translateY(-2px); box-shadow: 0 18px 36px -28px rgba(61, 214, 198, 0.45); } .idea-card__body { flex: 1; min-width: 0; text-decoration: none; color: inherit; } .idea-card__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .idea-card__number { color: var(--text-faint); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; } .idea-card__title-row strong { font-size: 1rem; color: var(--text); font-weight: 700; } .idea-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .idea-card__purpose { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .idea-card__meta { font-size: 0.78rem; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 4px 6px; } .idea-vote { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; padding: 8px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-alt); color: var(--text-dim); cursor: pointer; font-family: var(--font-body); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .idea-vote:hover { border-color: var(--border-strong); color: var(--text); } .idea-vote.is-active { border-color: rgba(61, 214, 198, 0.5); background: rgba(61, 214, 198, 0.14); color: var(--teal); } .idea-vote__arrow { font-size: 1rem; line-height: 1; } .idea-vote__count { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1; } .idea-vote__label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .idea-vote--lg { width: 92px; padding: 14px 10px; } .idea-vote--lg .idea-vote__count { font-size: 1.5rem; } .idea-vote--disabled { cursor: default; opacity: 0.6; } /* Type-Tags (Feature/Verbesserung/Bug) und Kategorie-Tags teilen sich die .category-tag-Mechanik aus dem Ticket-System (Icon per currentColor-Mask). */ .category-feature { color: var(--mint); } .category-feature::before { mask-image: var(--icon-star); -webkit-mask-image: var(--icon-star); } .category-improvement { color: var(--teal); } .category-improvement::before { mask-image: var(--icon-progress); -webkit-mask-image: var(--icon-progress); } .category-gameplay { color: var(--violet); } .category-gameplay::before { mask-image: var(--icon-clan); -webkit-mask-image: var(--icon-clan); } .category-economy { color: var(--amber); } .category-economy::before { mask-image: var(--icon-star); -webkit-mask-image: var(--icon-star); } .category-clans { color: var(--ice); } .category-clans::before { mask-image: var(--icon-users); -webkit-mask-image: var(--icon-users); } .category-quests { color: var(--mint); } .category-quests::before { mask-image: var(--icon-book); -webkit-mask-image: var(--icon-book); } .category-events { color: var(--red); } .category-events::before { mask-image: var(--icon-warning); -webkit-mask-image: var(--icon-warning); } .category-website { color: var(--ice); } .category-website::before { mask-image: var(--icon-link); -webkit-mask-image: var(--icon-link); } .idea-detail-grid { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; } .idea-detail-grid .idea-vote--lg { margin-top: 2px; } .idea-purpose { font-size: 1rem; color: var(--text); font-weight: 500; margin: 0 0 4px; } .idea-body { color: var(--text-dim); white-space: pre-wrap; line-height: 1.6; } .idea-staff-panel .field-row { align-items: flex-end; } .idea-comment { padding: 14px 0; border-top: 1px solid var(--border-soft); } .idea-comment:first-child { border-top: none; padding-top: 0; } .idea-comment__row { display: flex; gap: 12px; } .idea-comment__avatar { width: 36px; height: 36px; border-radius: 8px; image-rendering: pixelated; border: 1px solid var(--border); flex-shrink: 0; background: var(--panel-solid); } .idea-comment__wrap { flex: 1; min-width: 0; } .idea-comment__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 0.8rem; } .idea-comment__name { color: var(--text); font-weight: 600; } .idea-comment__meta time { color: var(--text-faint); } .idea-comment__body { color: var(--text-dim); font-size: 0.9rem; white-space: pre-wrap; line-height: 1.5; } .idea-comment--hidden .idea-comment__body { color: var(--text-faint); font-style: italic; } .idea-comment__actions { display: flex; gap: 10px; margin-top: 6px; } .idea-comment__actions button, .idea-comment__actions .idea-link-btn { background: none; border: none; color: var(--text-faint); font-size: 0.76rem; font-weight: 600; cursor: pointer; padding: 0; font-family: var(--font-body); } .idea-comment__actions button:hover, .idea-comment__actions .idea-link-btn:hover { color: var(--ice); } .idea-comment__children { margin-top: 10px; padding-left: 20px; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; } .idea-reply-form { display: none; margin-top: 10px; } .idea-reply-form.is-open { display: block; } .idea-reply-form textarea { min-height: 70px; } .idea-activity { display: flex; flex-direction: column; gap: 10px; } .idea-activity__item { display: flex; gap: 10px; font-size: 0.84rem; color: var(--text-dim); } .idea-activity__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-top: 6px; flex-shrink: 0; } .idea-activity__item time { display: block; color: var(--text-faint); font-size: 0.74rem; } @media (max-width: 700px) { .idea-card { flex-direction: column; } .idea-vote { flex-direction: row; width: auto; align-self: flex-start; gap: 8px; padding: 8px 14px; } .idea-detail-grid { flex-direction: column; } .idea-detail-grid .idea-vote--lg { flex-direction: row; width: auto; align-self: flex-start; } } /* ================= News & Changelog (ChamberWar-Vorbild) ================= */ .news-unread-hint { margin: -8px 0 16px; color: var(--teal); font-size: 0.88rem; } .news-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .news-tabs__link { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); text-decoration: none; font-size: 0.86rem; background: rgba(255, 255, 255, 0.02); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .news-tabs__link:hover { color: var(--text); border-color: rgba(125, 211, 252, 0.35); } .news-tabs__link.is-active { color: #041018; background: linear-gradient(135deg, var(--ice), var(--teal)); border-color: transparent; font-weight: 600; } .news-list { display: flex; flex-direction: column; gap: 12px; } .news-card { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: rgba(8, 18, 32, 0.72); text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .news-card:hover { border-color: rgba(125, 211, 252, 0.38); background: rgba(12, 28, 48, 0.88); transform: translateY(-1px); } .news-card--unread { border-color: rgba(61, 214, 198, 0.4); box-shadow: inset 3px 0 0 var(--teal); } .news-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .news-card h2 { margin: 0 0 6px; font-family: Oxanium, sans-serif; font-size: 1.15rem; font-weight: 700; } .news-card__excerpt { margin: 0 0 8px; color: var(--text-muted); font-size: 0.92rem; } .news-card__meta { margin: 0; color: var(--text-faint); font-size: 0.8rem; } .news-card__avatar { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); } .news-card__arrow { color: var(--text-faint); font-size: 1.2rem; } .news-badge-new { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #041018; background: var(--teal); } .news-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; border: 1px solid var(--border); } .news-tag--news { color: var(--ice); background: rgba(159, 231, 255, 0.1); border-color: rgba(159, 231, 255, 0.28); } .news-tag--changelog { color: var(--amber); background: rgba(255, 200, 117, 0.1); border-color: rgba(255, 200, 117, 0.28); } .news-status-banner { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); font-size: 0.88rem; } .news-status-banner--draft { color: var(--amber); background: rgba(255, 200, 117, 0.08); } .news-status-banner--archived { color: var(--text-muted); background: rgba(255, 255, 255, 0.03); } .news-article { padding: 0; overflow: hidden; } .news-article__author-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--border); } .news-article__author { display: flex; align-items: center; gap: 12px; } .news-article__avatar { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--border); } .news-article__author-label { display: block; color: var(--text-faint); font-size: 0.74rem; } .news-article__body { padding: 24px 22px 28px; line-height: 1.7; color: var(--text); } .news-article__body h2, .news-article__body h3 { font-family: Oxanium, sans-serif; margin: 1.4em 0 0.5em; } .news-article__body p { margin: 0 0 1em; } .news-article__body ul, .news-article__body ol { margin: 0 0 1em; padding-left: 1.3em; } .news-article__body img { max-width: 100%; border-radius: 12px; margin: 0.6em 0; } .news-article__body a { color: var(--ice); } .news-section-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 28px 0 16px; color: var(--text-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .news-section-divider span:first-child, .news-section-divider span:last-child { height: 1px; background: var(--border); } .news-comments__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; } .news-comments__head h2 { margin: 0; font-family: Oxanium, sans-serif; font-size: 1.2rem; } .news-comment-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .news-comment-form textarea { width: 100%; min-height: 110px; resize: vertical; } .news-comments__login-hint { margin-bottom: 18px; color: var(--text-muted); } .news-comments__list { display: flex; flex-direction: column; gap: 14px; } .news-comment { display: flex; gap: 12px; } .news-comment--reply { margin-left: 28px; padding-left: 12px; border-left: 2px solid var(--border); } .news-comment--hidden { opacity: 0.55; } .news-comment__avatar { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); flex-shrink: 0; } .news-comment__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: 0.82rem; color: var(--text-faint); } .news-comment__meta strong { color: var(--text); } .news-comment__body p { margin: 0; white-space: pre-wrap; } .news-comment__mod { margin-top: 8px; } .news-comment__status { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; } .news-form .field { margin-bottom: 16px; } .news-tag-fieldset { border: 0; padding: 0; margin: 0 0 16px; } .news-tag-fieldset legend { margin-bottom: 8px; font-size: 0.86rem; color: var(--text-muted); } .news-tag-option { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; cursor: pointer; } .news-check { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px; color: var(--text-muted); } .news-form__actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 700px) { .news-card { grid-template-columns: 1fr auto; } .news-card__avatar { display: none; } .news-comment--reply { margin-left: 12px; } }