:root{ --bg0:#05060a; --bg1:#0b0e18; --bg2:#0f1324; --ember:#ff7a2f; --ember2:#ffcc7a; --aether:#8cafFF; --steel:#b8c0cc; --muted:#7d8797; --line: rgba(180,190,210,.14); --vignette: rgba(0,0,0,.72); } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; color:var(--steel); font: 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: radial-gradient(1200px 800px at 50% 25%, rgba(255,122,47,.18), transparent 60%), radial-gradient(900px 600px at 70% 58%, rgba(140,175,255,.10), transparent 55%), radial-gradient(700px 500px at 30% 65%, rgba(255,204,122,.09), transparent 60%), linear-gradient(160deg, var(--bg1), var(--bg0) 55%, var(--bg2)); /* Default: allow vertical scrolling for long views (e.g. book pages). Specific screens that should be locked (login/orbit) add .noScroll on . */ overflow-x:hidden; overflow-y:auto; } body.noScroll{ overflow:hidden; } body::before{ content:""; position:fixed; inset:0; background: radial-gradient(closest-side at 50% 45%, transparent 45%, var(--vignette) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px); mix-blend-mode: overlay; pointer-events:none; opacity:.92; } body::after{ content:""; position:fixed; inset:-40px; background: radial-gradient(620px 390px at 50% 52%, rgba(255,122,47,.12), transparent 65%), radial-gradient(390px 250px at 48% 58%, rgba(255,204,122,.08), transparent 70%); filter: blur(10px); animation: portal_flicker 3.8s ease-in-out infinite; pointer-events:none; opacity:.9; } @keyframes portal_flicker{ 0%,100%{ transform: translate3d(0,0,0); opacity:.78; } 35%{ transform: translate3d(-6px, 4px, 0); opacity:.92; } 60%{ transform: translate3d(7px, -3px, 0); opacity:.84; } 82%{ transform: translate3d(-2px, 2px, 0); opacity:.95; } } .wrap{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:28px; position:relative; z-index:1; } .panel{ width:min(840px, 100%); border:1px solid var(--line); border-radius:18px; background: rgba(8,10,16,.60); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(10px); padding:26px; position:relative; overflow:visible; } .panel::before{ content:""; position:absolute; inset:-1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 20%, transparent 40%), radial-gradient(900px 220px at 50% 0%, rgba(255,122,47,.10), transparent 60%); opacity:.55; pointer-events:none; } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:2; width:100%; } .brand{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; width:100%; } .brandText{ flex:1; min-width:0; width:100%; } .topRight{ display:flex; align-items:center; gap:8px; } /* Top Icon Button (e.g. Todo link) */ .topIconBtn{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(180,190,210,.15); border-radius:10px; background: rgba(0,0,0,.2); text-decoration:none; transition: all .2s ease; position:relative; } .topIconBtn:hover{ border-color: rgba(180,190,210,.3); background: rgba(0,0,0,.3); transform: scale(1.05); } .topIconBtn svg{ width:20px; height:20px; } .topIconBadge[data-badge]::after{ content: attr(data-badge); position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; font-size:11px; font-weight:800; line-height:18px; text-align:center; color: rgba(255,200,140,1); background: rgba(30,25,35,.9); border:1px solid rgba(255,180,120,.3); border-radius:9px; text-shadow: 0 0 4px rgba(255,180,120,.5); } .mark{ display:block; width: auto; height: 65px; border-radius:0; border:0; background: transparent; padding:0; object-fit:contain; filter: drop-shadow(0 0 6px rgba(255,140,50,.4)) drop-shadow(0 0 14px rgba(255,100,30,.28)) drop-shadow(0 0 24px rgba(255,80,20,.15)); animation: markFlameGlow 3.5s ease-in-out infinite; } @keyframes markFlameGlow{ 0%, 100%{ filter: drop-shadow(0 0 5px rgba(255,140,50,.35)) drop-shadow(0 0 12px rgba(255,100,30,.22)) drop-shadow(0 0 20px rgba(255,80,20,.1)); } 50%{ filter: drop-shadow(0 0 8px rgba(255,160,60,.55)) drop-shadow(0 0 18px rgba(255,120,40,.38)) drop-shadow(0 0 30px rgba(255,90,25,.2)); } } /* Gate Icon (Login-Seite) */ .gateIcon{ display:block; width: auto; height: 75px; border-radius:0; border:0; background: transparent; padding:0; object-fit:contain; filter: drop-shadow(0 0 8px rgba(255,180,80,.35)) drop-shadow(0 0 16px rgba(255,140,50,.22)) drop-shadow(0 0 28px rgba(255,100,30,.12)); animation: gateIconGlow 4s ease-in-out infinite; } @keyframes gateIconGlow{ 0%, 100%{ filter: drop-shadow(0 0 6px rgba(255,180,80,.3)) drop-shadow(0 0 14px rgba(255,140,50,.18)) drop-shadow(0 0 24px rgba(255,100,30,.1)); } 50%{ filter: drop-shadow(0 0 10px rgba(255,200,100,.5)) drop-shadow(0 0 20px rgba(255,160,60,.32)) drop-shadow(0 0 34px rgba(255,120,40,.18)); } } @media (max-width: 560px){ .gateIcon{ height: 60px; } } /* Page Logo (animated icon) */ .pageLogo{ width:48px; height:48px; flex-shrink:0; } .pageLogoIcon{ width:100%; height:100%; animation: pageLogoSpin 20s linear infinite; filter: drop-shadow(0 0 8px rgba(180,190,210,.15)); } @keyframes pageLogoSpin{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } .pageLogo:hover .pageLogoIcon{ animation-duration: 3s; filter: drop-shadow(0 0 12px rgba(255,204,122,.25)); } /* Small Page Logo (menu icon style with pulse) */ .pageLogoSmall{ width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .pageLogoIconPulse{ width:24px; height:24px; animation: pageLogoPulse 3s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(180,190,210,.15)); } @keyframes pageLogoPulse{ 0%, 100%{ opacity:0.8; transform: scale(1); } 50%{ opacity:1; transform: scale(1.05); } } .pageLogoSmall:hover .pageLogoIconPulse{ animation: none; opacity:1; transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(180,190,210,.3)); } @media (max-width: 560px){ .mark{ height:50px; } .pageLogo{ width:40px; height:40px; } .pageLogoSmall{ width:28px; height:28px; } .pageLogoIconPulse{ width:20px; height:20px; } } .h1{ margin:0; font-size:22px; letter-spacing:.35px; font-weight:760; color:#d9e1ee; text-shadow: 0 12px 30px rgba(0,0,0,.55); } .sub{ margin:2px 0 0; color:var(--muted); font-size:13px; } .welcomeText{ margin: 0 0 1px 0; font-size: 11px; font-weight: 500; color: rgba(180,190,210,.4); } .sanctumRow{ display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; flex: 1; } .sanctumTitle{ margin: 0; font-size: 14px; font-weight: 700; color: rgba(220,228,240,.8); letter-spacing: 0.8px; text-transform: uppercase; text-shadow: 0 8px 20px rgba(0,0,0,.4); } .iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07); transition: transform .12s ease, border-color .12s ease, filter .12s ease; color: rgba(230,238,250,.92); text-decoration:none; } .iconbtn:hover{ transform: translateY(-1px); border-color: rgba(255,204,122,.35); filter: brightness(1.06); } .iconbtn svg{ width:18px; height:18px; } .hr{ margin:18px 0; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); opacity:.9; position:relative; z-index:2; } .form-control, .form-control:focus{ background: rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.12); color:#e7edf8; box-shadow:none; font-size: 16px; } .form-control::placeholder{ color: rgba(200,210,230,.45); } .form-select, .form-select:focus{ background-color: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.12); color: #e7edf8; box-shadow: none; font-size: 16px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(180,190,210,0.6)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; } .form-select option{ background: #1a1a2e; color: #e7edf8; } .labelcaps{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: rgba(190,200,220,.72); } .btn-ember{ border:1px solid rgba(255,204,122,.3); background: transparent; color: rgba(230,238,250,.92); border-radius:10px; font-weight:600; font-size:13px; letter-spacing:.02em; padding:.45rem .75rem; transition: border-color .15s ease, color .15s ease, background .15s ease; } .btn-ember:hover{ border-color: rgba(255,204,122,.5); color: rgba(245,248,255,.98); background: rgba(255,204,122,.08); } .btn-ember:active{ background: rgba(255,204,122,.12); } .notice{ border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); border-radius:12px; padding:10px 12px; color: rgba(230,238,250,.92); } .notice.bad{ border-color: rgba(255,122,47,.38); } /* Success Glow Message */ .glowSuccess{ border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; color: #dff7ea; font-weight: 500; animation: alertSuccessGlow 4s ease-in-out forwards; } .embers{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.7; } .ember{ position:absolute; width:2px; height:2px; border-radius:50%; background: var(--ember2); box-shadow: 0 0 12px rgba(255,204,122,.55); animation: portal_drift linear infinite; opacity:0; } @keyframes portal_drift{ 0% { transform: translate3d(0, 30px, 0) scale(.8); opacity:0; } 12% { opacity:.7; } 65% { opacity:.35; } 100% { transform: translate3d(-40px, -420px, 0) scale(1.25); opacity:0; } } /* Home floating action */ .grid3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; position:relative; z-index:2; } @media (max-width: 820px){ .grid3{ grid-template-columns:1fr; } } .grid2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; position:relative; z-index:2; } @media (max-width: 820px){ .grid2{ grid-template-columns:1fr; } } .floatCard{ position:relative; display:block; cursor:pointer; text-decoration:none; border:1px solid var(--line); border-radius:18px; padding:18px 16px; background: rgba(10,12,20,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.35); overflow:hidden; transition: transform .18s ease, border-color .18s ease, filter .18s ease; animation: floaty 5.5s ease-in-out infinite; } .floatCard::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(500px 220px at 30% 20%, rgba(255,122,47,.16), transparent 60%), radial-gradient(500px 220px at 70% 40%, rgba(140,175,255,.12), transparent 60%), linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 25%, transparent 45%); opacity:.75; pointer-events:none; } .floatCard:hover{ animation-play-state: paused; transform: translateY(-4px) scale(1.01); border-color: rgba(255,204,122,.32); filter: brightness(1.04); } @keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } } .cardTitle{ font-size:18px; font-weight:780; color:#e7edf8; margin:0; position:relative; z-index:1; } .cardSub{ margin:6px 0 0; color: rgba(170,182,204,.86); font-size:13px; position:relative; z-index:1; } .quick{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:50; } .quick a{ width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; text-decoration:none; transition: transform .12s ease, border-color .12s ease, filter .12s ease; } .quick a:hover{ transform: translateY(-2px); border-color: rgba(140,175,255,.38); filter: brightness(1.06); } .quick svg{ width:18px; height:18px; } /* Bottom-left: Logout */ .logoutfabwrap, .stafffabwrap{ position: fixed; left: 16px; bottom: 16px; z-index: 50; } .logoutfab, .stafffab{ width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: rgba(10,14,22,.66); border: 1px solid rgba(255,204,122,.22); box-shadow: 0 16px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(140,175,255,.08) inset; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .16s ease, filter .16s ease, border-color .16s ease; } .logoutfab:hover, .stafffab:hover{ transform: translateY(-2px); border-color: rgba(255,204,122,.36); filter: brightness(1.08); } .logoutfab svg, .logoutfab .pi, .stafffab svg, .stafffab .pi{ width: 20px; height: 20px; } @media (max-width: 420px){ .logoutfabwrap, .stafffabwrap{ left: 12px; bottom: 12px; } .logoutfab, .stafffab{ width: 42px; height: 42px; } } /* Spell animation overlay (Siegelbruch -> Wurmloch) */ .spell{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:999; background: radial-gradient(900px 700px at 50% 45%, rgba(140,175,255,.08), transparent 60%), radial-gradient(820px 640px at 52% 52%, rgba(255,122,47,.06), transparent 65%), rgba(0,0,0,.75); backdrop-filter: blur(6px); overflow:hidden; } .spell.show{ display:flex; animation: spellFadeIn .6s ease-out 1 forwards; } /* Hide content during spell animation, reveal at end */ .spellHidden{ opacity: 0; animation: revealContent 1s ease-out forwards; animation-delay: 3s; } @keyframes revealContent{ 0%{ opacity: 0; transform: translateY(10px); } 100%{ opacity: 1; transform: translateY(0); } } @keyframes spellFadeIn{ 0%{ opacity:0; } 100%{ opacity:1; } } /* Dramatic camera shake at the break moment */ .spell.raging{ animation: cameraShake 1.4s cubic-bezier(.36,.07,.19,.97) 1; animation-delay: 1.8s; } .spell::before{ content:""; position:absolute; inset:-40px; background: radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.20), transparent 60%), radial-gradient(2px 2px at 68% 22%, rgba(255,255,255,.16), transparent 60%), radial-gradient(2px 2px at 84% 64%, rgba(255,255,255,.14), transparent 60%), radial-gradient(1px 1px at 35% 78%, rgba(255,255,255,.18), transparent 60%), radial-gradient(1px 1px at 52% 42%, rgba(255,255,255,.12), transparent 60%), radial-gradient(1px 1px at 20% 58%, rgba(255,255,255,.12), transparent 60%); opacity:.65; filter: blur(.2px); pointer-events:none; } /* Ambient glow that builds up */ .spell::after{ content:""; position:absolute; left:50%; top:50%; width:400px; height:400px; transform: translate(-50%, -50%); border-radius:50%; background: radial-gradient(circle, rgba(255,180,80,.25) 0%, transparent 70%); opacity:0; animation: ambientBuild 4.2s ease-in-out 1 forwards; pointer-events:none; } @keyframes ambientBuild{ 0%,10%{ opacity:0; transform: translate(-50%, -50%) scale(.5); } 30%{ opacity:.6; transform: translate(-50%, -50%) scale(.8); } 50%{ opacity:.9; transform: translate(-50%, -50%) scale(1); } 70%{ opacity:1; transform: translate(-50%, -50%) scale(1.3); } 85%{ opacity:.3; transform: translate(-50%, -50%) scale(2); } 100%{ opacity:0; transform: translate(-50%, -50%) scale(2.5); } } .vortex{ position:absolute; width:min(980px, 140vw); height:min(980px, 140vw); border-radius:50%; opacity:0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 22%, rgba(0,0,0,.28) 23% 32%, rgba(0,0,0,0) 33% 44%, rgba(0,0,0,.32) 45% 56%, rgba(0,0,0,0) 57% 100%), radial-gradient(circle at 50% 50%, rgba(255,180,80,.15) 0%, rgba(140,175,255,.1) 30%, transparent 60%); box-shadow: 0 0 140px rgba(140,175,255,.14), 0 0 180px rgba(255,122,47,.10); filter: blur(.8px); mix-blend-mode: screen; animation: vortexSequence 4.2s ease-in-out 1 forwards; } /* Extra asymmetry layers */ .vortex::before, .vortex::after{ content:""; position:absolute; inset:-8%; border-radius:50%; pointer-events:none; } .vortex::before{ background: radial-gradient(circle at 42% 58%, rgba(255,122,47,.18), transparent 55%), radial-gradient(circle at 62% 38%, rgba(140,175,255,.16), transparent 58%); filter: blur(1.6px); opacity:.0; animation: vortexLayer 4.2s ease-in-out 1 forwards; } .vortex::after{ background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0 10%, transparent 22%), radial-gradient(circle at 55% 47%, rgba(255,204,122,.16) 0 18%, transparent 42%), radial-gradient(circle at 46% 56%, rgba(140,175,255,.16) 0 18%, transparent 42%); mix-blend-mode: screen; filter: blur(2.0px); opacity:0; animation: riftPulse 4.2s ease-in-out 1 forwards; } /* Smoke layer (drifting puffs) */ .smoke{ position:absolute; inset:-90px; z-index:1; pointer-events:none; mix-blend-mode: screen; } .smoke .puff{ position:absolute; border-radius:999px; background: radial-gradient(closest-side, rgba(40,55,80,.0) 0, rgba(40,55,80,.26) 55%, rgba(0,0,0,0) 75%), radial-gradient(closest-side, rgba(255,204,122,.0) 0, rgba(255,204,122,.11) 60%, rgba(0,0,0,0) 78%), radial-gradient(closest-side, rgba(140,175,255,.0) 0, rgba(140,175,255,.12) 62%, rgba(0,0,0,0) 80%); transform: translate3d(0,0,0) rotate(0deg); opacity:.12; animation: smokeDrift 4.2s ease-in-out 1 forwards; } /* Lightning storm */ .storm{ position:absolute; inset:0; z-index:5; pointer-events:none; } .storm::after{ content:""; position:absolute; inset:-20px; background: radial-gradient(800px 520px at 55% 45%, rgba(255,255,255,.14), transparent 58%); opacity:0; animation: stormFlash 4.2s ease-in-out 1 forwards; } .bolt{ position:absolute; width: 220px; height: 520px; opacity:0; filter: drop-shadow(0 0 12px rgba(140,175,255,.35)) drop-shadow(0 0 18px rgba(255,204,122,.18)); animation: boltStrike 4.2s ease-in-out 1 forwards; } .bolt svg{ width:100%; height:100%; } .sealWrap{ position:relative; z-index:2; transform: translateZ(0); width:min(240px, 52vw); height:min(240px, 52vw); display:flex; align-items:center; justify-content:center; } /* Nonlinear fracture lines (seal crack) */ .cracks{ position:absolute; left:50%; top:50%; width:min(320px, 72vw); height:min(320px, 72vw); transform: translate(-50%, -50%); z-index:2; pointer-events:none; opacity:0; } .spell.show .cracks{ opacity:1; } .cracks svg{ width:100%; height:100%; overflow:visible; } .crackPath{ opacity:.92; filter: drop-shadow(0 0 8px rgba(140,175,255,.22)) drop-shadow(0 0 14px rgba(255,204,122,.18)); animation: crackDraw 1.8s ease-out 1 forwards; animation-delay: 2.0s; } .crackPath.glow{ opacity:.35; filter: blur(.2px) drop-shadow(0 0 14px rgba(255,204,122,.18)); } @keyframes crackDraw{ 0%{ stroke-dashoffset: var(--len); opacity:0; } 5%{ opacity:1; } 60%{ stroke-dashoffset: 0; opacity:.9; } 80%{ stroke-dashoffset: 0; opacity:.5; } 100%{ stroke-dashoffset: 0; opacity:0; } } /* Siegelbruch-Glyph (ohne Logo) - mit natürlichem Pulsieren */ .sealGlyph{ width:min(240px, 52vw); height:min(240px, 52vw); border-radius:50%; border:1px solid rgba(255,255,255,.14); background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.55) 0 34%, rgba(0,0,0,.20) 35% 54%, rgba(0,0,0,.50) 55% 64%, rgba(0,0,0,.12) 65% 100%), radial-gradient(circle at 50% 50%, transparent 0 43%, rgba(255,204,122,.20) 44% 46%, transparent 47% 100%), radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(140,175,255,.16) 63% 65%, transparent 66% 100%), conic-gradient(from 90deg, rgba(255,204,122,.00), rgba(255,204,122,.22), rgba(140,175,255,.22), rgba(255,122,47,.18), rgba(255,204,122,.00) ); box-shadow: 0 30px 120px rgba(0,0,0,.68), 0 0 80px rgba(255,204,122,.14), 0 0 95px rgba(140,175,255,.12), inset 0 1px 0 rgba(255,255,255,.08); transform-origin:center; position:relative; animation: sealSequence 4.2s cubic-bezier(.4,0,.2,1) 1 forwards; } .sealGlyph::before, .sealGlyph::after{ content:""; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); opacity:0; width: 14px; height: 82%; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(140,175,255,.92), rgba(255,204,122,.88), rgba(255,255,255,0)); filter: drop-shadow(0 0 10px rgba(140,175,255,.28)) drop-shadow(0 0 16px rgba(255,204,122,.22)); clip-path: polygon(50% 0%, 62% 8%, 44% 18%, 68% 30%, 38% 42%, 60% 54%, 34% 66%, 58% 78%, 42% 92%, 52% 100%, 32% 90%, 56% 76%, 40% 62%, 64% 48%, 42% 34%, 60% 22%, 46% 10%); animation: boltFlicker 4.2s ease-in-out 1 forwards; pointer-events:none; } .sealGlyph::before{ transform: translate(-50%, -50%) rotate(18deg); } .sealGlyph::after{ transform: translate(-50%, -50%) rotate(108deg); height: 72%; width: 12px; } /* Portal Icon Link im Spell */ .sealPortalLink{ display: flex; align-items: center; justify-content: center; width: min(200px, 50vw); height: min(200px, 50vw); border-radius: 50%; background: transparent; border: none; cursor: pointer; text-decoration: none; animation: portalAppear 3.5s ease-out forwards; opacity: 0; } .sealPortalIcon{ width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(255,204,122,.6)) drop-shadow(0 0 60px rgba(255,204,122,.4)) drop-shadow(0 0 90px rgba(255,180,100,.3)); animation: portalBreak 3.5s ease-out forwards; } @keyframes portalAppear{ 0%{ opacity: 0; transform: scale(0.5); } 20%{ opacity: 1; transform: scale(1); } 60%{ opacity: 1; transform: scale(1.05); } 80%{ opacity: 1; transform: scale(1); } 90%{ opacity: 0.8; transform: scale(1.1); } 100%{ opacity: 0; transform: scale(1.3); } } @keyframes portalBreak{ 0%, 80%{ filter: drop-shadow(0 0 30px rgba(255,204,122,.6)) drop-shadow(0 0 60px rgba(255,204,122,.4)); } 85%{ filter: drop-shadow(0 0 50px rgba(255,180,100,.9)) drop-shadow(0 0 80px rgba(255,150,50,.7)); } 95%{ filter: drop-shadow(0 0 80px rgba(255,200,100,1)) drop-shadow(0 0 120px rgba(255,180,80,.8)) brightness(1.5); } 100%{ filter: drop-shadow(0 0 100px rgba(255,220,150,.3)) brightness(2); opacity: 0; } } .spell.hidden{ opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out; } /* Stein-Partikel Explosion */ .stoneParticles{ position: absolute; inset: 0; pointer-events: none; z-index: 10; } .stoneParticle{ position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px; opacity: 0; transform: translate(-50%, -50%); animation: stoneExplode 1.5s cubic-bezier(.25,.46,.45,.94) forwards; animation-delay: 2.8s; } /* Verschiedene Partikel-Farben und Richtungen */ .stoneParticle:nth-child(6n+1){ background: #4a3c2a; width: 10px; height: 6px; } .stoneParticle:nth-child(6n+2){ background: #5c4d3a; width: 6px; height: 8px; } .stoneParticle:nth-child(6n+3){ background: #3d3530; width: 12px; height: 5px; } .stoneParticle:nth-child(6n+4){ background: #6b5a42; width: 7px; height: 7px; } .stoneParticle:nth-child(6n+5){ background: #8b7355; width: 9px; height: 4px; } .stoneParticle:nth-child(6n+6){ background: #d4a855; width: 5px; height: 5px; box-shadow: 0 0 8px rgba(255,180,80,.6); } /* Explosion Richtungen - 60 Partikel */ .stoneParticle:nth-child(1){ --tx: -180px; --ty: -120px; --r: 45deg; } .stoneParticle:nth-child(2){ --tx: 150px; --ty: -140px; --r: -30deg; } .stoneParticle:nth-child(3){ --tx: -120px; --ty: 160px; --r: 120deg; } .stoneParticle:nth-child(4){ --tx: 170px; --ty: 130px; --r: -60deg; } .stoneParticle:nth-child(5){ --tx: -200px; --ty: 20px; --r: 90deg; } .stoneParticle:nth-child(6){ --tx: 190px; --ty: -30px; --r: -15deg; } .stoneParticle:nth-child(7){ --tx: -80px; --ty: -190px; --r: 75deg; } .stoneParticle:nth-child(8){ --tx: 100px; --ty: 180px; --r: -90deg; } .stoneParticle:nth-child(9){ --tx: -160px; --ty: -80px; --r: 30deg; } .stoneParticle:nth-child(10){ --tx: 140px; --ty: 90px; --r: -45deg; } .stoneParticle:nth-child(11){ --tx: -220px; --ty: -40px; --r: 60deg; } .stoneParticle:nth-child(12){ --tx: 210px; --ty: 50px; --r: -120deg; } .stoneParticle:nth-child(13){ --tx: -50px; --ty: -210px; --r: 15deg; } .stoneParticle:nth-child(14){ --tx: 60px; --ty: 200px; --r: -75deg; } .stoneParticle:nth-child(15){ --tx: -190px; --ty: 100px; --r: 135deg; } .stoneParticle:nth-child(16){ --tx: 180px; --ty: -100px; --r: -135deg; } .stoneParticle:nth-child(17){ --tx: -100px; --ty: 170px; --r: 105deg; } .stoneParticle:nth-child(18){ --tx: 120px; --ty: -160px; --r: -105deg; } .stoneParticle:nth-child(19){ --tx: -240px; --ty: 60px; --r: 150deg; } .stoneParticle:nth-child(20){ --tx: 230px; --ty: -70px; --r: -150deg; } .stoneParticle:nth-child(21){ --tx: -70px; --ty: -230px; --r: 20deg; } .stoneParticle:nth-child(22){ --tx: 80px; --ty: 220px; --r: -20deg; } .stoneParticle:nth-child(23){ --tx: -170px; --ty: -130px; --r: 55deg; } .stoneParticle:nth-child(24){ --tx: 160px; --ty: 140px; --r: -55deg; } .stoneParticle:nth-child(25){ --tx: -130px; --ty: 150px; --r: 110deg; } .stoneParticle:nth-child(26){ --tx: 140px; --ty: -150px; --r: -110deg; } .stoneParticle:nth-child(27){ --tx: -210px; --ty: -90px; --r: 40deg; } .stoneParticle:nth-child(28){ --tx: 200px; --ty: 80px; --r: -40deg; } .stoneParticle:nth-child(29){ --tx: -40px; --ty: 240px; --r: 95deg; } .stoneParticle:nth-child(30){ --tx: 50px; --ty: -240px; --r: -95deg; } .stoneParticle:nth-child(31){ --tx: -250px; --ty: 0; --r: 180deg; } .stoneParticle:nth-child(32){ --tx: 250px; --ty: 10px; --r: 0deg; } .stoneParticle:nth-child(33){ --tx: 0; --ty: -250px; --r: 90deg; } .stoneParticle:nth-child(34){ --tx: 10px; --ty: 250px; --r: -90deg; } .stoneParticle:nth-child(35){ --tx: -180px; --ty: 180px; --r: 135deg; } .stoneParticle:nth-child(36){ --tx: 180px; --ty: -180px; --r: -135deg; } .stoneParticle:nth-child(37){ --tx: -200px; --ty: -150px; --r: 35deg; } .stoneParticle:nth-child(38){ --tx: 190px; --ty: 160px; --r: -35deg; } .stoneParticle:nth-child(39){ --tx: -150px; --ty: 200px; --r: 125deg; } .stoneParticle:nth-child(40){ --tx: 160px; --ty: -190px; --r: -125deg; } .stoneParticle:nth-child(41){ --tx: -90px; --ty: -200px; --r: 25deg; } .stoneParticle:nth-child(42){ --tx: 100px; --ty: 210px; --r: -25deg; } .stoneParticle:nth-child(43){ --tx: -230px; --ty: 120px; --r: 145deg; } .stoneParticle:nth-child(44){ --tx: 220px; --ty: -110px; --r: -145deg; } .stoneParticle:nth-child(45){ --tx: -110px; --ty: -180px; --r: 50deg; } .stoneParticle:nth-child(46){ --tx: 120px; --ty: 170px; --r: -50deg; } .stoneParticle:nth-child(47){ --tx: -170px; --ty: 140px; --r: 115deg; } .stoneParticle:nth-child(48){ --tx: 180px; --ty: -130px; --r: -115deg; } .stoneParticle:nth-child(49){ --tx: -140px; --ty: -170px; --r: 65deg; } .stoneParticle:nth-child(50){ --tx: 130px; --ty: 180px; --r: -65deg; } .stoneParticle:nth-child(51){ --tx: -60px; --ty: 230px; --r: 100deg; } .stoneParticle:nth-child(52){ --tx: 70px; --ty: -220px; --r: -100deg; } .stoneParticle:nth-child(53){ --tx: -220px; --ty: -60px; --r: 70deg; } .stoneParticle:nth-child(54){ --tx: 210px; --ty: 70px; --r: -70deg; } .stoneParticle:nth-child(55){ --tx: -30px; --ty: -260px; --r: 10deg; } .stoneParticle:nth-child(56){ --tx: 40px; --ty: 260px; --r: -10deg; } .stoneParticle:nth-child(57){ --tx: -260px; --ty: 40px; --r: 170deg; } .stoneParticle:nth-child(58){ --tx: 260px; --ty: -30px; --r: -170deg; } .stoneParticle:nth-child(59){ --tx: -190px; --ty: -190px; --r: 45deg; } .stoneParticle:nth-child(60){ --tx: 190px; --ty: 190px; --r: -45deg; } /* Verschiedene Delays für natürliche Explosion */ .stoneParticle:nth-child(odd){ animation-delay: 2.75s; } .stoneParticle:nth-child(even){ animation-delay: 2.85s; } .stoneParticle:nth-child(3n){ animation-delay: 2.8s; } .stoneParticle:nth-child(5n){ animation-delay: 2.9s; } .stoneParticle:nth-child(7n){ animation-delay: 2.7s; } @keyframes stoneExplode{ 0%{ opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1); } 20%{ opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) rotate(calc(var(--r) * 0.5)) scale(1.2); } 100%{ opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0.3); } } .shards{ position:absolute; inset:0; pointer-events:none; z-index:3; } .shard{ position:absolute; left:50%; top:50%; width:10px; height:4px; border-radius:2px; background: linear-gradient(90deg, rgba(255,204,122,.85), rgba(140,175,255,.55)); box-shadow: 0 0 18px rgba(255,204,122,.25); opacity:0; transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); animation: shardFly 1.2s cubic-bezier(.25,.46,.45,.94) 1 forwards; animation-delay: 2.4s; } .sparks{ position:absolute; inset:0; pointer-events:none; z-index:4; } .spell .spark{ position:absolute; left:50%; top:50%; width:3px; height:3px; border-radius:50%; background: var(--ember2); box-shadow: 0 0 14px rgba(255,204,122,.70); opacity:0; transform: translate3d(-50%, -50%, 0); animation: spark 1.1s ease-out infinite; } @keyframes sealSequence{ /* Phase 1: Erscheinen mit sanftem Atmen */ 0%{ opacity:0; transform: scale(.5) rotate(-8deg); filter: blur(4px) brightness(.7); } 8%{ opacity:.6; transform: scale(.85) rotate(-2deg); filter: blur(1px) brightness(.9); } 15%{ opacity:1; transform: scale(1) rotate(0deg); filter: blur(0) brightness(1); } /* Phase 2: Pulsierendes Atmen - Energie sammelt sich */ 22%{ transform: scale(1.02) rotate(.5deg); filter: brightness(1.05); } 28%{ transform: scale(.98) rotate(-.5deg); filter: brightness(1); } 34%{ transform: scale(1.04) rotate(1deg); filter: brightness(1.1); } 40%{ transform: scale(.97) rotate(-1deg); filter: brightness(1.02); } /* Phase 3: Intensivierung - kurz vor dem Bruch */ 48%{ transform: scale(1.08) rotate(2deg); filter: brightness(1.25); box-shadow: 0 0 60px rgba(255,180,80,.4), 0 0 120px rgba(140,175,255,.3); } 52%{ transform: scale(1.02) rotate(-1deg); filter: brightness(1.15); } 56%{ transform: scale(1.15) rotate(4deg); filter: brightness(1.5); box-shadow: 0 0 80px rgba(255,180,80,.6), 0 0 150px rgba(140,175,255,.4); } /* Phase 4: Der Bruch */ 62%{ transform: scale(1.25) rotate(-8deg); filter: blur(2px) brightness(2); } 70%{ opacity:.5; transform: scale(.7) rotate(25deg); filter: blur(6px) brightness(1.2); } 82%{ opacity:.15; transform: scale(.4) rotate(50deg); filter: blur(12px) brightness(.8); } 100%{ opacity:0; transform: scale(.2) rotate(80deg); filter: blur(16px); } } @keyframes boltFlicker{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.8); filter: brightness(.8); } /* Erstes Aufflackern */ 45%{ opacity:0; } 48%{ opacity:.9; filter: brightness(1.4); } 50%{ opacity:.2; } 52%{ opacity:1; filter: brightness(1.6); } 54%{ opacity:.15; } /* Hauptblitz */ 56%{ opacity:1; transform: translate(-50%,-50%) scale(1.1); filter: brightness(2); } 60%{ opacity:.3; } 64%{ opacity:.85; filter: brightness(1.5); } 68%{ opacity:.1; } 72%{ opacity:.6; } 80%{ opacity:0; } 100%{ opacity:0; } } @keyframes crackFlash{ 0%,45%{ opacity:0; transform: scale(.9); } 52%{ opacity:.7; transform: scale(1); } 58%{ opacity:1; transform: scale(1.05); filter: brightness(1.3); } 68%{ opacity:.4; transform: scale(1.15); } 85%{ opacity:.1; transform: scale(1.4); } 100%{ opacity:0; transform: scale(1.8); } } @keyframes vortexSequence{ 0%,35%{ opacity:0; transform: scale(.3) rotate(0deg); filter: blur(2px); } 45%{ opacity:.5; transform: scale(.5) rotate(60deg); } 55%{ opacity:.85; transform: scale(.7) rotate(140deg); filter: blur(.5px); } 65%{ opacity:1; transform: scale(.9) rotate(260deg); } 75%{ opacity:.9; transform: scale(1.2) rotate(400deg); } 88%{ opacity:.4; transform: scale(1.8) rotate(560deg); filter: blur(1.5px); } 100%{ opacity:0; transform: scale(2.5) rotate(720deg); filter: blur(3px); } } @keyframes vortexLayer{ 0%,35%{ opacity:0; transform: scale(.25) rotate(0deg); } 48%{ opacity:.4; transform: scale(.55) rotate(80deg); } 60%{ opacity:.75; transform: scale(.85) rotate(200deg); } 72%{ opacity:.9; transform: scale(1.2) rotate(380deg); } 85%{ opacity:.5; transform: scale(1.8) rotate(580deg); } 100%{ opacity:0; transform: scale(2.6) rotate(800deg); } } @keyframes riftPulse{ 0%,38%{ opacity:0; transform: scale(.35); } 50%{ opacity:.5; transform: scale(.7); } 62%{ opacity:.9; transform: scale(1); } 75%{ opacity:1; transform: scale(1.25); } 90%{ opacity:.3; transform: scale(1.8); } 100%{ opacity:0; transform: scale(2.2); } } @keyframes smokeDrift{ 0%,38%{ opacity:0; transform: translate3d(0,0,0) rotate(0deg) scale(.8); } 50%{ opacity:.7; } 65%{ opacity:1; transform: translate3d(calc(var(--drx) * .5), calc(var(--dry) * .5), 0) rotate(calc(var(--rot) * .5)) scale(1); } 85%{ opacity:.5; transform: translate3d(var(--drx), var(--dry), 0) rotate(var(--rot)) scale(1.15); } 100%{ opacity:0; transform: translate3d(calc(var(--drx) * 1.3), calc(var(--dry) * 1.3), 0) rotate(calc(var(--rot) * 1.2)) scale(1.4); } } @keyframes boltStrike{ 0%,50%{ opacity:0; } 54%{ opacity:.8; } 57%{ opacity:.1; } 60%{ opacity:1; } 63%{ opacity:.2; } 67%{ opacity:.9; } 72%{ opacity:.15; } 78%{ opacity:.5; } 88%{ opacity:.1; } 100%{ opacity:0; } } @keyframes stormFlash{ 0%,50%{ opacity:0; } 55%{ opacity:.4; } 58%{ opacity:.1; } 62%{ opacity:.7; } 66%{ opacity:.15; } 72%{ opacity:.3; } 100%{ opacity:0; } } @keyframes cameraShake{ 0%{ transform: translate3d(0,0,0) rotate(0deg); } 8%{ transform: translate3d(-3px, 2px, 0) rotate(-.3deg); } 16%{ transform: translate3d(4px, -2px, 0) rotate(.4deg); } 24%{ transform: translate3d(-4px, -3px, 0) rotate(-.5deg); } 32%{ transform: translate3d(3px, 4px, 0) rotate(.3deg); } 40%{ transform: translate3d(-2px, 2px, 0) rotate(-.2deg); } 50%{ transform: translate3d(3px, -3px, 0) rotate(.4deg); } 60%{ transform: translate3d(-3px, 1px, 0) rotate(-.3deg); } 72%{ transform: translate3d(2px, -2px, 0) rotate(.2deg); } 84%{ transform: translate3d(-1px, 1px, 0) rotate(-.1deg); } 100%{ transform: translate3d(0,0,0) rotate(0deg); } } @keyframes shardFly{ 0%{ opacity:0; transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(.5); } 8%{ opacity:1; transform: translate3d(-50%, -50%, 0) rotate(5deg) scale(.8); } 100%{ opacity:0; transform: translate3d(calc(-50% + var(--dx)), calc(-50% + var(--dy)), 0) rotate(var(--rot)) scale(var(--s)); } } @keyframes spark{ 0%{ opacity:0; transform: translate3d(-50%, -50%, 0) scale(.5); } 10%{ opacity:1; } 100%{ opacity:0; transform: translate3d(calc(-50% + var(--dx)), calc(-50% + var(--dy)), 0) scale(1.4); } } /* Past Tales: Orbit / Ellipse carousel */ .orbitWrap{ position:relative; height: 360px; margin-top: 4px; border:1px solid rgba(255,255,255,.10); border-radius:18px; background: rgba(0,0,0,.14); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.30); } /* Mystischer Nebel an den Rändern */ .orbitWrap::before, .orbitWrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 10; pointer-events: none; } .orbitWrap::before { left: 0; background: linear-gradient(90deg, rgba(10,12,20,.95) 0%, rgba(10,12,20,.7) 30%, transparent 100%); } .orbitWrap::after { right: 0; background: linear-gradient(-90deg, rgba(10,12,20,.95) 0%, rgba(10,12,20,.7) 30%, transparent 100%); } .orbitAura{ position:absolute; inset:0; background: radial-gradient(520px 220px at 50% 32%, rgba(255,122,47,.12), transparent 62%), radial-gradient(520px 260px at 48% 36%, rgba(140,175,255,.10), transparent 66%), radial-gradient(900px 420px at 50% 42%, rgba(255,255,255,.03), transparent 70%); filter: blur(6px); opacity:.9; pointer-events:none; } .orbit{ position:absolute; inset:0; } .orbitItem{ position:absolute; left:50%; top:50%; width: min(280px, 65%); text-decoration:none; transform: translate(-50%, -50%); transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .4s ease, filter .4s ease; } /* Aktive Karte: Mystisches Schweben */ .orbitItem.front .orbitInner { animation: orbitFloat 3s ease-in-out infinite; } @keyframes orbitFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } /* Glow-Pulse für aktive Karte */ .orbitItem.front .orbitInner::after { content: ""; position: absolute; inset: -3px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,122,47,.25), rgba(140,175,255,.15), rgba(255,204,122,.2)); z-index: -1; animation: orbitGlow 2.5s ease-in-out infinite; filter: blur(10px); } @keyframes orbitGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.03); } } /* Dezente Lichtpunkte */ .orbitItem.front::before { content: "✦"; position: absolute; top: -5px; right: 15%; font-size: 8px; color: rgba(255,204,122,.6); pointer-events: none; z-index: 10; animation: sparkle 2s ease-in-out infinite; } @keyframes sparkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* Mobile: kompakteres Karussell */ @media (max-width: 560px){ .orbitWrap{ height: 160px; } .orbitWrap::before, .orbitWrap::after { width: 50px; } .orbitItem{ width: min(300px, 75%); } .orbitNav{ width:36px; height:36px; border-radius:12px; } .orbitNav.prev{ left:6px; } .orbitNav.next{ right:6px; } } .orbitInner{ border:1px solid rgba(180,190,210,.14); border-radius:18px; background: rgba(10,12,20,.58); padding:16px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 70px rgba(0,0,0,.42); position:relative; overflow:hidden; text-align:center; } .orbitInner::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(560px 240px at 30% 20%, rgba(255,122,47,.16), transparent 60%), radial-gradient(560px 240px at 70% 50%, rgba(140,175,255,.12), transparent 62%), linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 22%, transparent 46%); opacity:.75; pointer-events:none; } .orbitTitle{ font-size:18px; font-weight:820; color:#e7edf8; position:relative; z-index:1; text-shadow: 0 14px 34px rgba(0,0,0,.55); } .orbitMeta{ position:relative; z-index:1; margin-top:6px; color: rgba(170,182,204,.86); font-size:13px; } .orbitMeta .sep{ opacity:.65; margin:0 .35rem; } .orbitNav{ position:absolute; top:50%; transform: translateY(-50%); width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07); color: rgba(230,238,250,.92); display:inline-flex; align-items:center; justify-content:center; transition: transform .12s ease, border-color .12s ease, filter .12s ease; z-index:5; } .orbitNav:hover{ border-color: rgba(255,204,122,.35); filter: brightness(1.06); } .orbitNav:active{ transform: translateY(-50%) scale(.98); } .orbitNav.prev{ left:12px; } .orbitNav.next{ right:12px; } .orbitNav svg{ width:18px; height:18px; } .smallhint{ margin-top:10px; font-size:12px; color: rgba(170,182,204,.78); text-align:center; position:relative; z-index:2; } /* Past Tales: Book view */ .book{ position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; background: rgba(0,0,0,.14); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 90px rgba(0,0,0,.38); } .bookSpine{ position:absolute; left:0; top:0; bottom:0; width:14px; background: linear-gradient(180deg, rgba(255,204,122,.18), rgba(0,0,0,.12)); border-right:1px solid rgba(255,255,255,.10); opacity:.9; } .bookPages{ padding: 14px 14px 16px 18px; } .page{ border:1px solid rgba(255,255,255,.10); border-radius:16px; background: rgba(10,12,20,.54); padding:14px 14px; margin: 0 0 12px 0; position:relative; overflow:hidden; } .page::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(560px 240px at 22% 18%, rgba(255,122,47,.14), transparent 60%), radial-gradient(560px 240px at 72% 48%, rgba(140,175,255,.10), transparent 62%), repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 3px); opacity:.65; pointer-events:none; } .pageHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative; z-index:1; } .pageTitle{ font-size:16px; font-weight:820; color:#e7edf8; margin:0; } .pageMeta{ margin-top:2px; color: rgba(170,182,204,.82); font-size:12px; } .pageActions{ display:flex; align-items:center; gap:8px; } .mini{ width:34px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); display:inline-flex; align-items:center; justify-content:center; color: rgba(230,238,250,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: transform .12s ease, border-color .12s ease, filter .12s ease; } .mini:hover{ transform: translateY(-1px); border-color: rgba(255,204,122,.35); filter: brightness(1.06); } .mini svg{ width:16px; height:16px; } .pageBody{ position:relative; z-index:1; margin-top:10px; white-space:normal; color: rgba(230,238,250,.90); } @media (prefers-reduced-motion: reduce){ .spell, .vortex, .seal, .sealWrap::before, .shard, .smoke .puff, .bolt, .storm::after{ animation: none !important; } } /* Mobile tightening + swipe-first carousel UX */ @media (max-width: 560px){ .wrap{ padding:12px; } .panel{ padding:16px; } .orbitWrap{ margin-top:14px; } .orbitNav{ display:none !important; } .smallhint{ padding:0 6px; } } /* ============================ Rituals / Progress / Scoreboard ============================ */ .kbd{ display:inline-flex; align-items:center; justify-content:center; padding:.12rem .38rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); font-weight:800; letter-spacing:.05em; color:#e7edf8; } /* Cadence color tokens */ .cad-daily{ --cad1: rgba(90,255,180,.78); --cad2: rgba(80,180,120,.55); } .cad-almost-daily{ --cad1: rgba(150,230,160,.75); --cad2: rgba(100,180,100,.50); } .cad-weekly{ --cad1: rgba(140,175,255,.80); --cad2: rgba(80,120,255,.55); } .cad-monthlyplus{ --cad1: rgba(190,120,255,.78); --cad2: rgba(120,80,255,.55); } .cad-monthly{ --cad1: rgba(255,204,122,.78); --cad2: rgba(255,122,47,.55); } .cad-sporadic{ --cad1: rgba(170,182,204,.55); --cad2: rgba(120,130,150,.42); } .badgeCadence{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); font-size:12px; color:#e7edf8; } .ritualCreate{ border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); border-radius:16px; padding:14px 14px 12px; margin-bottom:14px; position:relative; z-index:2; } .ritualCreateTitle{ font-weight:780; color:#e7edf8; margin-bottom:8px; } .ritualHint{ margin-top:8px; color: rgba(170,182,204,.86); font-size:13px; } .ritualGrid{ display:grid; grid-template-columns: 1fr; gap:12px; position:relative; z-index:2; } /* Row container: Card + Settings Button */ .ritualRow{ display:flex; align-items:center; gap:8px; } .ritualCard{ border:1px solid rgba(255,255,255,.12); background: rgba(10,12,20,.6); border-radius:14px; padding:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.3); position:relative; overflow:hidden; flex:1; transition: transform .2s ease, box-shadow .2s ease; } .ritualCard:hover { transform: translateY(-2px); } /* Rang-basierte Glow-Effekte */ .ritualCard.rank-none { border-color: rgba(140,150,170,.25); } .ritualCard.rank-novice { border-color: rgba(100,180,130,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 25px rgba(100,180,130,.15); } .ritualCard.rank-novice::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(100,180,130,.1), transparent 60%); pointer-events: none; border-radius: 14px; } .ritualCard.rank-adept { border-color: rgba(60,220,130,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 28px rgba(60,220,130,.2); } .ritualCard.rank-adept::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(60,220,130,.12), transparent 55%); pointer-events: none; border-radius: 14px; } .ritualCard.rank-expert { border-color: rgba(80,160,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 30px rgba(80,160,255,.2); } .ritualCard.rank-expert::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(80,160,255,.15), transparent 55%), radial-gradient(ellipse at 70% 100%, rgba(100,180,255,.08), transparent 50%); pointer-events: none; border-radius: 14px; } .ritualCard.rank-master { border-color: rgba(180,100,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 35px rgba(180,100,255,.25); animation: ritualMasterPulse 3s ease-in-out infinite; } .ritualCard.rank-master::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 0%, rgba(180,100,255,.18), transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(140,80,220,.12), transparent 45%); pointer-events: none; border-radius: 14px; } @keyframes ritualMasterPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 35px rgba(180,100,255,.25); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 40px rgba(180,100,255,.35); } } .ritualCard.rank-grandmaster { border-color: rgba(255,160,60,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 38px rgba(255,160,60,.28); animation: ritualGrandmasterGlow 2.8s ease-in-out infinite; } .ritualCard.rank-grandmaster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(255,180,80,.18), transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(255,140,50,.12), transparent 45%); pointer-events: none; border-radius: 14px; } @keyframes ritualGrandmasterGlow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 38px rgba(255,160,60,.28); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 45px rgba(255,160,60,.38); } } .ritualCard.rank-legendary { border-color: rgba(255,215,80,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 40px rgba(255,215,80,.3), 0 0 60px rgba(255,180,60,.15); animation: ritualLegendaryGlow 2.5s ease-in-out infinite; } .ritualCard.rank-legendary::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(255,220,100,.2), transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(255,180,60,.15), transparent 45%), linear-gradient(135deg, rgba(255,230,150,.05) 0%, transparent 50%); pointer-events: none; border-radius: 14px; } @keyframes ritualLegendaryGlow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 40px rgba(255,215,80,.3), 0 0 60px rgba(255,180,60,.15); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 50px rgba(255,215,80,.4), 0 0 80px rgba(255,180,60,.2); } } /* small neutral delete X (top-right) */ /* Single Line Ritual Layout */ .ritualCompactRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1; height:32px; } /* Settings Button outside card, small and centered */ .ritualSettingsBtn{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; border:none; background:transparent; color: rgba(180,190,210,.45); cursor:pointer; transition: all .2s ease; flex-shrink:0; } .ritualSettingsBtn svg{ width:14px; height:14px; } .ritualSettingsBtn:hover{ color: rgba(230,238,250,.75); background: rgba(255,255,255,.04); } .ritualSettingsBtn:active{ transform: scale(0.9); } /* Menu Button with Pulse and Glow */ .ritualMenuBtn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:10px; border:none; background:transparent; color: rgba(255,204,122,.7); cursor:pointer; transition: all .2s ease; flex-shrink:0; animation: ritualPulse 2.8s ease-in-out infinite; filter: drop-shadow(0 0 2px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(255,204,122,.4)) drop-shadow(0 0 14px rgba(255,122,47,.25)); } @keyframes ritualPulse{ 0%, 100%{ opacity:0.55; transform: scale(0.85); filter: drop-shadow(0 0 2px rgba(0,0,0,.75)) drop-shadow(0 0 6px rgba(255,204,122,.35)) drop-shadow(0 0 10px rgba(255,122,47,.2)); } 50%{ opacity:1; transform: scale(1.18); filter: drop-shadow(0 0 3px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,204,122,1)) drop-shadow(0 0 38px rgba(255,122,47,.7)); } } .ritualMenuBtn svg{ width:24px; height:24px; } .ritualMenuBtn:hover{ color: rgba(255,204,122,1); background: rgba(255,204,122,.12); animation: none; transform: scale(1.2); filter: drop-shadow(0 0 3px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(255,204,122,1)) drop-shadow(0 0 42px rgba(255,122,47,.75)); } .ritualMenuBtn:active{ transform: scale(0.95); } .ritualMenuBtn:disabled{ opacity:.3; cursor:not-allowed; animation: none; filter: none; } .ritualMenuBtn:disabled:hover{ transform: none; background:transparent; color: rgba(255,204,122,.75); filter: none; } /* Ritual Modal */ .ritualModal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; } .ritualModalBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.75); backdrop-filter: blur(8px); animation: fadeIn .3s ease; } .ritualModalContent{ position:relative; z-index:1; width:min(480px, 100%); max-height:90vh; overflow-y:auto; background: rgba(12,14,22,.98); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); animation: modalSlideIn .3s ease; } @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes modalSlideIn{ from{ transform: translateY(-30px); opacity:0; } to{ transform: translateY(0); opacity:1; } } .ritualModalHeader{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08); } .ritualModalHeader h3{ margin:0; font-size:16px; font-weight:700; color:#e7edf8; } .ritualModalClose{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.2); color: rgba(230,238,250,.88); font-size:18px; font-weight:700; cursor:pointer; transition: all .2s ease; } .ritualModalClose:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); } .ritualModalBody{ padding:18px 20px; } .ritualModalSection{ margin-bottom:20px; } .ritualModalSection:last-child{ margin-bottom:0; } .ritualModalSectionTitle{ font-size:13px; font-weight:600; color: rgba(180,190,210,.75); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; } .ritualModalDivider{ height:1px; background: rgba(255,255,255,.06); margin:20px 0; } .ritualModalForm{ display:flex; flex-direction:column; } .ritualCard::before{ content:""; position:absolute; inset:-1px; /* Neutral sheen only (no cadence color in the card background) */ background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 25%, transparent 45%); opacity:.25; pointer-events:none; } /* Cadence color: border only */ .ritualCard.cad-daily, .ritualCard.cad-almost-daily, .ritualCard.cad-weekly, .ritualCard.cad-monthlyplus, .ritualCard.cad-monthly, .ritualCard.cad-sporadic{ /* Keep the normal card border, cadence is shown as a fading rim */ border-color: rgba(255,255,255,.12); } /* Cadence rim: subtle fade into the normal border color */ .ritualCard.cad-daily::after, .ritualCard.cad-almost-daily::after, .ritualCard.cad-weekly::after, .ritualCard.cad-monthlyplus::after, .ritualCard.cad-monthly::after, .ritualCard.cad-sporadic::after{ content:""; position:absolute; inset:0; border-radius:18px; padding:1px; background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, var(--cad1) 45%, rgba(255,255,255,.10) 100% ); opacity:.75; pointer-events:none; /* show only the border area */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .ritualOff{ opacity:.55; filter: grayscale(.2); } .ritualHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; z-index:1; } .ritualHeadContent{ min-width:0; flex:1; } .ritualName{ flex:1; min-width:0; font-size:14px; font-weight:500; color:#e7edf8; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ritualMeta{ display:flex; gap:.5rem; flex-wrap:nowrap; margin-top:4px; align-items:center; } .ritualHintInline{ font-size:11px; color: rgba(170,182,204,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ritualHintLine{ margin-top:8px; color: rgba(230,238,250,.88); font-size:13px; position:relative; z-index:1; } .ritualActions{ display:flex; gap:.55rem; flex-wrap:wrap; margin-top:10px; position:relative; z-index:1; } .ritualTime, .ritualEdit{ margin-top:10px; } /* Ritual Mobile Responsive */ @media (max-width: 560px){ .ritualRow{ gap:6px; } .ritualCard{ padding:12px; } .ritualCompactRow{ gap:8px; height:28px; } .ritualName{ font-size:13px; } .ritualMenuBtn{ width:28px; height:28px; } .ritualMenuBtn svg{ width:20px; height:20px; } .ritualSettingsBtn{ width:22px; height:22px; } .ritualSettingsBtn svg{ width:13px; height:13px; } .ritualModalContent{ width:95%; max-width:none; margin:10px; } } /* ===================================================== RITUAL XP RANK SYSTEM Fließende Farbübergänge: Links aktuelle Farbe, Rechts nächste Stufe angedeutet basierend auf Progress ===================================================== */ /* XP Badge neben dem Ritual-Namen - ohne Border, cleaner Look */ .ritualXpBadge{ display:inline-flex; align-items:center; justify-content:center; margin-left:8px; padding:2px 7px; font-size:10px; font-weight:600; border-radius:5px; background: transparent; border:none; color: rgba(180,190,210,.55); vertical-align:middle; transition: all .3s ease; } /* Rang-Farben Definitionen Reihenfolge: None(Grau) → Novice(Grau-Grün) → Adept(Grün) → Expert(Blau) → Master(Violett) → Grandmaster(Orange) → Legendary(Gold) */ :root{ /* None - Grau */ --rank-none: 120, 130, 145; /* Novice - Grau-Grün Übergang */ --rank-novice: 100, 180, 130; /* Adept - Grün */ --rank-adept: 60, 220, 130; /* Expert - Blau */ --rank-expert: 80, 160, 255; /* Master - Violett */ --rank-master: 180, 100, 255; /* Grandmaster - Orange */ --rank-grandmaster: 255, 160, 60; /* Legendary - Gold */ --rank-legendary: 255, 215, 80; } /* Basis für alle Rang-Karten */ .ritualCard[data-rank]{ border-color: transparent; position:relative; transition: box-shadow .4s ease, border-color .4s ease; } /* Entferne alte Cadence ::after pseudo-element für Rang-Karten */ /* Rang-Glow wird jetzt über .rank-* Klassen gesteuert */ /* Neue Rang-Border mit ::before - Gradient von links (aktuell) nach rechts (nächste Stufe) DEUTLICH SICHTBARER: Dickere Border (3px), höhere Opacity */ .ritualCard[data-rank]::before{ content:""; position:absolute; inset:-1px; border-radius:18px; padding:3px; /* Dickere Border */ pointer-events:none; z-index:0; transition: opacity .4s ease, background .4s ease; /* Mask für Border-Effekt */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ===== RANK: NONE (0 XP) - Grau, zeigt Novice-Grün rechts an ===== */ .ritualCard.rank-none{ border:1px solid rgba(120, 130, 145, 0.3); } .ritualCard.rank-none::before{ background: linear-gradient(90deg, rgba(var(--rank-none), 0.6) 0%, rgba(var(--rank-none), 0.5) 65%, rgba(var(--rank-novice), 0.25) 100% ); opacity: 0.7; } .ritualCard.rank-none .ritualXpBadge{ color: rgba(140, 150, 165, 0.6); } /* ===== RANK: NOVICE (1-99 XP) - Grau→Grün, zeigt Adept-Grün rechts ===== */ /* Progress 0% = fast nur Grau, Progress 100% = volles Grün mit Adept-Hint */ /* DEUTLICH SICHTBARER: Höhere Opacity, klarere Farbübergänge */ .ritualCard.rank-novice.rank-p0::before, .ritualCard.rank-novice.rank-p5::before{ background: linear-gradient(90deg, rgba(120, 140, 145, 0.75) 0%, rgba(115, 155, 142, 0.65) 55%, rgba(100, 175, 135, 0.4) 80%, rgba(var(--rank-adept), 0.2) 100% ); opacity: 0.7; } .ritualCard.rank-novice.rank-p10::before, .ritualCard.rank-novice.rank-p15::before{ background: linear-gradient(90deg, rgba(115, 155, 142, 0.8) 0%, rgba(105, 170, 138, 0.7) 50%, rgba(90, 190, 132, 0.5) 75%, rgba(var(--rank-adept), 0.28) 100% ); opacity: 0.75; } .ritualCard.rank-novice.rank-p20::before, .ritualCard.rank-novice.rank-p25::before{ background: linear-gradient(90deg, rgba(110, 170, 138, 0.82) 0%, rgba(95, 185, 133, 0.72) 45%, rgba(80, 200, 130, 0.55) 72%, rgba(var(--rank-adept), 0.32) 100% ); opacity: 0.78; } .ritualCard.rank-novice.rank-p30::before, .ritualCard.rank-novice.rank-p35::before{ background: linear-gradient(90deg, rgba(100, 180, 135, 0.85) 0%, rgba(88, 195, 132, 0.76) 40%, rgba(75, 210, 130, 0.6) 68%, rgba(var(--rank-adept), 0.38) 100% ); opacity: 0.82; } .ritualCard.rank-novice.rank-p40::before, .ritualCard.rank-novice.rank-p45::before{ background: linear-gradient(90deg, rgba(90, 190, 133, 0.88) 0%, rgba(78, 205, 132, 0.8) 35%, rgba(68, 218, 132, 0.65) 62%, rgba(var(--rank-adept), 0.45) 100% ); opacity: 0.85; } .ritualCard.rank-novice.rank-p50::before, .ritualCard.rank-novice.rank-p55::before{ background: linear-gradient(90deg, rgba(82, 200, 132, 0.9) 0%, rgba(72, 215, 132, 0.82) 30%, rgba(62, 225, 134, 0.7) 58%, rgba(var(--rank-adept), 0.52) 100% ); opacity: 0.88; } .ritualCard.rank-novice.rank-p60::before, .ritualCard.rank-novice.rank-p65::before{ background: linear-gradient(90deg, rgba(75, 210, 132, 0.92) 0%, rgba(68, 222, 134, 0.85) 25%, rgba(60, 230, 136, 0.72) 52%, rgba(var(--rank-adept), 0.58) 100% ); opacity: 0.9; } .ritualCard.rank-novice.rank-p70::before, .ritualCard.rank-novice.rank-p75::before{ background: linear-gradient(90deg, rgba(70, 218, 134, 0.94) 0%, rgba(64, 228, 136, 0.88) 20%, rgba(58, 235, 138, 0.76) 48%, rgba(var(--rank-adept), 0.65) 100% ); opacity: 0.92; } .ritualCard.rank-novice.rank-p80::before, .ritualCard.rank-novice.rank-p85::before{ background: linear-gradient(90deg, rgba(66, 225, 136, 0.95) 0%, rgba(60, 233, 138, 0.9) 15%, rgba(56, 240, 140, 0.8) 42%, rgba(var(--rank-adept), 0.72) 100% ); opacity: 0.94; } .ritualCard.rank-novice.rank-p90::before, .ritualCard.rank-novice.rank-p95::before, .ritualCard.rank-novice.rank-p100::before{ background: linear-gradient(90deg, rgba(62, 230, 138, 0.96) 0%, rgba(58, 238, 140, 0.92) 12%, rgba(55, 245, 142, 0.84) 38%, rgba(var(--rank-adept), 0.8) 100% ); opacity: 0.96; } /* Novice Box-Shadow - stärker sichtbar */ .ritualCard.rank-novice{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25), 0 0 calc(var(--rank-progress, 0) * 20px + 8px) rgba(100, 190, 135, calc(var(--rank-progress, 0) * 0.25 + 0.1)); } .ritualCard.rank-novice .ritualXpBadge{ color: rgba(100, 190, 135, calc(var(--rank-progress, 0) * 0.3 + 0.5)); text-shadow: 0 0 calc(var(--rank-progress, 0) * 4px + 2px) rgba(100, 190, 135, calc(var(--rank-progress, 0) * 0.25 + 0.1)); } /* ===== RANK: ADEPT (100-499 XP) - Grün, zeigt Expert-Blau rechts ===== */ .ritualCard.rank-adept.rank-p0::before, .ritualCard.rank-adept.rank-p5::before, .ritualCard.rank-adept.rank-p10::before{ background: linear-gradient(90deg, rgba(var(--rank-adept), 0.9) 0%, rgba(var(--rank-adept), 0.8) 55%, rgba(70, 195, 190, 0.5) 80%, rgba(var(--rank-expert), 0.25) 100% ); opacity: 0.82; } .ritualCard.rank-adept.rank-p15::before, .ritualCard.rank-adept.rank-p20::before, .ritualCard.rank-adept.rank-p25::before, .ritualCard.rank-adept.rank-p30::before{ background: linear-gradient(90deg, rgba(var(--rank-adept), 0.92) 0%, rgba(var(--rank-adept), 0.82) 45%, rgba(70, 190, 210, 0.58) 72%, rgba(var(--rank-expert), 0.38) 100% ); opacity: 0.86; } .ritualCard.rank-adept.rank-p35::before, .ritualCard.rank-adept.rank-p40::before, .ritualCard.rank-adept.rank-p45::before, .ritualCard.rank-adept.rank-p50::before{ background: linear-gradient(90deg, rgba(var(--rank-adept), 0.94) 0%, rgba(var(--rank-adept), 0.84) 38%, rgba(70, 185, 225, 0.65) 65%, rgba(var(--rank-expert), 0.5) 100% ); opacity: 0.9; } .ritualCard.rank-adept.rank-p55::before, .ritualCard.rank-adept.rank-p60::before, .ritualCard.rank-adept.rank-p65::before, .ritualCard.rank-adept.rank-p70::before{ background: linear-gradient(90deg, rgba(var(--rank-adept), 0.95) 0%, rgba(var(--rank-adept), 0.86) 28%, rgba(70, 178, 240, 0.72) 58%, rgba(var(--rank-expert), 0.62) 100% ); opacity: 0.93; } .ritualCard.rank-adept.rank-p75::before, .ritualCard.rank-adept.rank-p80::before, .ritualCard.rank-adept.rank-p85::before, .ritualCard.rank-adept.rank-p90::before, .ritualCard.rank-adept.rank-p95::before, .ritualCard.rank-adept.rank-p100::before{ background: linear-gradient(90deg, rgba(var(--rank-adept), 0.96) 0%, rgba(var(--rank-adept), 0.88) 18%, rgba(72, 172, 250, 0.8) 50%, rgba(var(--rank-expert), 0.75) 100% ); opacity: 0.96; } .ritualCard.rank-adept{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25), 0 0 calc(var(--rank-progress, 0) * 30px + 15px) rgba(var(--rank-adept), calc(var(--rank-progress, 0) * 0.25 + 0.15)); } .ritualCard.rank-adept .ritualXpBadge{ color: rgba(var(--rank-adept), 0.85); text-shadow: 0 0 6px rgba(var(--rank-adept), 0.3); } /* ===== RANK: EXPERT (500-1999 XP) - Blau, zeigt Master-Violett rechts ===== */ .ritualCard.rank-expert.rank-p0::before, .ritualCard.rank-expert.rank-p5::before, .ritualCard.rank-expert.rank-p10::before{ background: linear-gradient(90deg, rgba(var(--rank-expert), 0.9) 0%, rgba(var(--rank-expert), 0.8) 55%, rgba(130, 130, 255, 0.55) 80%, rgba(var(--rank-master), 0.28) 100% ); opacity: 0.84; } .ritualCard.rank-expert.rank-p15::before, .ritualCard.rank-expert.rank-p20::before, .ritualCard.rank-expert.rank-p25::before, .ritualCard.rank-expert.rank-p30::before{ background: linear-gradient(90deg, rgba(var(--rank-expert), 0.92) 0%, rgba(var(--rank-expert), 0.82) 45%, rgba(145, 122, 255, 0.62) 72%, rgba(var(--rank-master), 0.4) 100% ); opacity: 0.88; } .ritualCard.rank-expert.rank-p35::before, .ritualCard.rank-expert.rank-p40::before, .ritualCard.rank-expert.rank-p45::before, .ritualCard.rank-expert.rank-p50::before{ background: linear-gradient(90deg, rgba(var(--rank-expert), 0.94) 0%, rgba(var(--rank-expert), 0.84) 38%, rgba(158, 112, 255, 0.7) 65%, rgba(var(--rank-master), 0.52) 100% ); opacity: 0.91; } .ritualCard.rank-expert.rank-p55::before, .ritualCard.rank-expert.rank-p60::before, .ritualCard.rank-expert.rank-p65::before, .ritualCard.rank-expert.rank-p70::before{ background: linear-gradient(90deg, rgba(var(--rank-expert), 0.95) 0%, rgba(var(--rank-expert), 0.86) 28%, rgba(168, 105, 255, 0.78) 58%, rgba(var(--rank-master), 0.64) 100% ); opacity: 0.94; } .ritualCard.rank-expert.rank-p75::before, .ritualCard.rank-expert.rank-p80::before, .ritualCard.rank-expert.rank-p85::before, .ritualCard.rank-expert.rank-p90::before, .ritualCard.rank-expert.rank-p95::before, .ritualCard.rank-expert.rank-p100::before{ background: linear-gradient(90deg, rgba(var(--rank-expert), 0.96) 0%, rgba(var(--rank-expert), 0.88) 18%, rgba(175, 100, 255, 0.85) 50%, rgba(var(--rank-master), 0.76) 100% ); opacity: 0.97; } .ritualCard.rank-expert{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25), 0 0 calc(var(--rank-progress, 0) * 40px + 18px) rgba(var(--rank-expert), calc(var(--rank-progress, 0) * 0.28 + 0.15)); } .ritualCard.rank-expert .ritualXpBadge{ color: rgba(var(--rank-expert), 0.85); text-shadow: 0 0 6px rgba(var(--rank-expert), 0.35); } /* ===== RANK: MASTER (2000-4999 XP) - Violett, zeigt Grandmaster-Orange rechts ===== */ .ritualCard.rank-master.rank-p0::before, .ritualCard.rank-master.rank-p5::before, .ritualCard.rank-master.rank-p10::before{ background: linear-gradient(90deg, rgba(var(--rank-master), 0.9) 0%, rgba(var(--rank-master), 0.8) 55%, rgba(218, 128, 165, 0.55) 80%, rgba(var(--rank-grandmaster), 0.28) 100% ); opacity: 0.85; } .ritualCard.rank-master.rank-p15::before, .ritualCard.rank-master.rank-p20::before, .ritualCard.rank-master.rank-p25::before, .ritualCard.rank-master.rank-p30::before{ background: linear-gradient(90deg, rgba(var(--rank-master), 0.92) 0%, rgba(var(--rank-master), 0.82) 45%, rgba(230, 125, 140, 0.62) 72%, rgba(var(--rank-grandmaster), 0.42) 100% ); opacity: 0.89; } .ritualCard.rank-master.rank-p35::before, .ritualCard.rank-master.rank-p40::before, .ritualCard.rank-master.rank-p45::before, .ritualCard.rank-master.rank-p50::before{ background: linear-gradient(90deg, rgba(var(--rank-master), 0.94) 0%, rgba(var(--rank-master), 0.84) 38%, rgba(242, 138, 105, 0.7) 65%, rgba(var(--rank-grandmaster), 0.55) 100% ); opacity: 0.92; } .ritualCard.rank-master.rank-p55::before, .ritualCard.rank-master.rank-p60::before, .ritualCard.rank-master.rank-p65::before, .ritualCard.rank-master.rank-p70::before{ background: linear-gradient(90deg, rgba(var(--rank-master), 0.95) 0%, rgba(var(--rank-master), 0.86) 28%, rgba(250, 150, 82, 0.78) 58%, rgba(var(--rank-grandmaster), 0.68) 100% ); opacity: 0.95; } .ritualCard.rank-master.rank-p75::before, .ritualCard.rank-master.rank-p80::before, .ritualCard.rank-master.rank-p85::before, .ritualCard.rank-master.rank-p90::before, .ritualCard.rank-master.rank-p95::before, .ritualCard.rank-master.rank-p100::before{ background: linear-gradient(90deg, rgba(var(--rank-master), 0.96) 0%, rgba(var(--rank-master), 0.88) 18%, rgba(255, 158, 68, 0.85) 50%, rgba(var(--rank-grandmaster), 0.8) 100% ); opacity: 0.97; } .ritualCard.rank-master{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25), 0 0 calc(var(--rank-progress, 0) * 50px + 22px) rgba(var(--rank-master), calc(var(--rank-progress, 0) * 0.32 + 0.18)); } .ritualCard.rank-master .ritualXpBadge{ color: rgba(var(--rank-master), 0.88); text-shadow: 0 0 7px rgba(var(--rank-master), 0.4); } /* ===== RANK: GRANDMASTER (5000-9999 XP) - Orange, zeigt Legendary-Gold rechts ===== */ .ritualCard.rank-grandmaster.rank-p0::before, .ritualCard.rank-grandmaster.rank-p5::before, .ritualCard.rank-grandmaster.rank-p10::before{ background: linear-gradient(90deg, rgba(var(--rank-grandmaster), 0.9) 0%, rgba(var(--rank-grandmaster), 0.8) 55%, rgba(255, 190, 72, 0.58) 80%, rgba(var(--rank-legendary), 0.3) 100% ); opacity: 0.86; } .ritualCard.rank-grandmaster.rank-p15::before, .ritualCard.rank-grandmaster.rank-p20::before, .ritualCard.rank-grandmaster.rank-p25::before, .ritualCard.rank-grandmaster.rank-p30::before{ background: linear-gradient(90deg, rgba(var(--rank-grandmaster), 0.92) 0%, rgba(var(--rank-grandmaster), 0.82) 45%, rgba(255, 200, 76, 0.68) 72%, rgba(var(--rank-legendary), 0.45) 100% ); opacity: 0.9; } .ritualCard.rank-grandmaster.rank-p35::before, .ritualCard.rank-grandmaster.rank-p40::before, .ritualCard.rank-grandmaster.rank-p45::before, .ritualCard.rank-grandmaster.rank-p50::before{ background: linear-gradient(90deg, rgba(var(--rank-grandmaster), 0.94) 0%, rgba(var(--rank-grandmaster), 0.84) 38%, rgba(255, 208, 78, 0.75) 65%, rgba(var(--rank-legendary), 0.58) 100% ); opacity: 0.93; } .ritualCard.rank-grandmaster.rank-p55::before, .ritualCard.rank-grandmaster.rank-p60::before, .ritualCard.rank-grandmaster.rank-p65::before, .ritualCard.rank-grandmaster.rank-p70::before{ background: linear-gradient(90deg, rgba(var(--rank-grandmaster), 0.95) 0%, rgba(var(--rank-grandmaster), 0.86) 28%, rgba(255, 215, 82, 0.82) 58%, rgba(var(--rank-legendary), 0.7) 100% ); opacity: 0.95; } .ritualCard.rank-grandmaster.rank-p75::before, .ritualCard.rank-grandmaster.rank-p80::before, .ritualCard.rank-grandmaster.rank-p85::before, .ritualCard.rank-grandmaster.rank-p90::before, .ritualCard.rank-grandmaster.rank-p95::before, .ritualCard.rank-grandmaster.rank-p100::before{ background: linear-gradient(90deg, rgba(var(--rank-grandmaster), 0.96) 0%, rgba(var(--rank-grandmaster), 0.88) 18%, rgba(255, 220, 85, 0.88) 50%, rgba(var(--rank-legendary), 0.82) 100% ); opacity: 0.97; } .ritualCard.rank-grandmaster{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25), 0 0 calc(var(--rank-progress, 0) * 60px + 28px) rgba(var(--rank-grandmaster), calc(var(--rank-progress, 0) * 0.38 + 0.2)); } .ritualCard.rank-grandmaster .ritualXpBadge{ color: rgba(var(--rank-grandmaster), 0.9); text-shadow: 0 0 8px rgba(var(--rank-grandmaster), 0.45); } /* ===== RANK: LEGENDARY (10000+ XP) - Gold mit Animation ===== */ /* Legendary ist die höchste Stufe - kein "nächster Rang" mehr, dafür Premium-Effekte */ .ritualCard.rank-legendary{ animation: legendaryPulse 3s ease-in-out infinite; } .ritualCard.rank-legendary::before{ background: linear-gradient(90deg, rgba(var(--rank-legendary), 0.95) 0%, rgba(255, 225, 100, 1) 25%, rgba(255, 235, 130, 1) 50%, rgba(255, 225, 100, 1) 75%, rgba(var(--rank-legendary), 0.95) 100% ); background-size: 200% 100%; opacity: 0.98; animation: legendaryBorderShimmer 2.5s linear infinite; } .ritualCard.rank-legendary{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 22px 60px rgba(0,0,0,.25), 0 0 45px rgba(var(--rank-legendary), 0.45), 0 0 90px rgba(var(--rank-legendary), 0.32), 0 0 140px rgba(255, 200, 60, 0.2); } .ritualCard.rank-legendary .ritualXpBadge{ color: rgba(var(--rank-legendary), 0.95); text-shadow: 0 0 10px rgba(var(--rank-legendary), 0.5); animation: legendaryBadgePulse 2.5s ease-in-out infinite; } /* Legendary Animationen */ @keyframes legendaryPulse{ 0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 60px rgba(0,0,0,.25), 0 0 40px rgba(var(--rank-legendary), 0.4), 0 0 85px rgba(var(--rank-legendary), 0.28), 0 0 120px rgba(255, 190, 50, 0.16); filter: brightness(1); } 50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 22px 60px rgba(0,0,0,.25), 0 0 55px rgba(var(--rank-legendary), 0.55), 0 0 105px rgba(var(--rank-legendary), 0.42), 0 0 145px rgba(255, 190, 50, 0.28); filter: brightness(1.1); } } @keyframes legendaryBorderShimmer{ 0%{ background-position: 0% 50%; filter: hue-rotate(0deg); } 50%{ filter: hue-rotate(12deg); } 100%{ background-position: 100% 50%; filter: hue-rotate(0deg); } } @keyframes legendaryBadgePulse{ 0%, 100%{ transform: scale(1); text-shadow: 0 0 8px rgba(var(--rank-legendary), 0.45); } 50%{ transform: scale(1.03); text-shadow: 0 0 12px rgba(var(--rank-legendary), 0.65); } } /* Rang-Label Text Styles (für Fortschritt-Seite etc.) */ .ritualRankLabel{ font-size: 11px; font-weight: 600; margin-right: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .rank-color-none{ color: rgba(130, 140, 155, 0.7); } .rank-color-novice{ color: rgba(110, 185, 140, 0.85); text-shadow: 0 0 4px rgba(100, 190, 135, 0.25); } .rank-color-adept{ color: rgba(var(--rank-adept), 0.9); text-shadow: 0 0 5px rgba(var(--rank-adept), 0.3); } .rank-color-expert{ color: rgba(var(--rank-expert), 0.9); text-shadow: 0 0 5px rgba(var(--rank-expert), 0.35); } .rank-color-master{ color: rgba(var(--rank-master), 0.9); text-shadow: 0 0 6px rgba(var(--rank-master), 0.4); } .rank-color-grandmaster{ color: rgba(var(--rank-grandmaster), 0.95); text-shadow: 0 0 7px rgba(var(--rank-grandmaster), 0.45); } .rank-color-legendary{ color: rgba(var(--rank-legendary), 1); text-shadow: 0 0 8px rgba(var(--rank-legendary), 0.55); animation: legendaryTextPulse 2.5s ease-in-out infinite; } @keyframes legendaryTextPulse{ 0%, 100%{ text-shadow: 0 0 6px rgba(var(--rank-legendary), 0.45); } 50%{ text-shadow: 0 0 12px rgba(var(--rank-legendary), 0.7); } } /* Mobile Anpassungen für XP Badge */ @media (max-width: 560px){ .ritualXpBadge{ font-size:9px; padding:1px 5px; margin-left:6px; } .ritualRankLabel{ font-size: 9px; margin-right: 4px; } } /* Goal Mobile Responsive */ @media (max-width: 560px){ .goalRow{ gap:6px; } .goalCard{ padding:12px; } .goalCompactRow{ gap:8px; height:28px; } .goalName{ font-size:13px; } .goalCompleteBtn{ width:28px; height:28px; } .goalCompleteBtn svg{ width:18px; height:18px; } .goalSettingsBtn{ width:22px; height:22px; } .goalSettingsBtn svg{ width:13px; height:13px; } .goalModalContent{ width:95%; max-width:none; margin:10px; } } /* Progress */ .progressSummary{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; position:relative; z-index:2; } .progressStat{ flex:1 1 160px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); border-radius:16px; padding:10px 12px; } .progressK{ color: rgba(170,182,204,.86); font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .progressV{ font-size:18px; font-weight:850; color:#e7edf8; } .progressGrid{ display:grid; grid-template-columns:1fr; gap:12px; position:relative; z-index:2; } .progressCard{ border:1px solid rgba(255,255,255,.12); background: rgba(10,12,20,.48); border-radius:18px; padding:14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25); position:relative; overflow:hidden; } .progressCard::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(520px 220px at 25% 20%, var(--cad1), transparent 65%), radial-gradient(520px 220px at 75% 40%, var(--cad2), transparent 65%); opacity:.25; pointer-events:none; } .progressHead{ display:flex; justify-content:space-between; gap:12px; position:relative; z-index:1; } .progressName{ font-size:16px; font-weight:820; color:#e7edf8; } .progressMeta{ display:flex; gap:.55rem; flex-wrap:wrap; margin-top:4px; align-items:center; } .progressHint{ margin-top:8px; color: rgba(230,238,250,.88); font-size:13px; position:relative; z-index:1; } .scoreRing{ width:52px; height:52px; border-radius:18px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.20); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; position:relative; } .scoreRing::before{ content:""; position:absolute; inset:-1px; border-radius:18px; background: radial-gradient(circle at 30% 20%, var(--cad1), transparent 65%); opacity:.35; pointer-events:none; } .scoreRingInner{ font-weight:900; color:#e7edf8; position:relative; z-index:1; } .timeline{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; position:relative; z-index:1; } .timeline .dot{ width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.20); box-shadow: 0 0 0 rgba(0,0,0,0); } .timeline .dot.t1{ background: linear-gradient(180deg, var(--cad1), rgba(0,0,0,.25)); box-shadow: 0 0 14px rgba(255,204,122,.12); } .timeline .dot.t2{ background: linear-gradient(180deg, var(--cad1), var(--cad2)); box-shadow: 0 0 18px rgba(140,175,255,.18); } .progressLinks{ margin-top:12px; position:relative; z-index:1; } /* Scoreboard */ .scoreSummary{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; position:relative; z-index:2; } .scorePill{ flex:1 1 180px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); border-radius:999px; padding:8px 12px; display:flex; justify-content:space-between; align-items:center; } .scorePillK{ color: rgba(170,182,204,.86); font-size:12px; letter-spacing:.10em; text-transform:uppercase; } .scorePillV{ color:#e7edf8; font-weight:850; } .scoreList{ display:flex; flex-direction:column; gap:10px; position:relative; z-index:2; } .scoreRow{ border:1px solid rgba(255,255,255,.12); background: rgba(10,12,20,.48); border-radius:18px; padding:12px; display:flex; justify-content:space-between; align-items:center; gap:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25); position:relative; overflow:hidden; } .scoreRow::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(520px 220px at 25% 20%, var(--cad1), transparent 65%), radial-gradient(520px 220px at 75% 40%, var(--cad2), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 20%, transparent 40%); opacity:.22; pointer-events:none; } .scoreLeft{ display:flex; gap:10px; align-items:flex-start; position:relative; z-index:1; } .rank{ width:58px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.20); padding:8px 10px; font-weight:900; color:#e7edf8; text-align:center; } .scoreName{ font-size:15px; font-weight:850; color:#e7edf8; } .scoreMeta{ display:flex; gap:.55rem; flex-wrap:wrap; margin-top:3px; } .scoreRight{ min-width:180px; display:flex; flex-direction:column; gap:6px; align-items:flex-end; position:relative; z-index:1; } .scoreNum{ font-weight:950; letter-spacing:.03em; color:#e7edf8; } .scoreBar{ width:180px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); overflow:hidden; } .scoreBarFill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--cad1), rgba(255,255,255,.05), var(--cad2)); box-shadow: 0 0 18px rgba(255,204,122,.16); } @media (max-width: 560px){ .scoreRight{ min-width:130px; } .scoreBar{ width:130px; } .rank{ width:52px; } } /* Achievements */ .achGrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; position:relative; z-index:2; } @media (max-width: 820px){ .achGrid{ grid-template-columns:1fr; } } .achCard{ border:1px solid rgba(255,255,255,.12); background: rgba(10,12,20,.48); border-radius:18px; padding:14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25); position:relative; overflow:hidden; } .achCard::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(520px 220px at 30% 20%, rgba(255,204,122,.18), transparent 65%); opacity:.25; pointer-events:none; } .achTop{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; } /* Siegel Icons */ .achSigil{ width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .achSigil svg{ width:28px; height:28px; } /* Locked - mystisches Schloss */ .achSigil.sigil-locked{ color: rgba(100,110,130,.6); } /* Tier 1 - Bronze/Kupfer Glow */ .achSigil.sigil-tier-1{ color: #c9a066; filter: drop-shadow(0 0 6px rgba(201,160,102,.4)); } /* Tier 2 - Silber/Mond Glow */ .achSigil.sigil-tier-2{ color: #a8c0d8; filter: drop-shadow(0 0 8px rgba(168,192,216,.5)); } /* Tier 3 - Gold/Sonnen Glow */ .achSigil.sigil-tier-3{ color: #ffd866; filter: drop-shadow(0 0 10px rgba(255,216,102,.6)); animation: sigilPulse 3s ease-in-out infinite; } /* Tier 4 - Platin/Legendär Glow */ .achSigil.sigil-tier-4{ color: #e0d0ff; filter: drop-shadow(0 0 12px rgba(220,180,255,.7)) drop-shadow(0 0 20px rgba(255,200,100,.4)); animation: sigilLegendary 2.5s ease-in-out infinite; } @keyframes sigilLegendary{ 0%, 100%{ filter: drop-shadow(0 0 12px rgba(220,180,255,.6)) drop-shadow(0 0 20px rgba(255,200,100,.3)); } 50%{ filter: drop-shadow(0 0 18px rgba(220,180,255,.9)) drop-shadow(0 0 28px rgba(255,200,100,.6)); } } @keyframes sigilPulse{ 0%, 100%{ filter: drop-shadow(0 0 10px rgba(255,216,102,.5)); } 50%{ filter: drop-shadow(0 0 16px rgba(255,216,102,.8)); } } .achTitle{ font-weight:700; color:#e7edf8; font-size:14px; } .achDesc{ color: rgba(170,182,204,.86); margin-top:6px; position:relative; z-index:1; font-size:12px; } .achLocked{ opacity:.5; } .achOk{ border-color: rgba(255,204,122,.28); } .achFoot{ margin-top:10px; font-size:13px; } /* Trophy badge for goals */ .quickStatTrophy{ font-size:10px; color: rgba(255,200,100,.7); background: rgba(255,180,80,.12); padding:2px 8px; border-radius:10px; border:1px solid rgba(255,180,80,.25); } /* Recent item trophy */ .recentItemTrophy{ font-size:11px; color: rgba(255,200,100,.8); font-weight:500; } /* ============================ Goals / Ziele ============================ */ .tier-common{ --tier1: rgba(160,170,190,.55); --tier2: rgba(255,255,255,.06); --cad1: rgba(160,170,190,.75); --cad2: rgba(210,220,240,.35); } .tier-uncommon{ --tier1: rgba(90,255,180,.72); --tier2: rgba(80,180,120,.30); --cad1: rgba(90,255,180,.90); --cad2: rgba(80,180,120,.55); } .tier-rare{ --tier1: rgba(90,170,255,.78); --tier2: rgba(140,175,255,.38); --cad1: rgba(90,170,255,.9); --cad2: rgba(140,175,255,.55); } .tier-epic{ --tier1: rgba(190,120,255,.78); --tier2: rgba(140,175,255,.32); --cad1: rgba(190,120,255,.9); --cad2: rgba(140,175,255,.5); } .tier-legendary{ --tier1: rgba(255,204,122,.82); --tier2: rgba(255,122,47,.32); --cad1: rgba(255,204,122,.95); --cad2: rgba(255,122,47,.55); } /* Create Accordion */ .createAccordion{ border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); border-radius:18px; margin-bottom:12px; position:relative; z-index:2; overflow:hidden; } .createAccordionToggle{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:none; border:none; cursor:pointer; transition: background .15s ease; } .createAccordionToggle:hover{ background: rgba(255,255,255,.03); } .createAccordionTitle{ font-weight:900; color:#e7edf8; font-size:14px; } .createAccordionChevron{ width:20px; height:20px; transition: transform .25s ease; } .createAccordion.collapsed .createAccordionChevron{ transform: rotate(0deg); } .createAccordion.expanded .createAccordionChevron{ transform: rotate(180deg); } .createAccordionBody{ padding:0 16px 16px; max-height:0; overflow:hidden; transition: max-height .3s ease, padding .3s ease; } .createAccordion.collapsed .createAccordionBody{ max-height:0; padding-bottom:0; } .createAccordion.expanded .createAccordionBody{ max-height:500px; padding-bottom:16px; } /* Legacy goalCreate for other uses */ .goalCreate{ border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); border-radius:18px; padding:14px 14px 12px; margin-bottom:12px; position:relative; z-index:2; } .goalCreateTitle{ font-weight:900; color:#e7edf8; margin-bottom:8px; } .goalBar{ display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.10); border-radius:16px; padding:10px 12px; margin-bottom:12px; position:relative; z-index:2; } .goalGrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; position:relative; z-index:2; } @media (max-width: 680px){ .goalGrid{ grid-template-columns: 1fr; } } /* Kompaktere Archiv-Karten */ .goalGrid.archivGrid .goalCard { padding: 10px 12px 8px; } .goalGrid.archivGrid .goalTitle { font-size: 14px; line-height: 1.3; } .goalGrid.archivGrid .goalMeta { gap: 4px; flex-wrap: wrap; } .goalGrid.archivGrid .tierBadge { font-size: 9px; padding: 2px 6px; } .goalGrid.archivGrid .goalPoints { font-size: 14px; min-width: 32px; } .goalGrid.archivGrid .muted { font-size: 10px; } /* Row container: Card + Delete Button */ .goalRow{ display:flex; align-items:center; gap:8px; } .goalCard{ border:1px solid rgba(255,255,255,.12); background: rgba(10,12,20,.52); border-radius:18px; padding:14px 14px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px rgba(0,0,0,.25); position:relative; overflow:hidden; flex:1; transition: transform .2s ease, box-shadow .2s ease; } .goalCard:hover { transform: translateY(-2px); } .goalCard::before{ content:""; position:absolute; inset:-1px; background: radial-gradient(560px 260px at 20% 20%, var(--tier1), transparent 65%), radial-gradient(520px 260px at 80% 40%, var(--tier2), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(255,255,255,.035) 28%, transparent 52%); opacity:.38; pointer-events:none; } /* Tier-spezifische Glow-Effekte für goalCard */ .goalCard.tier-common { border-color: rgba(140,150,170,.25); } .goalCard.tier-uncommon { border-color: rgba(80,200,120,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 25px rgba(80,200,120,.15), 0 22px 60px rgba(0,0,0,.25); } .goalCard.tier-uncommon::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(80,200,120,.1), transparent 60%); pointer-events: none; border-radius: 18px; } .goalCard.tier-rare { border-color: rgba(70,150,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 30px rgba(70,150,255,.2), 0 22px 60px rgba(0,0,0,.25); } .goalCard.tier-rare::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(70,150,255,.12), transparent 55%), radial-gradient(ellipse at 70% 100%, rgba(100,180,255,.06), transparent 50%); pointer-events: none; border-radius: 18px; } .goalCard.tier-epic { border-color: rgba(180,100,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 35px rgba(180,100,255,.25), 0 22px 60px rgba(0,0,0,.25); animation: goalEpicPulse 3s ease-in-out infinite; } .goalCard.tier-epic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 0%, rgba(180,100,255,.15), transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(140,80,220,.1), transparent 45%); pointer-events: none; border-radius: 18px; } @keyframes goalEpicPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 35px rgba(180,100,255,.25), 0 22px 60px rgba(0,0,0,.25); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 40px rgba(180,100,255,.35), 0 22px 60px rgba(0,0,0,.25); } } .goalCard.tier-legendary { border-color: rgba(255,180,60,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 40px rgba(255,180,60,.3), 0 0 60px rgba(255,120,40,.15), 0 22px 60px rgba(0,0,0,.25); animation: goalLegendaryGlow 2.5s ease-in-out infinite; } .goalCard.tier-legendary::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(255,200,100,.18), transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(255,140,50,.12), transparent 45%), linear-gradient(135deg, rgba(255,220,150,.04) 0%, transparent 50%); pointer-events: none; border-radius: 18px; } @keyframes goalLegendaryGlow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 40px rgba(255,180,60,.3), 0 0 60px rgba(255,120,40,.15), 0 22px 60px rgba(0,0,0,.25); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 50px rgba(255,180,60,.4), 0 0 80px rgba(255,120,40,.2), 0 22px 60px rgba(0,0,0,.25); } } .goalDone{ opacity:.76; } /* Settings Button inside card, top-right */ .goalSettingsBtn{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; border:none; background:transparent; color: rgba(180,190,210,.45); cursor:pointer; transition: all .2s ease; flex-shrink:0; } .goalSettingsBtn svg{ width:14px; height:14px; } .goalSettingsBtn:hover{ color: rgba(230,238,250,.75); background: rgba(255,255,255,.04); } .goalSettingsBtn:active{ transform: scale(0.9); } /* Compact Goal Layout (like Rituals) */ .goalCompactRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1; height:32px; } .goalName{ font-size:14px; font-weight:500; color:#e7edf8; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } /* Complete Button (like Ritual Menu Button) */ .goalQuickForm{ margin:0; flex-shrink:0; } .goalCompleteBtn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:10px; border:none; background:transparent; color: rgba(255,204,122,.75); cursor:pointer; transition: all .2s ease; flex-shrink:0; animation: goalPulse 4s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255,204,122,.3)); } @keyframes goalPulse{ 0%, 100%{ opacity:0.75; transform: scale(1); filter: drop-shadow(0 0 4px rgba(255,204,122,.3)); } 50%{ opacity:1; transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(255,204,122,.6)) drop-shadow(0 0 20px rgba(255,122,47,.4)); } } .goalCompleteBtn svg{ width:20px; height:20px; } .goalCompleteBtn:hover{ color: rgba(255,204,122,1); background: rgba(255,204,122,.1); animation: none; transform: scale(1.15); filter: drop-shadow(0 0 16px rgba(255,204,122,.8)) drop-shadow(0 0 24px rgba(255,122,47,.6)); } .goalCompleteBtn:active{ transform: scale(1); } .goalCompleteBtn:disabled{ opacity:.3; cursor:not-allowed; animation: none; filter: none; } .goalDelForm{ margin:0; } .goalDelBtn{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; border:none; background:transparent; color: rgba(180,190,210,.45); cursor:pointer; transition: all .2s ease; flex-shrink:0; } .goalDelBtn svg{ width:14px; height:14px; } .goalDelBtn:hover{ color: rgba(230,238,250,.75); background: rgba(255,255,255,.04); } .goalDelBtn:active{ transform: scale(0.9); } /* Goal Modal (like Ritual Modal) */ .goalModal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; } .goalModalBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.75); backdrop-filter: blur(8px); animation: fadeIn .3s ease; } .goalModalContent{ position:relative; z-index:1; width:min(480px, 100%); max-height:90vh; overflow-y:auto; background: rgba(12,14,22,.98); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); animation: modalSlideIn .3s ease; } .goalModalHeader{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08); } .goalModalHeader h3{ margin:0; font-size:16px; font-weight:700; color:#e7edf8; } .goalModalClose{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.2); color: rgba(230,238,250,.88); font-size:18px; font-weight:700; cursor:pointer; transition: all .2s ease; } .goalModalClose:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); } .goalModalBody{ padding:18px 20px; } .goalModalDivider{ height:1px; background: rgba(255,255,255,.06); margin:20px 0; } .goalHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; z-index:2; } .goalTitle{ font-weight:920; color:#e7edf8; font-size:16px; } .goalMeta{ display:flex; flex-wrap:nowrap; gap:.45rem; margin-top:6px; font-size:12px; overflow:hidden; } .tierBadge{ display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: rgba(230,238,250,.92); } .tierGlyph{ opacity:.92; letter-spacing:.06em; } .goalPoints{ min-width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.25); color:#e7edf8; font-weight:900; } .goalDesc{ margin-top:10px; color: rgba(170,182,204,.90); position:relative; z-index:2; } .goalFoot{ margin-top:10px; position:relative; z-index:2; } .goalActions{ margin-top:10px; display:flex; gap:.6rem; flex-wrap:wrap; position:relative; z-index:2; } .goalEdit{ margin-top:10px; position:relative; z-index:2; } /* ============================ Quests / To-Dos ============================ */ .todoBadge{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 10px; border-radius:999px; border:1px solid rgba(255,122,47,.35); background: radial-gradient(24px 18px at 35% 35%, rgba(255,204,122,.28), transparent 70%), radial-gradient(28px 22px at 70% 60%, rgba(255,122,47,.24), transparent 72%), rgba(0,0,0,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.25); color: rgba(255,234,210,.92); font-weight:920; letter-spacing:.02em; } .todoList{ background: transparent; border: none; padding: 0; display: flex; flex-direction: column; gap: 2px; position: relative; } .todoItem{ display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: none; border-radius: 0; padding: 12px 8px; transition: all .3s ease; position: relative; filter: drop-shadow(0 1px 3px rgba(0,0,0,.15)); } .todoItem::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: linear-gradient(180deg, rgba(255,204,122,.6), rgba(255,122,47,.4)); border-radius: 2px; transition: height .3s ease; opacity: 0; } .todoItem:hover{ background: rgba(255,255,255,.02); transform: translateX(8px); filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(255,204,122,.1)); } .todoItem:hover::before{ height: 60%; opacity: 1; } .todoItemDone{ opacity: 0.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.1)); } .todoItemDone:hover{ opacity: 0.7; filter: drop-shadow(0 1px 4px rgba(0,0,0,.15)); } .todoContent{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .todoIcon{ width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: todoFloat 3s ease-in-out infinite; } @keyframes todoFloat{ 0%, 100%{ transform: translateY(0px) rotate(0deg); filter: drop-shadow(0 2px 4px rgba(255,204,122,.2)); } 25%{ transform: translateY(-3px) rotate(2deg); filter: drop-shadow(0 4px 8px rgba(255,204,122,.3)); } 50%{ transform: translateY(0px) rotate(0deg); filter: drop-shadow(0 2px 4px rgba(255,204,122,.2)); } 75%{ transform: translateY(-3px) rotate(-2deg); filter: drop-shadow(0 4px 8px rgba(255,122,47,.3)); } } .todoIcon svg{ width: 18px; height: 18px; color: rgba(255,204,122,.7); transition: all .3s ease; } .todoItem:hover .todoIcon svg{ color: rgba(255,204,122,1); filter: drop-shadow(0 0 8px rgba(255,204,122,.6)); } .todoText{ flex: 1; min-width: 0; } .todoTitle{ color: #e7edf8; font-weight: 500; font-size: 14px; transition: color .3s ease; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .todoItem:hover .todoTitle{ color: rgba(255,204,122,.95); } .todoMeta{ font-size: 9px; color: rgba(170,182,204,.5); font-weight: 400; display: inline; } .todoBtns{ display: flex; gap: .3rem; flex-wrap: nowrap; align-items: center; flex-shrink: 0; } .todoDelBtn{ width: 26px; height: 26px; border: none; background: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; opacity: 0.5; } .todoItem:hover .todoDelBtn{ opacity: 1; } .todoDelBtn:hover{ background: rgba(255,100,100,.15); transform: scale(1.1); } .todoDelBtn:hover svg path{ stroke: rgba(255,120,120,.85); } .todoDelBtn svg{ width: 14px; height: 14px; } .todoDoneBtn{ width: 32px; height: 32px; border: none; background: transparent; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; color: rgba(255,204,122,.75); animation: todoDonePulse 4s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255,204,122,.3)); } @keyframes todoDonePulse{ 0%, 100%{ opacity: 0.75; transform: scale(1); filter: drop-shadow(0 0 4px rgba(255,204,122,.3)); } 50%{ opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(255,204,122,.6)) drop-shadow(0 0 20px rgba(255,122,47,.4)); } } .todoDoneBtn:hover{ color: rgba(255,204,122,1); background: rgba(255,204,122,.1); animation: none; transform: scale(1.15); filter: drop-shadow(0 0 16px rgba(255,204,122,.8)) drop-shadow(0 0 24px rgba(255,122,47,.6)); } .todoDoneBtn:active{ transform: scale(1); } .todoDoneBtn svg{ width: 20px; height: 20px; } .todoUndoBtn{ width:28px; height:28px; /* Archive Page Styles */ .archiveMonth{ margin-bottom: 40px; } .archiveMonthHeader{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); } .archiveMonthHeader h2{ font-size: 18px; font-weight: 700; color: rgba(255,204,122,.9); margin: 0; text-transform: capitalize; } .archiveMonthHeader .muted{ font-size: 13px; color: rgba(170,182,204,.6); } border:1px solid rgba(180,190,210,.15); background: rgba(180,190,210,.05); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .2s ease; } .todoUndoBtn:hover{ background: rgba(180,190,210,.12); border-color: rgba(180,190,210,.3); transform: scale(1.1); } .todoUndoBtn:hover svg path{ stroke: rgba(200,210,225,.85); } .todoUndoBtn svg{ width:16px; height:16px; } /* ============================ Tier Slider (Stars / Diamonds) ============================ */ .tierSlider{ border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.12); border-radius:16px; padding:10px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: transform .14s ease, border-color .14s ease, filter .14s ease; } .tierSlider:hover{ border-color: rgba(255,204,122,.28); filter: brightness(1.03); } .tierSlider.pulse{ transform: translateY(-1px) scale(1.01); } .tierSlider .tierRange{ width:100%; accent-color: var(--cad1, rgba(255,204,122,.85)); } .tierSlider .tierInfo{ margin-top:6px; display:flex; justify-content:space-between; align-items:center; gap:10px; } .tierSlider .tierLabel{ font-size:13px; font-weight:850; color: rgba(230,238,250,.86); white-space:nowrap; } /* ============================ Nav Icons (Home) - Minimal Inline Icons ============================ */ .navIcons{ display:inline-flex; gap:8px; align-items:center; vertical-align:middle; flex-shrink: 0; margin-left: auto; } .navIconBtn{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; opacity:0.75; transition: transform .2s cubic-bezier(.175,.885,.32,1.275), opacity .2s ease; position:relative; } .navIconBtn:hover{ transform: scale(1.25); opacity:1; } .navIconBtn:active{ transform: scale(0.95); } .navIconBtn svg, .navIconBtn .pi{ width:26px; height:26px; transition: filter .2s ease, color .2s ease; } /* Fantasy default: gold/ember on home navIcons */ .navIconBtn .pi{ color: rgba(255,204,122,.75); } .navIconBtn:hover svg, .navIconBtn:hover .pi{ filter: drop-shadow(0 0 6px rgba(255,204,122,.45)); } .navIconBtn:hover .pi{ color: rgba(255,204,122,1); } /* Badge for open count - glowing number on button */ .navIconBadge{ position:relative; } .navIconBadge[data-badge]::after{ content: attr(data-badge); position:absolute; top:0px; left:50%; transform: translateX(-50%); font-size:12px; font-weight:800; color: rgba(255,200,140,1); text-shadow: 0 0 4px rgba(255,180,120,.5), 0 0 8px rgba(255,150,80,.3); pointer-events:none; z-index:10; } /* Icon stays fully visible */ .navIconBadge svg, .navIconBadge .pi{ opacity:0.75; } .navIconBadge[data-badge] svg, .navIconBadge[data-badge] .pi{ opacity:0.75; } .navIconBadge:hover svg, .navIconBadge:hover .pi{ opacity:1; } /* Logoutfab icon color (Fantasy default) */ .logoutfab .pi{ color: rgba(255,204,122,.7); transition: color .16s ease; } .logoutfab:hover .pi{ color: rgba(255,204,122,.95); } /* ============================ Share Placeholder (bottom-right) ============================ */ .sharePlaceholder{ position:fixed; right:22px; bottom:22px; z-index:100; } .sharePlaceholderBtn{ display:flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border:1px solid rgba(200,210,225,.18); border-radius:14px; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); box-shadow: 0 12px 30px rgba(0,0,0,.35); cursor:pointer; transition: border-color .15s ease, opacity .15s ease, transform .15s ease; text-decoration: none; } .sharePlaceholderBtn:hover{ border-color: rgba(255,204,122,.4); transform: translateY(-2px); } .sharePlaceholderBtn svg, .sharePlaceholderBtn .pi{ width:20px; height:20px; flex-shrink:0; } .sharePlaceholderBtn .pi{ color: rgba(200,210,225,.65); transition: color .15s ease; } .sharePlaceholderBtn:hover .pi{ color: rgba(255,204,122,.85); } .sharePlaceholderText{ font-size:12px; font-weight:600; color: rgba(200,210,225,.65); letter-spacing:.02em; white-space:nowrap; } /* ============================ Tier-colored Icons (Stars/Diamonds glow) ============================ */ .tierSlider .tierIcons{ font-weight:900; letter-spacing:.12em; color: var(--cad1, rgba(230,238,250,.90)); text-shadow: 0 0 12px var(--cad2, rgba(255,204,122,.25)), 0 0 20px var(--cad2, rgba(255,204,122,.15)); white-space:nowrap; transition: color .18s ease, text-shadow .18s ease; } .tierSlider.tier-common .tierIcons{ color: rgba(180,190,210,.85); text-shadow: 0 0 8px rgba(180,190,210,.15); } .tierSlider.tier-uncommon .tierIcons{ color: rgba(90,255,180,.92); text-shadow: 0 0 14px rgba(90,255,180,.4), 0 0 22px rgba(80,180,120,.25); } .tierSlider.tier-rare .tierIcons{ color: rgba(90,170,255,.92); text-shadow: 0 0 14px rgba(90,170,255,.45), 0 0 22px rgba(140,175,255,.3); } .tierSlider.tier-epic .tierIcons{ color: rgba(190,120,255,.92); text-shadow: 0 0 14px rgba(190,120,255,.45), 0 0 22px rgba(140,100,220,.3); } .tierSlider.tier-legendary .tierIcons{ color: rgba(255,204,122,.95); text-shadow: 0 0 14px rgba(255,204,122,.55), 0 0 24px rgba(255,122,47,.35); } /* ============================ Quest Type Toggle (Main/Side) ============================ */ .questTypeToggle{ display:flex; border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden; background: rgba(0,0,0,.12); } .questTypeToggle input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; } .questTypeToggle label{ flex:1; padding:10px 16px; text-align:center; font-size:13px; font-weight:700; color: rgba(180,190,210,.55); cursor:pointer; transition: all .2s ease; position:relative; } .questTypeToggle label:first-of-type{ border-right:1px solid rgba(255,255,255,.08); } .questTypeToggle input[type="radio"]:checked + label{ color: rgba(230,238,250,.92); background: rgba(180,190,210,.08); } .questTypeToggle label:hover{ color: rgba(200,210,225,.75); background: rgba(180,190,210,.04); } /* ============================ Sort Pills ============================ */ /* Sort Wrap - like goalBar style */ .sortWrap{ display:flex; justify-content:center; padding:8px 0; margin-bottom:12px; position:relative; z-index:2; } .sortForm{ display:flex; align-items:center; justify-content:center; gap:2px; flex-wrap:wrap; } .sortPills{ display:flex; align-items:center; justify-content:center; gap:2px; flex-wrap:wrap; } .sortPill{ display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:8px 10px; border:none !important; outline:none !important; border-radius:10px; background: transparent; font-size:12px; font-weight:600; color: rgba(180,190,210,.5); cursor:pointer; transition: all .2s ease; text-decoration:none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .sortPill svg{ width:16px; height:16px; flex-shrink:0; } .sortPill input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; margin:0; padding:0; border:none; } .sortPill:hover{ background: rgba(180,190,210,.08); color: rgba(200,210,225,.8); } .sortPill:has(input:checked){ background: rgba(180,190,210,.12); color: rgba(230,238,250,.95); } .sortPill.active{ background: rgba(180,190,210,.12); color: rgba(230,238,250,.95); } .sortPill.archiveLink{ margin-left:auto; color: rgba(180,190,210,.5); } .sortPill.archiveLink:hover{ background: rgba(180,190,210,.08); color: rgba(200,210,225,.8); } /* Mystical Archive Button */ .archiveBtn{ display:inline-flex; align-items:center; gap:10px; padding:12px 28px; border:none; border-radius:30px; background: transparent; color: rgba(180,190,210,.7); font-size:13px; font-weight:400; letter-spacing:.03em; text-decoration:none; transition: all .3s ease; position:relative; overflow:hidden; } .archiveBtn::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 50%, rgba(180,190,210,.08), transparent 50%); opacity:0; transition: opacity .3s ease; } .archiveBtn:hover{ color: rgba(200,210,225,.9); transform: translateY(-1px); } .archiveBtn:hover::before{ opacity:1; } .archiveBtnIcon{ width:20px; height:20px; transition: transform .3s ease; } .archiveBtn:hover .archiveBtnIcon{ transform: scale(1.1); } /* ============================ New Scoreboard / Übersicht ============================ */ .heroStats{ position: relative; display: flex; align-items: center; justify-content: center; padding: 24px 16px; margin-bottom: 16px; border-radius: 20px; background: transparent; overflow: hidden; min-height: 80px; } .heroStats::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 50%, rgba(255,122,47,.08), transparent 70%), radial-gradient(500px 250px at 48% 52%, rgba(140,175,255,.06), transparent 72%); filter: blur(12px); opacity: .85; pointer-events: none; animation: heroSmokeFlow 8s ease-in-out infinite; } @keyframes heroSmokeFlow{ 0%, 100%{ transform: translate3d(0, 0, 0) scale(1); opacity: .75; } 33%{ transform: translate3d(-15px, 8px, 0) scale(1.05); opacity: .90; } 66%{ transform: translate3d(12px, -6px, 0) scale(0.98); opacity: .82; } } .heroQuote{ position: relative; z-index: 1; text-align: center; font-size: 15px; font-weight: 500; font-style: italic; font-family: Georgia, 'Times New Roman', serif; line-height: 1.6; color: rgba(230, 238, 250, .92); text-shadow: 0 0 20px rgba(255,204,122,.3), 0 2px 8px rgba(0,0,0,.6); max-width: 480px; padding: 0 12px; letter-spacing: 0.3px; opacity: 0; animation: typewriterFade 4s ease-out 0.3s forwards; } @keyframes typewriterFade{ 0%{ opacity: 0; transform: translateY(4px); } 100%{ opacity: 1; transform: translateY(0); } } @media (max-width: 560px){ .heroStats{ padding: 20px 12px; min-height: 70px; } .heroQuote{ font-size: 13px; max-width: 100%; } } .quickStatsGrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-bottom:16px; } @media (max-width: 560px){ .quickStatsGrid{ grid-template-columns: 1fr; } } .quickStat{ border:1px solid rgba(255,255,255,.1); border-radius:16px; background: rgba(0,0,0,.15); padding:14px; display:flex; flex-direction:column; } .quickStatHeader{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } .quickStatIcon{ font-size:16px; color: rgba(255,204,122,.7); } .quickStatTitle{ font-size:14px; font-weight:700; color:#e7edf8; flex:1; } /* Small glowing points number */ .quickStatPtsGlow{ font-size:11px; font-weight:600; color: rgba(255,204,122,.75); text-shadow: 0 0 8px rgba(255,180,80,.5), 0 0 16px rgba(255,150,50,.3); letter-spacing:0.02em; } .quickStatBody{ flex:1; display:flex; flex-direction:column; gap:6px; } .quickStatRow{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color: rgba(180,190,210,.8); line-height:1.4; } .quickStatRow > span:first-child{ flex:1; min-width:0; } .quickStatRow > span:last-child{ flex-shrink:0; margin-left:8px; } .quickStatNum{ font-weight:700; color:#e7edf8; } .quickStatNum.alert{ color: rgba(255,180,120,1); } .quickStatLink{ margin-top:10px; font-size:12px; color: rgba(255,204,122,.7); text-decoration:none; transition: color .2s ease; } .quickStatLink:hover{ color: rgba(255,204,122,1); } .recentSection{ border:1px solid rgba(255,255,255,.1); border-radius:16px; background: rgba(0,0,0,.12); padding:14px; margin-bottom:16px; } .recentHeader{ font-size:13px; font-weight:700; color: rgba(180,190,210,.7); margin-bottom:12px; text-transform:uppercase; letter-spacing:.05em; } .recentList{ display:flex; flex-direction:column; gap:8px; } .recentItem{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background: rgba(255,255,255,.03); } .recentItemIcon{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:14px; border-radius:8px; background: rgba(255,255,255,.06); color: rgba(180,190,210,.7); } .recentItemContent{ flex:1; min-width:0; } .recentItemTitle{ font-size:13px; font-weight:600; color:#e7edf8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .recentItemMeta{ font-size:11px; color: rgba(180,190,210,.6); } .recentItemPoints{ font-size:14px; font-weight:700; color: rgba(120,220,120,.85); } .ritualRankList{ display:flex; flex-direction:column; gap:8px; } .ritualRankItem{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background: rgba(255,255,255,.03); } .ritualRankNum{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color: rgba(180,190,210,.6); background: rgba(255,255,255,.05); border-radius:6px; } .ritualRankContent{ flex:1; min-width:0; } .ritualRankName{ font-size:13px; font-weight:600; color:#e7edf8; margin-bottom:4px; } .ritualRankBar{ height:4px; background: rgba(255,255,255,.08); border-radius:2px; overflow:hidden; } .ritualRankBarFill{ height:100%; background: linear-gradient(90deg, rgba(255,204,122,.6), rgba(255,204,122,.9)); border-radius:2px; transition: width .3s ease; } .ritualRankScore{ font-size:14px; font-weight:700; color: rgba(255,204,122,.85); } /* Ritual Consistency Bar (66 days) */ .ritualConsistBar{ height:3px; background: rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:4px; } .ritualConsistBarFill{ height:100%; background: linear-gradient(90deg, rgba(120,180,255,.5), rgba(120,180,255,.8)); border-radius:2px; transition: width .3s ease; } .ritualConsistBarFill.complete{ background: linear-gradient(90deg, rgba(255,200,80,.6), rgba(255,180,50,.9)); } .ritualConsistLabel{ font-size:9px; color: rgba(150,160,180,.5); margin-top:2px; } .ritualRankExp{ font-size:14px; font-weight:700; color: rgba(255,204,122,.9); text-align:right; min-width:45px; } .ritualRankExp span{ display:block; font-size:9px; font-weight:400; color: rgba(255,180,80,.5); } /* Ritual EXP Bar (relative to max) */ .ritualExpBar{ height:4px; background: rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:4px; } .ritualExpBarFill{ height:100%; background: linear-gradient(90deg, rgba(255,180,80,.4), rgba(255,204,122,.8)); border-radius:2px; transition: width .5s ease; } /* ============================ New Fortschritt / Ritual Muster ============================ */ .fortschrittSummary{ display:flex; justify-content:center; gap:14px; margin-bottom:18px; } .fortschrittPill{ text-align:center; padding:10px 16px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background: rgba(0,0,0,.15); } .fortschrittPillValue{ font-size:20px; font-weight:800; color:#e7edf8; } .fortschrittPillLabel{ font-size:10px; color: rgba(180,190,210,.6); } .fortschrittList{ display:flex; flex-direction:column; gap:14px; } .fortschrittCard{ border:1px solid rgba(255,255,255,.1); border-radius:16px; background: rgba(0,0,0,.15); padding:16px; } .fortschrittCardHead{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; } .fortschrittCardInfo{ flex:1; min-width:0; } .fortschrittCardName{ font-size:16px; font-weight:800; color:#e7edf8; margin-bottom:6px; } .fortschrittCardMeta{ display:flex; gap:8px; align-items:center; } .fortschrittStreak{ font-size:12px; font-weight:700; color: rgba(255,180,100,.9); } .fortschrittCardScore{ flex-shrink:0; } /* Simple score display (no ring) */ .fortschrittScoreSimple{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:40px; } .fortschrittScoreSimple .fortschrittScoreNum{ font-size:18px; font-weight:600; color: rgba(255,204,122,.8); line-height:1; } .fortschrittScoreSimple .fortschrittScoreLabel{ font-size:9px; color: rgba(150,160,180,.5); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; } /* EXP Box for ritual cards */ .fortschrittExpBox{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:45px; } .fortschrittExpNum{ font-size:16px; font-weight:700; color: rgba(255,204,122,.9); line-height:1; } .fortschrittExpLabel{ font-size:9px; color: rgba(255,180,80,.5); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; } /* Prestige star for 3-month consistency */ .prestigeStar{ margin-left:6px; font-size:14px; filter: drop-shadow(0 0 4px rgba(255,200,50,.5)); } /* Legacy ring styles (kept for compatibility) */ .fortschrittScoreRing{ width:48px; height:48px; position:relative; } .fortschrittScoreRing svg{ width:100%; height:100%; } .fortschrittScoreRing .fortschrittScoreNum{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#e7edf8; } .fortschrittTimeline{ display:flex; gap:4px; justify-content:center; margin-bottom:14px; } .fortschrittDot{ width:12px; height:12px; border-radius:3px; transition: transform .15s ease; } .fortschrittDot:hover{ transform: scale(1.3); } .fortschrittDot.empty{ background: rgba(255,255,255,.08); } .fortschrittDot.low{ background: rgba(255,204,122,.5); } .fortschrittDot.high{ background: rgba(255,204,122,.9); } .fortschrittDot.today{ box-shadow: 0 0 0 2px rgba(255,204,122,.4); } .fortschrittStats{ display:flex; justify-content:space-between; gap:8px; margin-top:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); } .fortschrittStatItem{ text-align:center; } .fortschrittStatLabel{ display:block; font-size:10px; color: rgba(180,190,210,.5); text-transform:uppercase; } .fortschrittStatValue{ display:block; font-size:12px; font-weight:600; color: rgba(180,190,210,.85); } /* Badge in Stats Row */ .fortschrittStatItem.badgeItem{ flex-shrink:0; display:flex; align-items:center; } /* Streak display - first in row */ .fortschrittStatItem.streakItem{ flex-shrink:0; } .fortschrittStatValue.streakValue{ color: rgba(255,160,90,.95); font-weight:700; text-shadow: 0 0 8px rgba(255,140,60,.4); } /* Frequency display */ .fortschrittStatItem.freqItem{ flex-shrink:0; } .fortschrittStatValue.freqValue{ color: rgba(255,180,100,.9); font-weight:700; } .fortschrittStatValue.freqValue small{ font-size:9px; font-weight:400; color: rgba(255,180,100,.6); } /* Streak next to name */ .nameStreak{ display:inline-flex; align-items:center; gap:3px; margin-left:8px; font-size:12px; font-weight:600; color: rgba(255,180,100,.9); } .fireIconSmall{ flex-shrink:0; } .fortschrittHint{ margin-top:12px; font-size:12px; font-style:italic; color: rgba(170,180,200,.6); } /* Hint directly under name */ .fortschrittHintInline{ margin-top:4px; font-size:11px; font-style:italic; color: rgba(170,180,200,.55); } /* Konsistenz: Episches Kreis-Diagramm */ .consistRingWrap{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; background: rgba(0,0,0,.2); border-radius:10px; } .consistRing{ position:relative; width:56px; height:56px; flex-shrink:0; } .consistRing svg{ width:100%; height:100%; transform: rotate(-90deg); } .consistRingBg{ fill:none; stroke: rgba(255,255,255,.12); stroke-width:5; } .consistRingFill{ fill:none; stroke: #ff8c42; stroke-width:5; stroke-linecap:round; filter: drop-shadow(0 0 6px rgba(255,120,50,.5)); } .consistRingFill.gold, .consistRing.complete .consistRingFill{ stroke: rgba(255,200,80,.95); filter: drop-shadow(0 0 10px rgba(255,180,50,.7)); } @keyframes consistPulse{ 0%, 100%{ filter: drop-shadow(0 0 8px rgba(100,180,255,.5)); } 50%{ filter: drop-shadow(0 0 14px rgba(100,180,255,.7)); } } .consistRingInner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .consistRingNum{ font-size:16px; font-weight:700; color:#e7edf8; line-height:1; } .consistRing.complete .consistRingNum{ color: rgba(255,200,80,.95); text-shadow: 0 0 10px rgba(255,180,50,.5); } .consistRingLabel{ font-size:9px; color: rgba(150,160,180,.6); } .consistRingInfo{ flex:1; } .consistRingTitle{ font-size:12px; font-weight:600; color: rgba(180,190,210,.9); margin-bottom:4px; } .consistRingHint{ font-size:11px; color: rgba(150,160,180,.6); } .consistRingHint.complete{ color: rgba(255,200,80,.8); font-weight:500; } /* Inline Count (no border, no underline) */ .inlineCount{ display: inline; font-size: 0.85em; color: rgba(255,204,122,.7); font-weight: 500; margin-left: 8px; } /* iOS Zoom Prevention */ input, textarea, select { font-size: 16px !important; } /* Alert Messages with Glowing Border */ .alert{ position: relative; padding: 14px 16px; border-radius: 18px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); font-weight: 500; } .alert-success{ color: #dff7ea; animation: alertSuccessGlow 4s ease-in-out forwards; } .alert-danger{ color: #f6d9d9; animation: alertErrorGlow 4s ease-in-out forwards; } .alert-info{ color: #d9edf7; animation: alertSuccessGlow 4s ease-in-out forwards; } .alert-warning{ color: #fff4d9; animation: alertSuccessGlow 4s ease-in-out forwards; } @keyframes alertSuccessGlow{ 0%{ border-color: rgba(60,190,120,.6); box-shadow: 0 0 20px rgba(60,190,120,.4), 0 0 40px rgba(60,190,120,.2); } 25%{ border-color: rgba(60,190,120,.8); box-shadow: 0 0 30px rgba(60,190,120,.6), 0 0 60px rgba(60,190,120,.4), 0 0 80px rgba(60,190,120,.2); } 50%{ border-color: rgba(255,204,122,.8); box-shadow: 0 0 30px rgba(255,204,122,.6), 0 0 60px rgba(255,204,122,.4), 0 0 80px rgba(255,122,47,.2); } 75%{ border-color: rgba(255,204,122,.6); box-shadow: 0 0 20px rgba(255,204,122,.4), 0 0 40px rgba(255,204,122,.2); } 100%{ border-color: rgba(255,204,122,.2); box-shadow: 0 0 8px rgba(255,204,122,.1); } } @keyframes alertErrorGlow{ 0%{ border-color: rgba(190,60,60,.6); box-shadow: 0 0 20px rgba(190,60,60,.4), 0 0 40px rgba(190,60,60,.2); } 25%{ border-color: rgba(190,60,60,.8); box-shadow: 0 0 30px rgba(190,60,60,.6), 0 0 60px rgba(190,60,60,.4), 0 0 80px rgba(190,60,60,.2); } 50%{ border-color: rgba(255,122,47,.8); box-shadow: 0 0 30px rgba(255,122,47,.6), 0 0 60px rgba(255,122,47,.4), 0 0 80px rgba(255,80,47,.2); } 75%{ border-color: rgba(255,122,47,.6); box-shadow: 0 0 20px rgba(255,122,47,.4), 0 0 40px rgba(255,122,47,.2); } 100%{ border-color: rgba(255,122,47,.2); box-shadow: 0 0 8px rgba(255,122,47,.1); } } /* ===================================================== SCOREBOARD HERO - Animated Score + Quote Switch ===================================================== */ .scoreHeroAnimated{ text-align:center; padding:32px 16px 16px; min-height:110px; position:relative; } .scoreHeroContent{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); opacity:0; transition: opacity 2s ease; width:100%; pointer-events:none; } .scoreHeroContent.active{ opacity:1; pointer-events:auto; } .scoreHeroPoints .scoreHeroNum{ font-size:42px; font-weight:700; color: rgba(255,210,130,.92); line-height:1; text-shadow: 0 0 12px rgba(255,200,100,.6), 0 0 28px rgba(255,180,80,.45), 0 0 50px rgba(255,150,50,.3), 0 0 80px rgba(255,120,40,.18); letter-spacing:-0.01em; } .scoreHeroPoints .scoreHeroLabel{ font-size:12px; font-weight:600; color: rgba(180,190,210,.55); text-transform:uppercase; letter-spacing:.12em; margin-top:8px; } .scoreHeroQuoteWrap{ padding:0 20px; } .scoreHeroQuoteText{ font-size:16px; font-style:italic; color: rgba(200,210,225,.85); line-height:1.5; max-width:320px; margin:0 auto; } .scoreHeroStreak{ text-align:center; font-size:13px; color: rgba(255,180,120,.85); font-weight:600; margin-bottom:20px; } /* Archive-style link at bottom */ .archiveLinkWrap{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); } .archiveLink{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background: rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.1); border-radius:12px; color: rgba(200,210,225,.85); text-decoration:none; font-size:14px; font-weight:500; transition: all .2s ease; } .archiveLink:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,204,122,.3); color: rgba(255,204,122,.9); } .archiveLink svg{ width:18px; height:18px; color: rgba(255,204,122,.6); } /* ===================================================== PUNKTEVERLAUF PAGE ===================================================== */ .punkteSummary{ display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; } .punkteSummaryItem{ flex:1; min-width:80px; background: rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 12px; text-align:center; } .punkteSummaryItem.total{ border-color: rgba(255,204,122,.25); } .punkteSummaryLabel{ display:block; font-size:11px; color: rgba(150,160,180,.7); margin-bottom:4px; } .punkteSummaryVal{ font-size:18px; font-weight:700; color: rgba(230,235,245,.9); } .punkteSummaryItem.total .punkteSummaryVal{ color: rgba(255,204,122,.95); } .filterPills{ display:flex; gap:6px; margin-top:10px; } .filterPill{ padding:5px 12px; border-radius:999px; background: rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); color: rgba(170,180,200,.8); font-size:12px; text-decoration:none; transition: all .2s ease; } .filterPill:hover{ border-color: rgba(255,255,255,.2); color: rgba(220,225,235,.9); } .filterPill.active{ background: rgba(255,204,122,.15); border-color: rgba(255,204,122,.4); color: rgba(255,204,122,.95); } .punkteList{ display:flex; flex-direction:column; gap:8px; } .punkteItem{ display:flex; align-items:center; gap:12px; padding:12px 14px; background: rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.08); border-radius:12px; transition: background .15s ease; } .punkteItem:hover{ background: rgba(255,255,255,.03); } .punkteItemIcon{ font-size:16px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; background: rgba(0,0,0,.2); flex-shrink:0; } .punkteItemContent{ flex:1; min-width:0; } .punkteItemTitle{ font-size:14px; font-weight:500; color: rgba(220,225,235,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .punkteItemMeta{ display:flex; gap:8px; margin-top:2px; font-size:11px; color: rgba(140,150,170,.7); } .punkteItemType{ color: rgba(180,190,210,.6); } .punkteItemPts{ font-size:15px; font-weight:600; color: rgba(255,204,122,.85); flex-shrink:0; text-shadow: 0 0 10px rgba(255,180,80,.3); } /* ===================================================== POINTS ACCORDION / BREAKDOWN ===================================================== */ .pointsAccordion{ border:1px solid rgba(255,255,255,.08); border-radius:14px; background: rgba(0,0,0,.12); margin-bottom:20px; overflow:hidden; } .pointsAccordionBtn{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:transparent; border:none; color: rgba(180,190,210,.8); font-size:13px; font-weight:600; cursor:pointer; transition: background .2s ease, color .2s ease; } .pointsAccordionBtn:hover{ background: rgba(255,255,255,.03); color: rgba(220,225,235,.9); } .pointsAccordionBtn.open{ border-bottom:1px solid rgba(255,255,255,.06); } .pointsAccordionChevron{ width:18px; height:18px; color: rgba(255,204,122,.6); transition: transform .25s ease; } .pointsAccordionBtn.open .pointsAccordionChevron{ transform: rotate(180deg); } .pointsAccordionBody{ max-height:0; overflow:hidden; transition: max-height .3s ease; } .pointsAccordionBody.open{ max-height:600px; overflow-y:auto; } .pointsBreakdownList{ padding:8px 12px; display:flex; flex-direction:column; gap:2px; } .pointsBreakdownItem{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; transition: background .15s ease; } .pointsBreakdownItem:hover{ background: rgba(255,255,255,.03); } .pointsBreakdownIcon{ font-size:12px; width:20px; text-align:center; flex-shrink:0; } .pointsBreakdownTitle{ flex:1; font-size:12px; color: rgba(200,210,225,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .pointsBreakdownDate{ font-size:11px; color: rgba(140,150,170,.6); flex-shrink:0; width:56px; text-align:right; } .pointsBreakdownPts{ font-size:12px; font-weight:600; color: rgba(255,204,122,.8); flex-shrink:0; width:40px; text-align:right; } .pointsBreakdownSummary{ border-top:1px solid rgba(255,255,255,.06); padding:12px 16px; display:flex; flex-direction:column; gap:6px; } .pointsBreakdownSumRow{ display:flex; justify-content:space-between; font-size:12px; color: rgba(160,170,190,.7); } .pointsBreakdownSumRow span:last-child{ font-weight:600; color: rgba(200,210,225,.85); } .pointsBreakdownSumRow.total{ margin-top:4px; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); font-size:13px; color: rgba(200,210,225,.9); } .pointsBreakdownSumRow.total span:last-child{ color: rgba(255,204,122,.95); font-weight:700; } /* ==================== MULTIPLAYER / NACHBARWELT ==================== */ /* Connection Card */ .connectionsList{ display: flex; flex-direction: column; gap: 8px; } .connectionCard{ display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; } .connectionName{ display: flex; align-items: center; gap: 8px; font-weight: 600; color: rgba(220,228,240,.9); } .friendIcon{ font-size: 14px; opacity: 0.7; } /* Connect Form */ .connectForm .form-control{ flex: 1; } /* Shared Items List */ .sharedList{ display: flex; flex-direction: column; gap: 8px; } .sharedItem{ display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; transition: all .15s ease; } .sharedItem.done{ opacity: 0.5; background: rgba(0,0,0,.15); } .sharedItem.prioCritical{ border-left: 3px solid rgba(255,100,100,.7); } .sharedItem.prioHigh{ border-left: 3px solid rgba(255,180,100,.7); } .sharedItemInfo{ display: flex; flex-direction: column; gap: 2px; } .sharedItemName{ font-weight: 600; color: rgba(220,228,240,.9); } .sharedItemPartner{ font-size: 12px; color: rgba(180,190,210,.6); display: flex; align-items: center; gap: 4px; } .modeBadge{ font-size: 10px; padding: 2px 6px; background: rgba(255,204,122,.2); color: rgba(255,204,122,.9); border-radius: 4px; margin-left: 6px; } .doneCheck{ color: rgba(120,200,120,.8); font-size: 18px; font-weight: bold; } /* Shared Scoreboard Hero */ .sharedScoreHero{ display: flex; align-items: center; justify-content: center; gap: 24px; padding: 28px 20px; background: linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.15)); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; margin-bottom: 24px; } .sharedScorePlayer{ text-align: center; flex: 1; } .sharedScorePlayerName{ font-size: 14px; color: rgba(180,190,210,.7); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .sharedScorePlayerPoints{ font-size: 42px; font-weight: 800; color: rgba(255,210,130,.92); text-shadow: 0 0 12px rgba(255,200,100,.6), 0 0 28px rgba(255,180,80,.45); line-height: 1; } .sharedScorePlayerLabel{ font-size: 11px; color: rgba(180,190,210,.5); text-transform: uppercase; margin-top: 4px; } .sharedScoreVs{ font-size: 28px; opacity: 0.6; } /* Shared Stats Grid */ .sharedStatsGrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 560px){ .sharedStatsGrid{ grid-template-columns: 1fr; } } .sharedStatCard{ background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px; text-align: center; } .sharedStatTitle{ font-size: 11px; text-transform: uppercase; color: rgba(180,190,210,.6); margin-bottom: 10px; letter-spacing: 0.5px; } .sharedStatCompare{ display: flex; align-items: center; justify-content: center; gap: 12px; } .sharedStatNum{ font-size: 28px; font-weight: 700; color: rgba(220,228,240,.9); } .sharedStatSep{ font-size: 20px; color: rgba(180,190,210,.4); } .sharedStatNames{ display: flex; justify-content: space-between; font-size: 10px; color: rgba(180,190,210,.5); margin-top: 8px; padding: 0 8px; } /* Quick Stats Mini */ .quickStatsRow{ display: flex; gap: 12px; justify-content: center; } .quickStatMini{ text-align: center; padding: 12px 20px; background: rgba(0,0,0,.2); border-radius: 10px; } .quickStatMiniNum{ display: block; font-size: 24px; font-weight: 700; color: rgba(255,204,122,.85); } .quickStatMiniLabel{ font-size: 10px; color: rgba(180,190,210,.6); text-transform: uppercase; } /* Completed List */ .completedList{ background: rgba(0,0,0,.15); border-radius: 10px; padding: 12px; } .completedListTitle{ font-size: 12px; color: rgba(180,190,210,.6); text-transform: uppercase; margin-bottom: 8px; } .completedItem{ display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); } .completedItem:last-child{ border-bottom: none; } .completedCheck{ color: rgba(120,200,120,.7); font-size: 14px; } .completedName{ color: rgba(180,190,210,.7); font-size: 13px; } /* Accordion Styling */ .accordion-item.bgTransparent{ background: transparent; border: 1px solid rgba(255,255,255,.08); } .accordion-item.bgTransparent .accordion-button{ background: rgba(0,0,0,.2); color: rgba(220,228,240,.9); font-weight: 600; } .accordion-item.bgTransparent .accordion-button:not(.collapsed){ background: rgba(0,0,0,.3); color: rgba(255,204,122,.9); } .accordion-item.bgTransparent .accordion-button::after{ filter: invert(0.8); } .accordion-item.bgTransparent .accordion-body{ background: rgba(0,0,0,.15); } /* Empty State */ .emptyState{ text-align: center; padding: 40px 20px; color: rgba(180,190,210,.6); } .emptyState .sub{ font-size: 13px; opacity: 0.7; } /* Button Outline Ember */ .btn-outline-ember{ color: rgba(255,204,122,.85); border-color: rgba(255,204,122,.4); background: transparent; } .btn-outline-ember:hover{ background: rgba(255,204,122,.15); color: rgba(255,204,122,1); border-color: rgba(255,204,122,.6); } /* Shared Items in normalen Listen */ .friendIcon{ font-size: 11px; color: rgba(255,204,122,.7); margin-right: 2px; } .sharedPartnerTag{ font-size: 11px; color: rgba(180,190,210,.5); margin-left: 6px; font-weight: 400; display: inline-flex; align-items: center; gap: 2px; } .questLinkTag{ font-size: 11px; color: rgba(180,190,210,.5); margin-left: 6px; font-weight: 400; display: inline-flex; align-items: center; gap: 2px; } .questLinkIcon{ font-size: 10px; color: rgba(150,200,150,.7); margin-right: 2px; } /* Shared Form Style (Geteilte Welt Stil) */ .sharedFormRow{ display: flex; flex-direction: row; gap: 8px; margin-bottom: 10px; } .sharedFormCol{ flex: 1; } .sharedFormSelect, .sharedFormInput{ background: rgba(0,0,0,.3); border: 1px solid rgba(150,130,200,.2); color: rgba(220,210,240,.9); font-size: 13px; padding: 8px 12px; border-radius: 6px; } .sharedFormSelect:focus, .sharedFormInput:focus{ background: rgba(0,0,0,.4); border-color: rgba(180,160,230,.4); color: rgba(240,230,255,1); box-shadow: 0 0 0 2px rgba(150,130,200,.15); outline: none; } .sharedFormInput::placeholder{ color: rgba(180,170,210,.4); } .sharedFormBtn{ background: linear-gradient(135deg, rgba(100,80,150,.5), rgba(80,60,120,.6)); border: 1px solid rgba(150,130,200,.25); color: rgba(230,220,255,.9); font-weight: 500; padding: 8px 16px; border-radius: 6px; transition: all .2s ease; font-size: 12px; width: 100%; cursor: pointer; } .sharedFormBtn:hover{ background: linear-gradient(135deg, rgba(120,100,170,.6), rgba(100,80,140,.7)); border-color: rgba(180,160,230,.4); color: #fff; } /* EXP-Verlauf Tabelle */ .expHistoryTable{ background: rgba(0,0,0,.2); border-radius: 10px; overflow: hidden; } .expHistoryHeader, .expHistoryRow{ display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 10px 14px; text-align: center; } .expHistoryHeader{ background: rgba(0,0,0,.3); font-size: 11px; text-transform: uppercase; color: rgba(180,190,210,.6); letter-spacing: 0.5px; } .expHistoryRow{ border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; color: rgba(180,190,210,.7); } .expHistoryRow:last-child{ border-bottom: none; } .expHistoryDate{ text-align: left; color: rgba(180,190,210,.5); } .expHistoryUser, .expHistoryPartner{ font-weight: 500; } .expHistoryUser.hasExp, .expHistoryPartner.hasExp{ color: rgba(255,204,122,.9); } /* Page Icon in Headers */ .pageIcon{ margin-right: 6px; color: rgba(255,204,122,.8); } /* ============================================ iOS PWA SAFE AREAS (Notch, Home Indicator) ============================================ */ /* Wrap-Padding für Safe Areas */ @supports(padding: env(safe-area-inset-top)) { .wrap { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Logout-Button unten */ .logoutfabwrap { padding-bottom: env(safe-area-inset-bottom); } /* Panel extra Padding für Safe Area */ .panel { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } /* Body-Background bis zu den Rändern */ body { background-attachment: fixed; } } /* iOS Standalone Mode Detection */ @media all and (display-mode: standalone) { /* Weniger Rand oben im Standalone-Modus */ .topbar { padding-top: 8px; } } /* Prevent iOS "bounce" scroll effect */ html { overscroll-behavior: none; } /* iOS Touch Feedback */ .btn, .iconbtn, .floatCard, a { -webkit-tap-highlight-color: rgba(255,204,122,0.15); } /* iOS Input Zoom Prevention */ input, select, textarea { font-size: 16px !important; } /* iOS PWA Status Bar Area Background */ @supports(padding: env(safe-area-inset-top)) { body::before { padding-top: env(safe-area-inset-top); } } /* ============================================ COMPLETE MODE TOGGLE (Geteilte Welt) ============================================ */ .completeModeRow { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 10px 12px; background: rgba(0,0,0,.2); border-radius: 8px; flex-wrap: wrap; } .completeModeLabel { font-size: 12px; color: rgba(180,190,210,.6); text-transform: uppercase; letter-spacing: 0.5px; } .completeModeOption { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: all .2s ease; } .completeModeOption:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } .completeModeOption input[type="radio"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 2px solid rgba(180,190,210,.4); border-radius: 50%; background: transparent; cursor: pointer; position: relative; } .completeModeOption input[type="radio"]:checked { border-color: rgba(255,204,122,.8); } .completeModeOption input[type="radio"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: rgba(255,204,122,.9); border-radius: 50%; } .completeModeOption span { font-size: 13px; color: rgba(180,190,210,.8); } .completeModeOption:has(input:checked) { background: rgba(255,204,122,.1); border-color: rgba(255,204,122,.3); } .completeModeOption:has(input:checked) span { color: rgba(255,204,122,.9); } /* ============================================ ARCHIV CARDS - Tier-basierte Farbeffekte ============================================ */ .archivCard { position: relative; border-radius: 14px; padding: 12px; background: rgba(10,12,20,.6); border: 1px solid rgba(255,255,255,.1); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .archivCard:hover { transform: translateY(-2px); } /* Tier-spezifische Glow-Effekte */ .archivCard.tier-common { border-color: rgba(140,150,170,.25); box-shadow: 0 4px 20px rgba(0,0,0,.3); } .archivCard.tier-uncommon { border-color: rgba(80,200,120,.35); box-shadow: 0 4px 25px rgba(80,200,120,.15), inset 0 1px 0 rgba(80,200,120,.1); } .archivCard.tier-uncommon::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(80,200,120,.12), transparent 60%); pointer-events: none; } .archivCard.tier-rare { border-color: rgba(70,150,255,.4); box-shadow: 0 4px 30px rgba(70,150,255,.2), inset 0 1px 0 rgba(70,150,255,.15); } .archivCard.tier-rare::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(70,150,255,.15), transparent 55%), radial-gradient(ellipse at 70% 100%, rgba(100,180,255,.08), transparent 50%); pointer-events: none; } .archivCard.tier-epic { border-color: rgba(180,100,255,.45); box-shadow: 0 4px 35px rgba(180,100,255,.25), inset 0 1px 0 rgba(180,100,255,.2); animation: epicPulse 3s ease-in-out infinite; } .archivCard.tier-epic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 0%, rgba(180,100,255,.18), transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(140,80,220,.12), transparent 45%); pointer-events: none; } @keyframes epicPulse { 0%, 100% { box-shadow: 0 4px 35px rgba(180,100,255,.25), inset 0 1px 0 rgba(180,100,255,.2); } 50% { box-shadow: 0 6px 40px rgba(180,100,255,.35), inset 0 1px 0 rgba(180,100,255,.25); } } .archivCard.tier-legendary { border-color: rgba(255,180,60,.5); box-shadow: 0 4px 40px rgba(255,180,60,.3), 0 0 60px rgba(255,120,40,.15), inset 0 1px 0 rgba(255,200,100,.25); animation: legendaryGlow 2.5s ease-in-out infinite; } .archivCard.tier-legendary::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 0%, rgba(255,200,100,.2), transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(255,140,50,.15), transparent 45%), linear-gradient(135deg, rgba(255,220,150,.05) 0%, transparent 50%); pointer-events: none; } .archivCard.tier-legendary::after { content: "✦"; position: absolute; top: 8px; right: 10px; font-size: 10px; color: rgba(255,200,100,.6); animation: legendarySparkle 2s ease-in-out infinite; } @keyframes legendaryGlow { 0%, 100% { box-shadow: 0 4px 40px rgba(255,180,60,.3), 0 0 60px rgba(255,120,40,.15), inset 0 1px 0 rgba(255,200,100,.25); } 50% { box-shadow: 0 6px 50px rgba(255,180,60,.4), 0 0 80px rgba(255,120,40,.2), inset 0 1px 0 rgba(255,200,100,.3); } } @keyframes legendarySparkle { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } } /* Archiv Card Inhalt */ .archivHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .archivTitle { font-size: 14px; font-weight: 600; color: #e7edf8; line-height: 1.3; flex: 1; min-width: 0; } .archivPoints { font-size: 16px; font-weight: 700; color: rgba(255,204,122,.9); text-shadow: 0 0 12px rgba(255,180,80,.4); flex-shrink: 0; } .archivBadges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; } .archivBadge { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 3px 7px; border-radius: 4px; background: rgba(140,150,170,.15); color: rgba(180,190,210,.8); display: inline-flex; align-items: center; gap: 3px; } .archivBadge.type { background: rgba(180,190,210,.12); color: rgba(180,190,210,.7); } /* Schwierigkeit Badges - Sterne ★ */ .archivBadge.diff.tier-common { background: rgba(140,150,170,.15); color: rgba(180,190,210,.8); } .archivBadge.diff.tier-common::before { content: "★☆☆☆☆"; font-size: 7px; letter-spacing: -1px; } .archivBadge.diff.tier-uncommon { background: rgba(80,200,120,.2); color: rgba(120,230,150,.9); } .archivBadge.diff.tier-uncommon::before { content: "★★☆☆☆"; font-size: 7px; letter-spacing: -1px; } .archivBadge.diff.tier-rare { background: rgba(70,150,255,.2); color: rgba(120,180,255,.9); } .archivBadge.diff.tier-rare::before { content: "★★★☆☆"; font-size: 7px; letter-spacing: -1px; } .archivBadge.diff.tier-epic { background: rgba(180,100,255,.2); color: rgba(200,140,255,.9); } .archivBadge.diff.tier-epic::before { content: "★★★★☆"; font-size: 7px; letter-spacing: -1px; } .archivBadge.diff.tier-legendary { background: rgba(255,180,60,.25); color: rgba(255,210,120,.95); text-shadow: 0 0 8px rgba(255,180,60,.5); } .archivBadge.diff.tier-legendary::before { content: "★★★★★"; font-size: 7px; letter-spacing: -1px; } /* Wichtigkeit Badges - Diamanten ◆ */ .archivBadge.imp.tier-common { background: rgba(140,150,170,.15); color: rgba(180,190,210,.8); } .archivBadge.imp.tier-common::before { content: "◆◇◇◇◇"; font-size: 7px; letter-spacing: -1px; } .archivBadge.imp.tier-uncommon { background: rgba(80,200,120,.2); color: rgba(120,230,150,.9); } .archivBadge.imp.tier-uncommon::before { content: "◆◆◇◇◇"; font-size: 7px; letter-spacing: -1px; } .archivBadge.imp.tier-rare { background: rgba(70,150,255,.2); color: rgba(120,180,255,.9); } .archivBadge.imp.tier-rare::before { content: "◆◆◆◇◇"; font-size: 7px; letter-spacing: -1px; } .archivBadge.imp.tier-epic { background: rgba(180,100,255,.2); color: rgba(200,140,255,.9); } .archivBadge.imp.tier-epic::before { content: "◆◆◆◆◇"; font-size: 7px; letter-spacing: -1px; } .archivBadge.imp.tier-legendary { background: rgba(255,180,60,.25); color: rgba(255,210,120,.95); text-shadow: 0 0 8px rgba(255,180,60,.5); } .archivBadge.imp.tier-legendary::before { content: "◆◆◆◆◆"; font-size: 7px; letter-spacing: -1px; } /* Shared Badge */ .archivBadge.shared { background: rgba(120,180,255,.2); color: rgba(150,200,255,.9); border: 1px solid rgba(120,180,255,.3); } .archivBadge.shared::before { content: none; } .archivCard.shared { border-left: 2px solid rgba(120,180,255,.4); } /* Todo Shared Badge */ .todoBadge.shared { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(120,180,255,.2); color: rgba(150,200,255,.9); margin-left: 6px; vertical-align: middle; } .todoItem.shared { border-left: 2px solid rgba(120,180,255,.4); } /* Punkteverlauf Shared */ .punkteItem.shared { border-left: 2px solid rgba(120,180,255,.4); } .punkteItemPartner { font-size: 11px; color: rgba(150,200,255,.8); margin-left: 8px; } .punkteItemPartner::before { content: "⚭ "; } .archivStats { display: flex; gap: 12px; font-size: 11px; color: rgba(170,182,204,.6); } .archivStats span { display: flex; align-items: center; gap: 4px; } /* Archiv-Design für aktive Karten */ .archivCard { flex: 1; } .archivCompleteBtn { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: rgba(255,204,122,.75); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; flex-shrink: 0; } .archivCompleteBtn svg { width: 18px; height: 18px; } .archivCompleteBtn:hover { color: rgba(255,204,122,1); transform: scale(1.1); } .archivCompleteBtn:active { transform: scale(0.95); } .archivDoneCheck { font-size: 18px; color: rgba(80,200,120,.7); flex-shrink: 0; } .archivCard.cardDone { opacity: .65; } .archivCard.cardDone .archivTitle { text-decoration: line-through; opacity: .7; }