.immo-ico { width:1em; height:1em; fill:currentColor; display:inline-block; vertical-align:-0.15em; } .immo-ico-stroke { fill:none; } .hql-icon .immo-ico, .umi-icon .immo-ico { width:12px; height:12px; } .up-menu-item .umi-icon .immo-ico { width:18px; height:18px; } .media-slider-arrow .immo-ico, .media-slider-volume-btn .immo-ico { width:14px; height:14px; } .socials-panel a .soc-mark { width:18px; height:18px; display:block; } .socials-panel .soc-ico .soc-mark { margin:0; } .st-seal-wrap .side-seal, .vote-cta-medallion .side-seal { display:block; margin:0 auto; } .ss-divider .immo-ico { width:9px; height:9px; color:#ffcc00; opacity:0.75; } /* Sharp Immortality backdrop — one unfiltered photo, overlays only */ html { background-color: #0d0804; } html::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: #0d0804; background-image: url('/img/mavis.jpg?v=13'); background-repeat: no-repeat; background-position: center center; background-size: cover; image-rendering: auto; } html.night-mode { background-color: #04060c; } html.night-mode::before { background-color: #04060c; background-image: url('/img/mavis_dark.jpg?v=3'); background-repeat: no-repeat; background-position: center center; background-size: cover; } body { background-image: none !important; background-color: transparent !important; position: relative; z-index: 1; } body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 42% at 50% 0%, rgba(255,200,80,0.11), transparent 55%), linear-gradient(180deg, rgba(13,8,4,0.05) 0%, transparent 30%, rgba(13,8,4,0.14) 100%); } #scale-outer { position: relative; z-index: 1; } /* --- Premium cinematic Immortality nav rail --- */ #cssmenu { position: relative !important; z-index: 10050 !important; width: 100% !important; height: 50px !important; box-sizing: border-box !important; margin: 18px auto 16px auto !important; border-radius: 12px !important; border: 1px solid rgba(255, 204, 0, 0.38) !important; border-bottom: 1px solid rgba(255, 210, 100, 0.65) !important; overflow: visible !important; background: radial-gradient(1.5px 1.5px at 7% 30%, rgba(255,236,180,0.75), transparent), radial-gradient(1px 1px at 22% 68%, rgba(255,204,0,0.45), transparent), radial-gradient(1.2px 1.2px at 48% 22%, rgba(255,220,120,0.4), transparent), radial-gradient(1px 1px at 74% 72%, rgba(255,180,40,0.4), transparent), radial-gradient(1.4px 1.4px at 93% 28%, rgba(255,236,180,0.65), transparent), radial-gradient(ellipse 40% 120% at 0% 50%, rgba(255,180,40,0.12), transparent 55%), radial-gradient(ellipse 40% 120% at 100% 50%, rgba(255,160,30,0.1), transparent 55%), radial-gradient(ellipse 80% 80% at 50% 0%, rgba(255,220,120,0.1), transparent 50%), linear-gradient(180deg, rgba(255,236,180,0.1) 0%, rgba(255,255,255,0.02) 45%, rgba(255,204,0,0.05) 100%), linear-gradient(90deg, #1c120e 0%, #241814 20%, #1a1210 50%, #241814 80%, #1c120e 100%) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 32px rgba(255, 160, 40, 0.1), inset 0 1px 0 rgba(255, 236, 180, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important; } #cssmenu::before { content: "" !important; display: block !important; position: absolute !important; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; z-index: 2; pointer-events: none; background: linear-gradient(#ffd24a,#ffd24a) center/1.5px 100% no-repeat, linear-gradient(#ffd24a,#ffd24a) center/100% 1.5px no-repeat, radial-gradient(circle, #fff3c4 0 1.5px, transparent 2.2px); filter: drop-shadow(0 0 5px rgba(255,200,60,0.7)); opacity: 0.85; } #cssmenu::after { content: "" !important; display: block !important; position: absolute !important; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; z-index: 2; pointer-events: none; background: linear-gradient(#ffd24a,#ffd24a) center/1.5px 100% no-repeat, linear-gradient(#ffd24a,#ffd24a) center/100% 1.5px no-repeat, radial-gradient(circle, #fff3c4 0 1.5px, transparent 2.2px); filter: drop-shadow(0 0 5px rgba(255,200,60,0.7)); opacity: 0.85; } #cssmenu > ul { display: flex !important; align-items: stretch !important; justify-content: space-between !important; list-style: none !important; height: 100% !important; padding: 0 22px !important; margin: 0 auto !important; width: 100% !important; box-sizing: border-box !important; position: relative !important; z-index: 1 !important; } #cssmenu li { list-style: none !important; } #cssmenu li::marker { display: none !important; content: "" !important; } #cssmenu > ul > li { position: relative !important; float: none !important; height: auto !important; flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; align-items: stretch !important; justify-content: center !important; } #cssmenu > ul > li + li::before { content: none !important; display: none !important; } #cssmenu > ul > li > a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; height: auto !important; line-height: 1 !important; margin: 0 !important; padding: 0 6px !important; box-sizing: border-box !important; background: transparent !important; background-image: none !important; border: none !important; border-bottom: none !important; box-shadow: none !important; color: #ebe0d0 !important; font-family: 'Cinzel', serif !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important; transition: color 0.22s ease, text-shadow 0.22s ease !important; white-space: nowrap !important; } #cssmenu > ul > li > a span { background: none !important; } #cssmenu > ul > li > a::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #ffcc00, #fff3c4, #ffcc00, transparent); box-shadow: 0 0 8px rgba(255,204,0,0.55); transition: width 0.28s ease, left 0.28s ease, opacity 0.28s ease; opacity: 0.95; } #cssmenu > ul > li > a:hover, #cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a { color: #ffe08a !important; background: transparent !important; box-shadow: none !important; text-shadow: 0 0 12px rgba(255,204,0,0.4), 0 1px 2px rgba(0,0,0,0.5) !important; transform: none !important; border-bottom: none !important; } #cssmenu > ul > li > a:hover::after, #cssmenu > ul > li:hover > a::after, #cssmenu > ul > li.active > a::after { width: 62%; left: 19%; } .mn-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 0 !important; flex-shrink: 0; color: rgba(255, 204, 0, 0.9); transition: transform 0.22s ease, filter 0.22s ease; filter: drop-shadow(0 0 3px rgba(255,204,0,0.35)); } .mn-icon .immo-ico, .mn-icon .mn-nav-ico { width: 18px; height: 18px; display: block; } #cssmenu > ul > li > a:hover .mn-icon, #cssmenu > ul > li.active > a .mn-icon { color: #ffcc00; transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 6px rgba(255,210,80,0.7)); } .mn-caret { display: inline-flex; align-items: center; margin-left: 1px; opacity: 0.55; transition: opacity 0.22s ease, transform 0.22s ease; } .mn-caret .immo-ico { width: 9px; height: 9px; } #cssmenu > ul > li:hover > a .mn-caret { opacity: 0.95; transform: translateY(1px); } /* Vote: soft mist + fine red/blue lights (attention without neon scream) */ #cssmenu > ul > li.nav-vote-glow { overflow: hidden; border-radius: 6px; } #cssmenu > ul > li.nav-vote-glow > a { z-index: 1; } #cssmenu > ul > li.nav-vote-glow > a::before { content: ''; position: absolute; inset: 4px 8%; z-index: -1; border-radius: 5px; pointer-events: none; background: radial-gradient(ellipse 55% 70% at 22% 50%, rgba(210, 50, 55, 0.22), transparent 70%), radial-gradient(ellipse 55% 70% at 78% 50%, rgba(55, 120, 210, 0.2), transparent 70%), linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); background-size: 140% 140%, 140% 140%, 200% 100%; background-position: 0% 50%, 100% 50%, -40% 50%; filter: blur(4px); opacity: 0.85; animation: navVoteMist 5.5s ease-in-out infinite; } #cssmenu > ul > li.nav-vote-glow > a .mn-icon { color: #ffcc00; animation: navVoteIconTint 5.5s ease-in-out infinite; } #cssmenu > ul > li.nav-vote-glow > a span:not(.mn-icon) { animation: navVoteLabelTint 5.5s ease-in-out infinite; } #cssmenu > ul > li.nav-vote-glow:hover > a::before, #cssmenu > ul > li.nav-vote-glow.active > a::before { animation-duration: 3.2s; opacity: 1; } @keyframes navVoteMist { 0%, 100% { background-position: 8% 40%, 92% 60%, -30% 50%; opacity: 0.55; } 35% { background-position: 35% 55%, 65% 40%, 40% 50%; opacity: 0.9; } 65% { background-position: 70% 45%, 30% 55%, 110% 50%; opacity: 0.7; } } @keyframes navVoteIconTint { 0%, 100% { color: #ffcc00; filter: drop-shadow(0 0 3px rgba(80, 130, 210, 0.25)); } 40% { color: #ffd88a; filter: drop-shadow(0 0 5px rgba(210, 55, 60, 0.35)); } 70% { color: #ffe4a8; filter: drop-shadow(0 0 5px rgba(60, 130, 220, 0.35)); } } @keyframes navVoteLabelTint { 0%, 100% { color: #ebe0d0; text-shadow: 0 0 0 transparent; } 40% { color: #fff0e8; text-shadow: 0 0 8px rgba(210, 60, 70, 0.28); } 70% { color: #eef4ff; text-shadow: 0 0 8px rgba(70, 130, 220, 0.28); } } @media (prefers-reduced-motion: reduce) { #cssmenu > ul > li.nav-vote-glow > a::before, #cssmenu > ul > li.nav-vote-glow > a .mn-icon, #cssmenu > ul > li.nav-vote-glow > a span:not(.mn-icon) { animation: none !important; } } #cssmenu .lang-flag { display: inline-block; width: 18px; height: 13px; object-fit: cover; border-radius: 2px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.22); } html[lang="tr"] #cssmenu > ul > li > a, html[lang="zh"] #cssmenu > ul > li > a, html[lang="ar"] #cssmenu > ul > li > a, html[lang="fil"] #cssmenu > ul > li > a, html[lang="de"] #cssmenu > ul > li > a { font-size: 11px !important; letter-spacing: 0.5px !important; padding: 0 4px !important; } #cssmenu li.has-sub { position: relative; z-index: 1; } #cssmenu li.has-sub:hover, #cssmenu li.has-sub:focus-within { z-index: 10050 !important; } #cssmenu li.has-sub > ul { display: block !important; position: absolute !important; top: calc(100% - 2px) !important; left: 0 !important; z-index: 10060 !important; min-width: 236px; height: auto !important; max-height: none !important; overflow: visible !important; margin: 0 !important; padding: 10px 8px 8px !important; list-style: none !important; background-color: rgba(18, 12, 11, 0.96) !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,204,0,0.03) 100%) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 204, 0, 0.38) !important; border-radius: 10px !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity 0.18s ease 0.08s, transform 0.18s ease 0.08s, visibility 0.18s ease 0.08s; pointer-events: none; } #cssmenu > ul > li.has-sub:last-child > ul { left: auto !important; right: 0 !important; } #cssmenu li.has-sub:hover > ul, #cssmenu li.has-sub:focus-within > ul { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; } #cssmenu li.has-sub > ul::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 12px; background: transparent; } #cssmenu li.has-sub > ul > li { list-style: none !important; float: none !important; width: auto !important; height: auto !important; display: block !important; } #cssmenu li.has-sub > ul > li > a { position: relative; overflow: hidden; display: block !important; height: auto !important; line-height: normal !important; padding: 10px 14px !important; margin: 2px 0 !important; border-radius: 6px; background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #ebe0d0 !important; font-family: 'Cinzel', serif !important; font-size: 11.5px !important; letter-spacing: 0.9px !important; text-transform: uppercase !important; white-space: nowrap; transition: color 0.18s ease, background 0.18s ease, padding-left 0.18s ease; } #cssmenu li.has-sub > ul > li > a::before { content: ''; display: inline-block; width: 0; height: 4px; margin-right: 0; border-radius: 50%; background: #ffcc00; vertical-align: middle; opacity: 0; transition: width 0.18s ease, margin-right 0.18s ease, opacity 0.18s ease; } #cssmenu li.has-sub > ul > li > a::after { content: none; } #cssmenu li.has-sub > ul > li > a:hover { color: #ffcc00 !important; background: rgba(255, 204, 0, 0.07) !important; text-shadow: none; padding-left: 16px !important; } #cssmenu li.has-sub > ul > li > a:hover::before { width: 4px; margin-right: 8px; opacity: 1; } #cssmenu li.has-sub li.has-sub > ul { top: 0 !important; left: calc(100% + 4px) !important; margin-left: 0 !important; } #cssmenu li.has-sub li.has-sub > ul::before { top: 0; left: -10px; right: auto; width: 12px; height: 100%; } .xpand + *, .content_hider + * { display: none; } .zoom-fixed-wrap { position: fixed; right: 14px; z-index: 999999; transform-origin: top right; } #ui-toggle-btn-wrap { top: 14px; overflow: visible; } #music-toggle-btn-wrap { top: 96px; overflow: visible; } #servers-btn-wrap { top: 170px; overflow: visible; } #collapse-all-btn-wrap { top: 82px; } body:has(#collapse-all-btn-wrap) #music-toggle-btn-wrap { top: 128px; } /* --- Day / Night commutator (stanga) + page-turn + paleta noapte --- */ #theme-switch-wrap { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); z-index: 999999; } /* Mobile: real sizes (no transform scale — pinch-zoom safe) Also catch phone landscape (width often >768 but height short). */ @media (max-width: 768px), (orientation: landscape) and (max-height: 500px) { #theme-switch-wrap { left: 6px; top: auto; bottom: max(10px, env(safe-area-inset-bottom, 0px)); transform: none; z-index: 99990; } .theme-switch { gap: 0; } .theme-switch .ts-immo-word, .theme-switch.is-night .ts-immo-word, .theme-switch .ts-label-wrap, .theme-switch .ts-drop, .theme-switch .ts-hang, .theme-switch .ts-label-rays, .theme-switch .ts-label-night, .theme-switch .ts-stars .ts-shoot, .theme-switch .ts-stars, .theme-switch .ts-track::after { display: none !important; } .theme-switch .ts-track { width: 34px; height: 64px; border-radius: 20px; border-width: 1.5px; } .theme-switch .ts-track::before { inset: 2px; border-radius: 16px; } .theme-switch .ts-knob { width: 20px; height: 20px; margin-left: -10px; top: 5px; animation: none; } .theme-switch.is-night .ts-knob { top: 38px; } .theme-switch .ts-sun { top: 4px; transform: scale(0.42); transform-origin: center top; } .theme-switch .ts-moon { bottom: 3px; transform: scale(0.42); transform-origin: center bottom; } .theme-switch .ts-label { display: none !important; } /* Bottom cluster next to Day/Night — roomy gaps, no label collision */ .zoom-fixed-wrap { right: auto; left: 48px; top: auto; bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 4px)); transform: none !important; z-index: 99990; } #ui-toggle-btn-wrap { left: 48px; top: auto; } #music-toggle-btn-wrap { left: 78px; top: auto; } #servers-btn-wrap { left: 108px; top: auto; } .servers-label { display: none; } #servers-btn { width: 26px; height: 26px; border-width: 1px; } #servers-btn svg { width: 16px; height: 16px; } #servers-btn:hover { transform: none; } #ui-toggle-btn { width: 26px; height: 26px; border-width: 1px; box-shadow: 0 0 6px rgba(255, 204, 0, 0.35), 0 1px 4px rgba(0,0,0,0.65); } #ui-toggle-btn .ui-horus { width: 14px; height: 12px; } #ui-toggle-btn .ui-lotus { width: 12px; height: 12px; } #ui-toggle-btn .ui-orbit-sun, #ui-toggle-btn .ui-orbit-moon { display: none !important; } #music-toggle-btn, #collapse-all-btn { width: 24px; height: 24px; border-width: 1px; animation: none !important; box-shadow: 0 0 5px rgba(255, 204, 0, 0.3), 0 1px 3px rgba(0,0,0,0.65); } #music-toggle-btn .ui-lyre, #collapse-all-btn .ui-ascend { width: 11px; height: 11px; } #ui-toggle-btn:hover, #music-toggle-btn:hover, #collapse-all-btn:hover { transform: none; } } @media (max-width: 420px) and (orientation: portrait) { #theme-switch-wrap { left: 4px; bottom: max(8px, env(safe-area-inset-bottom, 0px)); } .theme-switch .ts-track { width: 30px; height: 56px; } .theme-switch .ts-knob { width: 18px; height: 18px; margin-left: -9px; top: 4px; } .theme-switch.is-night .ts-knob { top: 32px; } #ui-toggle-btn-wrap { left: 42px; } #collapse-all-btn-wrap { left: 70px; } #music-toggle-btn-wrap { left: 70px; } body:has(#collapse-all-btn-wrap) #music-toggle-btn-wrap { left: 98px; } #ui-toggle-btn { width: 24px; height: 24px; } #music-toggle-btn, #collapse-all-btn { width: 22px; height: 22px; } } /* Phone landscape: split dock — Day/Night left, utilities right (no mid-screen giants) */ @media (orientation: landscape) and (max-height: 500px) { #theme-switch-wrap { left: max(6px, env(safe-area-inset-left, 0px)); bottom: max(6px, env(safe-area-inset-bottom, 0px)); top: auto; transform: none; } .theme-switch .ts-track { width: 26px; height: 48px; border-radius: 16px; } .theme-switch .ts-track::before { inset: 1.5px; border-radius: 14px; } .theme-switch .ts-knob { width: 16px; height: 16px; margin-left: -8px; top: 3px; } .theme-switch.is-night .ts-knob { top: 28px; } .theme-switch .ts-sun { top: 2px; transform: scale(0.36); } .theme-switch .ts-moon { bottom: 2px; transform: scale(0.36); } .zoom-fixed-wrap { left: auto !important; right: max(8px, env(safe-area-inset-right, 0px)); top: auto !important; bottom: max(8px, env(safe-area-inset-bottom, 0px)); transform: none !important; } #ui-toggle-btn-wrap { right: max(8px, env(safe-area-inset-right, 0px)); left: auto !important; } #collapse-all-btn-wrap { right: max(40px, calc(env(safe-area-inset-right, 0px) + 32px)); left: auto !important; } #music-toggle-btn-wrap { right: max(40px, calc(env(safe-area-inset-right, 0px) + 32px)); left: auto !important; } body:has(#collapse-all-btn-wrap) #music-toggle-btn-wrap { right: max(72px, calc(env(safe-area-inset-right, 0px) + 64px)); left: auto !important; top: auto !important; } #ui-toggle-btn { width: 22px; height: 22px; } #music-toggle-btn, #collapse-all-btn { width: 20px; height: 20px; } #servers-btn-wrap { right: max(72px, calc(env(safe-area-inset-right, 0px) + 64px)); left: auto !important; } body:has(#collapse-all-btn-wrap) #servers-btn-wrap { right: max(104px, calc(env(safe-area-inset-right, 0px) + 96px)); left: auto !important; } #servers-btn { width: 22px; height: 22px; } #servers-btn svg { width: 14px; height: 14px; } } .theme-switch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: none; cursor: pointer; padding: 0; font-family: 'Cinzel', serif; -webkit-tap-highlight-color: transparent; } .theme-switch .ts-aura { display: none; } .theme-switch .ts-immo-word { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: 3.4px; text-transform: uppercase; white-space: nowrap; color: #ffd978; text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 8px rgba(255,204,0,0.75), 0 0 14px rgba(255,180,40,0.35); } .theme-switch.is-night .ts-immo-word { margin-top: 56px; color: #ffe08a; text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 8px rgba(255,204,0,0.8), 0 0 14px rgba(255,180,40,0.4); } .theme-switch .ts-track { position: relative; z-index: 1; width: 86px; height: 180px; border-radius: 48px; background: linear-gradient(to bottom, rgba(255,236,180,0.16), transparent 32%), radial-gradient(ellipse at 50% 16%, rgba(255,200,80,0.14), transparent 48%), linear-gradient(to bottom, #4a3228, #1c1210 55%, #100b0a); border: 2px solid #e4c66a; box-shadow: 0 0 6px rgba(255,204,0,0.16), 0 10px 18px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 2px 3px rgba(255,236,190,0.18), inset 0 -10px 18px rgba(0,0,0,0.38); overflow: hidden; transition: border-color .5s ease, box-shadow .5s ease, background .5s ease; } .theme-switch .ts-track::before { content: ''; position: absolute; inset: 5px; border-radius: 42px; border: 1px solid rgba(255,220,150,0.2); pointer-events: none; z-index: 2; } .theme-switch .ts-track::after { content: ''; position: absolute; top: -40%; left: -70%; width: 45%; height: 180%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-18deg); pointer-events: none; z-index: 3; animation: tsTrackShimmer 4.8s ease-in-out infinite; } .theme-switch .ts-stars { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1; transition: opacity .5s ease; } .theme-switch.is-night .ts-stars { opacity: 1; } .theme-switch .ts-stars i { position: absolute; width: 8px; height: 8px; background: transparent; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 3px rgba(230,240,255,0.95)); animation: tsStarTwinkle 2.6s ease-in-out infinite; } .theme-switch .ts-stars i::before, .theme-switch .ts-stars i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#fff, #d5e4ff); clip-path: polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0% 50%, 43% 43%); } .theme-switch .ts-stars i::after { transform: rotate(45deg) scale(0.68); opacity: 0.9; } .theme-switch .ts-stars i.lg { width: 12px; height: 12px; } .theme-switch .ts-stars i.sm { width: 5px; height: 5px; } .theme-switch .ts-stars i:nth-child(1) { top: 9%; left: 26%; animation-delay: 0s; } .theme-switch .ts-stars i:nth-child(2) { top: 17%; left: 64%; animation-delay: .35s; } .theme-switch .ts-stars i:nth-child(3) { top: 24%; left: 20%; animation-delay: .7s; } .theme-switch .ts-stars i:nth-child(4) { top: 32%; left: 72%; animation-delay: 1.1s; } .theme-switch .ts-stars i:nth-child(5) { top: 13%; left: 46%; animation-delay: 1.45s; } .theme-switch .ts-stars i:nth-child(6) { top: 38%; left: 18%; animation-delay: 1.8s; } .theme-switch .ts-stars i:nth-child(7) { top: 28%; left: 44%; animation-delay: 2.15s; } .theme-switch .ts-stars i:nth-child(8) { top: 42%; left: 58%; animation-delay: 2.5s; } .theme-switch .ts-stars .ts-shoot { position: absolute; top: 15%; left: 10%; width: 24px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, #fff, rgba(200,220,255,0.35), transparent); box-shadow: 0 0 6px rgba(220,235,255,0.85); opacity: 0; transform-origin: left center; animation: tsTrackShoot 5.2s ease-in infinite; } .theme-switch .ts-icon { position: absolute; left: 0; right: 0; height: 36px; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; } .theme-switch .ts-sun { top: 18px; } .theme-switch .ts-moon { bottom: 16px; } .theme-switch .ts-sun-halo { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(255,232,140,0.55) 0%, rgba(255,180,40,0.18) 48%, transparent 74%); animation: tsSunPulse 2.6s ease-in-out infinite; } .theme-switch .ts-sun-rays, .theme-switch .ts-sun-rays2 { position: absolute; width: 30px; height: 30px; background: repeating-conic-gradient( from 0.4deg, transparent 0deg 11deg, rgba(255,236,160,0.15) 12deg, #ffe566 14deg, #ffcc00 15deg, #ffe566 16deg, rgba(255,236,160,0.15) 18deg, transparent 19deg 22.5deg ); -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 32%, #000 48%, transparent 70%); mask-image: radial-gradient(circle, transparent 28%, #000 32%, #000 48%, transparent 70%); filter: drop-shadow(0 0 3px rgba(255,200,0,0.7)); animation: tsSunSpin 16s linear infinite; } .theme-switch .ts-sun-rays2 { width: 24px; height: 24px; opacity: 0.4; animation: tsSunSpin 24s linear infinite reverse; } .theme-switch .ts-sun-core { position: relative; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fffdf2, #ffe566 40%, #ffb300 76%, #c97a00); box-shadow: 0 0 6px #ffcc00, 0 0 11px rgba(255,190,0,0.7), inset 0 -1px 2px rgba(160,70,0,0.28); animation: tsSunPulse 2.3s ease-in-out infinite; } .theme-switch .ts-moon-disk { position: relative; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(145deg, #ffffff, #c9d4e4 55%, #9aabbf); box-shadow: inset 0 1px 2px rgba(255,255,255,0.55); animation: tsMoonDrift 3.2s ease-in-out infinite; } .theme-switch .ts-moon-disk::after { content: ''; position: absolute; top: 1px; left: 7px; width: 16px; height: 16px; border-radius: 50%; background: #241814; transition: background .45s ease; } .theme-switch .ts-knob { position: absolute; left: 50%; top: 14px; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%; background: radial-gradient(circle at 62% 58%, rgba(180,90,0,0.18) 0 3px, transparent 4px), radial-gradient(circle at 38% 64%, rgba(160,80,0,0.14) 0 2px, transparent 3px), radial-gradient(circle at 32% 26%, #fffdf0 0%, #ffe566 24%, #ffcc00 50%, #d4a017 74%, #8a5e00 100%); box-shadow: 0 6px 14px rgba(0,0,0,0.48), 0 0 14px rgba(255,204,0,0.42), inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -4px 8px rgba(140,80,0,0.35); z-index: 3; transition: top .62s cubic-bezier(0.2, 1.15, 0.32, 1), background .45s ease, box-shadow .45s ease; animation: tsKnobDay 2.8s ease-in-out infinite; } .theme-switch .ts-knob::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(255,236,180,0.42); box-shadow: inset 0 0 8px rgba(255,200,70,0.2); pointer-events: none; } .theme-switch .ts-knob::after { content: ''; position: absolute; top: 8px; left: 12px; width: 13px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); filter: blur(1px); pointer-events: none; } .theme-switch .ts-label-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible; } .theme-switch .ts-label-rays { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; transform: scale(1.78, 0.58); pointer-events: none; } .theme-switch .ts-label-rays-spin { display: block; width: 100%; height: 100%; animation: tsSunSpin 16s linear infinite; } .theme-switch .ts-label-rays-spin i { position: absolute; left: 50%; top: 0; width: 2px; height: 11px; margin-left: -1px; border-radius: 2px; background: linear-gradient(#fff8d2, #ffcc00 55%, rgba(255,180,0,0.15)); transform-origin: 50% 38px; box-shadow: 0 0 5px rgba(255,204,0,0.85); } .theme-switch .ts-label-rays-spin i:nth-child(1) { transform: rotate(0deg); } .theme-switch .ts-label-rays-spin i:nth-child(2) { transform: rotate(22.5deg); } .theme-switch .ts-label-rays-spin i:nth-child(3) { transform: rotate(45deg); } .theme-switch .ts-label-rays-spin i:nth-child(4) { transform: rotate(67.5deg); } .theme-switch .ts-label-rays-spin i:nth-child(5) { transform: rotate(90deg); } .theme-switch .ts-label-rays-spin i:nth-child(6) { transform: rotate(112.5deg); } .theme-switch .ts-label-rays-spin i:nth-child(7) { transform: rotate(135deg); } .theme-switch .ts-label-rays-spin i:nth-child(8) { transform: rotate(157.5deg); } .theme-switch .ts-label-rays-spin i:nth-child(9) { transform: rotate(180deg); } .theme-switch .ts-label-rays-spin i:nth-child(10) { transform: rotate(202.5deg); } .theme-switch .ts-label-rays-spin i:nth-child(11) { transform: rotate(225deg); } .theme-switch .ts-label-rays-spin i:nth-child(12) { transform: rotate(247.5deg); } .theme-switch .ts-label-rays-spin i:nth-child(13) { transform: rotate(270deg); } .theme-switch .ts-label-rays-spin i:nth-child(14) { transform: rotate(292.5deg); } .theme-switch .ts-label-rays-spin i:nth-child(15) { transform: rotate(315deg); } .theme-switch .ts-label-rays-spin i:nth-child(16) { transform: rotate(337.5deg); } .theme-switch.is-night .ts-label-rays { opacity: 0; } .theme-switch .ts-label-night { position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; transform: scale(1.62, 0.7); opacity: 0; pointer-events: none; filter: drop-shadow(0 0 6px rgba(180,210,255,0.45)); } .theme-switch.is-night .ts-label-night { opacity: 1; } .theme-switch .ts-label-night-spin { display: block; width: 100%; height: 100%; animation: tsSunSpin 18s linear infinite; } .theme-switch .ts-label-night-spin i { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; transform-origin: 50% 43px; filter: drop-shadow(0 0 4px rgba(220,235,255,1)) drop-shadow(0 0 10px rgba(160,200,255,0.85)); } .theme-switch .ts-label-night-spin i::before, .theme-switch .ts-label-night-spin i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#fff, #d7e6ff); clip-path: polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0% 50%, 43% 43%); animation: tsStarTwinkle 1.9s ease-in-out infinite; } .theme-switch .ts-label-night-spin i::after { transform: rotate(45deg) scale(0.7); opacity: 0.95; } .theme-switch .ts-label-night-spin i:nth-child(odd)::before { animation-duration: 1.5s; } .theme-switch .ts-label-night-spin i:nth-child(3n)::before, .theme-switch .ts-label-night-spin i:nth-child(3n)::after { background: linear-gradient(#fffdf2, #ffe29a); } .theme-switch .ts-label-night-spin i:nth-child(4n) { width: 11px; height: 11px; margin-left: -5.5px; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(180,210,255,0.95)); } .theme-switch .ts-label-night-spin i:nth-child(5n) { width: 6px; height: 6px; margin-left: -3px; } .theme-switch .ts-label-night-spin i:nth-child(1) { transform: rotate(0deg); } .theme-switch .ts-label-night-spin i:nth-child(2) { transform: rotate(30deg); } .theme-switch .ts-label-night-spin i:nth-child(3) { transform: rotate(60deg); } .theme-switch .ts-label-night-spin i:nth-child(4) { transform: rotate(90deg); } .theme-switch .ts-label-night-spin i:nth-child(5) { transform: rotate(120deg); } .theme-switch .ts-label-night-spin i:nth-child(6) { transform: rotate(150deg); } .theme-switch .ts-label-night-spin i:nth-child(7) { transform: rotate(180deg); } .theme-switch .ts-label-night-spin i:nth-child(8) { transform: rotate(210deg); } .theme-switch .ts-label-night-spin i:nth-child(9) { transform: rotate(240deg); } .theme-switch .ts-label-night-spin i:nth-child(10) { transform: rotate(270deg); } .theme-switch .ts-label-night-spin i:nth-child(11) { transform: rotate(300deg); } .theme-switch .ts-label-night-spin i:nth-child(12) { transform: rotate(330deg); } .theme-switch .ts-hang { position: absolute; top: calc(100% - 2px); width: 14px; height: 28px; opacity: 0; pointer-events: none; transform-origin: top center; animation: tsHangIdle 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; } .theme-switch.is-night .ts-hang { opacity: 1; } .theme-switch.is-switching.is-night .ts-hang { animation: tsHangSwing 1.15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; } .theme-switch .ts-hang::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 19px; margin-left: -0.5px; background: linear-gradient(#d5e0ee, rgba(197,210,228,0.35)); } .theme-switch .ts-hang::after { content: ''; position: absolute; left: 50%; top: 17px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 70% 44%, transparent 46%, #e8eef6 51%); filter: drop-shadow(0 0 1.5px rgba(210,225,245,0.45)); } .theme-switch .ts-hang.a { left: 6px; } .theme-switch .ts-hang.a::after { background: radial-gradient(circle at 30% 44%, transparent 46%, #e8eef6 51%); } .theme-switch .ts-hang.b { right: 6px; } .theme-switch .ts-hang.c { left: 50%; width: 28px; height: 54px; margin-left: -14px; } .theme-switch .ts-hang.c::before { height: 34px; width: 1.5px; margin-left: -0.75px; } .theme-switch .ts-hang.c::after { top: 32px; width: 22px; height: 22px; margin-left: -11px; background: radial-gradient(circle at 70% 42%, transparent 45%, #f4f8ff 50%); filter: drop-shadow(0 0 2px rgba(210,225,245,0.5)); } .theme-switch .ts-drop { position: absolute; left: -8px; right: -8px; top: 100%; height: 88px; opacity: 0; pointer-events: none; overflow: visible; } .theme-switch.is-night .ts-drop { opacity: 1; } .theme-switch .ts-drop i { position: absolute; top: 0; width: 8px; height: 8px; background: transparent; filter: drop-shadow(0 0 5px rgba(220,235,255,1)) drop-shadow(0 8px 6px rgba(180,210,255,0.45)); animation: tsDrop 3.4s ease-in infinite; } .theme-switch .ts-drop i::before, .theme-switch .ts-drop i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#fff, #d7e6ff); clip-path: polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0% 50%, 43% 43%); } .theme-switch .ts-drop i::after { transform: rotate(45deg) scale(0.68); } .theme-switch .ts-drop i:nth-child(1) { left: 10%; animation-delay: 0s; } .theme-switch .ts-drop i:nth-child(2) { left: 28%; width: 6px; height: 6px; animation-delay: 0.55s; } .theme-switch .ts-drop i:nth-child(3) { left: 46%; animation-delay: 1.05s; } .theme-switch .ts-drop i:nth-child(4) { left: 64%; width: 9px; height: 9px; animation-delay: 1.55s; } .theme-switch .ts-drop i:nth-child(5) { left: 78%; animation-delay: 2.1s; } .theme-switch .ts-drop i:nth-child(6) { left: 90%; width: 6px; height: 6px; animation-delay: 2.6s; } .theme-switch .ts-label { position: relative; z-index: 1; font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; color: #ffe566; background: linear-gradient(to bottom, rgba(42, 28, 18, 0.92), rgba(16, 10, 8, 0.88)); border: 1px solid rgba(228, 198, 106, 0.75); padding: 6px 14px; border-radius: 16px; text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 12px rgba(255,204,0,0.55); box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,236,180,0.28); transition: color .45s ease, text-shadow .45s ease, background .45s ease, border-color .45s ease; } .theme-switch.is-night .ts-track { border-color: #b7c6d8; background: radial-gradient(ellipse 72% 42% at 48% 20%, rgba(190,210,255,0.2), transparent 72%), linear-gradient(to bottom, rgba(255,255,255,0.08), transparent 36%), linear-gradient(to bottom, #243044, #0d1118 58%, #080b10); box-shadow: 0 0 6px rgba(140,170,210,0.16), 0 10px 18px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.45), inset 0 2px 3px rgba(220,235,255,0.12), inset 0 -10px 18px rgba(0,0,0,0.4); } .theme-switch.is-night .ts-track::before { border-color: rgba(200,220,245,0.18); } .theme-switch:hover .ts-track { box-shadow: 0 0 8px rgba(255,204,0,0.28), 0 10px 18px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 2px 3px rgba(255,236,190,0.22), inset 0 -10px 18px rgba(0,0,0,0.38); } .theme-switch.is-night:hover .ts-track { box-shadow: 0 0 8px rgba(160,190,230,0.26), 0 10px 18px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.45), inset 0 2px 3px rgba(220,235,255,0.16), inset 0 -10px 18px rgba(0,0,0,0.4); } .theme-switch.is-night .ts-knob { top: 116px; background: radial-gradient(circle at 30% 26%, #ffffff 0%, #e8eef6 24%, #c5d0de 50%, #8a97a8 78%, #5c6878 100%); box-shadow: 0 8px 18px rgba(0,0,0,0.52), 0 0 18px rgba(170,200,235,0.45), inset 0 2px 3px rgba(255,255,255,0.7), inset 0 -5px 10px rgba(50,60,75,0.4); animation: tsKnobNight 3.2s ease-in-out infinite; } .theme-switch.is-night .ts-knob::before { border-color: rgba(220,232,245,0.4); background: radial-gradient(circle at 32% 42%, rgba(90,102,118,0.4) 0 3.5px, transparent 4.5px), radial-gradient(circle at 64% 56%, rgba(90,102,118,0.32) 0 2.5px, transparent 3.5px), radial-gradient(circle at 46% 70%, rgba(90,102,118,0.26) 0 2px, transparent 3px); box-shadow: inset 0 0 10px rgba(180,200,230,0.2); } .theme-switch.is-night .ts-knob::after { background: rgba(255,255,255,0.55); } .theme-switch.is-night .ts-moon-disk::after { background: #10151d; } .theme-switch.is-night .ts-sun-rays { filter: drop-shadow(0 0 6px rgba(255,210,70,1)); animation-duration: 11s; } .theme-switch.is-night .ts-sun-core { box-shadow: 0 0 12px #ffcc00, 0 0 22px rgba(255,190,0,0.9), inset 0 -2px 3px rgba(160,70,0,0.28); } .theme-switch.is-night .ts-label { color: #f2f6fb; background: linear-gradient(to bottom, rgba(22, 30, 42, 0.92), rgba(10, 14, 22, 0.88)); border-color: rgba(200, 218, 236, 0.65); text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 12px rgba(200, 220, 245, 0.4); box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(230,240,255,0.22); } @keyframes tsSunSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes tsSunPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.92; } } @keyframes tsMoonDrift { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1px) rotate(2deg); } } @keyframes tsKnobDay { 0%, 100% { box-shadow: 0 6px 14px rgba(0,0,0,0.48), 0 0 14px rgba(255,204,0,0.42), inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -4px 8px rgba(140,80,0,0.35); transform: scale(1); } 50% { box-shadow: 0 6px 14px rgba(0,0,0,0.48), 0 0 22px rgba(255,204,0,0.7), inset 0 2px 3px rgba(255,255,255,0.6), inset 0 -4px 8px rgba(140,80,0,0.35); transform: scale(1.035); } } @keyframes tsKnobNight { 0%, 100% { box-shadow: 0 8px 18px rgba(0,0,0,0.52), 0 0 16px rgba(170,200,235,0.4), inset 0 2px 3px rgba(255,255,255,0.7), inset 0 -5px 10px rgba(50,60,75,0.4); transform: scale(1); } 50% { box-shadow: 0 8px 18px rgba(0,0,0,0.52), 0 0 24px rgba(200,220,255,0.62), inset 0 2px 3px rgba(255,255,255,0.75), inset 0 -5px 10px rgba(50,60,75,0.4); transform: scale(1.035); } } @keyframes tsTrackShimmer { 0%, 18% { left: -70%; opacity: 0; } 40% { opacity: 0.75; } 68%, 100% { left: 140%; opacity: 0; } } @keyframes tsTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.35); } } @keyframes tsStarTwinkle { 0%, 100% { opacity: 0.4; transform: scale(0.82) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(18deg); } } @keyframes tsTrackShoot { 0%, 64% { opacity: 0; transform: rotate(28deg) translateX(0); } 72% { opacity: 1; } 90%, 100% { opacity: 0; transform: rotate(28deg) translateX(38px); } } @keyframes tsHangIdle { 0% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } 100% { transform: rotate(-1.8deg); } } @keyframes tsHangSwing { 0% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } } @keyframes tsDrop { 0% { transform: translateY(-2px) rotate(-8deg) scale(0.55); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(78px) rotate(70deg) scale(0.8); opacity: 0; } } @keyframes tsAuraPulse { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } } @keyframes tsSealPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(255,204,0,0.65); } 50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(255,204,0,0.95); } } @keyframes tsWordShine { 0%, 100% { opacity: 0.7; letter-spacing: 2.4px; } 50% { opacity: 1; letter-spacing: 3px; } } body.ui-hidden #theme-switch-wrap { display: flex !important; } #theme-turn { position: fixed; inset: 0; z-index: 10000000; pointer-events: none; visibility: hidden; overflow: hidden; --tt-total: 4200ms; --tt-apply: 1300ms; } #theme-turn.active { visibility: visible; } #theme-turn .tt-perspective, #theme-turn .tt-sheet { width: 100%; height: 100%; } #theme-turn .tt-sheet { position: relative; } #theme-turn.active:not(.to-night) .tt-sheet { animation: themeDissolveDay var(--tt-total) cubic-bezier(0.4, 0, 0.2, 1) both; } #theme-turn.active.to-night .tt-sheet { animation: themeDissolveNight var(--tt-total) cubic-bezier(0.4, 0, 0.2, 1) both; } #theme-turn .tt-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 88% 14%, rgba(255,236,160,0.7) 0%, transparent 28%), linear-gradient(180deg, #f8ebb8 0%, #f3c57a 46%, #e59a4c 100%); } #theme-turn.to-night .tt-sky { background: radial-gradient(ellipse at 16% 12%, rgba(160,190,230,0.22) 0%, transparent 26%), linear-gradient(180deg, #070b14 0%, #10182a 52%, #182236 100%); } #theme-turn .tt-milky { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 58% 18%, rgba(210,220,255,0.16) 0%, transparent 22%), linear-gradient(118deg, transparent 28%, rgba(180,200,240,0.08) 46%, rgba(255,255,255,0.12) 50%, rgba(180,200,240,0.08) 54%, transparent 72%); } #theme-turn.to-night .tt-milky { opacity: 1; } #theme-turn .tt-stars { position: absolute; inset: 0; opacity: 0; } #theme-turn.to-night .tt-stars { opacity: 1; } #theme-turn .tt-stars i { position: absolute; border-radius: 50%; background: #fff; animation: ttTwinkle 2.6s ease-in-out infinite; } #theme-turn .tt-stars i.dust { width: 1px; height: 1px; opacity: 0.4; box-shadow: 0 0 2px rgba(255,255,255,0.5); } #theme-turn .tt-stars i.mid { width: 2px; height: 2px; box-shadow: 0 0 5px rgba(220,235,255,0.9); } #theme-turn .tt-stars i.warm { background: #ffe9c4; box-shadow: 0 0 6px rgba(255,210,140,0.95); } #theme-turn .tt-stars i.ice { background: #dcecff; box-shadow: 0 0 7px rgba(170,210,255,0.95); } #theme-turn .tt-stars i.bright { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 8px #fff, 0 0 16px rgba(200,220,255,0.8); } #theme-turn .tt-stars i.bright::before, #theme-turn .tt-stars i.bright::after, #theme-turn .tt-stars i.giant::before, #theme-turn .tt-stars i.giant::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; opacity: 0.85; } #theme-turn .tt-stars i.bright::before, #theme-turn .tt-stars i.giant::before { width: 12px; height: 1px; transform: translate(-50%,-50%); } #theme-turn .tt-stars i.bright::after, #theme-turn .tt-stars i.giant::after { width: 1px; height: 12px; transform: translate(-50%,-50%); } #theme-turn .tt-stars i.giant { width: 4px; height: 4px; background: #fffdf2; box-shadow: 0 0 10px #fff, 0 0 24px rgba(180,210,255,0.95), 0 0 42px rgba(255,230,160,0.35); } #theme-turn .tt-stars i.giant::before { width: 18px; } #theme-turn .tt-stars i.giant::after { height: 18px; } #theme-turn .tt-shots { position: absolute; inset: 0; opacity: 0; z-index: 3; } #theme-turn.to-night .tt-shots { opacity: 1; } #theme-turn .tt-shots i { position: absolute; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, #fff, rgba(255,255,255,0.15), transparent); box-shadow: 0 0 8px rgba(255,255,255,0.7); opacity: 0; } #theme-turn .tt-shots i:nth-child(1) { top: 16%; left: 62%; width: 110px; } #theme-turn .tt-shots i:nth-child(2) { top: 26%; left: 44%; width: 96px; } #theme-turn .tt-shots i:nth-child(3) { top: 11%; left: 78%; width: 80px; } #theme-turn .tt-shots i:nth-child(4) { top: 34%; left: 70%; width: 88px; } #theme-turn .tt-shots i:nth-child(5) { top: 20%; left: 28%; width: 74px; } #theme-turn.active.to-night .tt-shots i:nth-child(1) { animation: ttShoot 720ms ease-out 400ms both; } #theme-turn.active.to-night .tt-shots i:nth-child(2) { animation: ttShoot 700ms ease-out 680ms both; } #theme-turn.active.to-night .tt-shots i:nth-child(3) { animation: ttShoot 660ms ease-out 920ms both; } #theme-turn.active.to-night .tt-shots i:nth-child(4) { animation: ttShoot 640ms ease-out 1100ms both; } #theme-turn.active.to-night .tt-shots i:nth-child(5) { animation: ttShoot 700ms ease-out 560ms both; } #theme-turn .tt-sunburst { position: absolute; top: 5%; right: 9%; width: 240px; height: 240px; z-index: 3; } #theme-turn.to-night .tt-sunburst { opacity: 0; } #theme-turn .tt-sun-corona { position: absolute; inset: -48%; border-radius: 50%; background: radial-gradient(circle, rgba(255,224,110,0.62) 0%, rgba(255,176,48,0.2) 38%, transparent 70%); } #theme-turn.active:not(.to-night) .tt-sun-corona { animation: ttSunPulse 2.8s ease-in-out infinite; } #theme-turn .tt-sun-rays { position: absolute; inset: 6%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,220,90,0) 0deg 9deg, rgba(255,230,130,0.7) 10deg 11deg, rgba(255,220,90,0) 12deg 20deg); -webkit-mask: radial-gradient(circle, transparent 26%, #000 30%, #000 58%, transparent 70%); mask: radial-gradient(circle, transparent 26%, #000 30%, #000 58%, transparent 70%); } #theme-turn.active:not(.to-night) .tt-sun-rays { animation: ttSunSpin 36s linear infinite; } #theme-turn .tt-sun-core { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fffef6 0%, #ffe566 36%, #ffb422 74%, #ef8a12 100%); box-shadow: 0 0 18px #ffe566, 0 0 46px rgba(255,176,40,0.62), 0 0 90px rgba(255,150,20,0.28); } #theme-turn .tt-sun-flare { position: absolute; border-radius: 50%; pointer-events: none; } #theme-turn .tt-sun-flare.f1 { left: 18%; top: 62%; width: 14px; height: 14px; background: radial-gradient(circle, rgba(255,240,180,0.75), transparent 70%); } #theme-turn .tt-sun-flare.f2 { left: 6%; top: 74%; width: 8px; height: 8px; background: radial-gradient(circle, rgba(255,200,90,0.55), transparent 70%); } #theme-turn .tt-moonburst { position: absolute; top: 6%; left: 10%; width: 160px; height: 160px; z-index: 3; opacity: 0; } #theme-turn.to-night .tt-moonburst { opacity: 1; } #theme-turn .tt-moon-halo { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(220,235,255,0.42) 0%, rgba(170,200,235,0.12) 42%, transparent 70%); } #theme-turn.active.to-night .tt-moon-halo { animation: ttSunPulse 3.4s ease-in-out infinite; } #theme-turn .tt-moon-beam { position: absolute; left: 42%; top: 62%; width: 240px; height: 320px; background: linear-gradient(180deg, rgba(210,225,245,0.2), rgba(180,200,230,0.05) 50%, transparent); filter: blur(14px); transform: rotate(16deg); transform-origin: top center; } #theme-turn .tt-moon-core { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 62% 38%, rgba(255,255,255,0.15) 0 8%, transparent 9%), radial-gradient(circle at 70% 58%, rgba(180,195,215,0.2) 0 5%, transparent 6%), radial-gradient(circle at 36% 34%, #fff 0%, #e8eef6 42%, #9aadc4 100%); box-shadow: 0 0 18px rgba(220,235,255,0.55); -webkit-mask: radial-gradient(circle at 72% 32%, transparent 42%, #000 43%); mask: radial-gradient(circle at 72% 32%, transparent 42%, #000 43%); } #theme-turn .tt-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; } #theme-turn .tt-dune { fill: #f0d7a0; } #theme-turn.to-night .tt-dune { fill: #2a384c; } #theme-turn .tt-dune-far { fill: #f6e2b0; opacity: 0.7; } #theme-turn.to-night .tt-dune-far { fill: #354560; opacity: 0.85; } #theme-turn .tt-ripple { fill: none; stroke: rgba(255,236,190,0.35); stroke-width: 1.2; } #theme-turn.to-night .tt-ripple { stroke: rgba(255,255,255,0.12); } #theme-turn .tt-sil { fill: #1a120c; } #theme-turn.to-night .tt-sil { fill: #07090e; } #theme-turn .tt-grass { fill: #4f8f3e; } #theme-turn .tt-grass-lite { fill: #6eaf52; } #theme-turn.to-night .tt-grass { fill: #152012; } #theme-turn.to-night .tt-grass-lite { fill: #1c2a16; } #theme-turn.to-night .tt-cloud { opacity: 0; } #theme-turn .tt-cloud { fill: #fff6d8; opacity: 0.92; } #theme-turn .tt-moon { opacity: 0; } #theme-turn.to-night .tt-moon { opacity: 1; } #theme-turn .tt-moon-disc { fill: #e8eef6; } #theme-turn .tt-moon-cut { fill: #0a1220; } #theme-turn .tt-oasis-water { fill: #3b9aaa; } #theme-turn.to-night .tt-oasis-water { fill: #123044; } #theme-turn .tt-oasis-shine { fill: #b7eaf2; opacity: 0.5; } #theme-turn.to-night .tt-oasis-shine { fill: #7eb4c8; opacity: 0.28; } #theme-turn .tt-flame { opacity: 0; } #theme-turn.to-night .tt-flame { opacity: 1; } #theme-turn.active .tt-cloud.c1 { animation: ttCloudA var(--tt-total) ease-in-out both; } #theme-turn.active .tt-cloud.c2 { animation: ttCloudB var(--tt-total) ease-in-out both; } #theme-turn.active .tt-cloud.c3 { animation: ttCloudC var(--tt-total) ease-in-out both; } #theme-turn.active .tt-cloud.c4 { animation: ttCloudA var(--tt-total) ease-in-out both; } #theme-turn.active .tt-grass, #theme-turn.active .tt-grass-lite { transform-box: fill-box; transform-origin: 50% 100%; animation: ttWindGrass 1.7s ease-in-out infinite; } #theme-turn.active .tt-grass-lite { animation-duration: 1.35s; animation-delay: 0.18s; } #theme-turn.active .tt-fronds { transform-box: fill-box; transform-origin: 50% 85%; animation: ttWindFronds 2.3s ease-in-out infinite; } #theme-turn.active .tt-fronds.slow { animation-duration: 2.8s; animation-delay: 0.25s; } #theme-turn.active .tt-fronds.fast { animation-duration: 1.9s; animation-delay: 0.1s; } #theme-turn .tt-wind { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; } #theme-turn.active .tt-wind { opacity: 1; } #theme-turn .tt-wind i { position: absolute; height: 1px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,244,210,0.4), transparent); opacity: 0; } #theme-turn.to-night .tt-wind i { background: linear-gradient(90deg, transparent, rgba(210,225,245,0.32), transparent); } #theme-turn.active .tt-wind i:nth-child(1) { top: 58%; left: 10%; width: 90px; animation: ttWindStreak 2.4s ease-in-out 0.2s infinite; } #theme-turn.active .tt-wind i:nth-child(2) { top: 66%; left: 30%; width: 70px; animation: ttWindStreak 2.8s ease-in-out 0.7s infinite; } #theme-turn.active .tt-wind i:nth-child(3) { top: 62%; left: 56%; width: 110px; animation: ttWindStreak 2.2s ease-in-out 0.4s infinite; } #theme-turn.active .tt-wind i:nth-child(4) { top: 72%; left: 74%; width: 64px; animation: ttWindStreak 2.6s ease-in-out 1s infinite; } #theme-turn.active .tt-wings { transform-box: fill-box; transform-origin: 50% 80%; animation: ttBirdFlap 1.05s ease-in-out infinite; } #theme-turn.active .tt-wings.slow { animation-duration: 1.25s; animation-delay: 0.2s; } #theme-turn .tt-brand { position: absolute; top: 13%; left: 50%; z-index: 6; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; white-space: nowrap; } #theme-turn.active .tt-brand { animation: ttBrandIn var(--tt-total) ease-out both; } #theme-turn .tt-brand-glow { position: absolute; left: 50%; top: 50%; width: 620px; height: 180px; margin: -90px 0 0 -310px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,210,90,0.28) 0%, rgba(255,180,50,0.1) 42%, transparent 72%); z-index: -1; } #theme-turn.to-night .tt-brand-glow { opacity: 0; } #theme-turn .tt-brand-ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 8px; opacity: 0.8; } #theme-turn .tt-brand-ornament.bottom { margin: 10px auto 0; } #theme-turn .tt-brand-ornament i { display: block; height: 1px; width: 72px; background: linear-gradient(90deg, transparent, #8a5a18, #e4c66a, #8a5a18, transparent); } #theme-turn .tt-brand-ornament b { width: 7px; height: 7px; background: #c9a227; transform: rotate(45deg); box-shadow: 0 0 8px rgba(255,200,80,0.55); } #theme-turn.to-night .tt-brand-ornament { opacity: 0; } #theme-turn .tt-brand-motes { position: absolute; left: 50%; top: 50%; width: 560px; height: 150px; margin: -75px 0 0 -280px; pointer-events: none; z-index: -1; } #theme-turn.to-night .tt-brand-motes { opacity: 0; } #theme-turn .tt-brand-motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe566; box-shadow: 0 0 6px rgba(255,204,0,0.85); } #theme-turn.active:not(.to-night) .tt-brand-motes i { animation: ttTwinkle 2.2s ease-in-out infinite; } #theme-turn .tt-night-glow { opacity: 0; } #theme-turn.to-night .tt-night-glow { opacity: 1; } #theme-turn .tt-torch-wash { position: absolute; left: 32.4%; bottom: 19%; width: 130px; height: 46px; margin-left: -40px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,150,40,0.4) 0%, rgba(255,110,20,0.12) 48%, transparent 74%); filter: blur(2px); } #theme-turn.to-night .tt-torch-wash { animation: ttSunPulse 1.2s ease-in-out infinite; } #theme-turn .tt-oasis-glint { position: absolute; left: 46.5%; bottom: 20%; width: 64px; height: 16px; margin-left: -32px; border-radius: 50%; background: radial-gradient(ellipse, rgba(90,150,170,0.35), transparent 72%); } #theme-turn .tt-fireflies i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe29a; box-shadow: 0 0 8px rgba(255,200,90,0.95); } #theme-turn.active.to-night .tt-fireflies i { animation: ttTwinkle 1.8s ease-in-out infinite; } #theme-turn .tt-fireflies i:nth-child(1) { left: 28%; bottom: 34%; animation-delay: 0s; } #theme-turn .tt-fireflies i:nth-child(2) { left: 32%; bottom: 30%; animation-delay: .4s; } #theme-turn .tt-fireflies i:nth-child(3) { left: 47%; bottom: 29%; animation-delay: .8s; } #theme-turn .tt-fireflies i:nth-child(4) { left: 52%; bottom: 33%; animation-delay: 1.1s; } #theme-turn .tt-fireflies i:nth-child(5) { left: 41%; bottom: 31%; animation-delay: 1.5s; } .tt-brand-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: 14px; text-transform: uppercase; } .tt-brand-sub { margin-top: 10px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 16px; text-transform: uppercase; } .tt-brand-sub::before, .tt-brand-sub::after { content: '✦'; font-size: 7px; margin: 0 10px; vertical-align: middle; opacity: 0.75; } #theme-turn:not(.to-night) .tt-brand-name { color: #4e2c08; font-weight: 700; text-shadow: 0 1px 0 rgba(255,248,220,0.9), 0 2px 8px rgba(70,30,0,0.22); } #theme-turn:not(.to-night) .tt-brand-sub { color: #6a3d0e; } #theme-turn.to-night .tt-brand-name { color: #f4f7fb; letter-spacing: 16px; text-shadow: 0 0 16px rgba(220,235,255,0.55); } #theme-turn.to-night .tt-brand-sub { color: #d5deea; letter-spacing: 18px; } #theme-turn .tt-flash { position: absolute; inset: 0; z-index: 30; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, #fffdf2 0%, #ffe7a8 38%, #fff 100%); } #theme-turn.active:not(.to-night) .tt-flash { animation: ttDayFlash var(--tt-total) ease-in both; } @keyframes themeDissolveDay { 0% { opacity: 0; transform: scale(1.03); filter: blur(12px); } 14% { opacity: 1; transform: scale(1); filter: blur(0); } 78% { opacity: 1; transform: scale(1); filter: blur(0); } 88% { opacity: 0.25; filter: blur(2px); } 100% { opacity: 0; transform: scale(1); filter: blur(0); } } @keyframes themeDissolveNight { 0% { opacity: 0; filter: blur(10px); } 14% { opacity: 1; filter: blur(0); } 74% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(0); } } @keyframes ttDayFlash { 0%, 80% { opacity: 0; } 86% { opacity: 0.88; } 100% { opacity: 0; } } html.theme-reveal #site-scale-container { animation: themeSiteIn 780ms ease-out both; } @keyframes themeSiteIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ttBrandIn { 0% { opacity: 0; transform: translateX(-50%) translateY(12px); filter: blur(8px); } 18% { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); } 70% { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); filter: blur(8px); } } @keyframes ttCloudA { 0% { transform: translateX(-24px); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateX(28px); opacity: 0.85; } } @keyframes ttCloudB { 0% { transform: translateX(16px); opacity: 0; } 15% { opacity: 0.85; } 100% { transform: translateX(-22px); opacity: 0.8; } } @keyframes ttCloudC { 0% { transform: translateX(-12px); opacity: 0; } 15% { opacity: 0.8; } 100% { transform: translateX(20px); opacity: 0.75; } } @keyframes ttShoot { 0% { transform: rotate(-32deg) translateX(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: rotate(-32deg) translateX(-260px); opacity: 0; } } @keyframes ttBirdFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } } @keyframes ttWindGrass { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(8deg); } 62% { transform: rotate(-5deg); } } @keyframes ttWindFronds { 0%, 100% { transform: rotate(0deg); } 38% { transform: rotate(6deg); } 72% { transform: rotate(-3.5deg); } } @keyframes ttWindStreak { 0% { opacity: 0; transform: translateX(-18px); } 25% { opacity: 0.7; } 100% { opacity: 0; transform: translateX(46px); } } @keyframes ttTwinkle { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes ttSunSpin { to { transform: rotate(360deg); } } @keyframes ttSunPulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } html.night-mode body { background-color: transparent !important; background-image: none !important; } html.night-mode body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(140,180,255,0.12), transparent 55%), radial-gradient(ellipse 50% 40% at 85% 18%, rgba(100,150,230,0.07), transparent 50%), linear-gradient(180deg, rgba(4,8,18,0.20) 0%, rgba(4,8,18,0.08) 40%, rgba(4,6,12,0.28) 100%); background-repeat: no-repeat; filter: none !important; -webkit-mask-image: none; mask-image: none; } html.night-mode body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to top, rgba(4,6,12,0.38) 0%, transparent 40%); filter: none !important; -webkit-mask-image: none; mask-image: none; } html.night-mode #scale-outer { position: relative; z-index: 1; filter: none; } html.night-mode #cssmenu { overflow: visible !important; background: /* starfield */ radial-gradient(1.8px 1.8px at 6% 30%, rgba(255,255,255,0.9), transparent), radial-gradient(1.2px 1.2px at 14% 68%, rgba(200,230,255,0.55), transparent), radial-gradient(1px 1px at 22% 22%, rgba(255,255,255,0.45), transparent), radial-gradient(1.5px 1.5px at 35% 55%, rgba(220,240,255,0.5), transparent), radial-gradient(1px 1px at 48% 18%, rgba(255,255,255,0.4), transparent), radial-gradient(2px 2px at 58% 72%, rgba(255,255,255,0.75), transparent), radial-gradient(1px 1px at 68% 28%, rgba(200,230,255,0.4), transparent), radial-gradient(1.4px 1.4px at 78% 60%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 88% 24%, rgba(210,235,255,0.45), transparent), radial-gradient(1.6px 1.6px at 94% 70%, rgba(255,255,255,0.65), transparent), /* moonlit washes */ radial-gradient(ellipse 35% 140% at 0% 50%, rgba(140,190,255,0.16), transparent 60%), radial-gradient(ellipse 35% 140% at 100% 50%, rgba(120,170,240,0.14), transparent 60%), radial-gradient(ellipse 70% 90% at 50% 0%, rgba(180,210,255,0.12), transparent 55%), linear-gradient(180deg, rgba(200,225,255,0.08) 0%, rgba(255,255,255,0.015) 45%, rgba(100,150,220,0.06) 100%), linear-gradient(90deg, #0a101c 0%, #101828 25%, #0c1422 50%, #101828 75%, #0a101c 100%) !important; border-color: rgba(170, 205, 255, 0.4) !important; border-bottom-color: rgba(200, 225, 255, 0.55) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 36px rgba(80,140,220,0.14), inset 0 1px 0 rgba(220, 235, 255, 0.16), inset 0 -1px 0 rgba(20, 40, 80, 0.4) !important; } html.night-mode #cssmenu::before, html.night-mode #cssmenu::after { background: linear-gradient(#dcecff,#dcecff) center/1.5px 100% no-repeat, linear-gradient(#dcecff,#dcecff) center/100% 1.5px no-repeat, radial-gradient(circle, #ffffff 0 1.5px, transparent 2.2px) !important; filter: drop-shadow(0 0 6px rgba(160,210,255,0.85)) !important; opacity: 0.95 !important; } html.night-mode #cssmenu > ul > li > a { color: #d8e4f5 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; } html.night-mode #cssmenu > ul > li > a:hover, html.night-mode #cssmenu > ul > li:hover > a, html.night-mode #cssmenu > ul > li.active > a { color: #f2f6ff !important; text-shadow: 0 0 14px rgba(160,200,255,0.45), 0 1px 2px rgba(0,0,0,0.5) !important; } html.night-mode #cssmenu > ul > li > a::after { background: linear-gradient(90deg, transparent, #8eb4dc, #e8f4ff, #8eb4dc, transparent) !important; box-shadow: 0 0 10px rgba(140,190,255,0.55) !important; } html.night-mode .mn-icon { color: rgba(210, 230, 255, 0.9) !important; filter: drop-shadow(0 0 4px rgba(140,180,255,0.4)) !important; } html.night-mode .mn-icon .mn-nav-ico { filter: brightness(1.2) saturate(0.45) hue-rotate(190deg) drop-shadow(0 0 3px rgba(160,210,255,0.4)); } html.night-mode #cssmenu > ul > li > a:hover .mn-icon, html.night-mode #cssmenu > ul > li.active > a .mn-icon { color: #eef4ff !important; filter: drop-shadow(0 0 7px rgba(160,210,255,0.7)) !important; } html.night-mode #cssmenu > ul > li > a:hover .mn-icon .mn-nav-ico, html.night-mode #cssmenu > ul > li.active > a .mn-icon .mn-nav-ico { filter: brightness(1.35) saturate(0.4) hue-rotate(190deg) drop-shadow(0 0 5px rgba(180,220,255,0.65)); } html.night-mode #cssmenu li.has-sub > ul { background-color: rgba(12, 16, 26, 0.97) !important; border-color: rgba(160, 195, 240, 0.35) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 20px rgba(70,120,200,0.12) !important; } html.night-mode .box_one, html.night-mode .box_two, html.night-mode .player-card, html.night-mode .igd-card, html.night-mode .main_view { background-image: none !important; } html.night-mode .box_one, html.night-mode .box_two, html.night-mode .player-card, html.night-mode .igd-card { background: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(140,180,255,0.1), transparent 50%), linear-gradient(165deg, rgba(200,220,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.2) 100%), #12161f !important; border-color: rgba(140,175,220,0.32) !important; box-shadow: 0 1px 0 rgba(200,225,255,0.08) inset, 0 6px 20px rgba(0,0,0,0.45), 0 0 24px rgba(60,110,190,0.08) !important; } html.night-mode .box_two { background: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(160,200,255,0.14), transparent 52%), linear-gradient(165deg, rgba(210,228,255,0.1) 0%, rgba(255,255,255,0.03) 42%, rgba(0,0,0,0.1) 100%), rgba(12, 16, 28, 0.58) !important; backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); border-color: rgba(170, 200, 240, 0.38) !important; box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.16), 0 8px 26px rgba(0,0,0,0.35), 0 0 28px rgba(80,130,210,0.1) !important; } /* Title / breadcrumb chrome — silver slate, kill old brown wood PNG */ html.night-mode .box_one_title, html.night-mode .box_two_title { background: linear-gradient(180deg, rgba(36, 46, 64, 0.98) 0%, rgba(16, 22, 34, 0.98) 100%) !important; background-image: none !important; background-color: #161e2c !important; color: #e2eaf6 !important; border-bottom: 1px solid rgba(170, 205, 255, 0.32) !important; box-shadow: inset 0 1px 0 rgba(210, 230, 255, 0.12), 0 1px 0 rgba(100, 150, 220, 0.08) !important; text-shadow: 0 0 12px rgba(160, 200, 255, 0.22) !important; width: auto !important; max-width: 100% !important; height: auto !important; margin-left: 0 !important; margin-top: 0 !important; padding: 10px 12px 11px !important; border-radius: 6px 6px 0 0; } html.night-mode .box_two > .box_two_title { background: linear-gradient(180deg, rgba(36, 46, 64, 0.62) 0%, rgba(16, 22, 34, 0.42) 100%) !important; background-color: transparent !important; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); } html.night-mode .box_one_title::before, html.night-mode .box_two_title::before { color: #f4f8ff !important; text-shadow: 0 0 8px rgba(190, 220, 255, 0.85) !important; } html.night-mode .box_one_title::after, html.night-mode .box_two_title::after { background: linear-gradient(90deg, rgba(170, 205, 255, 0.4), transparent) !important; } html.night-mode .box_two:has(.post_title) .box_two_title { background: linear-gradient(180deg, rgba(30, 42, 62, 0.78) 0%, rgba(16, 24, 38, 0.62) 100%) !important; background-image: none !important; background-color: transparent !important; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border-radius: 0; box-shadow: inset 0 1px 0 rgba(210, 230, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.35) !important; } html.night-mode .box_two:has(.post_title) #pn_title { background: linear-gradient(180deg, rgba(20, 30, 46, 0.5) 0%, rgba(12, 18, 30, 0.28) 100%) !important; background-image: none !important; background-color: transparent !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #a8bdd8 !important; border-bottom: 1px solid rgba(150, 185, 230, 0.18) !important; box-shadow: inset 0 1px 0 rgba(180, 210, 255, 0.06) !important; padding: 8px 12px !important; margin: 0 0 12px !important; letter-spacing: 1.6px !important; } html.night-mode .box_one::before, html.night-mode .box_one::after { background: linear-gradient(to bottom, transparent 0%, #a8c4e8 20%, #a8c4e8 80%, transparent 100%); opacity: 0.45; box-shadow: 0 0 8px rgba(140,190,255,0.25); } html.night-mode .decree-title-lg, html.night-mode .reg-success-title { color: #f4f8ff !important; text-shadow: 0 1px 0 rgba(8,16,32,0.55), 0 0 16px rgba(160,200,255,0.4) !important; } html.night-mode a { color: #c4b89a; } html.night-mode .reg-submit-btn, html.night-mode .loginbtnwidth:not(.login-gem), html.night-mode input[type=submit].loginbtnwidth, html.night-mode .box_one input[type=submit].loginbtnwidth { filter: brightness(1.12) !important; animation: none !important; background: linear-gradient(to bottom, #e0c060 0%, #c49a38 52%, #9a7424 100%) !important; background-image: linear-gradient(to bottom, #e0c060 0%, #c49a38 52%, #9a7424 100%) !important; color: #1a1410 !important; -webkit-text-fill-color: #1a1410 !important; border: 1px solid #f0d878 !important; text-shadow: none !important; box-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 18px rgba(200,160,50,0.35), 0 0 28px rgba(100,150,230,0.1) !important; } html.night-mode .reg-submit-btn:hover, html.night-mode .loginbtnwidth:not(.login-gem):hover, html.night-mode input[type=submit].loginbtnwidth:hover { filter: brightness(1.16) !important; color: #1a1410 !important; -webkit-text-fill-color: #1a1410 !important; } html.night-mode .hero-ql-btn, html.night-mode .hero-cta .cta-secondary, html.night-mode .livechat-input-row button, html.night-mode .livechat-admin-popover .lap-confirm, html.night-mode .up-menu-item, html.night-mode #fixed-go-back-btn, html.night-mode .button, html.night-mode input[type=submit]:not(.loginbtnwidth), html.night-mode input[type=button] { border-color: #d4b24a !important; color: #e4c66a !important; -webkit-text-fill-color: #e4c66a !important; box-shadow: 0 0 10px rgba(180,140,40,0.18), 0 2px 6px rgba(0,0,0,0.55) !important; } /* Collapse / Top — matches Music HUD: refined day gold, cool lunar night */ html.night-mode #collapse-all-btn { border-color: rgba(180,210,255,0.7) !important; color: #d8e8ff !important; -webkit-text-fill-color: #d8e8ff !important; background: radial-gradient(circle at 32% 28%, rgba(230,245,255,0.35), transparent 42%), linear-gradient(165deg, #2a3a55 0%, #121a2a 55%, #0a101c 100%) !important; box-shadow: 0 0 14px rgba(120,170,255,0.32), 0 0 26px rgba(80,130,210,0.16), inset 0 1px 0 rgba(220,235,255,0.25), 0 2px 6px rgba(0,0,0,0.55) !important; animation: ascendPulseNight 3.2s ease-in-out infinite !important; } html.night-mode #collapse-all-btn:hover { background: radial-gradient(circle at 32% 28%, rgba(240,250,255,0.45), transparent 45%), linear-gradient(165deg, #334866 0%, #182236 55%, #0e1624 100%) !important; border-color: rgba(210,230,255,0.9) !important; box-shadow: 0 0 18px rgba(150,200,255,0.45), 0 0 30px rgba(100,160,230,0.2), inset 0 1px 0 rgba(230,245,255,0.3), 0 2px 6px rgba(0,0,0,0.55) !important; animation: none !important; } html.night-mode #collapse-all-btn .ui-ascend { filter: drop-shadow(0 0 4px rgba(150,200,255,0.55)) !important; } html.night-mode #collapse-all-btn .asc-shaft, html.night-mode #collapse-all-btn .asc-tip, html.night-mode #collapse-all-btn .asc-rail { fill: #c4daf5 !important; } html.night-mode #collapse-all-btn .asc-gem { fill: #f0f6ff !important; } @keyframes ascendPulseNight { 0%, 100% { box-shadow: 0 0 10px rgba(120,170,255,0.22), 0 0 20px rgba(80,130,210,0.1), inset 0 1px 0 rgba(220,235,255,0.2), 0 2px 6px rgba(0,0,0,0.55); } 50% { box-shadow: 0 0 16px rgba(150,200,255,0.4), 0 0 28px rgba(100,160,230,0.18), inset 0 1px 0 rgba(230,245,255,0.3), 0 2px 6px rgba(0,0,0,0.55); } } /* Music lyre — cool lunar metal in Night (no warm gold) */ html.night-mode #music-toggle-btn { border-color: rgba(180,210,255,0.7) !important; color: #d8e8ff !important; -webkit-text-fill-color: #d8e8ff !important; background: radial-gradient(circle at 32% 28%, rgba(230,245,255,0.35), transparent 42%), linear-gradient(165deg, #2a3a55 0%, #121a2a 55%, #0a101c 100%) !important; box-shadow: 0 0 14px rgba(120,170,255,0.35), 0 0 28px rgba(80,130,210,0.18), inset 0 1px 0 rgba(220,235,255,0.25), 0 2px 6px rgba(0,0,0,0.55) !important; } html.night-mode #music-toggle-btn:hover { background: radial-gradient(circle at 32% 28%, rgba(240,250,255,0.45), transparent 45%), linear-gradient(165deg, #334866 0%, #182236 55%, #0e1624 100%) !important; box-shadow: 0 0 18px rgba(150,200,255,0.45), 0 0 32px rgba(100,160,230,0.22), inset 0 1px 0 rgba(230,245,255,0.3), 0 2px 6px rgba(0,0,0,0.55) !important; } html.night-mode #music-toggle-btn .ui-lyre { filter: drop-shadow(0 0 4px rgba(150,200,255,0.55)) !important; } html.night-mode #music-toggle-btn .lyre-arm { fill: #7a9ec4 !important; } html.night-mode #music-toggle-btn .lyre-limb { fill: #b8d4f0 !important; } html.night-mode #music-toggle-btn .lyre-yoke { fill: #e0eefc !important; } html.night-mode #music-toggle-btn .lyre-gem { fill: #f2f8ff !important; } html.night-mode #music-toggle-btn .lyre-bridge { fill: #9ebede !important; } html.night-mode #music-toggle-btn .lyre-base { fill: #a8c8e8 !important; } html.night-mode #music-toggle-btn .lyre-string { stroke: #d0e4fa !important; } html.night-mode #music-toggle-btn .lyre-wave { stroke: #c8e0ff !important; } html.night-mode #music-toggle-btn .lyre-wave.w2 { stroke: #8eb4dc !important; } html.night-mode #music-toggle-btn .lyre-mute:last-of-type { stroke: #c8dcff !important; } /* Vote nav — sapphire mist in Night, not gold lyre tint */ html.night-mode #cssmenu > ul > li.nav-vote-glow > a .mn-icon { color: #a8c8f0 !important; animation: navVoteIconTintNight 5.5s ease-in-out infinite !important; } html.night-mode #cssmenu > ul > li.nav-vote-glow > a span:not(.mn-icon) { animation: navVoteLabelTintNight 5.5s ease-in-out infinite !important; } @keyframes navVoteIconTintNight { 0%, 100% { color: #a8c8f0; filter: drop-shadow(0 0 4px rgba(100,160,230,0.4)); } 40% { color: #d0e4ff; filter: drop-shadow(0 0 6px rgba(140,190,255,0.55)); } 70% { color: #c4d8f5; filter: drop-shadow(0 0 5px rgba(80,140,220,0.45)); } } @keyframes navVoteLabelTintNight { 0%, 100% { color: #d8e4f5; text-shadow: 0 0 0 transparent; } 40% { color: #eef4ff; text-shadow: 0 0 8px rgba(120,180,255,0.35); } 70% { color: #e0eaf8; text-shadow: 0 0 8px rgba(90,150,220,0.28); } } html.night-mode #main .button > a.ss-sapphire, html.night-mode #main .button > a { border-color: rgba(220,240,255,0.65) !important; color: #f7fbff !important; -webkit-text-fill-color: #f7fbff !important; background: /* lunar core highlight */ radial-gradient(circle at 22% 20%, rgba(255,255,255,0.95) 0 2px, rgba(255,255,255,0.55) 6px, rgba(210,235,255,0.2) 18px, transparent 34px), radial-gradient(circle at 70% 30%, rgba(230,245,255,0.5) 0%, transparent 22%), radial-gradient(circle at 50% -10%, rgba(200,230,255,0.45) 0%, transparent 50%), radial-gradient(ellipse 100% 80% at 50% 120%, rgba(20,50,110,0.55) 0%, transparent 55%), linear-gradient(125deg, transparent 36%, rgba(255,255,255,0.28) 46%, transparent 54%), linear-gradient(55deg, transparent 34%, rgba(120,170,230,0.35) 48%, transparent 58%), linear-gradient(180deg, #d8ecff 0%, #9ec8f5 18%, #5a9ee0 38%, #2a6fc0 62%, #184a98 82%, #0c2a60 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(20,50,100,0.45), inset 8px 0 16px rgba(180,215,255,0.18), inset -10px 0 18px rgba(255,255,255,0.12), inset 0 -12px 20px rgba(15,40,90,0.35), 0 0 0 1px rgba(180,220,255,0.4), 0 0 12px rgba(190,225,255,0.45), 0 0 28px rgba(140,190,255,0.35), 0 0 52px rgba(100,160,240,0.22), 0 0 80px rgba(70,130,220,0.12), 0 4px 14px rgba(0,0,0,0.45) !important; animation: sapphireNightAura 5s ease-in-out infinite !important; } html.night-mode #main .button > a.ss-sapphire:hover, html.night-mode #main .button > a:hover { filter: saturate(1.05) brightness(1.06) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(20,50,100,0.4), inset 8px 0 16px rgba(200,230,255,0.22), inset -10px 0 18px rgba(255,255,255,0.16), inset 0 -12px 18px rgba(15,40,90,0.3), 0 0 0 1px rgba(220,240,255,0.55), 0 0 16px rgba(210,235,255,0.55), 0 0 34px rgba(160,205,255,0.4), 0 0 60px rgba(120,180,255,0.25), 0 0 90px rgba(80,140,230,0.12), 0 5px 14px rgba(0,0,0,0.4) !important; animation: none !important; } html.night-mode #main .button > a .ss-gem-title { background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 30%, #d4eaff 65%, #b0d4f5 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 1px 1px rgba(0,15,40,0.7)) drop-shadow(0 0 12px rgba(200,230,255,0.55)) !important; } html.night-mode #main .button > a .ss-gem-spark { background: rgba(255,255,255,0.98) !important; box-shadow: 0 0 6px 2px rgba(230,245,255,0.75), 0 0 14px rgba(160,210,255,0.35) !important; } html.night-mode #main .button > a .ss-gem-rim { border-top-color: rgba(255,255,255,0.55) !important; border-left-color: rgba(230,245,255,0.28) !important; border-right-color: rgba(80,130,200,0.25) !important; border-bottom-color: rgba(30,70,140,0.35) !important; } html.night-mode #main .button > a .ss-arrow { filter: drop-shadow(0 0 6px rgba(220,240,255,0.85)) !important; } @keyframes sapphireNightAura { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(20,50,100,0.45), inset 8px 0 16px rgba(180,215,255,0.15), inset -10px 0 18px rgba(255,255,255,0.1), inset 0 -12px 20px rgba(15,40,90,0.35), 0 0 0 1px rgba(180,220,255,0.35), 0 0 10px rgba(190,225,255,0.35), 0 0 24px rgba(140,190,255,0.28), 0 0 46px rgba(100,160,240,0.16), 0 0 70px rgba(70,130,220,0.08), 0 4px 14px rgba(0,0,0,0.45); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(20,50,100,0.38), inset 8px 0 16px rgba(200,230,255,0.22), inset -10px 0 18px rgba(255,255,255,0.16), inset 0 -12px 20px rgba(15,40,90,0.28), 0 0 0 1px rgba(210,235,255,0.5), 0 0 14px rgba(220,240,255,0.5), 0 0 32px rgba(170,210,255,0.38), 0 0 56px rgba(130,185,255,0.24), 0 0 88px rgba(90,150,235,0.12), 0 4px 14px rgba(0,0,0,0.42); } } html.night-mode input[type=submit]:not(.loginbtnwidth), html.night-mode input[type=button] { filter: none !important; background: linear-gradient(to bottom, #2e2620, #1a1512) !important; background-image: linear-gradient(to bottom, #2e2620, #1a1512) !important; text-shadow: none !important; } html.night-mode .ss-tile, html.night-mode .fortress-card, html.night-mode .vote-cta-panel, html.night-mode .server-time-panel { border-color: rgba(150,185,230,0.35) !important; background: radial-gradient(ellipse 100% 70% at 50% -15%, rgba(140,185,255,0.12), transparent 55%), linear-gradient(165deg, rgba(200,220,255,0.05), rgba(0,0,0,0.15)), #141922 !important; box-shadow: 0 1px 0 rgba(200,225,255,0.08) inset, 0 4px 14px rgba(0,0,0,0.4), 0 0 16px rgba(70,130,210,0.1) !important; } /* --- Immortality dust: Day gold motes / Night constellation (GPU-light) --- */ .box_one, .box_two, #cssmenu, .up-login, .player-card, .igd-card, .server-time-panel, .vote-cta-panel, .server-stats-panel, .media-stage-frame, .immo-seo-faq-box, .decree-wrap, .reg-scroll, .reg-scroll-wrap, .shop-panel, .shop-wrap, .site-footer-links-panel, .site-signature-panel, .main_view, .welcome-override { position: relative; isolation: isolate; } .immo-stardust-global { display: none !important; } .immo-stardust { display: block !important; position: absolute !important; inset: 0 !important; border-radius: inherit; pointer-events: none !important; z-index: 0 !important; overflow: hidden !important; contain: paint; } .immo-stardust::before, .immo-stardust::after { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit; pointer-events: none; background-repeat: no-repeat; background-color: transparent !important; } .immo-stardust .immo-stardust-c { display: block !important; position: absolute !important; inset: 0 !important; border-radius: inherit; pointer-events: none; background-repeat: no-repeat; background-color: transparent !important; } .box_one > *:not(.immo-stardust), .box_two > *:not(.immo-stardust), #cssmenu > *:not(.immo-stardust), .up-login > *:not(.immo-stardust), .player-card > *:not(.immo-stardust), .igd-card > *:not(.immo-stardust), .decree-wrap > *:not(.immo-stardust), .reg-scroll > *:not(.immo-stardust), .reg-scroll-wrap > *:not(.immo-stardust), .server-time-panel > *:not(.immo-stardust), .vote-cta-panel > *:not(.immo-stardust), .server-stats-panel > *:not(.immo-stardust), .media-stage-frame > *:not(.immo-stardust):not(.media-stage-corner):not(.media-stage-rail), .immo-seo-faq-box > *:not(.immo-stardust), .shop-panel > *:not(.immo-stardust):not(.shop-panel-corner), .shop-wrap > *:not(.immo-stardust):not(.shop-panel-corner), .site-footer-links-panel > *:not(.immo-stardust), .site-signature-panel > *:not(.immo-stardust), .main_view > *:not(.immo-stardust), .welcome-override > *:not(.immo-stardust) { position: relative; z-index: 2; } .site-footer-links-panel::before { z-index: 1; } .site-footer-links a, .site-footer-links .fl-sep { position: relative; z-index: 3; } .shop-panel > .shop-panel-corner, .shop-wrap > .shop-panel-corner, .media-stage-frame > .media-stage-corner, .media-stage-frame > .media-stage-rail { position: absolute !important; z-index: 3; } .loginbtnwidth, .reg-submit-btn, .hero-feature, .hero-cta a, .hero-ql-btn, .banner-container, .up-login-links a, .ct-cta, .card-tile, #main .button > a, .ss-sapphire, .socials-panel a, .admin-mini-panel a, .news-expand-btn, .f-tax, .ss-tile, .fortress-card { position: relative; z-index: 3; } /* Day — Immortality gold stardust (mixed sizes: dust → mote → jewel) */ .immo-stardust::before { background-image: /* soft blooms */ radial-gradient(14px 14px at 7% 14%, rgba(255,200,60,0.14), transparent 70%), radial-gradient(12px 12px at 94% 18%, rgba(255,180,40,0.12), transparent 70%), radial-gradient(11px 11px at 10% 88%, rgba(255,210,80,0.1), transparent 70%), radial-gradient(13px 13px at 90% 84%, rgba(255,190,50,0.12), transparent 70%), /* large jewels */ radial-gradient(2.8px 2.8px at 7% 14%, rgba(255,245,200,0.95), transparent), radial-gradient(2.4px 2.4px at 94% 18%, rgba(255,236,180,0.9), transparent), radial-gradient(2.6px 2.6px at 10% 88%, rgba(255,230,140,0.88), transparent), radial-gradient(2.5px 2.5px at 90% 84%, rgba(255,245,200,0.9), transparent), radial-gradient(2.2px 2.2px at 48% 6%, rgba(255,236,180,0.85), transparent), radial-gradient(2px 2px at 52% 94%, rgba(255,220,120,0.8), transparent), /* medium motes */ radial-gradient(1.6px 1.6px at 22% 28%, rgba(255,230,140,0.75), transparent), radial-gradient(1.5px 1.5px at 78% 32%, rgba(255,204,0,0.7), transparent), radial-gradient(1.7px 1.7px at 18% 62%, rgba(255,220,100,0.7), transparent), radial-gradient(1.5px 1.5px at 82% 58%, rgba(255,210,90,0.68), transparent), radial-gradient(1.4px 1.4px at 36% 78%, rgba(255,200,80,0.65), transparent), radial-gradient(1.6px 1.6px at 64% 72%, rgba(255,230,140,0.7), transparent), radial-gradient(1.5px 1.5px at 42% 22%, rgba(255,236,180,0.72), transparent), radial-gradient(1.4px 1.4px at 58% 40%, rgba(255,204,0,0.6), transparent), /* fine dust */ radial-gradient(0.85px 0.85px at 14% 42%, rgba(255,236,180,0.55), transparent), radial-gradient(0.7px 0.7px at 28% 12%, rgba(255,220,120,0.45), transparent), radial-gradient(0.9px 0.9px at 34% 48%, rgba(255,200,80,0.5), transparent), radial-gradient(0.75px 0.75px at 46% 68%, rgba(255,230,140,0.48), transparent), radial-gradient(0.8px 0.8px at 56% 16%, rgba(255,245,200,0.52), transparent), radial-gradient(0.7px 0.7px at 68% 52%, rgba(255,204,0,0.42), transparent), radial-gradient(0.85px 0.85px at 74% 88%, rgba(255,220,120,0.5), transparent), radial-gradient(0.65px 0.65px at 86% 38%, rgba(255,236,180,0.4), transparent), radial-gradient(0.9px 0.9px at 96% 62%, rgba(255,210,90,0.48), transparent), radial-gradient(0.7px 0.7px at 4% 54%, rgba(255,230,140,0.42), transparent); animation: immoDayMote 6.8s ease-in-out infinite; } .immo-stardust::after { background-image: radial-gradient(2px 2px at 16% 36%, rgba(255,236,180,0.7), transparent), radial-gradient(1.8px 1.8px at 84% 44%, rgba(255,204,0,0.65), transparent), radial-gradient(1.5px 1.5px at 30% 84%, rgba(255,220,120,0.6), transparent), radial-gradient(1.7px 1.7px at 70% 12%, rgba(255,230,140,0.68), transparent), radial-gradient(2.1px 2.1px at 50% 50%, rgba(255,210,90,0.45), transparent), radial-gradient(1.3px 1.3px at 12% 74%, rgba(255,200,80,0.55), transparent), radial-gradient(1.4px 1.4px at 88% 76%, rgba(255,236,180,0.58), transparent), radial-gradient(1.2px 1.2px at 40% 8%, rgba(255,245,200,0.55), transparent), radial-gradient(1.1px 1.1px at 60% 90%, rgba(255,204,0,0.5), transparent), radial-gradient(0.8px 0.8px at 24% 50%, rgba(255,220,120,0.42), transparent), radial-gradient(0.7px 0.7px at 76% 22%, rgba(255,230,140,0.4), transparent), radial-gradient(0.9px 0.9px at 44% 58%, rgba(255,200,80,0.38), transparent), radial-gradient(0.65px 0.65px at 66% 64%, rgba(255,236,180,0.35), transparent), radial-gradient(0.75px 0.75px at 8% 28%, rgba(255,210,90,0.4), transparent), radial-gradient(0.7px 0.7px at 92% 54%, rgba(255,220,120,0.38), transparent), radial-gradient(0.6px 0.6px at 54% 30%, rgba(255,245,200,0.32), transparent), radial-gradient(0.85px 0.85px at 32% 18%, rgba(255,204,0,0.4), transparent), radial-gradient(0.7px 0.7px at 72% 82%, rgba(255,230,140,0.36), transparent); animation: immoDayMote 8.6s ease-in-out infinite reverse; animation-delay: -2.4s; } .immo-stardust .immo-stardust-c { background-image: /* cross glints — large */ radial-gradient(16px 1.4px at 18% 30%, rgba(255,230,140,0.4), transparent), radial-gradient(1.4px 16px at 18% 30%, rgba(255,220,120,0.32), transparent), radial-gradient(2.4px 2.4px at 18% 30%, rgba(255,245,200,0.85), transparent), radial-gradient(14px 1.2px at 82% 68%, rgba(255,200,80,0.35), transparent), radial-gradient(1.2px 14px at 82% 68%, rgba(255,200,80,0.28), transparent), radial-gradient(2.2px 2.2px at 82% 68%, rgba(255,236,180,0.8), transparent), /* mid sparkles */ radial-gradient(10px 1px at 48% 18%, rgba(255,220,120,0.28), transparent), radial-gradient(1px 10px at 48% 18%, rgba(255,220,120,0.22), transparent), radial-gradient(1.8px 1.8px at 48% 18%, rgba(255,245,200,0.7), transparent), radial-gradient(9px 0.9px at 56% 78%, rgba(255,204,0,0.25), transparent), radial-gradient(0.9px 9px at 56% 78%, rgba(255,204,0,0.2), transparent), radial-gradient(1.6px 1.6px at 56% 78%, rgba(255,230,140,0.65), transparent), /* tiny dust flecks */ radial-gradient(0.9px 0.9px at 28% 56%, rgba(255,236,180,0.5), transparent), radial-gradient(0.7px 0.7px at 70% 40%, rgba(255,210,90,0.42), transparent), radial-gradient(1px 1px at 38% 88%, rgba(255,220,120,0.48), transparent), radial-gradient(0.8px 0.8px at 90% 28%, rgba(255,245,200,0.45), transparent); animation: immoDayGlint 7.8s ease-in-out infinite; animation-delay: -2.8s; } /* Richer gold sky on hero / side panels */ .immo-stardust-rich::before { background-image: radial-gradient(16px 16px at 5% 10%, rgba(255,200,60,0.16), transparent 70%), radial-gradient(3px 3px at 5% 10%, rgba(255,245,200,0.98), transparent), radial-gradient(14px 14px at 95% 12%, rgba(255,180,40,0.14), transparent 70%), radial-gradient(2.6px 2.6px at 95% 12%, rgba(255,236,180,0.95), transparent), radial-gradient(13px 13px at 8% 90%, rgba(255,210,80,0.12), transparent 70%), radial-gradient(2.5px 2.5px at 8% 90%, rgba(255,230,140,0.9), transparent), radial-gradient(15px 15px at 92% 88%, rgba(255,190,50,0.14), transparent 70%), radial-gradient(2.8px 2.8px at 92% 88%, rgba(255,245,200,0.95), transparent), radial-gradient(2.2px 2.2px at 50% 5%, rgba(255,236,180,0.9), transparent), radial-gradient(2px 2px at 50% 95%, rgba(255,220,120,0.85), transparent), radial-gradient(1.8px 1.8px at 20% 35%, rgba(255,230,140,0.75), transparent), radial-gradient(1.7px 1.7px at 80% 38%, rgba(255,204,0,0.72), transparent), radial-gradient(1.6px 1.6px at 25% 70%, rgba(255,220,100,0.7), transparent), radial-gradient(1.8px 1.8px at 75% 72%, rgba(255,210,90,0.72), transparent), radial-gradient(1.5px 1.5px at 40% 20%, rgba(255,236,180,0.7), transparent), radial-gradient(1.5px 1.5px at 60% 55%, rgba(255,204,0,0.65), transparent), radial-gradient(1.4px 1.4px at 35% 85%, rgba(255,200,80,0.62), transparent), radial-gradient(1.5px 1.5px at 68% 15%, rgba(255,230,140,0.68), transparent), radial-gradient(0.9px 0.9px at 12% 48%, rgba(255,236,180,0.55), transparent), radial-gradient(0.75px 0.75px at 30% 8%, rgba(255,220,120,0.48), transparent), radial-gradient(0.85px 0.85px at 45% 42%, rgba(255,200,80,0.5), transparent), radial-gradient(0.7px 0.7px at 55% 78%, rgba(255,230,140,0.45), transparent), radial-gradient(0.9px 0.9px at 72% 48%, rgba(255,245,200,0.52), transparent), radial-gradient(0.7px 0.7px at 85% 25%, rgba(255,204,0,0.42), transparent), radial-gradient(0.8px 0.8px at 15% 72%, rgba(255,220,120,0.48), transparent), radial-gradient(0.65px 0.65px at 88% 60%, rgba(255,236,180,0.4), transparent), radial-gradient(0.9px 0.9px at 62% 32%, rgba(255,210,90,0.48), transparent), radial-gradient(0.7px 0.7px at 38% 58%, rgba(255,230,140,0.42), transparent); animation: immoDayMote 5.8s ease-in-out infinite; } .immo-stardust-rich::after { background-image: radial-gradient(2.2px 2.2px at 14% 40%, rgba(255,236,180,0.75), transparent), radial-gradient(2px 2px at 86% 46%, rgba(255,204,0,0.7), transparent), radial-gradient(1.8px 1.8px at 32% 82%, rgba(255,220,120,0.65), transparent), radial-gradient(1.9px 1.9px at 68% 14%, rgba(255,230,140,0.72), transparent), radial-gradient(2.4px 2.4px at 48% 48%, rgba(255,210,90,0.5), transparent), radial-gradient(1.5px 1.5px at 10% 70%, rgba(255,200,80,0.6), transparent), radial-gradient(1.6px 1.6px at 90% 72%, rgba(255,236,180,0.62), transparent), radial-gradient(1.4px 1.4px at 42% 10%, rgba(255,245,200,0.6), transparent), radial-gradient(1.3px 1.3px at 58% 88%, rgba(255,204,0,0.55), transparent), radial-gradient(1.2px 1.2px at 22% 22%, rgba(255,230,140,0.55), transparent), radial-gradient(1.1px 1.1px at 78% 28%, rgba(255,220,120,0.52), transparent), radial-gradient(0.85px 0.85px at 26% 54%, rgba(255,220,120,0.45), transparent), radial-gradient(0.7px 0.7px at 74% 20%, rgba(255,230,140,0.42), transparent), radial-gradient(0.9px 0.9px at 46% 62%, rgba(255,200,80,0.4), transparent), radial-gradient(0.65px 0.65px at 64% 66%, rgba(255,236,180,0.38), transparent), radial-gradient(0.75px 0.75px at 6% 32%, rgba(255,210,90,0.42), transparent), radial-gradient(0.7px 0.7px at 94% 50%, rgba(255,220,120,0.4), transparent), radial-gradient(0.6px 0.6px at 52% 28%, rgba(255,245,200,0.35), transparent), radial-gradient(0.85px 0.85px at 34% 16%, rgba(255,204,0,0.42), transparent), radial-gradient(0.7px 0.7px at 70% 80%, rgba(255,230,140,0.38), transparent), radial-gradient(0.8px 0.8px at 18% 86%, rgba(255,220,100,0.4), transparent), radial-gradient(0.65px 0.65px at 82% 8%, rgba(255,236,180,0.35), transparent); animation: immoDayMote 7.4s ease-in-out infinite reverse; animation-delay: -1.6s; } .immo-stardust-rich .immo-stardust-c { background-image: radial-gradient(18px 1.5px at 15% 28%, rgba(255,230,140,0.42), transparent), radial-gradient(1.5px 18px at 15% 28%, rgba(255,220,120,0.34), transparent), radial-gradient(2.6px 2.6px at 15% 28%, rgba(255,245,200,0.9), transparent), radial-gradient(16px 1.3px at 85% 70%, rgba(255,200,80,0.38), transparent), radial-gradient(1.3px 16px at 85% 70%, rgba(255,200,80,0.3), transparent), radial-gradient(2.4px 2.4px at 85% 70%, rgba(255,236,180,0.85), transparent), radial-gradient(12px 1.1px at 50% 14%, rgba(255,220,120,0.32), transparent), radial-gradient(1.1px 12px at 50% 14%, rgba(255,220,120,0.26), transparent), radial-gradient(2px 2px at 50% 14%, rgba(255,245,200,0.75), transparent), radial-gradient(11px 1px at 50% 86%, rgba(255,204,0,0.28), transparent), radial-gradient(1px 11px at 50% 86%, rgba(255,204,0,0.22), transparent), radial-gradient(1.8px 1.8px at 50% 86%, rgba(255,230,140,0.7), transparent), radial-gradient(10px 1px at 30% 55%, rgba(255,210,90,0.25), transparent), radial-gradient(1px 10px at 30% 55%, rgba(255,210,90,0.2), transparent), radial-gradient(1.7px 1.7px at 30% 55%, rgba(255,236,180,0.65), transparent), radial-gradient(9px 0.9px at 72% 42%, rgba(255,220,120,0.24), transparent), radial-gradient(0.9px 9px at 72% 42%, rgba(255,220,120,0.18), transparent), radial-gradient(1.5px 1.5px at 72% 42%, rgba(255,245,200,0.6), transparent), radial-gradient(0.9px 0.9px at 26% 48%, rgba(255,236,180,0.52), transparent), radial-gradient(0.7px 0.7px at 68% 36%, rgba(255,210,90,0.45), transparent), radial-gradient(1px 1px at 40% 90%, rgba(255,220,120,0.5), transparent), radial-gradient(0.8px 0.8px at 88% 22%, rgba(255,245,200,0.48), transparent), radial-gradient(0.75px 0.75px at 12% 62%, rgba(255,230,140,0.42), transparent), radial-gradient(0.65px 0.65px at 58% 60%, rgba(255,204,0,0.4), transparent); animation: immoDayGlint 6.8s ease-in-out infinite; animation-delay: -2.2s; } /* Night — constellation, same nodes, silver sky */ html.night-mode .immo-stardust::before { background-image: radial-gradient(9px 9px at 6% 8%, rgba(180,220,255,0.14), transparent 70%), radial-gradient(2.2px 2.2px at 6% 8%, rgba(255,255,255,0.95), transparent), radial-gradient(1px 1px at 18% 22%, rgba(210,235,255,0.5), transparent), radial-gradient(9px 9px at 94% 10%, rgba(170,210,255,0.12), transparent 70%), radial-gradient(2px 2px at 94% 10%, rgba(255,255,255,0.9), transparent), radial-gradient(1px 1px at 82% 24%, rgba(200,230,255,0.4), transparent), radial-gradient(8px 8px at 8% 90%, rgba(180,220,255,0.12), transparent 70%), radial-gradient(2px 2px at 8% 90%, rgba(255,255,255,0.88), transparent), radial-gradient(9px 9px at 93% 88%, rgba(180,220,255,0.14), transparent 70%), radial-gradient(2.2px 2.2px at 93% 88%, rgba(255,255,255,0.92), transparent), radial-gradient(1.2px 1.2px at 48% 6%, rgba(230,245,255,0.45), transparent), radial-gradient(1px 1px at 52% 94%, rgba(200,230,255,0.35), transparent); animation: immoStarBright 5.6s ease-in-out infinite; } html.night-mode .immo-stardust::after { background-image: radial-gradient(1.2px 1.2px at 16% 36%, rgba(210,230,255,0.42), transparent), radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.28), transparent), radial-gradient(1.3px 1.3px at 72% 28%, rgba(220,240,255,0.4), transparent), radial-gradient(1px 1px at 84% 70%, rgba(200,230,255,0.32), transparent), radial-gradient(1.1px 1.1px at 44% 18%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 58% 78%, rgba(210,235,255,0.28), transparent); animation: immoStarSoft 7.8s ease-in-out infinite; animation-delay: -2.4s; } html.night-mode .immo-stardust .immo-stardust-c { background-image: radial-gradient(12px 12px at 4% 50%, rgba(180,220,255,0.12), transparent 70%), radial-gradient(2.6px 2.6px at 4% 50%, rgba(255,255,255,0.8), transparent), radial-gradient(11px 1.1px at 4% 50%, rgba(230,245,255,0.45), transparent), radial-gradient(1.1px 11px at 4% 50%, rgba(230,245,255,0.38), transparent), radial-gradient(12px 12px at 96% 52%, rgba(170,210,255,0.12), transparent 70%), radial-gradient(2.4px 2.4px at 96% 52%, rgba(240,248,255,0.75), transparent), radial-gradient(10px 1px at 96% 52%, rgba(210,235,255,0.4), transparent), radial-gradient(1px 10px at 96% 52%, rgba(210,235,255,0.35), transparent); animation: immoStarGlint 9.4s ease-in-out infinite; animation-delay: -4.8s; } html.night-mode .immo-stardust-rich::before { background-image: radial-gradient(10px 10px at 5% 7%, rgba(180,220,255,0.16), transparent 70%), radial-gradient(2.4px 2.4px at 5% 7%, rgba(255,255,255,0.95), transparent), radial-gradient(1.2px 1.2px at 20% 16%, rgba(210,235,255,0.5), transparent), radial-gradient(10px 10px at 95% 9%, rgba(170,210,255,0.14), transparent 70%), radial-gradient(2.2px 2.2px at 95% 9%, rgba(255,255,255,0.92), transparent), radial-gradient(1px 1px at 80% 20%, rgba(200,230,255,0.42), transparent), radial-gradient(9px 9px at 7% 92%, rgba(180,220,255,0.14), transparent 70%), radial-gradient(2.1px 2.1px at 7% 92%, rgba(255,255,255,0.9), transparent), radial-gradient(10px 10px at 94% 90%, rgba(180,220,255,0.15), transparent 70%), radial-gradient(2.3px 2.3px at 94% 90%, rgba(255,255,255,0.94), transparent), radial-gradient(1.3px 1.3px at 50% 5%, rgba(230,245,255,0.5), transparent), radial-gradient(1.1px 1.1px at 46% 94%, rgba(200,230,255,0.38), transparent), radial-gradient(1px 1px at 32% 44%, rgba(255,255,255,0.28), transparent), radial-gradient(1px 1px at 68% 52%, rgba(210,235,255,0.26), transparent); } @keyframes immoDayMote { 0%, 100% { opacity: 0.55; } 35% { opacity: 1; } 65% { opacity: 0.7; } } @keyframes immoDayGlint { 0%, 100% { opacity: 0.28; } 40% { opacity: 0.95; } 70% { opacity: 0.4; } } @keyframes immoStarBright { 0%, 100% { opacity: 0.35; } 38% { opacity: 1; } 52% { opacity: 0.45; } 78% { opacity: 0.88; } } @keyframes immoStarSoft { 0%, 100% { opacity: 0.18; } 28% { opacity: 0.62; } 48% { opacity: 0.22; } 82% { opacity: 0.75; } } @keyframes immoStarGlint { 0%, 100% { opacity: 0.12; } 42% { opacity: 0.9; } 58% { opacity: 0.2; } 84% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .immo-stardust::before, .immo-stardust::after, .immo-stardust .immo-stardust-c { animation: none !important; } } /* Home hero contrast + lunar gold (overrides muted night greys) */ html.night-mode .main_view { border-color: rgba(180,200,230,0.28) !important; box-shadow: 0 0 28px rgba(60,110,190,0.12), 0 8px 24px rgba(0,0,0,0.55) !important; background-color: rgba(10,14,22,0.92) !important; } html.night-mode .hero-tagline, html.night-mode .adventure-text.hero-tagline { color: #d7e6ff !important; letter-spacing: 0.045em !important; animation: none !important; } html.night-mode .hero-tagline .ht-words { background: linear-gradient(180deg, #ffffff 0%, #d5e6ff 42%, #8eafdc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(150,190,255,0.4)); } html.night-mode .hero-tagline .ht-rule { background: linear-gradient(90deg, transparent, rgba(190,215,255,0.9)); } html.night-mode .hero-tagline .ht-rule-r { background: linear-gradient(90deg, rgba(190,215,255,0.9), transparent); } html.night-mode .box_two_title .mg-mark { color: #e8f1ff; filter: drop-shadow(0 0 4px rgba(160,200,255,0.5)); } html.night-mode .hero-feature { border-color: rgba(160,190,230,0.48) !important; color: #d5e2f4 !important; background: linear-gradient(165deg, rgba(200,220,255,0.1) 0%, rgba(255,255,255,0.03) 40%, rgba(70,110,180,0.08) 100%), radial-gradient(120% 90% at 50% 0%, rgba(140,180,255,0.12), transparent 55%), #10161f !important; box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(210,226,255,0.12), 0 0 14px rgba(80,130,210,0.14) !important; } html.night-mode .hero-feature .hf-val { color: #e7f1ff !important; text-shadow: 0 0 14px rgba(150,190,255,0.4) !important; } html.night-mode .hero-feature .hf-lbl { color: #a9bdd4 !important; opacity: 1 !important; } html.night-mode .hero-feature::before { background: linear-gradient(120deg, transparent, rgba(220,235,255,0.28), transparent) !important; animation: heroCtaShine 5.2s ease-in-out infinite; } html.night-mode .hero-feature .hf-icon { color: #eef5ff !important; border-color: rgba(190,216,255,0.7) !important; background: radial-gradient(circle at 50% 32%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 46%), radial-gradient(circle at 50% 50%, #2a3848 0%, #101820 74%) !important; box-shadow: 0 0 16px rgba(140,190,255,0.45), inset 0 1px 0 rgba(240,248,255,0.35) !important; animation: nightIconPulse 3.4s ease-in-out infinite; } html.night-mode .hero-feature .hf-icon svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55)) !important; } html.night-mode .hero-feature .hf-icon svg [fill="#ffcc00"], html.night-mode .hero-feature .hf-icon svg [fill="#ffe566"] { fill: #eef5ff !important; } html.night-mode .hero-feature .hf-icon svg [fill="#1a1211"] { fill: #0c121c !important; } html.night-mode .hero-cta .cta-primary { filter: none !important; background: linear-gradient(115deg, #12243c 0%, #d5e6f8 24%, #ffffff 42%, #7ea8d4 62%, #16304c 100%) !important; background-image: linear-gradient(115deg, #12243c 0%, #d5e6f8 24%, #ffffff 42%, #7ea8d4 62%, #16304c 100%) !important; background-size: 240% 240% !important; animation: nightCtaShift 4.2s ease-in-out infinite !important; color: #071018 !important; -webkit-text-fill-color: #071018 !important; border: 1px solid rgba(236,244,255,0.9) !important; text-shadow: none !important; box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 0 18px rgba(140,190,255,0.45), inset 0 1px 0 rgba(255,255,255,0.75) !important; } html.night-mode .hero-cta .cta-primary .cta-ico .hero-ico-swords { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55)) !important; } html.night-mode .hero-cta .cta-primary .cta-ico { color: #eef5ff !important; border-color: rgba(210,228,255,0.75) !important; background: radial-gradient(circle at 50% 32%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 46%), radial-gradient(circle at 50% 50%, #2a3848 0%, #101820 74%) !important; box-shadow: 0 0 16px rgba(150,200,255,0.55), inset 0 1px 0 rgba(240,248,255,0.4) !important; animation: nightIconPulse 3.4s ease-in-out infinite; } html.night-mode .hero-cta .cta-primary:hover { filter: brightness(1.08) !important; color: #071018 !important; -webkit-text-fill-color: #071018 !important; } html.night-mode .hero-cta .cta-secondary { background: linear-gradient(180deg, rgba(220,234,255,0.16) 0%, rgba(255,255,255,0.03) 42%, rgba(70,120,190,0.14) 100%), #101820 !important; border-color: rgba(186,214,255,0.7) !important; color: #e7f0ff !important; -webkit-text-fill-color: #e7f0ff !important; animation: nightRim 3s ease-in-out infinite; } html.night-mode .hero-cta .cta-secondary::after { content: ''; position: absolute; top: 0; left: -70%; width: 42%; height: 100%; background: linear-gradient(100deg, transparent, rgba(230,242,255,0.35), transparent); transform: skewX(-18deg); animation: heroCtaShine 4.8s ease-in-out infinite; pointer-events: none; } html.night-mode .hero-cta .cta-secondary .cta-ico { color: #eef5ff !important; border-color: rgba(190,216,255,0.65) !important; background: radial-gradient(circle at 50% 32%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 46%), radial-gradient(circle at 50% 50%, #2a3848 0%, #101820 74%) !important; box-shadow: 0 0 12px rgba(140,190,255,0.4) !important; } html.night-mode .hero-ql-btn, html.night-mode .hero-ql-btn.hero-ql-wheel { background: linear-gradient(180deg, rgba(210,226,255,0.12) 0%, rgba(255,255,255,0.03) 46%, rgba(70,120,190,0.12) 100%), #101820 !important; border-color: rgba(170,205,245,0.55) !important; color: #e4eeff !important; -webkit-text-fill-color: #e4eeff !important; box-shadow: inset 0 1px 0 rgba(230,240,255,0.16), 0 0 12px rgba(100,160,230,0.22) !important; animation: nightRim 3.6s ease-in-out infinite; } html.night-mode .hero-ql-btn .hql-icon { color: #f4f8ff !important; border-color: rgba(200,220,255,0.6) !important; background: radial-gradient(circle at 50% 32%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 46%), radial-gradient(circle at 50% 50%, #2a3848 0%, #101820 74%) !important; box-shadow: 0 0 10px rgba(150,200,255,0.4) !important; } html.night-mode .hero-ql-btn:hover, html.night-mode .hero-ql-btn.hero-ql-wheel:hover { border-color: rgba(230,242,255,0.95) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } @keyframes nightCtaShift { 0% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 40%; } } @keyframes nightRim { 0%, 100% { box-shadow: inset 0 1px 0 rgba(230,240,255,0.14), 0 0 8px rgba(100,160,230,0.18); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 0 18px rgba(170,210,255,0.55); } } @keyframes nightIconPulse { 0%, 100% { box-shadow: 0 0 10px rgba(140,190,255,0.28), inset 0 1px 0 rgba(240,248,255,0.3); } 50% { box-shadow: 0 0 18px rgba(190,220,255,0.7), inset 0 1px 0 rgba(255,255,255,0.5); } } @media (prefers-reduced-motion: reduce) { html.night-mode .hero-feature::before, html.night-mode .hero-feature .hf-icon, html.night-mode .hero-cta .cta-primary, html.night-mode .hero-cta .cta-primary .cta-ico, html.night-mode .hero-cta .cta-secondary, html.night-mode .hero-cta .cta-secondary::after, html.night-mode .hero-ql-btn { animation: none !important; } } html.night-mode .hero-content-divider::before, html.night-mode .hero-content-divider::after { background: linear-gradient(90deg, transparent, rgba(160,190,230,0.5), transparent) !important; } html.night-mode .hero-content-divider .hcd-sigil { color: #f4f8ff !important; } html.night-mode .banner-container { background: linear-gradient(135deg, rgba(255,204,0,0.22), rgba(100,150,220,0.06) 40%, rgba(255,204,0,0.14)) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 20px rgba(180,140,40,0.15) !important; } html.night-mode .fortress-card .f-name, html.night-mode .server-stats-panel .ss-val { text-shadow: 0 0 12px rgba(200,170,80,0.35), 0 0 18px rgba(120,170,255,0.15) !important; } html.night-mode .admin-mini-panel a { border-color: rgba(200,175,90,0.55) !important; color: #ffe080 !important; -webkit-text-fill-color: #ffe080 !important; background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255,204,0,0.12), transparent 55%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(80,130,200,0.08), transparent 50%), linear-gradient(165deg, rgba(255,236,180,0.08) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.25) 100%), #141820 !important; box-shadow: inset 0 1px 0 rgba(255,236,180,0.14), 0 3px 12px rgba(0,0,0,0.5), 0 0 12px rgba(180,140,40,0.12) !important; } html.night-mode .admin-mini-panel a:hover { border-color: rgba(255,210,100,0.85) !important; color: #fff0b0 !important; -webkit-text-fill-color: #fff0b0 !important; box-shadow: inset 0 1px 0 rgba(255,236,180,0.2), 0 6px 16px rgba(0,0,0,0.55), 0 0 16px rgba(255,180,40,0.28), 0 0 22px rgba(100,160,230,0.1) !important; } html.night-mode .admin-mini-panel a.amp-hub { border-color: rgba(255,200,80,0.75) !important; background: radial-gradient(ellipse 100% 80% at 50% -10%, rgba(255,210,80,0.22), transparent 55%), radial-gradient(ellipse 70% 50% at 0% 100%, rgba(100,150,220,0.1), transparent 50%), linear-gradient(165deg, rgba(255,236,180,0.12), rgba(255,255,255,0.02)), #161c28 !important; box-shadow: inset 0 1px 0 rgba(255,236,180,0.18), 0 0 0 1px rgba(255,200,60,0.15), 0 3px 12px rgba(0,0,0,0.5), 0 0 18px rgba(255,180,40,0.2) !important; } html.night-mode .admin-mini-panel a.amp-reports { border-color: rgba(255,140,100,0.55) !important; color: #ffb898 !important; -webkit-text-fill-color: #ffb898 !important; } html.night-mode .admin-mini-panel a .amp-ico { background: none !important; border: none !important; box-shadow: none !important; filter: drop-shadow(0 0 8px rgba(255,204,0,0.4)) !important; } html.night-mode .admin-mini-panel a .amp-ico .amp-medal { filter: drop-shadow(0 0 4px rgba(255,204,0,0.35)) !important; } html.night-mode .admin-mini-panel a.amp-epin .amp-ico { filter: drop-shadow(0 0 9px rgba(200,60,90,0.45)) !important; } /* Full admin page nav — night beauty */ html.night-mode .admin-panel .admin-nav a { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,204,0,0.1), transparent 55%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(80,130,200,0.08), transparent 50%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)), rgba(14,18,28,0.72) !important; border-color: rgba(200,175,90,0.4) !important; color: #e8dcc0 !important; box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(200,220,255,0.08), 0 0 12px rgba(180,140,40,0.08) !important; } html.night-mode .admin-panel .admin-nav a:hover, html.night-mode .admin-panel .admin-nav a.active { border-color: rgba(255,210,100,0.8) !important; color: #ffd24a !important; box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 18px rgba(255,180,40,0.3), 0 0 24px rgba(100,160,230,0.1), inset 0 1px 0 rgba(255,236,180,0.16) !important; } html.night-mode .admin-panel .admin-nav a .nav-ico { background: none !important; border: none !important; box-shadow: none !important; filter: drop-shadow(0 0 8px rgba(255,204,0,0.4)) !important; } html.night-mode .admin-panel .admin-header h2 { text-shadow: 0 0 12px rgba(255,204,0,0.5), 0 0 20px rgba(100,160,230,0.12) !important; } html.night-mode .admin-panel .stat-card { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,204,0,0.12), transparent 55%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(80,130,200,0.08), transparent 50%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2)), #141820 !important; border-color: rgba(200,175,90,0.4) !important; } html.night-mode .media-stage-frame, html.night-mode .media-gallery-wrap .media-stage-frame { background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(170,200,255,0.1), transparent 70%), linear-gradient(165deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 42%, rgba(0,0,0,0.12) 100%), rgba(10, 14, 24, 0.34) !important; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border-color: rgba(180,200,230,0.45) !important; box-shadow: inset 0 1px 0 rgba(220,235,255,0.14), 0 0 24px rgba(80,130,210,0.14), inset 0 0 30px rgba(100,150,220,0.05) !important; } /* Live Chat — night beauty */ html.night-mode .livechat-messages { background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(140,180,255,0.1), transparent 55%), radial-gradient(ellipse 50% 40% at 10% 90%, rgba(80,120,200,0.08), transparent 50%), radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1px at 78% 18%, rgba(200,230,255,0.35), transparent), radial-gradient(1.2px 1.2px at 88% 70%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 28% 78%, rgba(210,235,255,0.25), transparent), linear-gradient(180deg, #141a24 0%, #0c1018 100%) !important; border-color: rgba(150,185,230,0.35) !important; box-shadow: inset 0 1px 0 rgba(200,220,255,0.1), inset 0 0 28px rgba(40,80,140,0.12), 0 0 18px rgba(70,130,210,0.1), 0 4px 14px rgba(0,0,0,0.45) !important; } html.night-mode .livechat-messages::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(160,200,255,0.55), rgba(80,130,200,0.4)) !important; } html.night-mode .livechat-input-row input[type=text] { background: linear-gradient(180deg, rgba(180,210,255,0.06), transparent), #121820 !important; border-color: rgba(150,185,230,0.35) !important; color: #e8eef8 !important; -webkit-text-fill-color: #e8eef8 !important; } html.night-mode .livechat-input-row input[type=text]:focus { border-color: rgba(180,210,255,0.6) !important; box-shadow: 0 0 0 1px rgba(140,180,255,0.15), 0 0 14px rgba(100,160,230,0.15) !important; } html.night-mode .livechat-input-row button { background: linear-gradient(165deg, #1e2a3c 0%, #121a28 55%, #0c121c 100%) !important; border-color: rgba(200,175,90,0.7) !important; color: #ffe080 !important; -webkit-text-fill-color: #ffe080 !important; box-shadow: inset 0 1px 0 rgba(200,220,255,0.1), 0 0 12px rgba(180,140,40,0.15) !important; } html.night-mode .livechat-input-row button:hover { border-color: rgba(255,210,100,0.85) !important; box-shadow: 0 0 14px rgba(180,140,40,0.28), 0 0 18px rgba(100,160,230,0.12) !important; } html.night-mode .livechat-empty .lce-text { color: #c8d4e8 !important; text-shadow: 0 0 12px rgba(140,180,230,0.2) !important; } html.night-mode .livechat-empty .lce-icon { filter: drop-shadow(0 0 10px rgba(160,200,255,0.4)) !important; } html.night-mode .livechat-locked-msg { color: #b8c8dc !important; background: rgba(100,150,220,0.06) !important; border-color: rgba(150,185,230,0.28) !important; } html.night-mode .livechat-msg .lc-user { text-shadow: 0 0 10px rgba(255,204,0,0.35) !important; } html.night-mode .immo-seo-faq-box, html.night-mode .post_content, html.night-mode .news-body { border-color: rgba(150,185,230,0.28) !important; box-shadow: 0 0 20px rgba(60,110,190,0.08) !important; } html.night-mode a { color: #d4c4a0; text-shadow: 0 0 8px rgba(180,150,60,0.15); } html.night-mode .highlight-link, html.night-mode .post_title a { text-shadow: 0 0 14px rgba(220,180,80,0.35), 0 0 24px rgba(120,170,255,0.1) !important; } html.night-mode input[type=text], html.night-mode input[type=password], html.night-mode textarea, html.night-mode select, html.night-mode .box_one input[type=text], html.night-mode .box_one input[type=password] { background: #14181e !important; background-color: #14181e !important; border: 1px solid #3d4654 !important; color: #ddd6c8 !important; -webkit-text-fill-color: #ddd6c8 !important; caret-color: #ddd6c8; box-shadow: inset 0 1px 3px rgba(0,0,0,0.45) !important; } html.night-mode input[type=text]:-webkit-autofill, html.night-mode input[type=text]:-webkit-autofill:hover, html.night-mode input[type=text]:-webkit-autofill:focus, html.night-mode input[type=password]:-webkit-autofill, html.night-mode input[type=password]:-webkit-autofill:hover, html.night-mode input[type=password]:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #14181e inset !important; box-shadow: 0 0 0 1000px #14181e inset !important; -webkit-text-fill-color: #ddd6c8 !important; caret-color: #ddd6c8; border: 1px solid #3d4654 !important; transition: background-color 99999s ease-out 0s; } html.night-mode .decree-title-lg { color: #f4f8ff !important; text-shadow: 0 1px 0 rgba(8,16,32,0.55), 0 0 16px rgba(160,200,255,0.4) !important; } /* Keep title chrome silver — don't mute to warm grey */ html.night-mode .box_one_title, html.night-mode .box_two_title { color: #e2eaf6 !important; } .box_two input[type=submit]:not(.loginbtnwidth), .box_two input[type=button] { background: linear-gradient(to bottom,#3b2826,#1a1211) !important; background-image:none !important; border:1px solid #ffcc00 !important; color:#ffcc00 !important; border-radius:5px !important; font-family:'Cinzel',serif !important; letter-spacing:0.5px !important; padding:8px 20px !important; cursor:pointer !important; text-shadow:none !important; transition:all 0.2s ease !important; } .box_two input[type=submit]:not(.loginbtnwidth):hover, .box_two input[type=button]:hover { background: linear-gradient(to bottom,#4a3431,#2b1d1b) !important; box-shadow:0 0 10px rgba(255,204,0,0.5) !important; color:#ffffff !important; } .box_two input[type=text] { background:#211716 !important; border:1px solid #4a3431 !important; color:#fff !important; } .box_one_title, .box_two_title { position:relative; display:flex !important; align-items:center !important; gap:9px; letter-spacing:1.5px; padding-bottom:11px !important; border-bottom:1px solid rgba(255,204,0,0.35) !important; box-shadow:0 1px 0 rgba(255,204,0,0.1) !important; background: transparent !important; background-image: none !important; width: auto !important; max-width: 100% !important; height: auto !important; margin-left: 0 !important; margin-top: 0 !important; } .box_one_title::before, .box_two_title::before { content:"\2726"; display:flex; align-items:center; justify-content:center; width:19px; height:19px; flex-shrink:0; border-radius:50%; color:#fff4cc; font-size:9px; margin-right:0; } @property --immo-orbit { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes immoOrbit { to { --immo-orbit: 360deg; } } @keyframes immoSigilDay { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,220,140,0.15), 0 0 8px rgba(255,186,40,0.28); } 50% { box-shadow: inset 0 0 0 1px rgba(255,236,180,0.35), 0 0 14px rgba(255,214,90,0.6); } } @keyframes immoSigilNight { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(200,225,255,0.12), 0 0 8px rgba(140,190,255,0.26); } 50% { box-shadow: inset 0 0 0 1px rgba(230,242,255,0.32), 0 0 14px rgba(190,220,255,0.58); } } .hero-content-divider .hcd-sigil, .dl-intro-sigil, .rank-search-sigil, .vote-header .vh-sigil, .slg-sigil, .rfp-sigil, .wof-overlay-sigil, .shop-header .sh-sigil, .box_one_title::before, .box_two_title::before { border-radius: 50% !important; font-size: 0 !important; line-height: 0 !important; background: radial-gradient(circle at 50% 50%, #fff8dc 0 1.5px, rgba(255,214,110,0.55) 2.5px, transparent 7px), radial-gradient(circle at 50% 50%, #3a2616 0%, #120e0c 74%) padding-box, conic-gradient(from var(--immo-orbit), transparent 0 250deg, rgba(255,236,180,0.15) 300deg, #fff6d0 338deg, #ffcc00 352deg, transparent 360deg) border-box !important; border: 1.5px solid transparent !important; color: #fff6d4 !important; text-shadow: 0 1px 0 rgba(60,30,0,0.85), 0 0 6px rgba(255,210,80,0.9) !important; box-shadow: inset 0 0 0 1px rgba(255,220,140,0.15), 0 0 10px rgba(255,186,40,0.35) !important; animation: immoOrbit 6.5s linear infinite, immoSigilDay 3.2s ease-in-out infinite !important; } html.night-mode .hero-content-divider .hcd-sigil, html.night-mode .dl-intro-sigil, html.night-mode .rank-search-sigil, html.night-mode .vote-header .vh-sigil, html.night-mode .slg-sigil, html.night-mode .rfp-sigil, html.night-mode .wof-overlay-sigil, html.night-mode .shop-header .sh-sigil, html.night-mode .box_one_title::before, html.night-mode .box_two_title::before { background: radial-gradient(circle at 50% 50%, #ffffff 0 1.5px, rgba(210,230,255,0.6) 2.5px, transparent 7px), radial-gradient(circle at 50% 50%, #24344e 0%, #070c16 74%) padding-box, conic-gradient(from var(--immo-orbit), transparent 0 250deg, rgba(210,230,255,0.15) 300deg, #f7fbff 338deg, #9ec4f5 352deg, transparent 360deg) border-box !important; border-color: transparent !important; color: #f7fbff !important; text-shadow: 0 1px 0 rgba(8,16,32,0.85), 0 0 8px rgba(200,225,255,0.95) !important; box-shadow: inset 0 0 0 1px rgba(200,225,255,0.16), 0 0 12px rgba(140,190,255,0.35) !important; animation: immoOrbit 11s linear infinite, immoSigilNight 4.6s ease-in-out infinite !important; } @media (prefers-reduced-motion: reduce) { .hero-content-divider .hcd-sigil, .dl-intro-sigil, .rank-search-sigil, .vote-header .vh-sigil, .slg-sigil, .rfp-sigil, .wof-overlay-sigil, .shop-header .sh-sigil, .box_one_title::before, .box_two_title::before { animation: none !important; } } .box_one_title::after, .box_two_title::after { content:""; flex:1; height:1px; margin-left:6px; background:linear-gradient(90deg, rgba(255,204,0,0.3), transparent); } .box_two { background-color: rgba(28, 18, 17, 0.58) !important; background-image: linear-gradient(165deg, rgba(255,236,180,0.09) 0%, rgba(255,255,255,0.02) 42%, rgba(0,0,0,0.1) 100%) !important; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-color: rgba(228, 198, 106, 0.32) !important; box-shadow: inset 0 1px 0 rgba(255,236,180,0.14), 0 8px 26px rgba(0,0,0,0.32) !important; } .box_two:has(.post_title) .box_two_title { background: linear-gradient(180deg, rgba(42, 28, 22, 0.78) 0%, rgba(26, 18, 17, 0.58) 100%) !important; background-image: none !important; backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); } .box_two:has(.post_title) #pn_title { background: linear-gradient(180deg, rgba(32, 24, 20, 0.5) 0%, rgba(21, 16, 14, 0.26) 100%) !important; background-image: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .box_one { position:relative; box-shadow:0 0 0 1px rgba(255,204,0,0.12), 0 4px 14px rgba(0,0,0,0.25) !important; } .box_one::before, .box_one::after { content:""; position:absolute; top:10%; bottom:10%; width:2.5px; background:linear-gradient(to bottom, transparent 0%, #ffcc00 20%, #ffcc00 80%, transparent 100%); opacity:0.6; box-shadow:0 0 6px rgba(255,204,0,0.45); z-index:3; pointer-events:none; } .box_one::before { left:-3px; } .box_one::after { right:-3px; } #wrapper::after { content:""; display:table; clear:both; } #music-toggle-btn { width: 58px; height: 58px; background: linear-gradient(to bottom, #4a3431 0%, #1a1211 100%); border: 2px solid #ffcc00; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffcc00; cursor: pointer; transition: all 0.2s ease; user-select: none; box-shadow: 0px 0px 10px rgba(255, 204, 0, 0.5), 0px 2px 5px rgba(0,0,0,0.8); } #music-toggle-btn:hover { background: linear-gradient(to bottom, #5a4038 0%, #2b1d1b 100%); transform: scale(1.08); } #music-toggle-btn.playing { animation: musicPulse 1.6s ease-in-out infinite; } #music-toggle-btn .ui-lyre { width: 34px; height: 34px; display: block; overflow: visible; filter: drop-shadow(0 0 3px rgba(255,204,0,0.45)); } #music-toggle-btn .lyre-arm { fill: #c9a227; } #music-toggle-btn .lyre-limb { fill: #ffcc00; } #music-toggle-btn .lyre-yoke { fill: #ffe566; } #music-toggle-btn .lyre-gem { fill: #fff3c4; } #music-toggle-btn .lyre-bridge { fill: #e4c66a; } #music-toggle-btn .lyre-base { fill: #ffcc00; } #music-toggle-btn .lyre-string { stroke: #ffe566; } #music-toggle-btn .lyre-wave { stroke: #ffe566; } #music-toggle-btn .lyre-wave.w2 { stroke: #ffcc00; } #music-toggle-btn .lyre-mute:last-of-type { stroke: #ffcc00; } #music-toggle-btn .lyre-wave { opacity: 0; transform-origin: 16px 16px; } #music-toggle-btn.playing .lyre-wave { opacity: 1; animation: lyreWave 1.15s ease-in-out infinite; } #music-toggle-btn.playing .lyre-wave.w2 { animation-delay: 0.18s; } #music-toggle-btn .lyre-mute { opacity: 0.95; } #music-toggle-btn.playing .lyre-mute { opacity: 0; } @keyframes lyreWave { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } #ui-toggle-btn { position: relative; width: 58px; height: 58px; background: linear-gradient(to bottom, #4a3431 0%, #1a1211 100%); border: 2px solid #ffcc00; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffcc00; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.35s ease; user-select: none; box-shadow: 0px 0px 16px rgba(255, 204, 0, 0.7), 0px 2px 8px rgba(0,0,0,0.8); overflow: visible; } #ui-toggle-btn:hover { background: linear-gradient(to bottom, #5a4038 0%, #2b1d1b 100%); transform: scale(1.08); } #ui-toggle-btn .ui-orbit-sun { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; animation: tsSunSpin 10s linear infinite; pointer-events: none; } #ui-toggle-btn .ui-orbit-sun i { position: absolute; left: 50%; top: 0; width: 2px; height: 9px; margin-left: -1px; border-radius: 2px; background: linear-gradient(#fff3c4, #ffcc00 55%, transparent); transform-origin: 50% 37px; box-shadow: 0 0 4px rgba(255,204,0,0.7); } #ui-toggle-btn .ui-orbit-sun i:nth-child(1) { transform: rotate(0deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(2) { transform: rotate(30deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(3) { transform: rotate(60deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(4) { transform: rotate(90deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(5) { transform: rotate(120deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(6) { transform: rotate(150deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(7) { transform: rotate(180deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(8) { transform: rotate(210deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(9) { transform: rotate(240deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(10) { transform: rotate(270deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(11) { transform: rotate(300deg); } #ui-toggle-btn .ui-orbit-sun i:nth-child(12) { transform: rotate(330deg); } #ui-toggle-btn .ui-orbit-moon { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 1.5px solid rgba(210,225,245,0.7); box-shadow: 0 0 12px rgba(180,205,235,0.4), inset 0 0 10px rgba(180,200,230,0.18); opacity: 0; pointer-events: none; } #ui-toggle-btn .ui-orbit-moon span { position: absolute; border-radius: 50%; background: #d7e3f2; box-shadow: 0 0 5px rgba(220,235,255,0.7); } #ui-toggle-btn .ui-orbit-moon .c1 { width: 8px; height: 8px; top: 1px; left: 28px; box-shadow: 2px 0 0 0 #eef3fa, 0 0 6px rgba(210,225,245,0.8); } #ui-toggle-btn .ui-orbit-moon .c2 { width: 5px; height: 5px; top: 16px; right: 2px; } #ui-toggle-btn .ui-orbit-moon .c3 { width: 4px; height: 4px; bottom: 8px; left: 10px; } #ui-toggle-btn svg { display: block; overflow: visible; position: relative; z-index: 1; } #ui-toggle-btn .ui-horus { width: 36px; height: 30px; } #ui-toggle-btn .ui-lotus { width: 30px; height: 30px; display: none; } #ui-toggle-btn .horus-kohl { fill: #ffcc00; } #ui-toggle-btn .horus-eye { fill: #1a1211; stroke: #ffcc00; stroke-width: 1.4; } #ui-toggle-btn .horus-pupil { fill: #ffcc00; } #ui-toggle-btn .lotus-petal { fill: #c9d8ec; } #ui-toggle-btn .lotus-petal.alt { fill: #e4eef8; } #ui-toggle-btn .lotus-core { fill: #f7fbff; } html.night-mode #ui-toggle-btn { border-color: #c5d4e8; box-shadow: 0 0 16px rgba(180,205,235,0.45), 0 2px 8px rgba(0,0,0,0.8); } html.night-mode #ui-toggle-btn .ui-orbit-sun, html.night-mode #ui-toggle-btn .ui-horus { display: none; } html.night-mode #ui-toggle-btn .ui-orbit-moon { opacity: 1; } html.night-mode #ui-toggle-btn .ui-lotus { display: block; animation: lotusSpin 16s linear infinite; } #ui-toggle-btn.is-cinema { animation: uiEyePulse 2.4s ease-in-out infinite; } html.night-mode #ui-toggle-btn.is-cinema { animation: uiMoonPulse 2.8s ease-in-out infinite; } @keyframes uiEyePulse { 0%, 100% { box-shadow: 0 0 14px rgba(255,204,0,0.6), 0 2px 6px rgba(0,0,0,0.8); } 50% { box-shadow: 0 0 24px rgba(255,204,0,1), 0 0 36px rgba(255,190,70,0.45), 0 2px 6px rgba(0,0,0,0.8); } } @keyframes uiMoonPulse { 0%, 100% { box-shadow: 0 0 12px rgba(180,205,235,0.4), 0 2px 6px rgba(0,0,0,0.8); } 50% { box-shadow: 0 0 22px rgba(210,225,245,0.75), 0 0 32px rgba(170,200,235,0.35), 0 2px 6px rgba(0,0,0,0.8); } } @keyframes lotusSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } body.ui-hidden #scale-outer, body.ui-hidden .zopim, body.ui-hidden iframe[name^="__zopim"] { display: none !important; } body.ui-hidden #ui-cinema { display: block; } #ui-cinema { display: none; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } #ui-cinema .cinema-haze { display: none; } #ui-cinema .cinema-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 58%, rgba(8,6,4,0.38) 100%); } html.night-mode #ui-cinema .cinema-vignette { background: radial-gradient(ellipse at 50% 40%, transparent 58%, rgba(4,8,14,0.42) 100%); } #ui-cinema .cinema-wep { position: absolute; pointer-events: none; } #ui-cinema .wep-axe { left: 16%; top: 16%; width: 18%; height: 38%; transform: rotate(-8deg); } #ui-cinema .wep-sword { left: 49.4%; top: 16%; width: 1%; height: 11%; } #ui-cinema .wep-spear { left: 74%; top: 53%; width: 18%; height: 7%; transform: rotate(3deg); } #ui-cinema .wep-glow { display: none; } #ui-cinema .wep-axe .wep-edge-mid { left: 36%; top: 16%; height: 58%; opacity: 0.65; } #ui-cinema .wep-edge { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); background: linear-gradient(to top, transparent 8%, rgba(255,240,200,0.55) 50%, transparent 92%); filter: blur(1px); mix-blend-mode: screen; animation: wepEdge 2.6s ease-in-out infinite alternate; } #ui-cinema .wep-spear .wep-edge { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); background: linear-gradient(to right, transparent 6%, rgba(255,240,200,0.55) 50%, transparent 94%); } html.night-mode #ui-cinema .wep-edge { background: linear-gradient(to top, transparent 8%, rgba(255,220,140,0.75) 50%, transparent 92%); box-shadow: 0 0 6px rgba(255,190,80,0.35); } html.night-mode #ui-cinema .wep-spear .wep-edge { background: linear-gradient(to right, transparent 6%, rgba(255,220,140,0.75) 50%, transparent 94%); } #ui-cinema .wep-glint { position: absolute; left: 50%; top: 0; width: 10px; height: 18%; margin-left: -5px; background: linear-gradient(to bottom, transparent, rgba(255,255,245,0.85), transparent); filter: blur(2px); mix-blend-mode: screen; opacity: 0; animation: wepGlint 4.2s ease-in-out infinite; } #ui-cinema .wep-spear .wep-glint { left: 0; top: 50%; width: 14%; height: 10px; margin-left: 0; margin-top: -5px; background: linear-gradient(to right, transparent, rgba(255,255,245,0.85), transparent); animation-name: wepGlintH; } #ui-cinema .wep-sword .wep-glint { animation-delay: 1.4s; } #ui-cinema .wep-spear .wep-glint { animation-delay: 2.6s; } #ui-cinema .cinema-ember { display: none; } #ui-cinema .cinema-spark { position: absolute; width: 5px; height: 5px; margin: -2px 0 0 -2px; background: #fff8dc; box-shadow: 0 0 5px rgba(255,236,190,0.7); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); animation: cinemaSpark ease-in-out infinite; opacity: 0; } #ui-cinema .cinema-spark.from-axe { left: 23%; top: 36%; } #ui-cinema .cinema-spark.from-sword { left: 50%; top: 48%; } #ui-cinema .cinema-spark.from-spear { left: 84%; top: 55%; } html.night-mode #ui-cinema .cinema-spark { background: #ffe9a3; box-shadow: 0 0 6px rgba(255,220,140,0.75); } @keyframes cinemaHaze { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 100% { transform: translate3d(4%, 3%, 0) scale(1.08); } } @keyframes cinemaPulse { 0% { opacity: 0.75; } 100% { opacity: 1; } } @keyframes wepPulse { 0% { transform: scale(0.92); opacity: 0.7; } 100% { transform: scale(1.08); opacity: 1; } } @keyframes wepEdge { 0% { opacity: 0.45; filter: blur(2px); } 100% { opacity: 1; filter: blur(1px); } } @keyframes wepGlint { 0%, 22% { transform: translateY(0); opacity: 0; } 34% { opacity: 0.8; } 58% { transform: translateY(280%); opacity: 0; } 100% { opacity: 0; } } @keyframes wepGlintH { 0%, 22% { transform: translateX(0); opacity: 0; } 34% { opacity: 0.8; } 58% { transform: translateX(520%); opacity: 0; } 100% { opacity: 0; } } @keyframes cinemaEmber { 0% { transform: translate3d(0, 0, 0) scale(0.45); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate3d(var(--dx), var(--dy), 0) scale(0.15); opacity: 0; } } @keyframes cinemaSpark { 0%, 70% { transform: scale(0.2) rotate(0deg); opacity: 0; } 78% { transform: scale(1.15) rotate(20deg); opacity: 1; } 90% { transform: scale(0.4) rotate(40deg); opacity: 0; } 100% { opacity: 0; } } @keyframes musicPulse { 0%, 100% { box-shadow: 0px 0px 14px rgba(255, 204, 0, 0.7), 0px 2px 8px rgba(0,0,0,0.8); transform: scale(1); } 50% { box-shadow: 0px 0px 30px rgba(255, 204, 0, 1), 0px 0px 45px rgba(255, 204, 0, 0.5), 0px 2px 8px rgba(0,0,0,0.9); transform: scale(1.06); } } body.ui-hidden #music-toggle-btn { display: none !important; } @keyframes attnBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } #collapse-all-btn { width: 36px; height: 36px; background: radial-gradient(circle at 32% 28%, rgba(255,236,180,0.22), transparent 45%), linear-gradient(165deg, #3b2826 0%, #1a1211 55%, #120c0b 100%); border: 2px solid rgba(255,204,0,0.75); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #ffcc00; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; user-select: none; box-shadow: 0 0 12px rgba(255, 204, 0, 0.35), 0 2px 6px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,236,180,0.2); animation: ascendPulse 2.8s ease-in-out infinite; } #collapse-all-btn .ui-ascend { width: 20px; height: 20px; display: block; overflow: visible; filter: drop-shadow(0 0 3px rgba(255,204,0,0.45)); } #collapse-all-btn .asc-shaft, #collapse-all-btn .asc-tip, #collapse-all-btn .asc-rail { fill: #ffd24a; } #collapse-all-btn .asc-gem { fill: #fff3c4; } #collapse-all-btn:hover { background: radial-gradient(circle at 32% 28%, rgba(255,236,180,0.32), transparent 48%), linear-gradient(165deg, #4a3431 0%, #2b1d1b 55%, #1a1210 100%); border-color: rgba(255,220,120,0.95); box-shadow: 0 0 18px rgba(255, 204, 0, 0.55), 0 2px 6px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,236,180,0.28); transform: scale(1.08); animation: none; } #collapse-all-btn:hover .ui-ascend { filter: drop-shadow(0 0 5px rgba(255,210,80,0.65)); } @keyframes ascendPulse { 0%, 100% { box-shadow: 0 0 10px rgba(255, 204, 0, 0.28), 0 2px 6px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,236,180,0.18); } 50% { box-shadow: 0 0 16px rgba(255, 204, 0, 0.48), 0 2px 6px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,236,180,0.28); } } body.ui-hidden #collapse-all-btn { display: none !important; } #fixed-go-back-btn { position: fixed; top: 126px; right: 14px; background: linear-gradient(to bottom, #4a3431 0%, #2b1d1b 100%); color: #ffcc00; padding: 10px 16px; font-family: 'Cinzel', serif; font-weight: bold; font-size: 12px; border: 1px solid #ffcc00; border-radius: 5px; text-decoration: none; cursor: pointer; box-shadow: 0px 2px 5px rgba(0,0,0,0.8), 0px 0px 12px rgba(255,204,0,0.4); z-index: 999999; transition: all 0.2s ease; animation: attnBounce 1.8s ease-in-out infinite; } #fixed-go-back-btn:hover { background: linear-gradient(to bottom, #5a4038 0%, #2b1d1b 100%); box-shadow: 0px 0px 18px rgba(255,204,0,0.8); transform: scale(1.05); color: #ffffff; animation: none; } body.ui-hidden #fixed-go-back-btn { display: none !important; } .profile-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(30,18,12,0.72) 0%, rgba(0,0,0,0.88) 70%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999999; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .profile-modal-shell { position: relative; width: 480px; max-width: 94vw; } .profile-modal-box { position: relative; width: 100%; max-width: none; max-height: 88vh; overflow-y: auto; overflow-x: hidden; padding: 28px 26px 24px; border-radius: 14px; font-family: 'Cinzel', serif; text-align: center; color: #e8dcc4; background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255,204,0,0.16), transparent 55%), radial-gradient(ellipse 70% 40% at 100% 100%, rgba(255,204,0,0.06), transparent 50%), linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 40%, rgba(0,0,0,0.2) 100%), #16100e; border: 1px solid rgba(255,220,120,0.55); box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 40px rgba(255,204,0,0.22), 0 18px 50px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,236,180,0.14); animation: pmBoxIn 0.32s ease-out; } @keyframes pmBoxIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .profile-modal-close { position: absolute; top: -9px; right: -9px; z-index: 6; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid rgba(255,245,200,0.85); background: radial-gradient(circle at 34% 28%, rgba(255,245,210,0.5), transparent 52%), linear-gradient(160deg, #fff0b0 0%, #ffd24a 42%, #c99700 100%); box-shadow: 0 0 0 2px rgba(18,12,11,0.85), 0 0 14px rgba(255,204,0,0.5), 0 3px 6px rgba(0,0,0,0.45); color: #1a110a; font-size: 0; line-height: 0; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .profile-modal-close svg { display: block; width: 12px; height: 12px; pointer-events: none; } .profile-modal-close:hover { color: #1a110a; border-color: #fff8dc; filter: brightness(1.06); box-shadow: 0 0 0 2px rgba(18,12,11,0.85), 0 0 18px rgba(255,204,0,0.7), 0 4px 8px rgba(0,0,0,0.45); transform: scale(1.08); } .pm-corner-tr { opacity: 0.45; } .pm-corner { position: absolute; width: 22px; height: 22px; border-color: rgba(255,220,120,0.75); border-style: solid; pointer-events: none; z-index: 2; } .pm-corner-tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; } .pm-corner-tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; } .pm-corner-bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; } .pm-corner-br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; } .pm-hero { position: relative; margin-bottom: 6px; } .pm-avatar-wrap { position: relative; width: 148px; height: 148px; margin: 4px auto 16px; } .pm-avatar-ring { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: conic-gradient(from 210deg, rgba, rgba(255,220,120,0.85), transparent 40%, transparent 60%, rgba(255,204,0,0.55), transparent); animation: pmRingSpin 8s linear infinite; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); } @keyframes pmRingSpin { to { transform: rotate(360deg); } } .pm-avatar { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; display: block; border: 3px solid rgba(255,220,120,0.85); box-shadow: 0 0 0 4px rgba(18,12,11,0.9), 0 0 28px rgba(255,204,0,0.5), inset 0 0 12px rgba(0,0,0,0.35); background: #0e0a09; } .pm-username { display: block; color: #ffd24a; font-size: 24px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 16px rgba(255,204,0,0.45), 0 2px 0 rgba(0,0,0,0.45); line-height: 1.2; } .pm-rank { margin: 6px 0 4px; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #d2c19a; } .pm-meta-row { font-family: 'Lato', sans-serif; font-size: 12px; color: #b9aa8e; margin-bottom: 10px; letter-spacing: 0.4px; } .pm-socials { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; } .pm-socials a { font-size: 11px; letter-spacing: 0.3px; color: #ffd24a !important; text-decoration: none !important; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,204,0,0.32); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)), #15100e; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .pm-socials a:hover { border-color: rgba(255,204,0,0.7); box-shadow: 0 0 12px rgba(255,204,0,0.22); transform: translateY(-1px); } .pm-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; } .pm-badge { font-size: 11px; color: #1a1211 !important; background: linear-gradient(to bottom, #ffd34a, #c99700); border-radius: 999px; padding: 4px 11px; font-weight: bold; } .profile-modal-box .pm-badge { color: #6b0f0f !important; text-shadow: -1px -1px 0 #fff3cf, 1px -1px 0 #fff3cf, -1px 1px 0 #fff3cf, 1px 1px 0 #fff3cf !important; } .pm-badge-champion { box-shadow: 0 0 10px rgba(255,215,0,0.8); animation: pmChampGlow 1.4s ease-in-out infinite; } @keyframes pmChampGlow { 0%,100% { box-shadow: 0 0 8px rgba(255,215,0,0.6); } 50% { box-shadow: 0 0 16px rgba(255,215,0,1), 0 0 26px rgba(255,215,0,0.6); } } .pm-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; padding: 0; border: none; } .pm-stat { padding: 12px 10px 11px; border-radius: 10px; border: 1px solid rgba(255,204,0,0.28); background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 50%, rgba(255,204,0,0.04) 100%), rgba(12,9,8,0.65); box-shadow: inset 0 1px 0 rgba(255,236,180,0.08), 0 4px 12px rgba(0,0,0,0.25); } .pm-stat .pm-stat-val { display: block; color: #ffd24a; font-weight: 700; font-size: 22px; line-height: 1.1; text-shadow: 0 0 12px rgba(255,204,0,0.35); } .pm-stat .pm-stat-lbl { display: block; margin-top: 4px; color: #cbb98f; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } .pm-chars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; } .pm-char-card { position: relative; overflow: visible; padding: 14px 12px 12px; border-radius: 10px; text-align: center; background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), #120d0b; border: 1px solid rgba(255,204,0,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.28); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .pm-char-card:hover { border-color: rgba(255,204,0,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.35), 0 0 12px rgba(255,204,0,0.12); transform: translateY(-1px); } .pm-char-card.pm-top-char { border-color: rgba(255,204,0,0.65); box-shadow: 0 0 16px rgba(255,204,0,0.28), inset 0 1px 0 rgba(255,236,180,0.1); background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,204,0,0.12), transparent 60%), linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), #15100e; } .pm-char-corner { position: absolute; width: 10px; height: 10px; border-color: rgba(255,204,0,0.45); border-style: solid; pointer-events: none; } .pm-char-corner.tl { top: 5px; left: 5px; border-width: 1px 0 0 1px; } .pm-char-corner.tr { top: 5px; right: 5px; border-width: 1px 1px 0 0; } .pm-char-corner.bl { bottom: 5px; left: 5px; border-width: 0 0 1px 1px; } .pm-char-corner.br { bottom: 5px; right: 5px; border-width: 0 1px 1px 0; } .pm-char-crown { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 34% 28%, rgba(255,245,210,0.55), transparent 52%), linear-gradient(160deg, #fff0b0 0%, #ffd24a 42%, #c99700 100%); border: 1.5px solid rgba(255,245,200,0.85); box-shadow: 0 0 0 2px rgba(18,12,11,0.85), 0 0 12px rgba(255,204,0,0.55), 0 3px 6px rgba(0,0,0,0.4); z-index: 3; font-size: 0; line-height: 0; } .pm-char-crown svg { display: block; width: 14px; height: 14px; } .pm-char-crown::before { content: none; display: none; } .pm-char-icons { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; min-height: 28px; } .pm-char-race { width: 26px; height: 26px; } .pm-char-name { display: block; color: #ffd24a; font-size: 13.5px; font-weight: 700; letter-spacing: 0.3px; } .pm-char-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } .pm-char-status.online { background: #2ecc71; box-shadow: 0 0 6px rgba(46,204,113,0.85); } .pm-char-status.offline { background: #666; } .pm-char-level { display: block; margin-top: 4px; font-family: 'Lato', sans-serif; font-size: 12px; color: #ddd3ba; } .pm-char-guild { display: block; margin-top: 3px; font-family: 'Lato', sans-serif; font-size: 11.5px; color: #c4b08a; } .pm-char-guildrank { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; letter-spacing: 0.4px; color: #f0e0ff; background: rgba(150,80,200,0.18); border: 1px solid rgba(180,120,220,0.4); } .pm-char-job { width: 15px; height: 15px; vertical-align: middle; } .pm-no-chars, .profile-modal-loading, .profile-modal-error { font-size: 14px; color: #d6cbb0; padding: 18px 0; } .pm-flourish { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; } .pm-flourish .pf-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(255,204,0,0.45), transparent); } .pm-flourish .pf-diamond { width: 7px; height: 7px; flex-shrink: 0; background: linear-gradient(135deg, #fff2c9, #ffcc00); transform: rotate(45deg); box-shadow: 0 0 6px rgba(255,204,0,0.6); } .pm-flourish .pf-text { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #ffd24a; text-shadow: 0 0 8px rgba(255,204,0,0.4); white-space: nowrap; } .pm-ach-grid { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .pm-ach-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; } .pm-ach-label { font-family: 'Cinzel', serif; font-size: 11px; color: #f0e6d8; line-height: 1.35; } html.night-mode .profile-modal-box { background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(180,160,90,0.1), transparent 55%), linear-gradient(165deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2)), #151a22; border-color: #d4b24a; } html.night-mode .pm-stat, html.night-mode .pm-char-card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2)), #1a1f28; border-color: #3a4452; } @media (max-width: 520px) { .pm-chars-grid { grid-template-columns: 1fr; } .pm-avatar-wrap, .pm-avatar { width: 120px; height: 120px; } .pm-username { font-size: 20px; } } .adventure-text.hero-tagline { font-size: 19px !important; font-weight: normal !important; line-height: 1.35 !important; } /* --- SEO content blocks --- */ .immo-seo-block { margin: 14px 0 18px; padding: 14px 16px; border: 1px solid rgba(255,204,0,0.22); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12)); } .immo-seo-h { margin: 0 0 8px !important; font-family: 'Cinzel', serif !important; font-size: 14px !important; font-weight: normal !important; letter-spacing: 0.6px; color: #ffcc00 !important; text-transform: none !important; } .immo-seo-p { margin: 0 0 8px; font-family: 'Lato', sans-serif; font-size: 12.5px; line-height: 1.55; color: #d6cbb0; } .immo-seo-p a, .immo-seo-links a { color: #ffcc00 !important; text-decoration: underline !important; } .immo-seo-ol { margin: 0 0 10px 18px; padding: 0; color: #d6cbb0; font-family: 'Lato', sans-serif; font-size: 12.5px; line-height: 1.55; } .immo-seo-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.4px; } .immo-seo-faq-item { margin-bottom: 12px; } .immo-seo-faq-q { margin: 0 0 4px !important; font-family: 'Cinzel', serif !important; font-size: 13px !important; font-weight: normal !important; color: #ffe566 !important; } .immo-seo-faq-box .immo-seo-block { border: none; background: transparent; padding: 6px 4px 10px; margin: 0; } /* --- FAQ home: premium glass panel --- */ .immo-seo-faq-box { position: relative; overflow: hidden; border: 1px solid rgba(228,198,106,0.32) !important; border-radius: 12px !important; background: radial-gradient(120% 80% at 8% 0%, rgba(255,204,0,0.1), transparent 45%), radial-gradient(90% 70% at 100% 100%, rgba(255,204,0,0.05), transparent 50%), linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 40%, rgba(0,0,0,0.18) 100%), rgba(18,12,11,0.72) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 10px 28px rgba(0,0,0,0.45), 0 0 24px rgba(255,204,0,0.08) !important; } .immo-seo-faq-box::before { content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background: linear-gradient(115deg, transparent 0%, rgba(255,236,180,0.06) 42%, transparent 58%); opacity: 0.85; } .immo-seo-faq-box .box_two_title { position: relative; z-index: 1; margin-bottom: 4px !important; font-family: 'Cinzel', serif !important; letter-spacing: 1.2px !important; text-shadow: 0 0 14px rgba(255,204,0,0.28); } .immo-seo-faq-box .immo-seo-faq { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 8px 2px 4px !important; margin: 0 !important; border: none !important; background: transparent !important; } .immo-seo-faq-box .immo-seo-faq-item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 13px 14px 13px 16px; border-radius: 10px; border: 1px solid rgba(255,204,0,0.2); background: linear-gradient(90deg, rgba(255,204,0,0.55) 0 2px, transparent 2px), linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.012) 46%, rgba(255,204,0,0.04) 100%), rgba(14,10,9,0.5); box-shadow: inset 0 1px 0 rgba(255,236,180,0.08), 0 4px 14px rgba(0,0,0,0.22); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .immo-seo-faq-box .immo-seo-faq-item::before, .immo-seo-faq-box .immo-seo-faq-item::after { content: ''; position: absolute; width: 8px; height: 8px; pointer-events: none; border-color: rgba(255,214,120,0.55); border-style: solid; } .immo-seo-faq-box .immo-seo-faq-item::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; } .immo-seo-faq-box .immo-seo-faq-item::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; } .immo-seo-faq-box .immo-seo-faq-item:hover { border-color: rgba(255,204,0,0.48); box-shadow: inset 0 1px 0 rgba(255,236,180,0.12), 0 7px 16px rgba(0,0,0,0.28), 0 0 14px rgba(255,204,0,0.1); transform: translateY(-1px); } .immo-seo-faq-num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: 1px; border-radius: 50%; font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: #fff4cc; background: radial-gradient(circle at 50% 50%, rgba(255,248,220,0.55) 0%, rgba(255,204,0,0.14) 28%, #16100e 72%); border: 1px solid rgba(255,220,120,0.55); box-shadow: 0 0 10px rgba(255,204,0,0.22), inset 0 0 0 1px rgba(255,236,180,0.16); text-shadow: 0 1px 0 rgba(60,30,0,0.65), 0 0 8px rgba(255,204,0,0.4); flex-shrink: 0; } .immo-seo-faq-content { min-width: 0; } .immo-seo-faq-box .immo-seo-faq-q { margin: 0 0 6px !important; font-family: 'Cinzel', serif !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.55px; text-transform: uppercase; color: #ffd24a !important; text-shadow: 0 0 10px rgba(255,204,0,0.28); line-height: 1.3 !important; } .immo-seo-faq-box .immo-seo-p { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 500; line-height: 1.65; color: #e8dcc4; } .immo-seo-faq-box .immo-seo-p a { display: inline-block; margin: 0 0.28em; padding: 0 0.08em; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17.5px; font-style: italic; font-weight: 600; line-height: 1.2; color: #ffe08a !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,214,120,0.35); text-shadow: 0 1px 0 rgba(70,36,0,0.55), 0 7px 12px rgba(255,196,60,0.55); transition: color .15s ease, border-color .15s ease, text-shadow .15s ease; } .immo-seo-faq-box .immo-seo-p a:hover { color: #fff6d8 !important; border-bottom-color: rgba(255,230,160,0.9); text-shadow: 0 1px 0 rgba(70,36,0,0.45), 0 10px 16px rgba(255,210,80,0.75); } .immo-seo-faq-foot { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(255,204,0,0.18); background: linear-gradient(180deg, rgba(255,204,0,0.04), transparent 70%); } .immo-seo-faq-box .immo-seo-links { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 2px 0 0; justify-content: flex-start; } .immo-seo-faq-box .immo-seo-links a { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 9px 16px; border-radius: 11px; border: 1px solid rgba(255,214,120,0.45); background: radial-gradient(circle at 50% 0%, rgba(255,244,210,0.2), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.015) 48%, rgba(255,204,0,0.06) 100%), #16110e; color: #fff1c8 !important; text-decoration: none !important; font-family: 'Playfair Display', Georgia, serif; font-size: 14px; font-weight: 700; font-style: italic; letter-spacing: 0.2px; text-transform: none; text-shadow: 0 1px 0 rgba(40,20,0,0.5), 0 8px 12px rgba(255,186,40,0.35); box-shadow: inset 0 0 0 1px rgba(255,220,140,0.22), inset 0 1px 0 rgba(255,236,180,0.2), 0 8px 14px rgba(0,0,0,0.32), 0 10px 18px rgba(255,180,40,0.16); transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } .immo-seo-faq-box .immo-seo-links a::after { content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,244,210,0.22), transparent); transform: skewX(-18deg); transition: left .45s ease; pointer-events: none; } .immo-seo-faq-box .immo-seo-links a:hover { color: #fff8e4 !important; border-color: rgba(255,220,120,0.85); box-shadow: inset 0 1px 0 rgba(255,246,220,0.28), 0 10px 16px rgba(0,0,0,0.36), 0 12px 22px rgba(255,196,60,0.32); transform: translateY(-2px); } .immo-seo-faq-box .immo-seo-links a:hover::after { left: 130%; } html.night-mode .immo-seo-faq-box { border-color: rgba(170,200,240,0.38) !important; background: radial-gradient(120% 80% at 8% 0%, rgba(160,200,255,0.12), transparent 46%), radial-gradient(80% 60% at 100% 100%, rgba(120,170,230,0.06), transparent 50%), linear-gradient(165deg, rgba(210,228,255,0.07) 0%, rgba(255,255,255,0.02) 42%, rgba(0,0,0,0.12) 100%), rgba(10,14,24,0.55) !important; box-shadow: inset 0 1px 0 rgba(220,235,255,0.12), 0 10px 28px rgba(0,0,0,0.4), 0 0 24px rgba(80,130,210,0.1) !important; } html.night-mode .immo-seo-faq-box::before { background: linear-gradient(115deg, transparent 0%, rgba(210,228,255,0.07) 42%, transparent 58%); } html.night-mode .immo-seo-faq-box .box_two_title { text-shadow: 0 0 14px rgba(160,200,255,0.28); } html.night-mode .immo-seo-faq-box .immo-seo-faq-item { border-color: rgba(160,195,235,0.28); background: linear-gradient(90deg, rgba(190,215,255,0.7) 0 2px, transparent 2px), linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 46%, rgba(100,150,220,0.05) 100%), rgba(8,12,22,0.42); box-shadow: inset 0 1px 0 rgba(220,235,255,0.08), 0 4px 14px rgba(0,0,0,0.22); } html.night-mode .immo-seo-faq-box .immo-seo-faq-item::before, html.night-mode .immo-seo-faq-box .immo-seo-faq-item::after { border-color: rgba(190,215,255,0.5); } html.night-mode .immo-seo-faq-box .immo-seo-faq-item:hover { border-color: rgba(200,225,255,0.55); box-shadow: inset 0 1px 0 rgba(230,240,255,0.12), 0 7px 16px rgba(0,0,0,0.28), 0 0 14px rgba(120,170,255,0.12); } html.night-mode .immo-seo-faq-box .immo-seo-faq-q { color: #e7f1ff !important; text-shadow: 0 0 10px rgba(160,200,255,0.28); } html.night-mode .immo-seo-faq-box .immo-seo-p { color: #d5e0ee; } html.night-mode .immo-seo-faq-box .immo-seo-p a { color: #f2f7ff !important; border-bottom-color: rgba(190,215,255,0.4); text-shadow: 0 1px 0 rgba(6,12,24,0.65), 0 7px 14px rgba(160,205,255,0.6); } html.night-mode .immo-seo-faq-box .immo-seo-p a:hover { color: #ffffff !important; border-bottom-color: rgba(230,242,255,0.9); text-shadow: 0 1px 0 rgba(6,12,24,0.5), 0 10px 18px rgba(190,220,255,0.8); } html.night-mode .immo-seo-faq-num { color: #f7fbff; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.72) 0%, rgba(160,200,255,0.18) 28%, #121a28 72%); border-color: rgba(190,215,255,0.6); box-shadow: 0 0 10px rgba(140,190,255,0.28), inset 0 0 0 1px rgba(230,240,255,0.18); text-shadow: 0 1px 0 rgba(8,16,32,0.7), 0 0 8px rgba(190,220,255,0.45); } html.night-mode .immo-seo-faq-foot { border-top-color: rgba(160,195,235,0.22); background: linear-gradient(180deg, rgba(140,180,240,0.05), transparent 70%); } html.night-mode .immo-seo-faq-box .immo-seo-links a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-weight: 600; font-style: italic; letter-spacing: 0.6px; text-transform: none; border-color: rgba(190,215,255,0.5); background: radial-gradient(circle at 50% 0%, rgba(240,248,255,0.22), transparent 55%), linear-gradient(180deg, rgba(210,226,255,0.12) 0%, rgba(255,255,255,0.02) 48%, rgba(80,130,200,0.1) 100%), #101820; color: #f4f8ff !important; text-shadow: 0 1px 0 rgba(8,16,32,0.6), 0 8px 14px rgba(160,205,255,0.45); box-shadow: inset 0 0 0 1px rgba(200,225,255,0.22), inset 0 1px 0 rgba(230,240,255,0.2), 0 8px 14px rgba(0,0,0,0.34), 0 10px 18px rgba(120,170,255,0.22); } html.night-mode .immo-seo-faq-box .immo-seo-links a::after { background: linear-gradient(100deg, transparent, rgba(230,242,255,0.28), transparent); } html.night-mode .immo-seo-faq-box .immo-seo-links a:hover { color: #ffffff !important; border-color: rgba(220,235,255,0.85); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 16px rgba(0,0,0,0.38), 0 12px 22px rgba(160,205,255,0.36); } html.night-mode .immo-seo-faq-box::after { content: '' !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; border-radius: inherit; opacity: 0.8; background: /* header rim */ radial-gradient(9px 9px at 94% 6%, rgba(150,200,255,0.14), transparent 70%), radial-gradient(2.2px 2.2px at 94% 6%, rgba(255,255,255,0.92), transparent), radial-gradient(0.85px 0.85px at 78% 10%, rgba(200,230,255,0.5), transparent), /* left rail beside numbers */ radial-gradient(1px 1px at 4% 28%, rgba(220,240,255,0.55), transparent), radial-gradient(0.7px 0.7px at 5% 48%, rgba(180,210,255,0.4), transparent), radial-gradient(0.9px 0.9px at 3.5% 68%, rgba(255,255,255,0.45), transparent), /* right rail */ radial-gradient(1.05px 1.05px at 97% 36%, rgba(230,245,255,0.6), transparent), radial-gradient(0.75px 0.75px at 95% 58%, rgba(180,210,255,0.4), transparent), radial-gradient(0.85px 0.85px at 96% 78%, rgba(255,255,255,0.5), transparent), /* footer spark */ radial-gradient(8px 8px at 92% 94%, rgba(140,190,255,0.12), transparent 70%), radial-gradient(2px 2px at 92% 94%, rgba(255,255,255,0.88), transparent); animation: sideStarTwinkle 5.2s ease-in-out infinite; } .immo-seo-faq-box { position: relative; } .immo-seo-faq-box .immo-seo-faq, .immo-seo-faq-box .box_two_title, .immo-seo-faq-box .immo-seo-faq-foot { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════ LOGIN GEM — the portal button Day = Superb Ruby · Night = Celestial Diamond ═══════════════════════════════════════════════════════════════ */ .box_one .up-login button.login-gem.loginbtnwidth, button.login-gem.loginbtnwidth, .up-login button.login-gem { appearance: none !important; -webkit-appearance: none !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; isolation: isolate; cursor: pointer !important; margin: 8px 0 14px !important; padding: 15px 18px !important; min-height: 48px !important; border-radius: 9px !important; font-family: 'Cinzel', serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 3.2px !important; text-transform: uppercase !important; text-decoration: none !important; border: 1.5px solid rgba(255, 200, 210, 0.65) !important; color: #fff5f7 !important; -webkit-text-fill-color: #fff5f7 !important; background: /* table highlight */ radial-gradient(ellipse 70% 55% at 28% 18%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 220, 230, 0.35) 18%, transparent 42%), /* crown sparkles */ radial-gradient(circle at 72% 22%, rgba(255, 170, 190, 0.55) 0%, transparent 14%), radial-gradient(circle at 88% 68%, rgba(200, 30, 60, 0.35) 0%, transparent 18%), radial-gradient(circle at 12% 78%, rgba(90, 10, 25, 0.45) 0%, transparent 20%), /* pavilion depth */ radial-gradient(ellipse 95% 120% at 50% 130%, #120105 0%, transparent 55%), /* facet planes */ linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, 0.22) 42%, transparent 49%), linear-gradient(62deg, transparent 32%, rgba(70, 8, 22, 0.65) 45%, transparent 58%), linear-gradient(160deg, transparent 55%, rgba(255, 140, 165, 0.18) 68%, transparent 78%), /* body — superb ruby */ linear-gradient(175deg, #ff9aaa 0%, #f04868 14%, #d02040 28%, #a0102c 46%, #6e0a1c 68%, #3a050e 86%, #1a0206 100% ) !important; background-image: radial-gradient(ellipse 70% 55% at 28% 18%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 220, 230, 0.35) 18%, transparent 42%), radial-gradient(circle at 72% 22%, rgba(255, 170, 190, 0.55) 0%, transparent 14%), radial-gradient(circle at 88% 68%, rgba(200, 30, 60, 0.35) 0%, transparent 18%), radial-gradient(circle at 12% 78%, rgba(90, 10, 25, 0.45) 0%, transparent 20%), radial-gradient(ellipse 95% 120% at 50% 130%, #120105 0%, transparent 55%), linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, 0.22) 42%, transparent 49%), linear-gradient(62deg, transparent 32%, rgba(70, 8, 22, 0.65) 45%, transparent 58%), linear-gradient(160deg, transparent 55%, rgba(255, 140, 165, 0.18) 68%, transparent 78%), linear-gradient(175deg, #ff9aaa 0%, #f04868 14%, #d02040 28%, #a0102c 46%, #6e0a1c 68%, #3a050e 86%, #1a0206 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 2px 0 rgba(255, 200, 210, 0.35), inset 0 -2px 0 rgba(40, 4, 12, 0.9), inset 1px 0 0 rgba(255, 210, 220, 0.3), inset -2px 0 0 rgba(50, 5, 15, 0.55), inset 14px 0 22px rgba(40, 5, 14, 0.35), inset -16px 0 24px rgba(255, 80, 110, 0.22), inset 0 -18px 28px rgba(15, 2, 6, 0.65), inset 0 0 0 1px rgba(160, 30, 55, 0.25), 0 0 0 1px rgba(90, 15, 30, 0.55), 0 0 14px rgba(220, 45, 75, 0.45), 0 0 32px rgba(180, 25, 55, 0.28), 0 4px 14px rgba(0, 0, 0, 0.6) !important; text-shadow: none !important; filter: none !important; animation: loginRubyHeart 4.2s ease-in-out infinite !important; transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.3s ease !important; transform: none !important; } .up-login button.login-gem:hover, .box_one .up-login button.login-gem.loginbtnwidth:hover { transform: translateY(-2px) scale(1.012) !important; filter: saturate(1.14) brightness(1.07) !important; border-color: rgba(255, 220, 230, 0.9) !important; animation: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 2px 0 rgba(255, 210, 220, 0.45), inset 0 -2px 0 rgba(40, 4, 12, 0.85), inset 14px 0 20px rgba(40, 5, 14, 0.28), inset -16px 0 24px rgba(255, 100, 130, 0.32), inset 0 -16px 24px rgba(15, 2, 6, 0.55), 0 0 0 1px rgba(255, 160, 180, 0.55), 0 0 18px rgba(240, 60, 95, 0.55), 0 0 40px rgba(200, 35, 70, 0.35), 0 6px 16px rgba(0, 0, 0, 0.55) !important; } .up-login button.login-gem:active { transform: translateY(0) scale(0.992) !important; filter: brightness(0.96) !important; } .login-gem .lg-aura { position: absolute; inset: -2px; border-radius: 10px; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(220, 40, 70, 0.25), transparent 70%); opacity: 0.7; animation: loginRubyAura 4.2s ease-in-out infinite; } .login-gem .lg-bevel { position: absolute; inset: 2px; border-radius: 7px; pointer-events: none; z-index: 1; border: 1px solid transparent; border-top-color: rgba(255, 255, 255, 0.55); border-left-color: rgba(255, 200, 215, 0.28); border-right-color: rgba(70, 8, 22, 0.55); border-bottom-color: rgba(30, 3, 10, 0.75); box-shadow: inset 0 0 0 1px rgba(140, 25, 45, 0.2), inset 0 3px 6px rgba(255, 255, 255, 0.08); } .login-gem .lg-cut { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.95; background: linear-gradient(26deg, transparent 58%, rgba(255, 255, 255, 0.16) 59.5%, transparent 61%), linear-gradient(154deg, transparent 54%, rgba(50, 5, 15, 0.5) 56%, transparent 58%), linear-gradient(74deg, transparent 66%, rgba(255, 190, 205, 0.18) 68%, transparent 70%), linear-gradient(200deg, transparent 62%, rgba(40, 4, 12, 0.45) 64%, transparent 66%), linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.08) 48%, transparent 56%), linear-gradient(0deg, transparent 0%, transparent 86%, rgba(255, 255, 255, 0.28) 91%, transparent 96%), linear-gradient(180deg, transparent 0%, transparent 5%, rgba(255, 255, 255, 0.2) 9%, transparent 15%); mix-blend-mode: soft-light; } .login-gem .lg-facets { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.7; background: linear-gradient(135deg, transparent 46.5%, rgba(255, 255, 255, 0.32) 49%, rgba(50, 5, 15, 0.45) 51%, transparent 53.5%), linear-gradient(45deg, transparent 44%, rgba(255, 200, 215, 0.2) 48%, rgba(40, 4, 12, 0.4) 51%, transparent 55%), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, transparent 9%, transparent 91%, rgba(40, 4, 12, 0.42) 100%); } .login-gem .lg-caustic { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.55; background: radial-gradient(ellipse 40% 30% at 60% 40%, rgba(255, 120, 150, 0.35), transparent 70%), radial-gradient(ellipse 25% 40% at 30% 60%, rgba(255, 200, 210, 0.15), transparent 65%); animation: loginRubyCaustic 5.5s ease-in-out infinite; mix-blend-mode: screen; } .login-gem .lg-shine { position: absolute; top: -30%; left: -90%; width: 42%; height: 160%; pointer-events: none; z-index: 3; background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.15) 36%, rgba(255, 255, 255, 0.7) 48%, rgba(255, 180, 200, 0.25) 56%, transparent 72%); transform: skewX(-28deg); animation: loginGemShineSweep 5.8s ease-in-out infinite; opacity: 0.9; } .up-login button.login-gem:hover .lg-shine { animation: loginGemShineSweep 1.8s ease-in-out infinite; opacity: 1; } .login-gem .lg-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; pointer-events: none; z-index: 4; background: #fff; box-shadow: 0 0 6px 2px rgba(255, 180, 200, 0.9); animation: loginGemSpark 2.6s ease-in-out infinite; } .login-gem .lg-spark.s1 { top: 16%; left: 12%; } .login-gem .lg-spark.s2 { top: 28%; right: 16%; left: auto; width: 2px; height: 2px; animation-delay: 0.7s; } .login-gem .lg-spark.s3 { bottom: 20%; left: 38%; width: 2.5px; height: 2.5px; animation-delay: 1.3s; } .login-gem .lg-spark.s4 { top: 52%; left: 18%; width: 2px; height: 2px; animation-delay: 0.4s; } .login-gem .lg-spark.s5 { top: 22%; left: 55%; width: 2.5px; height: 2.5px; animation-delay: 1.8s; } .login-gem .lg-spark.s6 { bottom: 26%; right: 12%; left: auto; width: 1.5px; height: 1.5px; animation-delay: 2.1s; } .login-gem .lg-spark.s7 { top: 42%; right: 28%; left: auto; width: 2px; height: 2px; animation-delay: 1.1s; } .login-gem .lg-label { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; width: 100%; pointer-events: none; } .login-gem .lg-title { display: inline-block; color: transparent !important; -webkit-text-fill-color: transparent !important; background: linear-gradient(180deg, #ffffff 0%, #ffe8ec 22%, #ffc0ce 48%, #f090a0 78%, #e07085 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 1px rgba(30, 0, 8, 0.95)) drop-shadow(0 0 10px rgba(255, 100, 140, 0.45)) drop-shadow(0 0 18px rgba(200, 40, 70, 0.25)); letter-spacing: 3.2px; } @keyframes loginRubyHeart { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 200, 210, 0.3), inset 0 -2px 0 rgba(40, 4, 12, 0.9), inset 14px 0 22px rgba(40, 5, 14, 0.35), inset -16px 0 24px rgba(255, 80, 110, 0.18), inset 0 -18px 28px rgba(15, 2, 6, 0.65), 0 0 0 1px rgba(90, 15, 30, 0.5), 0 0 12px rgba(220, 45, 75, 0.38), 0 0 28px rgba(180, 25, 55, 0.22), 0 4px 14px rgba(0, 0, 0, 0.6); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 2px 0 rgba(255, 210, 220, 0.4), inset 0 -2px 0 rgba(40, 4, 12, 0.85), inset 14px 0 20px rgba(40, 5, 14, 0.28), inset -16px 0 24px rgba(255, 110, 140, 0.28), inset 0 -18px 28px rgba(15, 2, 6, 0.58), 0 0 0 1px rgba(160, 30, 55, 0.55), 0 0 16px rgba(240, 65, 100, 0.48), 0 0 34px rgba(200, 35, 70, 0.28), 0 4px 14px rgba(0, 0, 0, 0.55); } } @keyframes loginRubyAura { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.02); } } @keyframes loginRubyCaustic { 0%, 100% { opacity: 0.4; transform: translate(0, 0); } 50% { opacity: 0.7; transform: translate(3%, -2%); } } @keyframes loginGemShineSweep { 0% { left: -90%; opacity: 0; } 8% { opacity: 0.85; } 42% { left: 120%; opacity: 0.9; } 50%, 100% { left: 120%; opacity: 0; } } @keyframes loginGemSpark { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.2); } } /* ── Night: Celestial Diamond ── */ html.night-mode .box_one .up-login button.login-gem.loginbtnwidth, html.night-mode button.login-gem.loginbtnwidth, html.night-mode .up-login button.login-gem { filter: none !important; border: 1.5px solid rgba(220, 240, 255, 0.75) !important; color: #0a1220 !important; -webkit-text-fill-color: #0a1220 !important; background: radial-gradient(ellipse 65% 50% at 30% 16%, rgba(255, 255, 255, 0.98) 0%, rgba(220, 240, 255, 0.55) 22%, transparent 48%), radial-gradient(circle at 78% 24%, rgba(180, 220, 255, 0.55) 0%, transparent 16%), radial-gradient(circle at 88% 72%, rgba(120, 180, 255, 0.3) 0%, transparent 20%), radial-gradient(circle at 14% 76%, rgba(40, 80, 140, 0.35) 0%, transparent 22%), radial-gradient(ellipse 90% 110% at 50% 125%, #061018 0%, transparent 55%), linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, 0.55) 43%, transparent 50%), linear-gradient(62deg, transparent 30%, rgba(80, 130, 190, 0.45) 46%, transparent 58%), linear-gradient(160deg, transparent 52%, rgba(200, 230, 255, 0.25) 66%, transparent 78%), linear-gradient(175deg, #ffffff 0%, #e8f4ff 12%, #c8e0f8 26%, #9ec4ec 42%, #6a9ed4 60%, #3d6fa8 78%, #1a3a62 92%, #0a1828 100% ) !important; background-image: radial-gradient(ellipse 65% 50% at 30% 16%, rgba(255, 255, 255, 0.98) 0%, rgba(220, 240, 255, 0.55) 22%, transparent 48%), radial-gradient(circle at 78% 24%, rgba(180, 220, 255, 0.55) 0%, transparent 16%), radial-gradient(circle at 88% 72%, rgba(120, 180, 255, 0.3) 0%, transparent 20%), radial-gradient(circle at 14% 76%, rgba(40, 80, 140, 0.35) 0%, transparent 22%), radial-gradient(ellipse 90% 110% at 50% 125%, #061018 0%, transparent 55%), linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, 0.55) 43%, transparent 50%), linear-gradient(62deg, transparent 30%, rgba(80, 130, 190, 0.45) 46%, transparent 58%), linear-gradient(160deg, transparent 52%, rgba(200, 230, 255, 0.25) 66%, transparent 78%), linear-gradient(175deg, #ffffff 0%, #e8f4ff 12%, #c8e0f8 26%, #9ec4ec 42%, #6a9ed4 60%, #3d6fa8 78%, #1a3a62 92%, #0a1828 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 2px 0 rgba(230, 245, 255, 0.5), inset 0 -2px 0 rgba(20, 40, 70, 0.7), inset 1px 0 0 rgba(220, 240, 255, 0.4), inset -2px 0 0 rgba(40, 70, 120, 0.45), inset 14px 0 22px rgba(30, 60, 110, 0.25), inset -16px 0 24px rgba(180, 220, 255, 0.28), inset 0 -18px 28px rgba(10, 24, 48, 0.45), 0 0 0 1px rgba(140, 190, 255, 0.45), 0 0 14px rgba(140, 200, 255, 0.4), 0 0 32px rgba(90, 160, 230, 0.25), 0 4px 14px rgba(0, 0, 0, 0.55) !important; animation: loginDiamondHeart 4.4s ease-in-out infinite !important; } html.night-mode .up-login button.login-gem:hover, html.night-mode .box_one .up-login button.login-gem.loginbtnwidth:hover { filter: brightness(1.06) saturate(1.08) !important; border-color: rgba(240, 248, 255, 0.95) !important; animation: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 2px 0 rgba(230, 245, 255, 0.6), inset -16px 0 24px rgba(200, 230, 255, 0.35), inset 0 -16px 24px rgba(10, 24, 48, 0.4), 0 0 0 1px rgba(200, 230, 255, 0.65), 0 0 20px rgba(160, 210, 255, 0.55), 0 0 42px rgba(100, 170, 255, 0.3), 0 6px 16px rgba(0, 0, 0, 0.5) !important; } html.night-mode .login-gem .lg-aura { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(140, 200, 255, 0.3), transparent 70%); animation: loginDiamondAura 4.4s ease-in-out infinite; } html.night-mode .login-gem .lg-bevel { border-top-color: rgba(255, 255, 255, 0.7); border-left-color: rgba(200, 230, 255, 0.4); border-right-color: rgba(50, 90, 150, 0.5); border-bottom-color: rgba(20, 40, 80, 0.65); box-shadow: inset 0 0 0 1px rgba(120, 180, 255, 0.2), inset 0 3px 6px rgba(255, 255, 255, 0.12); } html.night-mode .login-gem .lg-cut { background: linear-gradient(26deg, transparent 58%, rgba(255, 255, 255, 0.35) 59.5%, transparent 61%), linear-gradient(154deg, transparent 54%, rgba(40, 80, 140, 0.45) 56%, transparent 58%), linear-gradient(74deg, transparent 66%, rgba(200, 230, 255, 0.28) 68%, transparent 70%), linear-gradient(200deg, transparent 62%, rgba(30, 60, 110, 0.4) 64%, transparent 66%), linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.15) 48%, transparent 56%), linear-gradient(0deg, transparent 0%, transparent 86%, rgba(255, 255, 255, 0.4) 91%, transparent 96%), linear-gradient(180deg, transparent 0%, transparent 5%, rgba(255, 255, 255, 0.3) 9%, transparent 15%); } html.night-mode .login-gem .lg-facets { background: linear-gradient(135deg, transparent 46.5%, rgba(255, 255, 255, 0.5) 49%, rgba(40, 80, 140, 0.4) 51%, transparent 53.5%), linear-gradient(45deg, transparent 44%, rgba(200, 230, 255, 0.3) 48%, rgba(30, 60, 110, 0.35) 51%, transparent 55%), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, transparent 9%, transparent 91%, rgba(30, 60, 110, 0.4) 100%); } html.night-mode .login-gem .lg-caustic { background: radial-gradient(ellipse 40% 30% at 60% 40%, rgba(180, 220, 255, 0.4), transparent 70%), radial-gradient(ellipse 25% 40% at 30% 60%, rgba(255, 255, 255, 0.2), transparent 65%), radial-gradient(ellipse 20% 25% at 75% 55%, rgba(160, 140, 255, 0.15), transparent 60%); animation: loginDiamondCaustic 5.2s ease-in-out infinite; } html.night-mode .login-gem .lg-shine { background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.2) 34%, rgba(255, 255, 255, 0.85) 48%, rgba(180, 220, 255, 0.35) 56%, transparent 72%); } html.night-mode .login-gem .lg-spark { background: #fff; box-shadow: 0 0 7px 2px rgba(180, 220, 255, 0.95); } html.night-mode .login-gem .lg-title { background: linear-gradient(180deg, #0a1628 0%, #122038 30%, #1a2e4a 55%, #0e1a30 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 0 8px rgba(160, 210, 255, 0.35)); } @keyframes loginDiamondHeart { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 2px 0 rgba(230, 245, 255, 0.45), inset 0 -2px 0 rgba(20, 40, 70, 0.7), inset 14px 0 22px rgba(30, 60, 110, 0.22), inset -16px 0 24px rgba(180, 220, 255, 0.22), inset 0 -18px 28px rgba(10, 24, 48, 0.45), 0 0 0 1px rgba(140, 190, 255, 0.4), 0 0 12px rgba(140, 200, 255, 0.32), 0 0 28px rgba(90, 160, 230, 0.2), 0 4px 14px rgba(0, 0, 0, 0.55); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 2px 0 rgba(230, 245, 255, 0.55), inset 0 -2px 0 rgba(20, 40, 70, 0.65), inset 14px 0 20px rgba(30, 60, 110, 0.18), inset -16px 0 24px rgba(200, 230, 255, 0.32), inset 0 -18px 28px rgba(10, 24, 48, 0.4), 0 0 0 1px rgba(180, 220, 255, 0.55), 0 0 16px rgba(160, 210, 255, 0.45), 0 0 36px rgba(100, 170, 255, 0.26), 0 4px 14px rgba(0, 0, 0, 0.5); } } @keyframes loginDiamondAura { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.025); } } @keyframes loginDiamondCaustic { 0%, 100% { opacity: 0.45; transform: translate(0, 0) rotate(0deg); } 33% { opacity: 0.7; transform: translate(2%, -1%) rotate(1deg); } 66% { opacity: 0.55; transform: translate(-1%, 2%) rotate(-1deg); } } /* --- Logout Ruby gem (same craft as sapphire Server Status) --- */ .box_one form table a.logout-link.logout-ruby, a.logout-link.logout-ruby { position: relative !important; display: block !important; overflow: hidden !important; border-radius: 5px !important; padding: 11px 14px !important; font-family: 'Cinzel', serif !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 2.4px !important; text-transform: uppercase !important; text-decoration: none !important; text-align: center !important; color: #fff0f2 !important; -webkit-text-fill-color: #fff0f2 !important; border: 1px solid rgba(255,190,200,0.55) !important; background: radial-gradient(circle at 16% 20%, rgba(255,255,255,0.95) 0 1.5px, rgba(255,220,230,0.5) 3px, transparent 14px), radial-gradient(circle at 78% 26%, rgba(255,180,190,0.45) 0%, transparent 12%), radial-gradient(circle at 88% 70%, rgba(220,40,70,0.3) 0%, transparent 16%), radial-gradient(ellipse 85% 110% at 50% 130%, #1a0206 0%, transparent 52%), linear-gradient(122deg, transparent 36%, rgba(255,255,255,0.16) 43%, transparent 49%), linear-gradient(58deg, transparent 34%, rgba(90,10,25,0.55) 46%, transparent 56%), linear-gradient(180deg, #ff8a9a 0%, #e03855 22%, #a0122e 48%, #6a0a1c 74%, #2a040c 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(60,5,15,0.85), inset 1px 0 0 rgba(255,200,210,0.28), inset -1px 0 0 rgba(60,5,18,0.45), inset 10px 0 16px rgba(40,5,12,0.3), inset -12px 0 18px rgba(255,90,120,0.18), inset 0 -14px 22px rgba(20,2,8,0.55), 0 0 0 1px rgba(120,20,40,0.45), 0 0 12px rgba(220,50,80,0.4), 0 0 28px rgba(180,30,60,0.25), 0 3px 8px rgba(0,0,0,0.55) !important; text-shadow: none !important; transition: transform .2s ease, box-shadow .25s ease, filter .2s ease !important; animation: rubyGlow 3.6s ease-in-out infinite !important; transform: none !important; } .box_one form table a.logout-link.logout-ruby::before, a.logout-link.logout-ruby::before { content: '' !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 1 !important; background: linear-gradient(135deg, transparent 47.2%, rgba(255,255,255,0.28) 49%, rgba(60,5,18,0.4) 50.6%, transparent 52.2%), linear-gradient(45deg, transparent 45.5%, rgba(255,200,210,0.22) 48.8%, rgba(50,5,15,0.42) 51%, transparent 54%), linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 10%, transparent 90%, rgba(50,5,15,0.38) 100%) !important; mix-blend-mode: soft-light; opacity: 0.95; display: block !important; } .box_one form table a.logout-link.logout-ruby::after, a.logout-link.logout-ruby::after { content: '' !important; position: absolute !important; top: -20% !important; left: -80% !important; width: 34% !important; height: 140% !important; background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,0.55) 48%, rgba(255,180,200,0.2) 56%, transparent 72%) !important; transform: skewX(-28deg) !important; transition: left .6s ease !important; pointer-events: none !important; z-index: 2 !important; opacity: 0.85; display: block !important; } .box_one form table a.logout-link.logout-ruby:hover::after, a.logout-link.logout-ruby:hover::after { left: 120% !important; } .logout-ruby .rb-gem-cut { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.88; background: linear-gradient(28deg, transparent 62%, rgba(255,255,255,0.12) 63.2%, transparent 64.5%), linear-gradient(152deg, transparent 58%, rgba(60,5,18,0.4) 59.5%, transparent 61%), linear-gradient(78deg, transparent 70%, rgba(255,200,210,0.14) 71.5%, transparent 73%), linear-gradient(198deg, transparent 66%, rgba(50,5,15,0.35) 67.5%, transparent 69%), linear-gradient(0deg, transparent 0%, transparent 88%, rgba(255,255,255,0.22) 92%, transparent 96%), linear-gradient(180deg, transparent 0%, transparent 6%, rgba(255,255,255,0.16) 9%, transparent 14%); } .logout-ruby .rb-gem-rim { position: absolute; inset: 2px; border-radius: 3px; pointer-events: none; z-index: 2; border: 1px solid transparent; border-top-color: rgba(255,255,255,0.4); border-left-color: rgba(255,200,210,0.22); border-right-color: rgba(80,10,25,0.4); border-bottom-color: rgba(40,5,12,0.6); box-shadow: inset 0 0 0 1px rgba(160,30,50,0.15); } .logout-ruby .rb-gem-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; pointer-events: none; z-index: 2; background: rgba(255,255,255,0.95); box-shadow: 0 0 6px 2px rgba(255,180,200,0.85); animation: rubySpark 2.8s ease-in-out infinite; } .logout-ruby .rb-gem-spark.s2 { width: 2px; height: 2px; animation-delay: 1.1s; opacity: 0.85; } .logout-ruby .rb-gem-spark.s3 { width: 2px; height: 2px; animation-delay: 2s; opacity: 0.7; } .logout-ruby .rb-gem-spark.s4 { width: 2px; height: 2px; animation-delay: 0.55s; opacity: 0.8; } .logout-ruby .rb-gem-spark.s5 { width: 2.5px; height: 2.5px; animation-delay: 1.7s; opacity: 0.9; } .logout-ruby .rb-gem-spark.s6 { width: 1.5px; height: 1.5px; animation-delay: 2.4s; opacity: 0.65; } .logout-ruby .rb-gem-label { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 18px; } .logout-ruby .rb-gem-title { display: inline-block; color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(180deg, #ffffff 0%, #ffe8ec 28%, #ffb0be 62%, #f08090 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 1px rgba(40,0,10,0.85)) drop-shadow(0 0 8px rgba(255,120,150,0.4)); } .box_one form table a.logout-link.logout-ruby:hover, a.logout-link.logout-ruby:hover { transform: translateY(-1px) !important; filter: saturate(1.12) brightness(1.06) !important; border-color: rgba(255,210,220,0.75) !important; color: #fff0f2 !important; -webkit-text-fill-color: #fff0f2 !important; background: radial-gradient(circle at 16% 20%, rgba(255,255,255,0.98) 0 1.5px, rgba(255,230,235,0.55) 3px, transparent 14px), radial-gradient(circle at 78% 26%, rgba(255,190,200,0.55) 0%, transparent 12%), radial-gradient(circle at 88% 70%, rgba(230,50,80,0.35) 0%, transparent 16%), radial-gradient(ellipse 85% 110% at 50% 130%, #1a0206 0%, transparent 52%), linear-gradient(122deg, transparent 36%, rgba(255,255,255,0.2) 43%, transparent 49%), linear-gradient(58deg, transparent 34%, rgba(90,10,25,0.5) 46%, transparent 56%), linear-gradient(180deg, #ff9aaa 0%, #e84865 22%, #b01835 48%, #7a0e24 74%, #320610 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,5,15,0.75), inset 10px 0 16px rgba(40,5,12,0.25), inset -12px 0 18px rgba(255,100,130,0.28), inset 0 -14px 20px rgba(20,2,8,0.48), 0 0 0 1px rgba(255,160,180,0.5), 0 0 16px rgba(230,60,90,0.55), 0 0 34px rgba(200,40,70,0.32), 0 4px 10px rgba(0,0,0,0.5) !important; animation: none !important; } @keyframes rubyGlow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(60,5,15,0.85), inset 1px 0 0 rgba(255,200,210,0.28), inset -1px 0 0 rgba(60,5,18,0.45), inset 10px 0 16px rgba(40,5,12,0.3), inset -12px 0 18px rgba(255,90,120,0.16), inset 0 -14px 22px rgba(20,2,8,0.55), 0 0 0 1px rgba(120,20,40,0.4), 0 0 10px rgba(220,50,80,0.32), 0 0 24px rgba(180,30,60,0.2), 0 3px 8px rgba(0,0,0,0.55); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(60,5,15,0.8), inset 1px 0 0 rgba(255,210,220,0.35), inset -1px 0 0 rgba(60,5,18,0.4), inset 10px 0 16px rgba(40,5,12,0.25), inset -12px 0 18px rgba(255,110,140,0.28), inset 0 -14px 22px rgba(20,2,8,0.5), 0 0 0 1px rgba(180,40,70,0.5), 0 0 16px rgba(240,70,100,0.5), 0 0 34px rgba(200,40,70,0.3), 0 3px 8px rgba(0,0,0,0.5); } } @keyframes rubySpark { 0%, 100% { opacity: 0.35; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.15); } } html.night-mode .box_one form table a.logout-link.logout-ruby, html.night-mode a.logout-link.logout-ruby { border-color: rgba(255,200,210,0.65) !important; color: #fff5f7 !important; -webkit-text-fill-color: #fff5f7 !important; } /* ── Immortality ritual panels (login / logout / session) ── */ .immo-ritual-box { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 22px 16px 18px; margin-top: 8px; border-radius: 12px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,204,0,0.14), transparent 55%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255,160,40,0.06), transparent 50%), linear-gradient(165deg, rgba(255,236,180,0.07) 0%, rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.2) 100%), #1a1210; border: 1px solid rgba(255,204,0,0.45); box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,236,180,0.16), 0 0 24px rgba(255,180,40,0.12); } .immo-ritual-box .irb-aura { position: absolute; inset: -20%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 20%, rgba(255,220,120,0.16), transparent 42%), radial-gradient(circle at 20% 80%, rgba(255,160,40,0.08), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,200,80,0.07), transparent 38%); animation: irbAuraDrift 8s ease-in-out infinite alternate; } .immo-ritual-box .irb-stars { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; } .immo-ritual-box .irb-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #eef6ff; box-shadow: 0 0 5px rgba(180,220,255,0.8); animation: irbTwinkle 4s ease-in-out infinite; } .immo-ritual-box .irb-seal { position: relative; z-index: 1; width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 34% 30%, rgba(255,248,220,0.45), transparent 42%), radial-gradient(circle at 50% 55%, rgba(255,200,50,0.25), rgba(18,12,10,0.78)); border: 1.5px solid rgba(255,210,100,0.75); box-shadow: inset 0 1px 0 rgba(255,248,220,0.4), 0 0 22px rgba(255,180,40,0.4), 0 0 40px rgba(255,140,20,0.14); animation: irbSealPulse 4.5s ease-in-out infinite; } .immo-ritual-box .irb-seal svg { display: block; width: 42px; height: 42px; color: #ffd24a; filter: drop-shadow(0 0 5px rgba(255,204,0,0.6)); } .immo-ritual-box .irb-seal .hero-ico, .immo-ritual-box .irb-seal .hero-ico-swords { width: 42px !important; height: 42px !important; } .immo-ritual-box .irb-seal.irb-seal-portal svg, .immo-ritual-box .irb-seal.irb-seal-dawn svg { width: 44px; height: 44px; } .immo-ritual-box .irb-seal.irb-seal-dawn .dawn-ray { animation: irbDawnRay 3.2s ease-in-out infinite; } .immo-ritual-box .irb-seal.irb-seal-dawn .dawn-ray:nth-child(2) { animation-delay: 0.35s; } .immo-ritual-box .irb-seal.irb-seal-dawn .dawn-ray:nth-child(3) { animation-delay: 0.7s; } .immo-ritual-box .irb-seal.irb-seal-dawn .dawn-ray:nth-child(4) { animation-delay: 0.2s; } .immo-ritual-box .irb-seal.irb-seal-dawn .dawn-ray:nth-child(5) { animation-delay: 0.55s; } @keyframes irbDawnRay { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.75; } } .immo-ritual-box .lgs-icon, .immo-ritual-box .lo-icon { display: none; } .immo-ritual-box .lgs-text, .immo-ritual-box .lo-text { position: relative; z-index: 1; font-family: 'Cinzel', serif; font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #e8d4a0; margin-bottom: 5px; text-shadow: 0 0 10px rgba(255,204,0,0.25); } .immo-ritual-box .lgs-name { color: #ffcc00; text-shadow: 0 0 12px rgba(255,204,0,0.55); } .immo-ritual-box .lgs-sub { position: relative; z-index: 1; font-family: 'Lato', sans-serif; font-size: 11px; color: #cbb98f; margin-bottom: 14px; letter-spacing: 0.4px; } .immo-ritual-box .login-progress-track, .immo-ritual-box .logout-progress-track { position: relative; z-index: 1; height: 5px; background: rgba(20,12,10,0.85); border-radius: 4px; overflow: hidden; max-width: 210px; margin: 0 auto; border: 1px solid rgba(255,204,0,0.25); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); } .immo-ritual-box .login-progress-fill, .immo-ritual-box .logout-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #c9a227 0%, #ffcc00 45%, #fff0b0 100%); box-shadow: 0 0 10px rgba(255,204,0,0.55); border-radius: 4px; } .immo-ritual-box .lgs-bonus-card { position: relative; z-index: 1; margin: 4px auto 14px; max-width: 240px; padding: 14px 16px 12px; border-radius: 10px; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,204,0,0.2), transparent 55%), linear-gradient(180deg, rgba(255,204,0,0.14), rgba(255,204,0,0.03)); border: 1px solid rgba(255,204,0,0.55); box-shadow: 0 0 18px rgba(255,204,0,0.2), inset 0 1px 0 rgba(255,236,180,0.22); animation: lgsBonusIn .45s ease-out; } .immo-ritual-box .lgs-bonus-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #ffe08a; margin-bottom: 4px; } .immo-ritual-box .lgs-bonus-amt { font-family: 'Cinzel', serif; font-size: 28px; line-height: 1.1; color: #ffcc00; text-shadow: 0 0 14px rgba(255,204,0,0.55); font-weight: 700; } .immo-ritual-box .lgs-bonus-unit { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.6px; color: #fff6d0; margin: 2px 0 6px; } .immo-ritual-box .lgs-bonus-sub { font-family: 'Lato', sans-serif; font-size: 10px; color: #cbb98f; } @keyframes lgsBonusIn { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes irbAuraDrift { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } } @keyframes irbSealPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,248,220,0.3), 0 0 14px rgba(255,180,40,0.3), 0 0 28px rgba(255,140,20,0.1); } 50% { box-shadow: inset 0 1px 0 rgba(255,248,220,0.4), 0 0 22px rgba(255,200,60,0.5), 0 0 40px rgba(255,160,40,0.18); } } @keyframes irbTwinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* Session banner — Immortality seal instead of FA check */ .ucp-session-banner { display: flex; align-items: center; gap: 10px; font-family: 'Lato', sans-serif; font-size: 12px; color: #d6cbb0; margin-bottom: 16px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,204,0,0.22); background: radial-gradient(ellipse 70% 80% at 0% 50%, rgba(255,204,0,0.1), transparent 55%), linear-gradient(90deg, rgba(255,236,180,0.05), transparent 40%), rgba(22,14,12,0.55); box-shadow: inset 0 1px 0 rgba(255,236,180,0.08); } .ucp-session-banner .usb-seal { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, rgba(255,248,220,0.35), transparent 45%), radial-gradient(circle at 50% 50%, rgba(255,200,40,0.2), rgba(18,12,10,0.7)); border: 1px solid rgba(255,210,100,0.6); box-shadow: 0 0 10px rgba(255,180,40,0.25); } .ucp-session-banner .usb-seal svg { width: 14px; height: 14px; display: block; color: #ffd24a; filter: drop-shadow(0 0 2px rgba(255,204,0,0.5)); } .ucp-session-banner b { color: #ffcc00; font-family: 'Cinzel', serif; letter-spacing: 0.3px; text-shadow: 0 0 8px rgba(255,204,0,0.35); } /* Night — silver starfield ritual */ html.night-mode .immo-ritual-box { background: radial-gradient(ellipse 85% 55% at 50% 0%, rgba(160,200,255,0.14), transparent 55%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(100,150,230,0.08), transparent 50%), linear-gradient(165deg, rgba(200,220,255,0.06) 0%, rgba(255,255,255,0.015) 40%, rgba(0,0,0,0.25) 100%), #0e1420 !important; border-color: rgba(180,210,255,0.45) !important; box-shadow: 0 6px 22px rgba(0,0,0,0.5), inset 0 1px 0 rgba(220,235,255,0.18), 0 0 28px rgba(100,160,230,0.16) !important; } html.night-mode .immo-ritual-box .irb-aura { background: radial-gradient(circle at 50% 18%, rgba(180,215,255,0.18), transparent 44%), radial-gradient(circle at 15% 85%, rgba(100,150,230,0.1), transparent 42%), radial-gradient(circle at 85% 70%, rgba(140,180,255,0.08), transparent 40%) !important; } html.night-mode .immo-ritual-box .irb-stars { display: block !important; } html.night-mode .immo-ritual-box .irb-stars .s1 { left: 12%; top: 18%; animation-delay: 0s; } html.night-mode .immo-ritual-box .irb-stars .s2 { left: 22%; top: 58%; width: 1.5px; height: 1.5px; animation-delay: 0.7s; } html.night-mode .immo-ritual-box .irb-stars .s3 { left: 38%; top: 12%; animation-delay: 1.2s; } html.night-mode .immo-ritual-box .irb-stars .s4 { left: 58%; top: 22%; width: 1.5px; height: 1.5px; animation-delay: 0.4s; } html.night-mode .immo-ritual-box .irb-stars .s5 { left: 72%; top: 48%; animation-delay: 1.5s; } html.night-mode .immo-ritual-box .irb-stars .s6 { left: 86%; top: 16%; animation-delay: 0.9s; } html.night-mode .immo-ritual-box .irb-stars .s7 { left: 80%; top: 72%; width: 1.5px; height: 1.5px; animation-delay: 1.8s; } html.night-mode .immo-ritual-box .irb-stars .s8 { left: 48%; top: 78%; animation-delay: 1.1s; } html.night-mode .immo-ritual-box .irb-seal { background: radial-gradient(circle at 32% 28%, rgba(230,245,255,0.45), transparent 42%), radial-gradient(circle at 50% 55%, rgba(140,190,255,0.22), rgba(10,16,28,0.8)) !important; border-color: rgba(190,220,255,0.75) !important; box-shadow: inset 0 1px 0 rgba(240,248,255,0.4), 0 0 18px rgba(140,190,255,0.4), 0 0 36px rgba(100,160,230,0.18) !important; animation: irbSealPulseNight 5s ease-in-out infinite !important; } html.night-mode .immo-ritual-box .irb-seal svg { color: #d8eaff !important; filter: drop-shadow(0 0 5px rgba(160,210,255,0.65)) !important; } html.night-mode .immo-ritual-box .lgs-text, html.night-mode .immo-ritual-box .lo-text { color: #d4e4f8 !important; text-shadow: 0 0 12px rgba(140,190,255,0.35) !important; } html.night-mode .immo-ritual-box .lgs-name { color: #e8f2ff !important; text-shadow: 0 0 14px rgba(180,220,255,0.55) !important; } html.night-mode .immo-ritual-box .lgs-sub { color: #a8bdd8 !important; } html.night-mode .immo-ritual-box .login-progress-track, html.night-mode .immo-ritual-box .logout-progress-track { background: rgba(8,14,24,0.9) !important; border-color: rgba(160,200,255,0.3) !important; } html.night-mode .immo-ritual-box .login-progress-fill, html.night-mode .immo-ritual-box .logout-progress-fill { background: linear-gradient(90deg, #5a8fd0 0%, #a8c8f0 45%, #e8f4ff 100%) !important; box-shadow: 0 0 12px rgba(140,190,255,0.55) !important; } html.night-mode .immo-ritual-box .lgs-bonus-card { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(160,200,255,0.18), transparent 55%), linear-gradient(180deg, rgba(140,180,255,0.12), rgba(80,130,200,0.04)) !important; border-color: rgba(180,210,255,0.5) !important; box-shadow: 0 0 18px rgba(100,160,230,0.2), inset 0 1px 0 rgba(220,235,255,0.2) !important; } html.night-mode .immo-ritual-box .lgs-bonus-label { color: #c8dcff !important; } html.night-mode .immo-ritual-box .lgs-bonus-amt { color: #e8f2ff !important; text-shadow: 0 0 14px rgba(160,210,255,0.55) !important; } html.night-mode .immo-ritual-box .lgs-bonus-unit { color: #dce8f8 !important; } html.night-mode .immo-ritual-box .lgs-bonus-sub { color: #9eb2cc !important; } @keyframes irbSealPulseNight { 0%, 100% { box-shadow: inset 0 1px 0 rgba(240,248,255,0.3), 0 0 14px rgba(120,180,255,0.3), 0 0 28px rgba(80,140,220,0.12); } 50% { box-shadow: inset 0 1px 0 rgba(240,248,255,0.45), 0 0 24px rgba(160,210,255,0.5), 0 0 42px rgba(100,160,230,0.22); } } html.night-mode .ucp-session-banner { border-color: rgba(160,200,255,0.3) !important; background: radial-gradient(ellipse 70% 80% at 0% 50%, rgba(140,190,255,0.12), transparent 55%), linear-gradient(90deg, rgba(160,200,255,0.06), transparent 40%), rgba(10,16,26,0.65) !important; color: #b8cce0 !important; } html.night-mode .ucp-session-banner .usb-seal { background: radial-gradient(circle at 35% 30%, rgba(230,245,255,0.4), transparent 45%), radial-gradient(circle at 50% 50%, rgba(120,180,255,0.22), rgba(10,16,28,0.75)) !important; border-color: rgba(180,210,255,0.65) !important; box-shadow: 0 0 12px rgba(120,180,255,0.3) !important; } html.night-mode .ucp-session-banner .usb-seal svg { color: #d0e4ff !important; filter: drop-shadow(0 0 3px rgba(150,200,255,0.55)) !important; } html.night-mode .ucp-session-banner b { color: #e8f2ff !important; text-shadow: 0 0 10px rgba(160,210,255,0.4) !important; } /* ═══════════════════════════════════════════════════════════════ Side-rail art panels — Socials / Server Time / Vote Day: Immortality gold chrome · Night: silver + stardust ═══════════════════════════════════════════════════════════════ */ /* --- Socials --- */ .socials-panel { display: flex; gap: 9px; padding: 8px 2px 10px; font-family: 'Cinzel', serif; } .socials-panel a { position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; text-align: center; text-decoration: none !important; border-radius: 8px; border: 1px solid rgba(255, 204, 0, 0.55); color: #ffd863 !important; -webkit-text-fill-color: #ffd863 !important; font-size: 11px; letter-spacing: 0.7px; text-transform: uppercase; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 220, 120, 0.14), transparent 55%), linear-gradient(165deg, #3b2826 0%, #1a1211 100%); box-shadow: inset 0 1px 0 rgba(255, 236, 180, 0.16), 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 10px rgba(255, 204, 0, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .socials-panel a::before { content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent); transform: skewX(-22deg); transition: left 0.55s ease; pointer-events: none; } .socials-panel a:hover::before { left: 140%; } .socials-panel a:hover { transform: translateY(-2px); border-color: rgba(255, 220, 100, 0.9); box-shadow: inset 0 1px 0 rgba(255, 236, 180, 0.22), 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 204, 0, 0.35); } .socials-panel .soc-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 236, 180, 0.28), transparent 50%), rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 204, 0, 0.4); box-shadow: 0 0 8px rgba(255, 204, 0, 0.2); } .socials-panel .soc-ico .soc-mark { width: 18px; height: 18px; color: #ffd863; filter: drop-shadow(0 0 4px rgba(255, 204, 0, 0.45)); } .socials-panel a:hover .soc-ico { border-color: rgba(255, 220, 100, 0.75); box-shadow: 0 0 12px rgba(255, 204, 0, 0.4); } .socials-panel a:hover .soc-ico .soc-mark { transform: scale(1.08); } .socials-panel .soc-lbl { position: relative; z-index: 1; } .discord-qr { display: flex; flex-direction: column; align-items: center; margin: 0 1px 8px; text-decoration: none !important; color: #ffd863; -webkit-text-fill-color: #ffd863; } .discord-qr-plate { position: relative; box-sizing: border-box; width: 168px; padding: 8px; border-radius: 12px; border: 1px solid rgba(255, 204, 0, 0.62); background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 220, 140, 0.16), transparent 62%), linear-gradient(165deg, #3a2a1c 0%, #1a120e 100%); box-shadow: inset 0 1px 0 rgba(255, 236, 180, 0.22), 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 204, 0, 0.12); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .discord-qr-plate .qr-tick { position: absolute !important; width: 9px; height: 9px; border: 1.5px solid rgba(255, 220, 130, 0.9); pointer-events: none; z-index: 2; } .discord-qr-svg { display: block; width: 150px; height: 150px; border-radius: 3px; background: #f4ead6; } .discord-qr .qr-paper { fill: #f4ead6; } .discord-qr .qr-ink { fill: #1a140c; } .discord-qr-mark { position: absolute; left: 50%; top: 50%; width: 66px; height: 15px; margin: -8px 0 0 -33px; border-radius: 2px; overflow: hidden; background: #1a120c; box-shadow: 0 0 0 3px #f4ead6; z-index: 3; pointer-events: none; } .discord-qr-mark img { display: block; width: 119px; height: auto; max-width: none; margin: -10px 0 0 -27px; } .discord-qr-cap { display: block; margin-top: 7px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #ffd863; -webkit-text-fill-color: #ffd863; text-shadow: 0 0 10px rgba(255, 204, 0, 0.35); } .discord-qr:hover .discord-qr-plate { transform: translateY(-1px); border-color: rgba(255, 228, 140, 0.95); box-shadow: inset 0 1px 0 rgba(255, 236, 180, 0.28), 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 204, 0, 0.32); } button.discord-qr { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; width: 100%; } .discord-qr-wrap { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; } button.qr-share { appearance: none; -webkit-appearance: none; box-sizing: border-box; max-width: 100%; margin: 2px 0 0; padding: 7px 14px; cursor: pointer; font-family: 'Cinzel', serif !important; font-size: 9px !important; font-weight: 700; letter-spacing: 1.1px; line-height: 1.35; text-transform: uppercase; color: #1a120c !important; border-radius: 999px; border: 1px solid #fff2c9 !important; background: linear-gradient(135deg, #ffe08a 0%, #ffcc00 48%, #e6b800 100%) !important; background-image: linear-gradient(135deg, #ffe08a 0%, #ffcc00 48%, #e6b800 100%) !important; box-shadow: 0 0 12px rgba(255, 204, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35); text-shadow: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } button.qr-share:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(255, 204, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4); } .qr-toast { display: block; max-width: 210px; margin: 8px 0 2px; padding: 7px 10px; text-align: center; font-family: 'Cinzel', serif; font-size: 9px; line-height: 1.45; letter-spacing: 0.3px; color: #ffe08a; background: rgba(22, 16, 12, 0.96); border: 1px solid rgba(255, 204, 0, 0.62); border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 204, 0, 0.18); } .qr-toast[hidden], .qr-gate[hidden] { display: none !important; } html.qr-lock, html.qr-lock body { overflow: hidden !important; } .qr-gate { position: fixed; inset: 0; z-index: 10000000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow: auto; -webkit-overflow-scrolling: touch; } .qr-gate-back { position: absolute; inset: 0; background: rgba(8, 6, 4, 0.74); } .qr-gate-plate, .qr-page-plate { position: relative; box-sizing: border-box; width: min(452px, 100%); padding: 28px 20px 20px; border-radius: 14px; border: 1px solid rgba(255, 204, 0, 0.62); background: radial-gradient(ellipse 90% 42% at 50% 0%, rgba(255, 220, 140, 0.2), transparent 62%), linear-gradient(165deg, #3a2a1c 0%, #1a120e 100%); box-shadow: inset 0 0 0 1px rgba(255, 220, 140, 0.16), inset 0 1px 0 rgba(255, 236, 180, 0.22), 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 204, 0, 0.14); } .qr-gate-plate::before, .qr-page-plate::before { content: ''; position: absolute; inset: 6px; border-radius: 10px; border: 1px solid rgba(255, 220, 150, 0.28); box-shadow: inset 0 0 0 4px rgba(12, 8, 6, 0.28), inset 0 0 18px rgba(255, 196, 80, 0.05); pointer-events: none; } .qr-gate-plate .qr-tick, .qr-page-plate .qr-tick { position: absolute !important; width: 16px; height: 16px; border: 1.5px solid rgba(255, 226, 150, 0.95); pointer-events: none; z-index: 2; } .qr-gate-x { position: absolute; top: 14px; right: 14px; z-index: 4; box-sizing: border-box; width: 42px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; appearance: none; -webkit-appearance: none; line-height: 0; text-decoration: none !important; color: #ffe9b0; border-radius: 50%; border: 1px solid rgba(255, 232, 180, 0.95); background: radial-gradient(circle at 50% 38%, rgba(255, 244, 210, 0.28), transparent 42%), radial-gradient(circle at 50% 78%, rgba(0, 0, 0, 0.42), transparent 58%), linear-gradient(160deg, #7a552c 0%, #3a2816 46%, #16100c 100%); box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.65), inset 0 -7px 8px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(70, 46, 16, 0.9), 0 3px 8px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 186, 40, 0.28); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; } .qr-gate-x svg { width: 32px; height: 32px; display: block; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)); } .qr-gate-x:hover, .qr-gate-x:focus { transform: translateY(-1px); color: #fff8e4; outline: none; box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.75), inset 0 -7px 8px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(90, 60, 18, 0.9), 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 18px rgba(255, 204, 0, 0.5); } .qr-gate-x:active { transform: translateY(1px) scale(0.97); } .qr-gate-kicker { position: relative; padding: 4px 56px 0; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: #e8c96a; text-align: center; } .qr-gate-kicker::before { content: ''; display: block; width: 8px; height: 8px; margin: 2px auto 8px; transform: rotate(45deg); background: radial-gradient(circle at 35% 30%, #fff6d4, #e6b44a 55%, #8a5a18); box-shadow: 0 0 8px rgba(255, 186, 40, 0.55); } .qr-gate-kicker::after { content: ''; position: absolute; left: 16%; right: 16%; top: 9px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(255, 214, 120, 0.8) 16%, rgba(255, 214, 120, 0.12) 36%, transparent 46%, transparent 54%, rgba(255, 214, 120, 0.12) 64%, rgba(255, 214, 120, 0.8) 84%, transparent 100%); } .qr-gate-title { position: relative; margin: 6px 0 4px; padding: 0 56px 16px; font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 600; line-height: 1.12; letter-spacing: 0.2px; text-align: center; color: #fff1c8; text-shadow: 0 1px 0 rgba(40, 20, 0, 0.45), 0 0 12px rgba(255, 190, 60, 0.28); } .qr-gate-title::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; margin-left: -3px; transform: rotate(45deg); background: radial-gradient(circle at 35% 30%, #fff6d4, #e6b44a 55%, #8a5a18); box-shadow: 0 0 6px rgba(255, 186, 40, 0.5); z-index: 1; } .qr-gate-title::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 168px; height: 1px; margin-left: -84px; background: linear-gradient(90deg, transparent, rgba(255, 214, 120, 0.9) 16%, rgba(255, 214, 120, 0.2) 40%, transparent 48%, transparent 52%, rgba(255, 214, 120, 0.2) 60%, rgba(255, 214, 120, 0.9) 84%, transparent); } .qr-gate-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .qr-gate-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 14px 14px; border-radius: 12px; text-decoration: none !important; color: inherit; background: linear-gradient(135deg, rgba(255, 220, 140, 0.12) 0%, transparent 42%), linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.08)), rgba(28, 18, 17, 0.78); border: 1px solid rgba(255, 204, 0, 0.32); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 236, 180, 0.12); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .qr-gate-card::before, .qr-gate-card::after { content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; border-color: rgba(255, 214, 120, 0.7); border-style: solid; } .qr-gate-card::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; } .qr-gate-card::after { right: 6px; bottom: 6px; border-width: 0 1px 1px 0; } .qr-gate-card:hover { transform: translateY(-3px); border-color: #ffcc00; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 204, 0, 0.28); } .qr-gate-card:active { transform: translateY(1px) scale(0.985); border-color: #ffe08a; } .qr-gate-ico { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffd863; background: radial-gradient(circle at 35% 30%, rgba(255, 204, 0, 0.24), transparent 55%), linear-gradient(160deg, #3b2826 0%, #1a1211 100%); border: 1px solid rgba(255, 204, 0, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px rgba(255, 204, 0, 0.2); } .qr-gate-ico svg { width: 30px; height: 30px; display: block; position: relative; z-index: 1; overflow: visible; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45)); } .qr-gate-ico::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px dashed rgba(255, 204, 0, 0.42); animation: qrIcoOrbit 16s linear infinite; pointer-events: none; } @keyframes qrIcoOrbit { to { transform: rotate(360deg); } } .qr-gate-copy { min-width: 0; text-align: left; } .qr-gate-name { display: block; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #fff1c8; } .qr-gate-line { display: block; margin-top: 1px; font-family: 'Playfair Display', Georgia, serif; font-size: 16px; font-weight: 500; font-style: italic; line-height: 1.2; letter-spacing: 0.15px; color: #f8ead0; } .qr-gate-go { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffd863; border: 1px solid rgba(255, 204, 0, 0.38); background: rgba(255, 204, 0, 0.06); transition: transform 0.2s ease, border-color 0.2s ease; } .qr-gate-cards::after { content: 'play-immortality.online'; display: block; margin-top: 16px; padding-top: 13px; text-align: center; font-family: 'Playfair Display', Georgia, serif; font-size: 13px; font-weight: 500; font-style: italic; letter-spacing: 0.14em; text-transform: none; color: #fff6d8; text-shadow: 0 0 12px rgba(255, 206, 90, 0.55), 0 1px 0 rgba(40, 20, 0, 0.4); background: linear-gradient(90deg, transparent, rgba(255, 226, 160, 0.95), transparent) top center / 54% 1px no-repeat; } .qr-gate-go svg { width: 14px; height: 14px; display: block; } .qr-gate-card:hover .qr-gate-go { transform: translateX(3px); border-color: rgba(255, 220, 140, 0.8); } .qr-page { display: flex; justify-content: center; padding: 10px 0 18px; } .qr-page-plate { width: min(460px, 100%); } .qr-page-phone { position: fixed; inset: 0; z-index: 10000000; display: flex; align-items: center; justify-content: center; margin: 0; padding: 22px 16px; overflow: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(ellipse 90% 46% at 50% 0%, rgba(255, 200, 80, 0.18), transparent 58%), linear-gradient(180deg, #1c140f 0%, #0c0908 100%); } .qr-page-phone .qr-page-plate { width: min(440px, 100%); } body.qr-scan .qr-page { display: none !important; } @media (max-width: 1099px) { body.qr-scan { background: #0c0908; } body.qr-scan #scale-outer { display: none !important; } html.night-mode body.qr-scan { background: radial-gradient(ellipse 90% 46% at 50% 0%, rgba(140, 190, 255, 0.16), transparent 58%), #070c14; } } @media (max-width: 1099px) { .qr-gate { padding: 16px 12px; } .qr-gate-plate, .qr-page-plate { padding: 22px 14px 16px; } .qr-gate-card { min-height: 80px; padding: 16px 14px; } .qr-gate-x { width: 46px; height: 46px; top: 12px; right: 12px; } .qr-gate-x svg { width: 34px; height: 34px; } .qr-gate-title { font-size: 24px; letter-spacing: 0.1px; padding-left: 52px; padding-right: 52px; } .qr-gate-name { font-size: 14px; } .qr-gate-line { font-size: 16px; } .qr-gate-ico { width: 50px; height: 50px; } .qr-gate-ico svg { width: 32px; height: 32px; } } /* --- Server Time --- */ .server-time-panel { position: relative; text-align: center; padding: 14px 10px 14px; font-family: 'Cinzel', serif; border-radius: 10px; border: 1px solid rgba(255, 204, 0, 0.22); background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 210, 80, 0.1), transparent 55%), linear-gradient(165deg, rgba(255, 236, 180, 0.05), rgba(0, 0, 0, 0.12)), #16100e; box-shadow: inset 0 1px 0 rgba(255, 236, 180, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35); overflow: hidden; } .server-time-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 10% 14%, rgba(255, 220, 120, 0.4) 0 0.9px, transparent 2px), radial-gradient(circle at 90% 16%, rgba(255, 220, 120, 0.32) 0 0.85px, transparent 1.9px), radial-gradient(circle at 84% 88%, rgba(255, 236, 180, 0.28) 0 0.75px, transparent 1.7px), radial-gradient(circle at 16% 90%, rgba(255, 220, 120, 0.24) 0 0.7px, transparent 1.6px); opacity: 0.48; } .st-seal-wrap { position: relative; z-index: 1; margin: 0 auto 12px; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.35)); animation: sideSealPulseDay 3.2s ease-in-out infinite; } .st-seal-wrap .side-seal-clock { width: 84px !important; height: 84px !important; } .server-time-panel .time-frame { position: relative; z-index: 1; display: inline-block; padding: 9px 20px; border-radius: 8px; border: 1px solid rgba(255, 204, 0, 0.35); background: linear-gradient(180deg, rgba(255, 204, 0, 0.08), rgba(0, 0, 0, 0.25)), rgba(20, 14, 12, 0.85); box-shadow: inset 0 1px 0 rgba(255, 236, 180, 0.12), 0 0 12px rgba(255, 204, 0, 0.12); } .server-time-panel #server_time { color: #ffd863; font-weight: 700; font-size: 20px; letter-spacing: 2.2px; text-shadow: 0 0 12px rgba(255, 204, 0, 0.45); font-variant-numeric: tabular-nums; } .server-time-panel .st-lbl { position: relative; z-index: 1; color: #c8b896; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; margin-top: 9px; } /* --- Vote CTA --- */ .vote-cta-panel { position: relative; padding: 12px 10px 12px; text-align: center; font-family: 'Cinzel', serif; border-radius: 10px; border: 1px solid rgba(255, 204, 0, 0.22); background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 210, 80, 0.1), transparent 55%), linear-gradient(165deg, rgba(255, 236, 180, 0.05), rgba(0, 0, 0, 0.12)), #16100e; box-shadow: inset 0 1px 0 rgba(255, 236, 180, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35); overflow: hidden; } .vote-cta-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 14% 18%, rgba(255, 220, 120, 0.36) 0 0.9px, transparent 2px), radial-gradient(circle at 88% 20%, rgba(255, 220, 120, 0.3) 0 0.85px, transparent 1.9px), radial-gradient(circle at 82% 86%, rgba(255, 236, 180, 0.26) 0 0.75px, transparent 1.7px), radial-gradient(circle at 18% 88%, rgba(255, 220, 120, 0.22) 0 0.7px, transparent 1.6px); opacity: 0.45; } .side-seal-vote .vote-orbit { transform-box: view-box; transform-origin: center; animation: voteRaySpin 16s linear infinite; } @keyframes voteRaySpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .side-seal-vote .vote-orbit { animation: none; } } .box_two:has(.immo-gate) > .box_two_title { display: none !important; } .immo-gate { position: relative; max-width: 440px; margin: 36px auto 42px; padding: 36px 32px 30px; text-align: center; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse 80% 46% at 50% 0%, rgba(255,204,0,0.18), transparent 64%), linear-gradient(180deg, rgba(46,30,22,0.97), rgba(14,10,8,0.95)); border: 1px solid rgba(255,204,0,0.45); box-shadow: inset 0 1px 0 rgba(255,236,180,0.16), 0 18px 40px rgba(0,0,0,0.45); } .immo-gate-c { position: absolute; width: 16px; height: 16px; border-color: rgba(255,214,120,0.85); pointer-events: none; } .immo-gate-c.tl { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; } .immo-gate-c.tr { top: 8px; right: 8px; border-top: 1px solid; border-right: 1px solid; } .immo-gate-c.bl { bottom: 8px; left: 8px; border-bottom: 1px solid; border-left: 1px solid; } .immo-gate-c.br { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; } .immo-gate-seal { width: 92px; height: 92px; margin: 0 auto 12px; background: none; border: 0; box-shadow: none; } .immo-gate-seal svg, .immo-gate-mark { width: 92px !important; height: 92px !important; max-width: 92px !important; max-height: 92px !important; display: block; } .immo-gate-ink { fill: #140e0c; } .immo-gate-title { font-family: 'Cinzel', serif; font-size: 20px; letter-spacing: 1.6px; text-transform: uppercase; color: #ffe7a8; line-height: 1.3; margin: 0 0 14px; text-shadow: 0 0 16px rgba(255,186,40,0.3); } .immo-gate-title::after { content: ''; display: block; width: 84px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, #ffd24a, transparent); } .immo-gate-body { margin: 0 auto 20px; max-width: 34em; font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1.45; color: #e7d3b0; } .immo-gate-btn { display: inline-block; min-width: 168px; box-sizing: border-box; padding: 12px 28px; border-radius: 10px; text-decoration: none !important; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #1a110a !important; -webkit-text-fill-color: #1a110a !important; background: linear-gradient(135deg, #fff0b0 0%, #ffd34a 40%, #ffcc00 62%, #c99700 100%); border: 1px solid rgba(255,245,200,0.75); box-shadow: 0 0 16px rgba(255,204,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5); } .immo-gate-btn:hover { filter: brightness(1.06); box-shadow: 0 0 24px rgba(255,204,0,0.55); } html.night-mode .immo-gate { background: radial-gradient(ellipse 80% 46% at 50% 0%, rgba(160,200,255,0.18), transparent 64%), linear-gradient(180deg, rgba(22,32,48,0.97), rgba(8,12,20,0.95)); border-color: rgba(170,205,245,0.45); box-shadow: inset 0 1px 0 rgba(220,235,255,0.14), 0 18px 40px rgba(0,0,0,0.5); } html.night-mode .immo-gate-c { border-color: rgba(190,215,255,0.8); } html.night-mode .immo-gate-seal { background: none; border: 0; box-shadow: none; } html.night-mode .immo-gate-ink { fill: #0c121c; } html.night-mode .immo-gate-title { color: #f4f8ff; text-shadow: 0 0 16px rgba(160,200,255,0.38); } html.night-mode .immo-gate-title::after { background: linear-gradient(90deg, transparent, #d5e6f8, transparent); } html.night-mode .immo-gate-body { color: #d5e4f6; } html.night-mode .immo-gate-btn { color: #071018 !important; -webkit-text-fill-color: #071018 !important; background: linear-gradient(115deg, #d5e6f8 0%, #ffffff 42%, #7ea8d4 100%); border-color: rgba(236,244,255,0.9); box-shadow: 0 0 16px rgba(140,190,255,0.42), inset 0 1px 0 rgba(255,255,255,0.7); } .vote-cta-medallion { position: relative; z-index: 1; margin: 0 auto 12px; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 12px rgba(255, 204, 0, 0.4)); animation: sideSealPulseDay 3.4s ease-in-out infinite; } .vote-cta-panel .vote-cta-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 8px; border: 1.5px solid #fff2c9; background: linear-gradient(135deg, #ffe08a 0%, #ffcc00 48%, #e0a820 100%); color: #1a1211 !important; -webkit-text-fill-color: #1a1211 !important; text-decoration: none !important; font-size: 13px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; box-shadow: 0 0 8px rgba(255, 204, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.2s ease, box-shadow 0.35s ease; animation: voteCtaBreatheDay 3.8s ease-in-out infinite; } .vote-cta-panel .vote-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 0 14px rgba(255, 204, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.4); animation-play-state: paused; } .vote-cta-panel .vote-cta-sub { position: relative; z-index: 1; display: block; margin-top: 10px; font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #ffe7a8; text-shadow: 0 0 10px rgba(255, 186, 40, 0.5); } @keyframes sideSealPulseDay { 0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 204, 0, 0.26)); } 50% { filter: drop-shadow(0 0 11px rgba(255, 204, 0, 0.38)); } } @keyframes voteCtaBreatheDay { 0%, 100% { box-shadow: 0 0 6px rgba(255, 204, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3); } 50% { box-shadow: 0 0 10px rgba(255, 204, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34); } } /* ─── Night: silver + stars ─── */ html.night-mode .socials-panel a { border-color: rgba(180, 210, 255, 0.55) !important; color: #d8e8ff !important; -webkit-text-fill-color: #d8e8ff !important; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(160, 200, 255, 0.16), transparent 55%), linear-gradient(165deg, #1e2838 0%, #0e1420 100%) !important; box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(100, 160, 230, 0.14) !important; } html.night-mode .socials-panel a::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.7; background: radial-gradient(1.1px 1.1px at 12% 20%, rgba(255,255,255,0.7), transparent), radial-gradient(0.7px 0.7px at 88% 28%, rgba(200,230,255,0.5), transparent), radial-gradient(0.85px 0.85px at 78% 78%, rgba(230,245,255,0.45), transparent); animation: sideStarTwinkle 4.8s ease-in-out infinite; } html.night-mode .socials-panel a:hover { border-color: rgba(210, 230, 255, 0.85) !important; box-shadow: inset 0 1px 0 rgba(230, 245, 255, 0.22), 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 18px rgba(120, 180, 255, 0.35) !important; } html.night-mode .socials-panel .soc-ico { background: radial-gradient(circle at 35% 30%, rgba(220, 240, 255, 0.35), transparent 50%), rgba(8, 14, 24, 0.55) !important; border-color: rgba(170, 205, 255, 0.5) !important; box-shadow: 0 0 10px rgba(120, 180, 255, 0.3) !important; } html.night-mode .socials-panel .soc-ico .soc-mark { color: #eef5ff !important; filter: drop-shadow(0 0 5px rgba(150, 200, 255, 0.55)) !important; } html.night-mode .discord-qr, html.night-mode .discord-qr-cap { color: #d8e8ff !important; -webkit-text-fill-color: #d8e8ff !important; text-shadow: 0 0 10px rgba(140, 190, 255, 0.4); } html.night-mode .discord-qr-plate { border-color: rgba(180, 210, 255, 0.58) !important; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160, 200, 255, 0.16), transparent 62%), linear-gradient(165deg, #1e2838 0%, #0e1420 100%) !important; box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 14px rgba(100, 160, 230, 0.16) !important; } html.night-mode .discord-qr:hover .discord-qr-plate { border-color: rgba(210, 230, 255, 0.88) !important; box-shadow: inset 0 1px 0 rgba(230, 245, 255, 0.22), 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 18px rgba(120, 180, 255, 0.32) !important; } html.night-mode .discord-qr-plate .qr-tick { border-color: rgba(210, 230, 255, 0.85); } html.night-mode .discord-qr-svg { background: #e8eef6; } html.night-mode .discord-qr .qr-paper { fill: #e8eef6; } html.night-mode .discord-qr .qr-ink { fill: #101820; } html.night-mode .discord-qr-mark { background: #1a120c; box-shadow: 0 0 0 3px #e8eef6; } html.night-mode button.qr-share { color: #102033 !important; border-color: #f4f8ff !important; background: linear-gradient(135deg, #f7fbff 0%, #c5d7f0 48%, #8eafd4 100%) !important; background-image: linear-gradient(135deg, #f7fbff 0%, #c5d7f0 48%, #8eafd4 100%) !important; box-shadow: 0 0 12px rgba(160, 200, 255, 0.4), 0 3px 8px rgba(0, 0, 0, 0.4); } html.night-mode .qr-toast { color: #e8eef6; background: rgba(10, 16, 26, 0.96); border-color: rgba(190, 215, 255, 0.55); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(140, 190, 255, 0.2); } html.night-mode .qr-gate-back { background: rgba(6, 10, 18, 0.76); } html.night-mode .qr-gate-plate, html.night-mode .qr-page-plate { border-color: rgba(180, 210, 255, 0.58) !important; background: radial-gradient(ellipse 90% 42% at 50% 0%, rgba(160, 200, 255, 0.18), transparent 62%), linear-gradient(165deg, #1e2838 0%, #0e1420 100%) !important; box-shadow: inset 0 1px 0 rgba(220, 235, 255, 0.16), 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(100, 160, 230, 0.16) !important; } html.night-mode .qr-gate-plate .qr-tick, html.night-mode .qr-page-plate .qr-tick { border-color: rgba(210, 230, 255, 0.85); } html.night-mode .qr-gate-plate::before, html.night-mode .qr-page-plate::before { border-color: rgba(210, 226, 255, 0.28); box-shadow: inset 0 0 0 4px rgba(6, 10, 18, 0.35), inset 0 0 18px rgba(140, 180, 255, 0.06); } html.night-mode .qr-gate-x { color: #f4f8ff; border-color: rgba(230, 240, 255, 0.92); background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.34), transparent 42%), radial-gradient(circle at 50% 78%, rgba(0, 0, 0, 0.4), transparent 58%), linear-gradient(160deg, #6d86a8 0%, #2c3d56 46%, #101820 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -7px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(20, 32, 48, 0.9), 0 3px 8px rgba(0, 0, 0, 0.45), 0 0 14px rgba(160, 200, 255, 0.32); } html.night-mode .qr-gate-x:hover, html.night-mode .qr-gate-x:focus { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -7px 8px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(30, 48, 72, 0.9), 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 18px rgba(180, 210, 255, 0.55); } html.night-mode .qr-gate-kicker { color: #c5d7f0; } html.night-mode .qr-gate-kicker::before { background: radial-gradient(circle at 35% 30%, #fff, #c5d7f0 55%, #6e90bc); box-shadow: 0 0 8px rgba(160, 200, 255, 0.55); } html.night-mode .qr-gate-kicker::after { background: linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.8) 16%, rgba(200, 220, 255, 0.12) 36%, transparent 46%, transparent 54%, rgba(200, 220, 255, 0.12) 64%, rgba(200, 220, 255, 0.8) 84%, transparent 100%); } html.night-mode .qr-gate-title { color: #f7fbff; text-shadow: 0 1px 0 rgba(8, 16, 32, 0.55), 0 0 12px rgba(160, 200, 255, 0.3); } html.night-mode .qr-gate-title::before { background: radial-gradient(circle at 35% 30%, #fff, #c5d7f0 55%, #6e90bc); box-shadow: 0 0 6px rgba(160, 200, 255, 0.5); } html.night-mode .qr-gate-title::after { background: linear-gradient(90deg, transparent, rgba(210, 226, 255, 0.9) 16%, rgba(210, 226, 255, 0.2) 40%, transparent 48%, transparent 52%, rgba(210, 226, 255, 0.2) 60%, rgba(210, 226, 255, 0.9) 84%, transparent); } html.night-mode .qr-gate-cards::after { color: #ffffff; text-shadow: 0 0 12px rgba(190, 216, 255, 0.7), 0 1px 0 rgba(0, 0, 0, 0.45); background: linear-gradient(90deg, transparent, rgba(232, 242, 255, 0.95), transparent) top center / 54% 1px no-repeat; } html.night-mode .qr-gate-card { border-color: rgba(180, 210, 255, 0.38); background: linear-gradient(135deg, rgba(210, 228, 255, 0.12) 0%, transparent 42%), linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.12)), rgba(12, 18, 28, 0.92); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(220, 235, 255, 0.12); } html.night-mode .qr-gate-card:hover { border-color: #d5e6ff; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(140, 190, 255, 0.28); } html.night-mode .qr-gate-ico { color: #eef5ff; background: radial-gradient(circle at 35% 30%, rgba(210, 230, 255, 0.28), transparent 55%), linear-gradient(160deg, #2a3c56 0%, #101820 100%); border-color: rgba(200, 225, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 12px rgba(140, 190, 255, 0.28); } html.night-mode .qr-gate-ico::before { border-color: rgba(200, 225, 255, 0.45); } html.night-mode .qr-gate-ico svg { filter: drop-shadow(0 0 4px rgba(180, 210, 255, 0.55)); } html.night-mode .qr-gate-card::before, html.night-mode .qr-gate-card::after { border-color: rgba(210, 228, 255, 0.7); } html.night-mode .qr-gate-go { color: #e8eef8; border-color: rgba(190, 215, 255, 0.42); background: rgba(160, 200, 255, 0.08); } html.night-mode .qr-page-phone { background: radial-gradient(ellipse 90% 46% at 50% 0%, rgba(140, 190, 255, 0.2), transparent 58%), linear-gradient(180deg, #121a28 0%, #070c14 100%); } html.night-mode .qr-gate-name { color: #f7fbff; } html.night-mode .qr-gate-line { color: #e7f0fc; } html.night-mode .box_two:has(.qr-page) { background-color: rgba(8, 12, 20, 0.94) !important; background-image: radial-gradient(ellipse at 50% 0%, rgba(160, 200, 255, 0.12) 0%, transparent 48%), linear-gradient(165deg, rgba(200, 220, 255, 0.07), rgba(0, 0, 0, 0.28)) !important; border-color: rgba(170, 200, 240, 0.38) !important; } html.night-mode .server-time-panel, html.night-mode .vote-cta-panel { border-color: rgba(160, 200, 255, 0.38) !important; background: radial-gradient(ellipse 100% 70% at 50% -10%, rgba(140, 190, 255, 0.16), transparent 55%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(80, 140, 220, 0.08), transparent 50%), linear-gradient(165deg, rgba(200, 220, 255, 0.05), rgba(0, 0, 0, 0.18)), #0e1420 !important; box-shadow: inset 0 1px 0 rgba(210, 230, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 20px rgba(70, 130, 210, 0.12) !important; } /* Corner constellations — leave center clear for seal + type */ html.night-mode .server-time-panel::before { background: radial-gradient(9px 9px at 10% 12%, rgba(150,200,255,0.14), transparent 70%), radial-gradient(2.1px 2.1px at 10% 12%, rgba(255,255,255,0.92), transparent), radial-gradient(0.8px 0.8px at 18% 22%, rgba(200,230,255,0.5), transparent), radial-gradient(0.65px 0.65px at 8% 32%, rgba(255,255,255,0.35), transparent), radial-gradient(10px 10px at 92% 14%, rgba(140,190,255,0.13), transparent 70%), radial-gradient(2.2px 2.2px at 92% 14%, rgba(255,255,255,0.9), transparent), radial-gradient(0.85px 0.85px at 84% 24%, rgba(210,235,255,0.45), transparent), radial-gradient(0.7px 0.7px at 78% 10%, rgba(255,255,255,0.32), transparent), radial-gradient(1px 1px at 14% 86%, rgba(220,240,255,0.55), transparent), radial-gradient(0.75px 0.75px at 22% 92%, rgba(180,210,255,0.4), transparent), radial-gradient(1.05px 1.05px at 88% 88%, rgba(230,245,255,0.6), transparent), radial-gradient(0.7px 0.7px at 78% 94%, rgba(200,230,255,0.38), transparent) !important; opacity: 0.88; animation: sideStarTwinkle 5s ease-in-out infinite; } html.night-mode .vote-cta-panel::before { background: radial-gradient(8px 8px at 12% 16%, rgba(150,200,255,0.12), transparent 70%), radial-gradient(2px 2px at 12% 16%, rgba(255,255,255,0.88), transparent), radial-gradient(0.75px 0.75px at 20% 28%, rgba(200,230,255,0.45), transparent), radial-gradient(9px 9px at 90% 18%, rgba(140,190,255,0.12), transparent 70%), radial-gradient(2.1px 2.1px at 90% 18%, rgba(255,255,255,0.9), transparent), radial-gradient(0.8px 0.8px at 82% 30%, rgba(210,235,255,0.42), transparent), radial-gradient(0.95px 0.95px at 16% 84%, rgba(220,240,255,0.5), transparent), radial-gradient(0.7px 0.7px at 28% 92%, rgba(180,210,255,0.35), transparent), radial-gradient(1px 1px at 86% 86%, rgba(230,245,255,0.55), transparent), radial-gradient(0.65px 0.65px at 74% 94%, rgba(200,230,255,0.36), transparent) !important; opacity: 0.86; animation: sideStarTwinkle 5.4s ease-in-out infinite; } html.night-mode .st-seal-wrap, html.night-mode .vote-cta-medallion { filter: drop-shadow(0 0 12px rgba(140, 190, 255, 0.45)); animation: sideSealPulseNight 3.4s ease-in-out infinite; } html.night-mode .side-seal { filter: brightness(1.22) saturate(0.58) hue-rotate(175deg) contrast(1.08); } html.night-mode .side-seal-clock { filter: brightness(1.25) saturate(0.5) hue-rotate(178deg) contrast(1.12) drop-shadow(0 0 2px rgba(180,215,255,0.35)); } html.night-mode .side-seal-vote { filter: brightness(1.2) saturate(0.62) hue-rotate(172deg) contrast(1.1) drop-shadow(0 0 3px rgba(160,205,255,0.4)); } html.night-mode .server-time-panel .time-frame { border-color: rgba(170, 205, 255, 0.4) !important; background: linear-gradient(180deg, rgba(140, 190, 255, 0.1), rgba(0, 0, 0, 0.3)), rgba(8, 14, 24, 0.88) !important; box-shadow: inset 0 1px 0 rgba(210, 230, 255, 0.14), 0 0 14px rgba(100, 160, 230, 0.18) !important; } html.night-mode .server-time-panel #server_time { color: #e8f2ff !important; text-shadow: 0 0 14px rgba(160, 210, 255, 0.55), 0 0 24px rgba(100, 160, 230, 0.25) !important; } html.night-mode .server-time-panel .st-lbl { color: #a8bdd8 !important; } html.night-mode .vote-cta-panel .vote-cta-sub { color: #f4f8ff !important; text-shadow: 0 0 10px rgba(160, 200, 255, 0.6) !important; } html.night-mode .vote-cta-panel .vote-cta-btn { filter: none !important; animation: voteCtaBreatheNight 4s ease-in-out infinite !important; background: linear-gradient(135deg, #e8f2ff 0%, #b8d4f0 45%, #7aa0d0 100%) !important; background-image: linear-gradient(135deg, #e8f2ff 0%, #b8d4f0 45%, #7aa0d0 100%) !important; border: 1.5px solid rgba(230, 245, 255, 0.9) !important; color: #0e1624 !important; -webkit-text-fill-color: #0e1624 !important; box-shadow: 0 0 8px rgba(140, 190, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } html.night-mode .vote-cta-panel .vote-cta-btn:hover { filter: brightness(1.04) !important; box-shadow: 0 0 14px rgba(160, 210, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important; animation-play-state: paused !important; } @keyframes sideSealPulseNight { 0%, 100% { filter: drop-shadow(0 0 7px rgba(120, 180, 255, 0.28)); } 50% { filter: drop-shadow(0 0 11px rgba(160, 210, 255, 0.4)); } } @keyframes voteCtaBreatheNight { 0%, 100% { box-shadow: 0 0 6px rgba(140, 190, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.38); } 50% { box-shadow: 0 0 10px rgba(160, 210, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.44); } } @keyframes sideStarTwinkle { 0%, 100% { opacity: 0.72; } 50% { opacity: 0.95; } } /* Mobile float final overrides (after desktop night/day knob rules) */ @media (max-width: 768px), (orientation: landscape) and (max-height: 500px) { #theme-switch-wrap { left: 6px !important; top: auto !important; bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; transform: none !important; } .theme-switch .ts-label-wrap, .theme-switch .ts-immo-word, .theme-switch.is-night .ts-immo-word { display: none !important; } .theme-switch .ts-track { width: 34px !important; height: 64px !important; } .theme-switch .ts-knob { width: 20px !important; height: 20px !important; margin-left: -10px !important; top: 5px !important; animation: none !important; } .theme-switch.is-night .ts-knob { top: 38px !important; } .zoom-fixed-wrap { right: auto !important; left: 48px !important; top: auto !important; bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 4px)) !important; transform: none !important; } #ui-toggle-btn-wrap { left: 48px !important; } #collapse-all-btn-wrap { left: 78px !important; } #music-toggle-btn-wrap { left: 78px !important; } body:has(#collapse-all-btn-wrap) #music-toggle-btn-wrap { left: 108px !important; top: auto !important; } #ui-toggle-btn { width: 26px !important; height: 26px !important; } #ui-toggle-btn .ui-orbit-sun, #ui-toggle-btn .ui-orbit-moon { display: none !important; } #music-toggle-btn, #collapse-all-btn { width: 24px !important; height: 24px !important; animation: none !important; } } @media (max-width: 420px) and (orientation: portrait) { .theme-switch .ts-track { width: 30px !important; height: 56px !important; } .theme-switch .ts-knob { width: 18px !important; height: 18px !important; margin-left: -9px !important; top: 4px !important; } .theme-switch.is-night .ts-knob { top: 32px !important; } #ui-toggle-btn-wrap { left: 42px !important; } #collapse-all-btn-wrap { left: 70px !important; } #music-toggle-btn-wrap { left: 70px !important; } body:has(#collapse-all-btn-wrap) #music-toggle-btn-wrap { left: 98px !important; } #ui-toggle-btn { width: 24px !important; height: 24px !important; } #music-toggle-btn, #collapse-all-btn { width: 22px !important; height: 22px !important; } } @media (orientation: landscape) and (max-height: 500px) { #theme-switch-wrap { left: max(6px, env(safe-area-inset-left, 0px)) !important; bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important; } .theme-switch .ts-track { width: 26px !important; height: 48px !important; } .theme-switch .ts-knob { width: 16px !important; height: 16px !important; margin-left: -8px !important; top: 3px !important; } .theme-switch.is-night .ts-knob { top: 28px !important; } .zoom-fixed-wrap { left: auto !important; right: max(8px, env(safe-area-inset-right, 0px)) !important; bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important; } #ui-toggle-btn-wrap { left: auto !important; right: max(8px, env(safe-area-inset-right, 0px)) !important; } #collapse-all-btn-wrap { left: auto !important; right: max(40px, calc(env(safe-area-inset-right, 0px) + 32px)) !important; } #music-toggle-btn-wrap { left: auto !important; right: max(40px, calc(env(safe-area-inset-right, 0px) + 32px)) !important; } body:has(#collapse-all-btn-wrap) #music-toggle-btn-wrap { left: auto !important; right: max(72px, calc(env(safe-area-inset-right, 0px) + 64px)) !important; top: auto !important; } #ui-toggle-btn { width: 22px !important; height: 22px !important; } #music-toggle-btn, #collapse-all-btn { width: 20px !important; height: 20px !important; } } /* ═══ User Panel — avatar (round) + mailbox (Day/Night) ═══ */ .box_one form center > a.up-avatar-link { display: inline-flex !important; align-items: center; justify-content: center; margin: 8px 0 12px !important; padding: 5px !important; border-radius: 50% !important; border: none !important; background: radial-gradient(circle at 32% 28%, rgba(255,240,180,0.55), transparent 42%), radial-gradient(circle at 50% 50%, #3a2a18 0%, #1a1210 72%) !important; box-shadow: 0 0 0 2px rgba(255,204,0,0.55), 0 0 16px rgba(255,180,40,0.35), 0 4px 12px rgba(0,0,0,0.55) !important; transform: none !important; animation: none !important; text-decoration: none !important; transition: box-shadow .3s ease, transform .22s ease !important; } .box_one form center > a.up-avatar-link:hover { transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 0 0 2px rgba(255,220,120,0.85), 0 0 24px rgba(255,200,60,0.55), 0 6px 16px rgba(0,0,0,0.5) !important; background: radial-gradient(circle at 32% 28%, rgba(255,245,200,0.7), transparent 45%), radial-gradient(circle at 50% 50%, #4a3420 0%, #1e1410 72%) !important; border: none !important; color: inherit !important; } .box_one form center > a.up-avatar-link img { display: block !important; width: 90px !important; height: 90px !important; object-fit: cover !important; border-radius: 50% !important; border: 2.5px solid #ffe066 !important; margin: 0 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 0 12px rgba(255,204,0,0.4) !important; cursor: pointer; } /* Night: celestial round halo — first thing you see */ html.night-mode .box_one form center > a.up-avatar-link { padding: 6px !important; background: radial-gradient(circle at 30% 25%, rgba(220,240,255,0.55), transparent 40%), radial-gradient(circle at 70% 75%, rgba(100,160,255,0.2), transparent 50%), radial-gradient(circle at 50% 50%, #1a2438 0%, #0a1018 75%) !important; box-shadow: 0 0 0 2px rgba(180,215,255,0.7), 0 0 0 5px rgba(80,140,220,0.18), 0 0 22px rgba(120,180,255,0.55), 0 0 48px rgba(70,140,230,0.28), 0 4px 14px rgba(0,0,0,0.55) !important; animation: upAvatarNightPulse 3.2s ease-in-out infinite !important; } html.night-mode .box_one form center > a.up-avatar-link:hover { transform: translateY(-2px) scale(1.04) !important; box-shadow: 0 0 0 2px rgba(220,240,255,0.95), 0 0 0 6px rgba(120,180,255,0.28), 0 0 32px rgba(140,200,255,0.75), 0 0 56px rgba(80,160,255,0.4), 0 6px 16px rgba(0,0,0,0.5) !important; animation: none !important; } html.night-mode .box_one form center > a.up-avatar-link img { border-color: rgba(210,230,255,0.95) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 0 16px rgba(140,190,255,0.65) !important; } @keyframes upAvatarNightPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(180,215,255,0.65), 0 0 0 5px rgba(80,140,220,0.14), 0 0 18px rgba(120,180,255,0.42), 0 0 40px rgba(70,140,230,0.2), 0 4px 14px rgba(0,0,0,0.55); } 50% { box-shadow: 0 0 0 2px rgba(220,240,255,0.9), 0 0 0 6px rgba(100,170,255,0.28), 0 0 28px rgba(150,210,255,0.7), 0 0 52px rgba(90,160,255,0.38), 0 4px 14px rgba(0,0,0,0.55); } } /* Mailbox — Day gold seal / Night silver glass */ .box_one form center > a.up-mailbox-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 12px !important; padding: 11px 22px !important; border-radius: 999px !important; border: 1.5px solid rgba(255,220,120,0.65) !important; background: radial-gradient(ellipse at 30% 20%, rgba(255,240,180,0.18), transparent 55%), linear-gradient(165deg, #4a3428 0%, #2a1a14 55%, #1a1210 100%) !important; color: #ffe066 !important; font-family: 'Cinzel', serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.1px !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255,240,180,0.22), 0 0 14px rgba(255,180,40,0.22), 0 3px 10px rgba(0,0,0,0.45) !important; transform: none !important; animation: none !important; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease !important; } .box_one form center > a.up-mailbox-btn:hover { transform: translateY(-2px) !important; border-color: #ffcc00 !important; color: #fff6d0 !important; box-shadow: inset 0 1px 0 rgba(255,245,200,0.35), 0 0 22px rgba(255,204,0,0.45), 0 5px 14px rgba(0,0,0,0.5) !important; background: radial-gradient(ellipse at 30% 20%, rgba(255,240,180,0.28), transparent 55%), linear-gradient(165deg, #5a4030 0%, #342018 55%, #1e1410 100%) !important; } .up-mailbox-btn .up-mb-ico { font-size: 13px; line-height: 1; opacity: 0.95; filter: drop-shadow(0 0 4px rgba(255,204,0,0.45)); } .up-mailbox-btn .up-mb-count { color: #fff6d0; font-weight: 700; } .up-mailbox-btn .mailbox-unread-dot { margin-right: 2px; } html.night-mode .box_one form center > a.up-mailbox-btn { border-color: rgba(170,210,255,0.55) !important; background: radial-gradient(ellipse at 30% 15%, rgba(160,210,255,0.2), transparent 55%), linear-gradient(165deg, rgba(36,52,78,0.75), rgba(12,18,30,0.85)) !important; color: #e8f2ff !important; box-shadow: inset 0 1px 0 rgba(210,230,255,0.2), 0 0 16px rgba(100,160,230,0.28), 0 3px 12px rgba(0,0,0,0.45) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } html.night-mode .box_one form center > a.up-mailbox-btn:hover { border-color: rgba(210,235,255,0.85) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(230,245,255,0.3), 0 0 24px rgba(130,190,255,0.5), 0 5px 14px rgba(0,0,0,0.5) !important; background: radial-gradient(ellipse at 30% 15%, rgba(180,220,255,0.28), transparent 55%), linear-gradient(165deg, rgba(48,70,105,0.8), rgba(14,22,36,0.9)) !important; } html.night-mode .up-mailbox-btn .up-mb-ico { filter: drop-shadow(0 0 5px rgba(160,210,255,0.55)); } html.night-mode .up-mailbox-btn .up-mb-count { color: #c8dcff; } .cap-gate-body, html.cap-gate-open, html.cap-gate-open body { margin: 0; min-height: 100vh; background: #07080c !important; background-image: none !important; } html.cap-gate-open, html.cap-gate-open body { height: 100%; overflow: hidden !important; } .cap-gate { position: relative; box-sizing: border-box; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 16px 8px; } .cap-head { position: relative; z-index: 8; text-align: center; margin: 0 0 10px; flex: 0 0 auto; } .cap-kicker { position: relative; font-family: 'Cinzel Decorative', Cinzel, serif; font-size: 22px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #f3e2b0; text-shadow: 0 1px 0 rgba(40, 20, 0, 0.45), 0 0 12px rgba(255, 196, 80, 0.28); } .cap-kicker::before { content: ''; display: block; width: 8px; height: 8px; margin: 0 auto 8px; transform: rotate(45deg); background: radial-gradient(circle at 35% 30%, #fff6d4, #e6b44a 55%, #8a5a18); box-shadow: 0 0 8px rgba(255, 186, 40, 0.55); } .cap-title { margin: 6px 0 0; font-family: 'Playfair Display', Georgia, serif; font-size: 32px; font-weight: 600; line-height: 1.1; color: #fff6d8; text-shadow: 0 1px 0 rgba(40, 20, 0, 0.45), 0 0 14px rgba(255, 196, 80, 0.28); } .cap-title::after { content: ''; display: block; width: 180px; height: 1px; margin: 8px auto 0; background: linear-gradient(90deg, transparent, rgba(255, 214, 120, 0.9), transparent); } .cap-row { position: relative; z-index: 2; width: 100%; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 28px; } .cap-card { position: relative; flex: 0 1 auto; width: min(46vw, 820px, calc((100vh - 200px) * 0.7)); height: 100%; max-height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; text-decoration: none !important; padding: 8px 8px 12px; border-radius: 14px; border: 1px solid rgba(255, 214, 120, 0.55); background: #120e0c; box-shadow: inset 0 0 0 1px rgba(255, 236, 180, 0.12), 0 16px 36px rgba(0, 0, 0, 0.5); z-index: 1; transform-origin: center center; transition: transform 0.5s cubic-bezier(.22,.8,.2,1), filter 0.5s ease, box-shadow 0.5s ease, border-color 0.4s ease, background 0.45s ease; } .cap-card img { display: block; width: 100%; height: 0; flex: 1 1 auto; min-height: 0; object-fit: contain; object-position: center center; transform: none; } .cap-plate { flex: 0 0 auto; align-self: stretch; margin: 8px 4px 0; padding: 8px 16px 9px; text-align: center; border-radius: 8px; background: rgba(10, 8, 6, 0.45); border: 1px solid rgba(255, 214, 120, 0.4); } .cap-plate b, .cap-plate i, .cap-plate em { display: block; font-style: normal; } .cap-plate b { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.18em; color: #fff6d8; } .cap-plate i { margin-top: 1px; font-family: 'Playfair Display', Georgia, serif; font-size: 14px; color: #f0dfc8; } .cap-plate em { margin-top: 5px; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 15px; line-height: 1.25; letter-spacing: 0.01em; color: #ffe7bf; } .cap-host { flex: 0 0 auto; margin-top: 9px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.06em; text-transform: lowercase; color: rgba(255, 246, 216, 0.62); transition: color 0.45s ease, letter-spacing 0.45s ease, text-shadow 0.45s ease; } .cap-110:hover .cap-host { color: #eaf6ff; letter-spacing: 0.1em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(150, 210, 255, 0.75); } .cap-140:hover .cap-host { color: #ffe4c4; letter-spacing: 0.1em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 120, 40, 0.7); } .ice-drip { position: relative; z-index: 4; height: 0; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .cap-110:hover .ice-drip { opacity: 1; } .ice-drip i { position: absolute; top: 0; display: block; width: 7px; background: linear-gradient(90deg, #ffffff 0%, #d7ecff 42%, #7eafd0 100%); clip-path: polygon(18% 0, 82% 0, 58% 100%, 42% 100%); filter: drop-shadow(1px 3px 1px rgba(4, 14, 24, 0.65)); } .cap-enter { position: relative; } .ice-drip-btn { position: absolute; left: 16%; right: 16%; top: 100%; width: auto; height: 0; margin: 0; } .ice-drip-btn i:nth-child(1) { left: 0; height: 9px; width: 4px; } .ice-drip-btn i:nth-child(2) { left: 22%; height: 16px; width: 6px; } .ice-drip-btn i:nth-child(3) { left: 46%; height: 22px; width: 8px; } .ice-drip-btn i:nth-child(4) { left: 70%; height: 11px; width: 5px; } .ice-drip-btn i:nth-child(5) { left: 88%; height: 18px; width: 6px; } .ice-drip-box { position: absolute; top: 4px; left: 28px; right: 28px; height: 0; z-index: 6; } .ice-drip-box i:nth-child(1) { left: 0; height: 14px; width: 5px; } .ice-drip-box i:nth-child(2) { left: 10%; height: 28px; width: 8px; } .ice-drip-box i:nth-child(3) { left: 22%; height: 10px; width: 4px; } .ice-drip-box i:nth-child(4) { left: 32%; height: 20px; width: 6px; } .ice-drip-box i:nth-child(5) { left: 44%; height: 36px; width: 10px; } .ice-drip-box i:nth-child(6) { left: 58%; height: 12px; width: 4px; } .ice-drip-box i:nth-child(7) { left: 68%; height: 24px; width: 7px; } .ice-drip-box i:nth-child(8) { left: 80%; height: 9px; width: 4px; } .ice-drip-box i:nth-child(9) { left: 92%; height: 18px; width: 6px; } .fire-lick { position: relative; z-index: 6; height: 0; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .cap-140:hover .fire-lick { opacity: 1; } .fire-lick i { position: absolute; top: 0; display: block; width: 6px; transform-origin: 50% 0; background: linear-gradient(90deg, rgba(40, 8, 4, 0.35) 0%, rgba(255, 244, 214, 0.55) 40%, rgba(255, 255, 255, 0) 58%), radial-gradient(ellipse at 50% 92%, #fff1c2 0%, #ffb03a 26%, rgba(255, 80, 16, 0) 48%), linear-gradient(180deg, #fff6d4 0%, #ffb04a 18%, #ff4a10 52%, #8a1c08 78%, #1c0806 100%); clip-path: polygon(34% 0, 66% 0, 74% 20%, 58% 58%, 88% 80%, 62% 100%, 38% 100%, 12% 80%, 42% 58%, 26% 20%); filter: drop-shadow(0 2px 1px rgba(20, 4, 0, 0.8)); } .fire-lick-box i:nth-child(1), .fire-lick-box i:nth-child(3), .fire-lick-box i:nth-child(6), .fire-lick-box i:nth-child(8), .fire-lick-btn i:nth-child(1), .fire-lick-btn i:nth-child(3) { clip-path: polygon(28% 0, 72% 0, 100% 42%, 78% 100%, 22% 100%, 0 42%); } .fire-lick-box::before, .fire-lick-btn::before { content: ''; position: absolute; top: 0; height: 1px; pointer-events: none; } .fire-lick-btn { position: absolute; left: 28%; right: 28%; top: 100%; width: auto; height: 0; margin: 0; } .fire-lick-btn::before { left: 18%; right: 18%; background: linear-gradient(90deg, transparent, #fff1c4 40%, #ff6a18 70%, transparent); } .fire-lick-btn i:nth-child(1) { left: 8%; height: 6px; width: 5px; } .fire-lick-btn i:nth-child(2) { left: 42%; height: 8px; width: 7px; } .fire-lick-btn i:nth-child(3) { left: 74%; height: 5px; width: 4px; } .fire-lick-box { position: absolute; top: 1px; left: 20px; right: 20px; height: 0; z-index: 6; } .fire-lick-box::before { left: 0; right: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 214, 150, 0.95) 7%, rgba(255, 90, 24, 0.45) 24%, transparent 38%, transparent 62%, rgba(255, 90, 24, 0.4) 76%, rgba(255, 220, 160, 0.95) 92%, transparent 100%); } .fire-lick-box i:nth-child(1) { left: 2%; height: 10px; width: 5px; } .fire-lick-box i:nth-child(2) { left: 8%; height: 24px; width: 8px; --slag-rot: 2deg; } .fire-lick-box i:nth-child(3) { left: 15%; height: 7px; width: 4px; } .fire-lick-box i:nth-child(4) { left: 21%; height: 16px; width: 6px; transform: rotate(-1.5deg); } .fire-lick-box i:nth-child(5) { left: 73%; height: 15px; width: 6px; transform: rotate(1.5deg); } .fire-lick-box i:nth-child(6) { left: 80%; height: 8px; width: 4px; } .fire-lick-box i:nth-child(7) { left: 87%; height: 26px; width: 8px; --slag-rot: -2deg; } .cap-140:hover .fire-lick-box i:nth-child(2), .cap-140:hover .fire-lick-box i:nth-child(7) { animation: slagFall 2s cubic-bezier(.4, 0, .2, 1) infinite; } .cap-140:hover .fire-lick-box i:nth-child(7) { animation-delay: -1s; } @keyframes slagFall { 0%, 40% { transform: rotate(var(--slag-rot, 0deg)) scaleY(1); opacity: 1; } 52% { transform: rotate(var(--slag-rot, 0deg)) scaleY(1.2); opacity: 1; } 72% { transform: rotate(var(--slag-rot, 0deg)) translateY(54px) scaleY(0.42) scaleX(0.7); opacity: 0; } 73% { transform: rotate(var(--slag-rot, 0deg)) translateY(0) scaleY(0.08); opacity: 0; } 100% { transform: rotate(var(--slag-rot, 0deg)) translateY(0) scaleY(1); opacity: 1; } } .fire-lick-box i:nth-child(8) { left: 94%; height: 11px; width: 5px; } .cap-enter { flex: 0 0 auto; margin-top: 8px; font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #1a110a; background: linear-gradient(135deg, #fff6d4 0%, #e6b44a 55%, #a87420 100%); border: 1px solid #fff6d4; border-radius: 999px; padding: 8px 20px; box-shadow: 0 0 14px rgba(255, 186, 40, 0.4); transition: transform 0.35s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease; } .cap-110:hover .cap-enter { color: #071018; background: linear-gradient(180deg, #ffffff 0%, #d7eefc 46%, #7eb8dc 100%); border-color: #f7fbff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(40, 90, 130, 0.35), 0 6px 10px rgba(0, 10, 20, 0.45), 0 0 16px rgba(140, 200, 255, 0.65); } .cap-140:hover .cap-enter { color: #1a0c06; background: linear-gradient(180deg, #fff6d4 0%, #ffb15a 42%, #e44512 100%); border-color: #ffe7b8; box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.9), inset 0 -2px 0 rgba(120, 24, 0, 0.4), 0 6px 10px rgba(40, 0, 0, 0.45), 0 0 16px rgba(255, 90, 20, 0.6); } .cap-card::before, .cap-card::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; border-color: rgba(255, 226, 150, 0.95); border-style: solid; z-index: 3; } .cap-card::before { top: 8px; left: 8px; border-width: 1.5px 0 0 1.5px; } .cap-card::after { right: 8px; bottom: 8px; border-width: 0 1.5px 1.5px 0; } .cap-frame { position: absolute; inset: 6px; border-radius: 10px; border: 1px solid rgba(255, 220, 150, 0.28); pointer-events: none; z-index: 3; } .cap-row:hover .cap-card { transform: scale(0.97); filter: none; z-index: 2; } .cap-row:hover .cap-card:hover { transform: scale(1.06); filter: brightness(1.06) saturate(1.08); z-index: 5; } .cap-row:hover .cap-card:hover img { object-fit: contain; object-position: center center; } .cap-card:hover .cap-enter { transform: translateY(-2px); } .cap-110:hover { border-color: #c5e6ff; background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(190, 225, 255, 0.2), transparent 58%), linear-gradient(180deg, rgba(170, 210, 245, 0.08), transparent 28%), #10161c; box-shadow: inset 0 1px 0 rgba(230, 246, 255, 0.45), inset 0 0 0 1px rgba(150, 200, 240, 0.28), inset 0 -18px 24px rgba(70, 130, 180, 0.12), 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 18px rgba(0, 12, 24, 0.55), 0 0 32px rgba(90, 170, 230, 0.32); } .cap-110:hover .cap-frame { border-color: rgba(190, 226, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(8, 24, 40, 0.45), inset 0 0 18px rgba(140, 200, 255, 0.18); } .cap-110:hover::before, .cap-110:hover::after { border-color: #eaf6ff; } .cap-110:hover .cap-plate { border-color: rgba(170, 216, 255, 0.55); background: rgba(8, 18, 28, 0.55); box-shadow: inset 0 1px 0 rgba(210, 235, 255, 0.2), 0 8px 14px rgba(0, 8, 16, 0.35); } .cap-110:hover .cap-plate b { color: #f4fbff; } .cap-110:hover .cap-plate i { color: #d5e8f8; } .cap-110:hover .cap-plate em { color: #b7d7f0; } .cap-140:hover { border-color: #ffb4a4; background: radial-gradient(ellipse 90% 46% at 50% 100%, rgba(255, 70, 20, 0.16), transparent 64%), #16100c; box-shadow: inset 0 2px 7px rgba(255, 150, 60, 0.28), 0 1px 0 rgba(255, 220, 180, 0.22), 0 8px 12px rgba(0, 0, 0, 0.45), 0 26px 38px rgba(28, 0, 0, 0.62), 0 0 26px rgba(255, 48, 32, 0.34); } .cap-140:hover .cap-frame { border-color: rgba(255, 170, 120, 0.7); box-shadow: inset 0 0 0 1px rgba(40, 8, 0, 0.4), inset 0 0 18px rgba(255, 80, 20, 0.16); } .cap-140:hover::before, .cap-140:hover::after { border-color: #ffe0c8; } .cap-140:hover .cap-plate { border-color: rgba(255, 150, 90, 0.55); background: rgba(24, 10, 6, 0.55); box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.16), 0 8px 14px rgba(20, 0, 0, 0.35); } .cap-140:hover .cap-plate b { color: #fff0d8; } .cap-140:hover .cap-plate i { color: #ffd8b8; } .cap-140:hover .cap-plate em { color: #ffb48a; } html.night-mode .cap-110:hover { border-color: #c5e6ff; background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(190, 225, 255, 0.22), transparent 58%), linear-gradient(180deg, rgba(170, 210, 245, 0.1), transparent 28%), #10161c; } html.night-mode .cap-140:hover { border-color: #ffb4a4; background: radial-gradient(ellipse 90% 46% at 50% 100%, rgba(255, 70, 20, 0.18), transparent 64%), #16100c; } html.night-mode .cap-110:hover .cap-enter { color: #071018; background: linear-gradient(180deg, #ffffff 0%, #d7eefc 46%, #7eb8dc 100%); border-color: #f7fbff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(40, 90, 130, 0.35), 0 6px 10px rgba(0, 10, 20, 0.45), 0 0 16px rgba(140, 200, 255, 0.65); } html.night-mode .cap-140:hover .cap-enter { color: #1a0c06; background: linear-gradient(180deg, #fff6d4 0%, #ffb15a 42%, #e44512 100%); border-color: #ffe7b8; box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.9), inset 0 -2px 0 rgba(120, 24, 0, 0.4), 0 6px 10px rgba(40, 0, 0, 0.45), 0 0 16px rgba(255, 90, 20, 0.6); } .cap-foot { position: relative; z-index: 8; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 36px; width: min(92%, 980px); margin: 14px 0 4px; pointer-events: none; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.08em; text-transform: lowercase; color: #fff6d8; } .cap-foot span { text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.8); } .cap-foot i { width: 28px; height: 1px; flex: 0 0 28px; background: linear-gradient(90deg, transparent, rgba(255, 214, 120, 0.9), transparent); } html.night-mode .cap-kicker { color: #d5e4ff; } html.night-mode .cap-kicker::before { background: radial-gradient(circle at 35% 30%, #fff, #c5d7f0 55%, #6e90bc); box-shadow: 0 0 8px rgba(160, 200, 255, 0.55); } html.night-mode .cap-title { color: #f7fbff; text-shadow: 0 1px 0 rgba(8, 16, 32, 0.55), 0 0 14px rgba(160, 200, 255, 0.3); } .cap-gate:has(.cap-110:hover) .cap-kicker { color: transparent; background-image: linear-gradient(180deg, #ffffff 0%, #e9f7ff 30%, #8ec8ea 68%, #f4fbff 100%); background-size: 100% 220%; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 1px 0 rgba(90, 150, 190, 0.85)) drop-shadow(0 0 12px rgba(186, 230, 255, 0.9)); animation: frostTitle 2.4s ease-in-out infinite; } .cap-gate:has(.cap-110:hover) .cap-kicker::before { background: radial-gradient(circle at 35% 30%, #fff, #c5e8ff 50%, #6eacd4); box-shadow: 0 0 10px rgba(180, 220, 255, 0.85); } .cap-gate:has(.cap-140:hover) .cap-kicker { color: transparent; background-image: linear-gradient(180deg, #fff8dc 0%, #ffd56a 22%, #ff7a1a 52%, #ff2c08 78%, #ffd56a 100%); background-size: 100% 240%; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 120, 30, 0.95)) drop-shadow(0 7px 8px rgba(70, 8, 0, 0.55)); animation: burnTitle 0.75s linear infinite; } .cap-gate:has(.cap-140:hover) .cap-kicker::before { background: radial-gradient(circle at 35% 30%, #fff6d0, #ff9a30 50%, #c43a08); box-shadow: 0 0 10px rgba(255, 90, 20, 0.9); } @keyframes frostTitle { 0%, 100% { background-position: 0 0; filter: drop-shadow(0 1px 0 rgba(90, 150, 190, 0.85)) drop-shadow(0 0 10px rgba(186, 230, 255, 0.75)); } 50% { background-position: 0 100%; filter: drop-shadow(0 1px 0 rgba(210, 240, 255, 0.95)) drop-shadow(0 0 16px rgba(220, 245, 255, 1)); } } @keyframes burnTitle { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } } .cap-gate:has(.cap-110:hover) .cap-title { color: #f7fbff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92), 0 0 14px rgba(170, 220, 255, 0.85); } .cap-gate:has(.cap-110:hover) .cap-title::after { background: linear-gradient(90deg, transparent, rgba(210, 236, 255, 0.95), transparent); } .cap-gate:has(.cap-140:hover) .cap-title { color: #ffe4c2; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92), 0 0 14px rgba(255, 120, 40, 0.8); } .cap-gate:has(.cap-140:hover) .cap-title::after { background: linear-gradient(90deg, transparent, rgba(255, 170, 80, 0.95), transparent); } html.night-mode .cap-title::after { background: linear-gradient(90deg, transparent, rgba(210, 226, 255, 0.9), transparent); } html.night-mode .cap-card { background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(180, 210, 255, 0.14), transparent 60%), linear-gradient(165deg, #1a2433 0%, #0c121c 100%); border-color: rgba(200, 220, 255, 0.5); } html.night-mode .cap-card::before, html.night-mode .cap-card::after { border-color: rgba(220, 232, 255, 0.85); } html.night-mode .cap-plate em { color: #d7e6ff; } html.night-mode .cap-enter { color: #101820; background: linear-gradient(135deg, #f7fbff 0%, #c5d7f0 55%, #8eafd4 100%); border-color: #f4f8ff; box-shadow: 0 0 12px rgba(160, 200, 255, 0.4); } html.night-mode .cap-foot { color: #ffffff; text-shadow: 0 0 12px rgba(190, 216, 255, 0.55); } @media (max-width: 800px) { .cap-row { flex-direction: column; gap: 12px; } .cap-card { width: min(520px, 92vw); height: auto; flex: 1 1 auto; } .cap-card img { max-height: 62vh; height: auto; } .cap-row:hover .cap-card, .cap-row:hover .cap-card:hover { transform: none; filter: none; } .cap-title { font-size: 26px; } } .cap-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .cap-fx-svg { position: absolute; width: 0; height: 0; } .fx-lava, .fx-ice { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; } .cap-gate:has(.cap-140:hover) .fx-lava, .cap-gate:has(.cap-110:hover) .fx-ice { opacity: 1; } .lava-wash, .lava-rim, .ice-wash, .ice-rim, .crack, .ember, .vein, .shard, .flake, .pool, .fog, .ash, .cinder, .hearth, .bruise { position: absolute; } .lava-wash, .ice-wash { inset: -8%; opacity: 0.92; } .lava-wash { background: radial-gradient(ellipse 70% 22% at 50% 118%, rgba(255, 110, 24, 0.72), rgba(120, 16, 0, 0.18) 46%, transparent 72%), radial-gradient(ellipse 24% 62% at -8% 82%, rgba(255, 168, 64, 0.9), rgba(140, 18, 0, 0.28) 38%, transparent 70%), radial-gradient(ellipse 22% 58% at 110% 16%, rgba(255, 72, 12, 0.78), rgba(80, 8, 0, 0.22) 42%, transparent 72%), radial-gradient(ellipse 18% 36% at 108% 100%, rgba(255, 40, 0, 0.45), transparent 70%), linear-gradient(180deg, rgba(6, 2, 0, 0.78) 0%, rgba(18, 4, 0, 0.22) 24%, rgba(28, 6, 0, 0.08) 48%, rgba(70, 10, 0, 0.34) 100%), linear-gradient(90deg, rgba(42, 4, 0, 0.88), rgba(20, 2, 0, 0.2) 18%, transparent 34%, transparent 66%, rgba(20, 2, 0, 0.2) 82%, rgba(48, 4, 0, 0.9)); filter: url(#fx-heat); } .cap-gate:has(.cap-140:hover) .lava-wash { animation: heatDrift 8s ease-in-out infinite; } @keyframes heatDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -1.2%, 0) scale(1.035); } } .ice-wash { background: radial-gradient(ellipse 40% 62% at -2% 100%, rgba(230, 248, 255, 0.72), rgba(80, 150, 200, 0.18) 46%, transparent 72%), radial-gradient(ellipse 38% 56% at 104% 0%, rgba(255, 255, 255, 0.62), rgba(120, 180, 220, 0.16) 48%, transparent 74%), radial-gradient(ellipse 34% 48% at 0% 8%, rgba(170, 220, 255, 0.4), transparent 70%), radial-gradient(ellipse 36% 50% at 100% 100%, rgba(200, 235, 255, 0.5), transparent 70%), linear-gradient(90deg, rgba(6, 16, 28, 0.55), transparent 30%, transparent 70%, rgba(6, 16, 28, 0.55)); filter: url(#fx-frost); } .lava-rim, .ice-rim { inset: 0; opacity: 0; transition: opacity 1.6s ease 0.25s; } .cap-gate:has(.cap-140:hover) .lava-rim, .cap-gate:has(.cap-110:hover) .ice-rim { opacity: 1; } .lava-rim { box-shadow: inset 0 -46px 54px rgba(255, 78, 16, 0.34), inset 0 0 80px 18px rgba(0, 0, 0, 0.66), inset 0 0 150px 26px rgba(160, 18, 0, 0.36), inset 0 0 22px 2px rgba(255, 170, 70, 0.16); } .ice-rim { box-shadow: inset 0 0 70px 16px rgba(0, 8, 16, 0.5), inset 0 0 120px 20px rgba(210, 240, 255, 0.42), inset 0 0 24px 3px rgba(255, 255, 255, 0.32); } .pool { width: 340px; height: 220px; border-radius: 50%; background: radial-gradient(ellipse at 48% 36%, rgba(255, 246, 220, 0.95) 0%, rgba(255, 130, 30, 0.62) 24%, rgba(160, 18, 0, 0.16) 46%, transparent 62%), radial-gradient(ellipse at 52% 74%, rgba(0, 0, 0, 0.72), transparent 58%); filter: blur(1px); opacity: 0; transition: opacity 1.3s ease; } .q1 { left: -80px; bottom: -40px; transition-delay: 0.15s; } .q2 { right: -90px; top: -30px; width: 300px; height: 240px; transition-delay: 0.45s; } .q3 { right: -40px; bottom: 8%; width: 260px; transition-delay: 0.8s; } .q4 { left: 6%; top: 8%; width: 200px; height: 160px; filter: blur(2px); transition-delay: 1.15s; } .cap-gate:has(.cap-140:hover) .pool { opacity: 0.55; animation: poolDrift 6.5s ease-in-out infinite; } .cap-gate:has(.cap-140:hover) .q2 { animation-duration: 8s; animation-delay: -2s; } .cap-gate:has(.cap-140:hover) .q3 { animation-duration: 5.5s; animation-delay: -1s; } @keyframes poolDrift { 0%, 100% { transform: translate3d(0, 8px, 0) scale(0.94); } 50% { transform: translate3d(22px, -16px, 0) scale(1.1); } } .crack { overflow: visible; } .crack::before { content: ''; position: absolute; left: 0; top: -10px; width: 48vw; height: 36px; border-radius: 40px; background: linear-gradient(90deg, transparent, rgba(255, 40, 0, 0.15) 8%, rgba(255, 70, 0, 0.85) 40%, rgba(255, 30, 0, 0.2) 78%, transparent); filter: blur(16px); opacity: 0; transition: opacity 1s ease; } .crack::after { content: ''; position: absolute; left: 12px; top: 14px; width: 44vw; height: 16px; border-radius: 20px; background: linear-gradient(90deg, transparent, rgba(8, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.7) 52%, transparent 94%); filter: blur(4px); opacity: 0; transition: opacity 1s ease; } .crack::before, .crack::after, .vein::before, .vein::after { display: none; } .crack b, .vein b { display: block; height: auto; background: none; box-shadow: none; border-radius: 0; transform: scaleX(0); opacity: 0; } .crack b svg, .vein b svg { display: block; width: 100%; height: 84px; overflow: visible; } .shard b svg { display: block; width: 100%; height: 100%; overflow: visible; } .crack b svg, .vein b svg, .shard b svg { shape-rendering: geometricPrecision; } .crack b { width: 46vw; } .vein b { width: 30vw; } .k1 { left: -5%; top: 12%; transform: rotate(12deg); } .k2 { right: -8%; top: 8%; transform: rotate(-20deg); } .k3 { left: -3%; bottom: 14%; transform: rotate(-9deg); } .k4 { right: -4%; bottom: 11%; transform: rotate(16deg); } .k5 { left: 4%; top: 47%; transform: rotate(3deg); } .k6 { right: 3%; top: 56%; transform: rotate(-6deg); } .k7 { left: 10%; bottom: 4%; transform: rotate(7deg); } .k2 b, .k4 b, .k6 b, .k2::before, .k4::before, .k6::before, .k2::after, .k4::after, .k6::after { transform-origin: right center; } .k5 b, .k6 b { width: 24vw; } .k5 b svg, .k6 b svg { height: 64px; } .k5::before, .k6::before, .k5::after, .k6::after { width: 24vw; } .cap-gate:has(.cap-140:hover) .crack::before { opacity: 1; animation: fissureBreath 2.8s ease-in-out infinite; } .cap-gate:has(.cap-140:hover) .crack::after { opacity: 0.9; } .cap-gate:has(.cap-140:hover) .k1::before, .cap-gate:has(.cap-140:hover) .k1::after { transition-delay: 0.15s; animation-delay: 0.15s; } .cap-gate:has(.cap-140:hover) .k2::before, .cap-gate:has(.cap-140:hover) .k2::after { transition-delay: 0.4s; animation-delay: 0.4s; } .cap-gate:has(.cap-140:hover) .k3::before, .cap-gate:has(.cap-140:hover) .k3::after { transition-delay: 0.7s; animation-delay: 0.7s; } .cap-gate:has(.cap-140:hover) .k4::before, .cap-gate:has(.cap-140:hover) .k4::after { transition-delay: 0.95s; animation-delay: 0.95s; } .cap-gate:has(.cap-140:hover) .k5::before, .cap-gate:has(.cap-140:hover) .k5::after { transition-delay: 1.2s; animation-delay: 1.2s; } .cap-gate:has(.cap-140:hover) .k6::before, .cap-gate:has(.cap-140:hover) .k6::after { transition-delay: 1.4s; animation-delay: 1.4s; } .cap-gate:has(.cap-140:hover) .k7::before, .cap-gate:has(.cap-140:hover) .k7::after { transition-delay: 1.6s; animation-delay: 1.6s; } .cap-gate:has(.cap-140:hover) .crack b { animation: fissureOpen 0.9s cubic-bezier(.16,.8,.2,1) forwards; } .cap-gate:has(.cap-140:hover) .k1 b { animation-delay: 0.12s; } .cap-gate:has(.cap-140:hover) .k2 b { animation-delay: 0.38s; } .cap-gate:has(.cap-140:hover) .k3 b { animation-delay: 0.64s; } .cap-gate:has(.cap-140:hover) .k4 b { animation-delay: 0.9s; } .cap-gate:has(.cap-140:hover) .k5 b { animation-delay: 1.15s; } .cap-gate:has(.cap-140:hover) .k6 b { animation-delay: 1.35s; } .cap-gate:has(.cap-140:hover) .k7 b { animation-delay: 1.55s; } @keyframes fissureOpen { 0% { opacity: 0; transform: scaleX(0.05) scaleY(0.4); filter: blur(6px); } 100% { opacity: 1; transform: scaleX(1) scaleY(1); filter: none; } } @keyframes fissureBreath { 0%, 100% { opacity: 0.45; filter: blur(18px); } 50% { opacity: 1; filter: blur(12px); } } .ember { width: 22px; height: 22px; bottom: 4%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0%, #ffe7b8 14%, #ff8a1a 42%, rgba(255, 36, 0, 0) 68%), radial-gradient(circle at 68% 74%, rgba(30, 0, 0, 0.55), transparent 52%); box-shadow: 0 0 8px 2px rgba(255, 120, 30, 0.55), 3px 10px 6px rgba(0, 0, 0, 0.55); opacity: 0; } .m1 { left: 3%; } .m2 { left: 8%; width: 14px; height: 14px; } .m3 { left: 13%; width: 28px; height: 28px; } .m4 { left: 20%; } .m5 { right: 5%; left: auto; width: 16px; height: 16px; } .m6 { right: 11%; left: auto; width: 30px; height: 30px; } .m7 { right: 18%; left: auto; } .m8 { right: 25%; left: auto; width: 12px; height: 12px; } .m9 { left: 28%; bottom: 20%; width: 10px; height: 10px; } .m10 { right: 30%; left: auto; bottom: 24%; } .m11 { left: 1%; bottom: 42%; width: 8px; height: 8px; } .m12 { right: 2%; left: auto; bottom: 46%; width: 9px; height: 9px; } .cap-gate:has(.cap-140:hover) .ember { animation: emberRise 3.6s ease-in infinite; } .cap-gate:has(.cap-140:hover) .m1 { animation-delay: 0.2s; } .cap-gate:has(.cap-140:hover) .m2 { animation-delay: 0.55s; } .cap-gate:has(.cap-140:hover) .m3 { animation-delay: 0.15s; animation-duration: 5s; } .cap-gate:has(.cap-140:hover) .m4 { animation-delay: 0.9s; } .cap-gate:has(.cap-140:hover) .m5 { animation-delay: 0.35s; } .cap-gate:has(.cap-140:hover) .m6 { animation-delay: 0.5s; animation-duration: 5.4s; } .cap-gate:has(.cap-140:hover) .m7 { animation-delay: 1.05s; } .cap-gate:has(.cap-140:hover) .m8 { animation-delay: 1.3s; } .cap-gate:has(.cap-140:hover) .m9 { animation-delay: 0.75s; } .cap-gate:has(.cap-140:hover) .m10 { animation-delay: 1.15s; } .cap-gate:has(.cap-140:hover) .m11 { animation-delay: 0.6s; animation-duration: 2.8s; } .cap-gate:has(.cap-140:hover) .m12 { animation-delay: 1.5s; animation-duration: 3s; } @keyframes emberRise { 0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate3d(18px, -70vh, 0) scale(1.05); } } .fog { left: -10%; right: -10%; top: -8%; height: 46%; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.55), rgba(190,225,255,0.18) 42%, transparent 72%); filter: blur(4px); opacity: 0; transition: opacity 1.4s ease 0.2s; } .cap-gate:has(.cap-110:hover) .fog { opacity: 1; animation: fogDrift 8s ease-in-out infinite; } @keyframes fogDrift { 0%, 100% { transform: translate3d(-2%, 0, 0); } 50% { transform: translate3d(3%, 12px, 0); } } .vein::before { content: ''; position: absolute; left: 0; top: -6px; width: 30vw; height: 16px; border-radius: 20px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); filter: blur(8px); opacity: 0; transition: opacity 1s ease; } .vein::after { content: ''; position: absolute; left: 6px; top: 7px; width: 28vw; height: 8px; border-radius: 8px; background: linear-gradient(90deg, transparent, rgba(2, 8, 16, 0.75), transparent); filter: blur(3px); opacity: 0; transition: opacity 1s ease; } .vein b { width: 132px; } .vein b svg { width: 132px; height: 132px; } .v1 { left: -2%; top: 16%; transform: rotate(16deg); } .v2 { right: -4%; top: 11%; transform: rotate(-14deg); } .v3 { left: 0; bottom: 16%; transform: rotate(-7deg); } .v4 { right: 0; bottom: 13%; transform: rotate(11deg); } .v5 { left: 5%; top: 44%; transform: rotate(2deg); } .v6 { right: 4%; top: 60%; transform: rotate(-3deg); } .v2 b, .v4 b, .v6 b { transform-origin: right center; } .cap-gate:has(.cap-110:hover) .vein::before, .cap-gate:has(.cap-110:hover) .vein::after { opacity: 0.9; } .cap-gate:has(.cap-110:hover) .v1::before, .cap-gate:has(.cap-110:hover) .v1::after { transition-delay: 0.2s; } .cap-gate:has(.cap-110:hover) .v2::before, .cap-gate:has(.cap-110:hover) .v2::after { transition-delay: 0.45s; } .cap-gate:has(.cap-110:hover) .v3::before, .cap-gate:has(.cap-110:hover) .v3::after { transition-delay: 0.7s; } .cap-gate:has(.cap-110:hover) .v4::before, .cap-gate:has(.cap-110:hover) .v4::after { transition-delay: 0.95s; } .cap-gate:has(.cap-110:hover) .v5::before, .cap-gate:has(.cap-110:hover) .v5::after { transition-delay: 1.2s; } .cap-gate:has(.cap-110:hover) .v6::before, .cap-gate:has(.cap-110:hover) .v6::after { transition-delay: 1.45s; } .cap-gate:has(.cap-110:hover) .vein b { animation: fissureOpen 1s cubic-bezier(.16,.8,.2,1) forwards; } .cap-gate:has(.cap-110:hover) .v1 b { animation-delay: 0.2s; } .cap-gate:has(.cap-110:hover) .v2 b { animation-delay: 0.45s; } .cap-gate:has(.cap-110:hover) .v3 b { animation-delay: 0.7s; } .cap-gate:has(.cap-110:hover) .v4 b { animation-delay: 0.95s; } .cap-gate:has(.cap-110:hover) .v5 b { animation-delay: 1.2s; } .cap-gate:has(.cap-110:hover) .v6 b { animation-delay: 1.45s; } .shard { width: 46px; height: 92px; perspective: 500px; filter: drop-shadow(5px 14px 5px rgba(0, 6, 14, 0.62)); } .shard::after { content: ''; position: absolute; left: 16%; bottom: 0; width: 68%; height: 12px; background: radial-gradient(ellipse, rgba(0, 6, 14, 0.72), transparent 70%); filter: blur(2px); opacity: 0; transition: opacity 0.8s ease; } .shard b { position: relative; display: block; width: 100%; height: 100%; background: none; box-shadow: none; border-radius: 0; clip-path: none; transform: scale(0.2); opacity: 0; transform-origin: 50% 85%; } .shard b svg { display: block; width: 100%; height: 100%; overflow: visible; } .s1 { left: 2%; top: 16%; transform: rotate(-18deg); } .s2 { left: 6%; bottom: 10%; transform: rotate(24deg); width: 34px; height: 70px; } .s3 { right: 3%; top: 14%; transform: rotate(12deg); } .s4 { right: 7%; bottom: 9%; transform: rotate(-22deg); width: 38px; height: 78px; } .s5 { left: 1%; top: 48%; transform: rotate(8deg); width: 28px; height: 56px; } .s6 { right: 2%; top: 50%; transform: rotate(-8deg); width: 30px; height: 60px; } .s7 { left: 14%; top: 4%; transform: rotate(-30deg); width: 26px; height: 52px; } .s8 { right: 16%; bottom: 3%; transform: rotate(20deg); } .cap-gate:has(.cap-110:hover) .shard::after { opacity: 1; } .cap-gate:has(.cap-110:hover) .s1::after { transition-delay: 0.35s; } .cap-gate:has(.cap-110:hover) .s2::after { transition-delay: 0.6s; } .cap-gate:has(.cap-110:hover) .s3::after { transition-delay: 0.8s; } .cap-gate:has(.cap-110:hover) .s4::after { transition-delay: 1s; } .cap-gate:has(.cap-110:hover) .s5::after { transition-delay: 1.15s; } .cap-gate:has(.cap-110:hover) .s6::after { transition-delay: 1.3s; } .cap-gate:has(.cap-110:hover) .s7::after { transition-delay: 1.5s; } .cap-gate:has(.cap-110:hover) .s8::after { transition-delay: 1.7s; } .cap-gate:has(.cap-110:hover) .shard b { animation: crystalIn 0.8s cubic-bezier(.16,.84,.2,1) forwards; } .cap-gate:has(.cap-110:hover) .s1 b { animation-delay: 0.35s; } .cap-gate:has(.cap-110:hover) .s2 b { animation-delay: 0.6s; } .cap-gate:has(.cap-110:hover) .s3 b { animation-delay: 0.8s; } .cap-gate:has(.cap-110:hover) .s4 b { animation-delay: 1s; } .cap-gate:has(.cap-110:hover) .s5 b { animation-delay: 1.15s; } .cap-gate:has(.cap-110:hover) .s6 b { animation-delay: 1.3s; } .cap-gate:has(.cap-110:hover) .s7 b { animation-delay: 1.5s; } .cap-gate:has(.cap-110:hover) .s8 b { animation-delay: 1.7s; } @keyframes crystalIn { 0% { opacity: 0; transform: scale(0.15) translateY(10px); } 100% { opacity: 1; transform: scale(1); } } @keyframes crystalSheen { 0% { background-position: 140% 0, 0 0, 0 0; } 100% { background-position: -80% 0, 0 0, 0 0; } } .flake { top: -8%; width: 34px; height: 34px; opacity: 0; background: none; filter: drop-shadow(0 2px 1px rgba(6, 14, 24, 0.55)); } .flake svg { display: block; width: 100%; height: 100%; overflow: visible; } .n1 { left: 4%; width: 46px; height: 46px; } .n2 { left: 10%; width: 22px; height: 22px; } .n3 { left: 16%; width: 58px; height: 58px; } .n4 { left: 24%; width: 18px; height: 18px; } .n5 { left: 30%; width: 36px; height: 36px; } .n6 { right: 6%; left: auto; width: 52px; height: 52px; } .n7 { right: 14%; left: auto; width: 20px; height: 20px; } .n8 { right: 20%; left: auto; width: 40px; height: 40px; } .n9 { right: 28%; left: auto; width: 16px; height: 16px; } .n10 { left: 1%; width: 26px; height: 26px; } .n11 { right: 2%; left: auto; width: 62px; height: 62px; } .n12 { left: 36%; width: 24px; height: 24px; } .n13 { right: 34%; left: auto; width: 30px; height: 30px; } .n14 { left: 8%; width: 44px; height: 44px; } .cap-gate:has(.cap-110:hover) .flake { animation: snowFall 7s linear infinite; } .cap-gate:has(.cap-110:hover) .n1 { animation-delay: 0.25s; animation-duration: 6.2s; } .cap-gate:has(.cap-110:hover) .n2 { animation-delay: 0.5s; animation-duration: 9s; } .cap-gate:has(.cap-110:hover) .n3 { animation-delay: 0.7s; animation-duration: 5.2s; } .cap-gate:has(.cap-110:hover) .n4 { animation-delay: 0.9s; animation-duration: 10s; } .cap-gate:has(.cap-110:hover) .n5 { animation-delay: 1.05s; } .cap-gate:has(.cap-110:hover) .n6 { animation-delay: 0.4s; animation-duration: 5.6s; } .cap-gate:has(.cap-110:hover) .n7 { animation-delay: 0.65s; animation-duration: 9.4s; } .cap-gate:has(.cap-110:hover) .n8 { animation-delay: 0.85s; } .cap-gate:has(.cap-110:hover) .n9 { animation-delay: 1.1s; animation-duration: 8s; } .cap-gate:has(.cap-110:hover) .n10 { animation-delay: 1.25s; animation-duration: 11s; } .cap-gate:has(.cap-110:hover) .n11 { animation-delay: 1.4s; animation-duration: 4.8s; } .cap-gate:has(.cap-110:hover) .n12 { animation-delay: 1.15s; } .cap-gate:has(.cap-110:hover) .n13 { animation-delay: 1.55s; animation-duration: 8.6s; } .cap-gate:has(.cap-110:hover) .n14 { animation-delay: 1.75s; animation-duration: 5.8s; } @keyframes snowFall { 0% { opacity: 0; transform: translate3d(0, -6vh, 0) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0.85; transform: translate3d(36px, 108vh, 0) rotate(140deg); } } .ash { bottom: -2%; width: 22px; height: 14px; opacity: 0; } .ash svg { display: block; width: 100%; height: 100%; } .a1 { left: 3%; width: 28px; height: 18px; } .a2 { left: 9%; } .a3 { left: 15%; width: 18px; height: 12px; } .a4 { right: 5%; left: auto; width: 26px; height: 16px; } .a5 { right: 12%; left: auto; } .a6 { right: 19%; left: auto; width: 16px; height: 10px; } .a7 { left: 22%; bottom: 18%; } .a8 { right: 26%; left: auto; bottom: 12%; } .cap-gate:has(.cap-140:hover) .ash { animation: ashRise 8.5s ease-in infinite; } .cap-gate:has(.cap-140:hover) .a1 { animation-delay: 0.2s; } .cap-gate:has(.cap-140:hover) .a2 { animation-delay: 0.7s; animation-duration: 10s; } .cap-gate:has(.cap-140:hover) .a3 { animation-delay: 1.1s; animation-duration: 7.2s; } .cap-gate:has(.cap-140:hover) .a4 { animation-delay: 0.35s; } .cap-gate:has(.cap-140:hover) .a5 { animation-delay: 0.95s; animation-duration: 9s; } .cap-gate:has(.cap-140:hover) .a6 { animation-delay: 1.4s; animation-duration: 7.6s; } .cap-gate:has(.cap-140:hover) .a7 { animation-delay: 0.55s; } .cap-gate:has(.cap-140:hover) .a8 { animation-delay: 1.6s; animation-duration: 8s; } @keyframes ashRise { 0% { opacity: 0; transform: translate3d(0, 16px, 0) rotate(0deg); } 14% { opacity: 0.8; } 100% { opacity: 0; transform: translate3d(-28px, -82vh, 0) rotate(70deg); } } .cinder { bottom: 1%; width: 3px; height: 11px; border-radius: 2px; opacity: 0; background: linear-gradient(#fff8e8, #ffb050 42%, rgba(255, 60, 0, 0) 100%); box-shadow: 0 0 7px rgba(255, 150, 40, 0.9); } .d1 { left: 6%; } .d2 { left: 16%; height: 5px; } .d3 { left: 27%; } .d4 { left: 38%; height: 6px; } .d5 { left: 49%; } .d6 { left: 58%; height: 5px; } .d7 { left: 69%; } .d8 { left: 78%; height: 6px; } .d9 { left: 88%; } .d10 { left: 94%; height: 5px; } .cap-gate:has(.cap-140:hover) .cinder { animation: cinderRise 3.1s ease-in infinite; } .cap-gate:has(.cap-140:hover) .d1 { animation-delay: 0.15s; } .cap-gate:has(.cap-140:hover) .d2 { animation-delay: 0.45s; animation-duration: 2.6s; } .cap-gate:has(.cap-140:hover) .d3 { animation-delay: 0.8s; } .cap-gate:has(.cap-140:hover) .d4 { animation-delay: 1.05s; animation-duration: 2.4s; } .cap-gate:has(.cap-140:hover) .d5 { animation-delay: 0.25s; } .cap-gate:has(.cap-140:hover) .d6 { animation-delay: 0.6s; animation-duration: 2.8s; } .cap-gate:has(.cap-140:hover) .d7 { animation-delay: 0.95s; } .cap-gate:has(.cap-140:hover) .d8 { animation-delay: 1.3s; animation-duration: 2.5s; } .cap-gate:has(.cap-140:hover) .d9 { animation-delay: 0.5s; } .cap-gate:has(.cap-140:hover) .d10 { animation-delay: 1.5s; animation-duration: 2.7s; } @keyframes cinderRise { 0% { opacity: 0; transform: translate3d(0, 6px, 0); } 16% { opacity: 0.95; } 100% { opacity: 0; transform: translate3d(8px, -24vh, 0); } } .hearth { left: -8%; right: -8%; bottom: -6px; height: 26vh; background: linear-gradient(to top, rgba(12, 2, 0, 0.55) 0%, transparent 28%), radial-gradient(ellipse 12% 80% at 12% 100%, rgba(255, 214, 140, 0.85), transparent 62%), radial-gradient(ellipse 18% 100% at 34% 100%, rgba(255, 64, 8, 0.62), transparent 68%), radial-gradient(ellipse 10% 70% at 56% 100%, rgba(255, 186, 80, 0.7), transparent 64%), radial-gradient(ellipse 16% 95% at 78% 100%, rgba(190, 22, 0, 0.58), transparent 70%), radial-gradient(ellipse 9% 60% at 92% 100%, rgba(255, 150, 40, 0.55), transparent 66%), linear-gradient(to top, rgba(255, 72, 12, 0.5) 0%, rgba(60, 8, 0, 0.22) 30%, transparent 100%); filter: blur(3px); opacity: 0; transition: opacity 1s ease; pointer-events: none; } .hearth::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: 0; height: 18px; background: linear-gradient(90deg, transparent 0%, rgba(255, 220, 150, 0.2) 6%, rgba(255, 170, 60, 0.85) 18%, rgba(255, 60, 8, 0.35) 36%, rgba(255, 210, 120, 0.8) 52%, rgba(160, 24, 0, 0.4) 70%, rgba(255, 180, 70, 0.7) 86%, transparent 100%); filter: blur(2px); } .cap-gate:has(.cap-140:hover) .hearth { opacity: 1; animation: hearthBreath 2.4s ease-in-out infinite; } @keyframes hearthBreath { 0%, 100% { filter: blur(3px) brightness(0.88); } 50% { filter: blur(2px) brightness(1.14); } } .coal { position: absolute; bottom: 1.5%; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 236, 196, 0.95) 42%, rgba(255, 70, 12, 0.35) 70%, transparent); box-shadow: 0 0 8px rgba(255, 120, 30, 0.8), 0 -10px 16px rgba(255, 50, 8, 0.28); } .c-a { left: 1%; width: 12%; } .c-b { left: 7%; width: 5%; bottom: 7%; } .c-c { right: 2%; left: auto; width: 14%; } .c-d { right: 9%; left: auto; width: 6%; bottom: 9%; } .c-e { left: 16%; width: 4%; bottom: 3%; } .cap-gate:has(.cap-140:hover) .coal { animation: coalPulse 2.6s ease-in-out infinite; } .cap-gate:has(.cap-140:hover) .c-b { animation-delay: -0.7s; } .cap-gate:has(.cap-140:hover) .c-c { animation-delay: -1.3s; } .cap-gate:has(.cap-140:hover) .c-d { animation-delay: -0.4s; } .cap-gate:has(.cap-140:hover) .c-e { animation-delay: -1.8s; } @keyframes coalPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.95; } } .bruise { opacity: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,0.98) 0 11%, rgba(255,255,255,0) 12% 18%, rgba(186,220,245,0.35) 19% 20%, transparent 21%), linear-gradient(205deg, rgba(6, 22, 40, 0.72) 0 26%, transparent 27%), linear-gradient(165deg, #ffffff 0%, #e7f4ff 28%, #8eb8d8 62%, #16344e 100%); filter: drop-shadow(0 1px 0 rgba(255,255,255,0.9)) drop-shadow(6px 12px 2px rgba(2, 8, 16, 0.85)) drop-shadow(0 0 8px rgba(170, 220, 255, 0.35)); transition: opacity 1s ease; } .r1 { left: 1%; top: 8%; width: 78px; height: 46px; clip-path: polygon(12% 8%, 70% 0, 100% 38%, 78% 100%, 18% 82%, 0 40%); transition-delay: 0.15s; } .r2 { right: 2%; top: 12%; width: 54px; height: 70px; clip-path: polygon(30% 0, 100% 18%, 82% 100%, 0 78%, 8% 30%); background: linear-gradient(210deg, #fff 0 16%, transparent 17%), linear-gradient(30deg, rgba(6,18,32,0.6) 0 28%, transparent 29%), linear-gradient(180deg, #f7fbff, #8eb4d2 58%, #163448); transition-delay: 0.45s; } .r3 { left: 3%; bottom: 8%; width: 110px; height: 42px; clip-path: polygon(0 40%, 22% 0, 68% 18%, 100% 8%, 92% 100%, 30% 78%); transition-delay: 0.75s; } .r4 { right: 4%; bottom: 10%; width: 96px; height: 50px; clip-path: polygon(8% 20%, 48% 0, 100% 30%, 74% 100%, 20% 80%, 0 55%); background: linear-gradient(70deg, #fff 0 11%, transparent 12%), linear-gradient(240deg, rgba(8,22,36,0.55) 0 32%, transparent 33%), linear-gradient(155deg, #eef6ff, #7ea8c8 62%, #1a3c54); transition-delay: 1s; } .r5 { left: 12%; top: 3%; width: 36px; height: 28px; clip-path: polygon(20% 0, 100% 30%, 60% 100%, 0 70%); transition-delay: 0.3s; } .r6 { right: 14%; top: 4%; width: 42px; height: 24px; clip-path: polygon(0 30%, 40% 0, 100% 40%, 70% 100%); transition-delay: 1.15s; } .r7 { left: 0; top: 42%; width: 28px; height: 64px; clip-path: polygon(40% 0, 100% 16%, 70% 100%, 0 80%, 10% 30%); background: linear-gradient(95deg, #fff 0 18%, transparent 19%), linear-gradient(#eaf4ff, #5c8cb0 68%, #0e2436); transition-delay: 0.6s; } .r8 { right: 0; top: 36%; width: 32px; height: 80px; clip-path: polygon(0 10%, 80% 0, 100% 46%, 40% 100%, 0 70%); transition-delay: 1.35s; } .cap-gate:has(.cap-110:hover) .bruise { opacity: 0.95; } @media (prefers-reduced-motion: reduce) { .pool, .ember, .flake, .ash, .cinder, .fog, .hearth, .bruise, .coal, .lava-wash, .fire-lick-box i { animation: none !important; transition: none !important; } .cap-gate:has(.cap-140:hover) .lava-wash, .cap-gate:has(.cap-110:hover) .ice-wash, .cap-gate:has(.cap-140:hover) .pool, .cap-gate:has(.cap-110:hover) .shard b { opacity: 1; } } html.night-mode.cap-gate-open, html.night-mode.cap-gate-open body { background: #070b12 !important; background-image: none !important; overflow: hidden !important; } #servers-btn { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none !important; background: radial-gradient(circle at 32% 26%, rgba(255, 236, 190, 0.28), rgba(255, 236, 190, 0) 42%), linear-gradient(165deg, #3a2820 0%, #1a1210 58%, #100c0a 100%); border: 2px solid #e6b44a; box-shadow: 0 0 0 3px rgba(80, 40, 8, 0.45), 0 0 14px rgba(255, 176, 40, 0.45), 0 4px 10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 236, 190, 0.35); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } #servers-btn svg { width: 40px; height: 40px; display: block; } #servers-btn .realm-wall, #servers-btn .realm-merlon { fill: #fffdf8; } #servers-btn .realm-cold { fill: #e7f4ff; } #servers-btn .realm-hotwall { fill: #ffe7d4; } #servers-btn .realm-shade { fill: #7a3410; } #servers-btn .realm-flag, #servers-btn .realm-win { fill: #0094ff; } #servers-btn .realm-hot { fill: #ff2438; } #servers-btn .realm-gate { fill: #3a2012; } #servers-btn .realm-gem { fill: #ffffff; } #servers-btn .realm-seam { stroke: #2a160c; stroke-width: 1.5; } #servers-btn:hover { transform: scale(1.06); border-color: #fff1c4; box-shadow: 0 0 0 4px rgba(255, 200, 80, 0.35), 0 0 22px rgba(255, 176, 40, 0.7), 0 4px 10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 236, 190, 0.5); } html.night-mode #servers-btn { background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%), linear-gradient(165deg, #243246 0%, #121a28 58%, #0c121c 100%); border-color: #c5d7f0; box-shadow: 0 0 0 3px rgba(12, 28, 48, 0.5), 0 0 14px rgba(140, 190, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28); } html.night-mode #servers-btn .realm-wall, html.night-mode #servers-btn .realm-merlon, html.night-mode #servers-btn .realm-gem { fill: #ffffff; } html.night-mode #servers-btn .realm-cold { fill: #e7f4ff; } html.night-mode #servers-btn .realm-hotwall { fill: #ffe4d6; } html.night-mode #servers-btn .realm-shade { fill: #123864; } html.night-mode #servers-btn .realm-flag, html.night-mode #servers-btn .realm-win { fill: #19c2ff; } html.night-mode #servers-btn .realm-hot { fill: #ff3350; } html.night-mode #servers-btn .realm-gate { fill: #071422; } html.night-mode #servers-btn .realm-seam { stroke: #071422; } html.night-mode #servers-btn:hover { border-color: #ffffff; box-shadow: 0 0 0 4px rgba(180, 210, 255, 0.35), 0 0 22px rgba(150, 200, 255, 0.65), 0 4px 10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .servers-label { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); padding: 4px 10px 5px; border-radius: 999px; white-space: nowrap; font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff6d8; background: rgba(16, 10, 6, 0.9); border: 1px solid rgba(230, 180, 74, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 236, 190, 0.2); pointer-events: none; } #servers-btn-wrap:hover .servers-label { border-color: #fff1c4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 0 12px rgba(255, 186, 40, 0.4); } html.night-mode .servers-label { color: #eef5ff; background: rgba(8, 14, 22, 0.92); border-color: rgba(197, 215, 240, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.16); } html.night-mode #servers-btn-wrap:hover .servers-label { border-color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 0 12px rgba(160, 200, 255, 0.4); }