/* ========================================================== N.P.P. ARENA GLASS V2 Real billboard backdrop + controlled glass ========================================================== */ html, body{ background:#050505 !important; } body{ position:relative; isolation:isolate; } /* ========================================================== REAL BACKDROP ========================================================== */ .npp-arena-billboard{ position:fixed; inset:0; z-index:-3; overflow:hidden; background: #050505; pointer-events:none; } .npp-arena-billboard-media{ position:absolute; inset:-3%; transform: scale(1.04); } .npp-arena-billboard-media img, .npp-arena-billboard-media video{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; filter: saturate(.82) contrast(1.05) brightness(.46); } .npp-arena-billboard-media video{ pointer-events:none; } .npp-arena-billboard-shade{ position:absolute; inset:0; background: linear-gradient( 180deg, rgba(5,5,6,.88) 0%, rgba(5,5,6,.60) 24%, rgba(5,5,6,.42) 48%, rgba(5,5,6,.72) 78%, rgba(5,5,6,.94) 100% ), linear-gradient( 90deg, rgba(5,5,6,.82), rgba(5,5,6,.42) 45%, rgba(5,5,6,.58) ); } .npp-arena-billboard-glow{ position:absolute; inset:0; background: radial-gradient( circle at 18% 18%, rgba(122,24,48,.22), transparent 30% ), radial-gradient( circle at 84% 40%, rgba(104,20,38,.14), transparent 34% ); } /* ========================================================== COMMAND BAR ========================================================== */ .npp-arena-commandbar{ background: rgba(8,7,8,.56) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; backdrop-filter: blur(20px) saturate(125%) !important; -webkit-backdrop-filter: blur(20px) saturate(125%) !important; } /* ========================================================== CATEGORY RAIL ========================================================== */ .arena-tabs{ background: rgba(6,6,7,.40) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ========================================================== FLOOR GLASS ========================================================== */ .npp-arena-floor, .npp-economy, .floor-module, .crowd-control, .board-stakes, .up-next, .ranking-preview{ background: linear-gradient( 145deg, rgba(13,9,10,.58), rgba(6,6,7,.34) ) !important; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 26px 80px rgba(0,0,0,.22); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); } /* ========================================================== BROADCAST / MEDIA STAYS STRONG ========================================================== */ .broadcast-stage{ background: rgba(4,4,5,.60) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .battle-stage{ background: rgba(2,2,3,.92) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ========================================================== LIVE ROWS ========================================================== */ .floor-live-featured{ background: linear-gradient( 90deg, rgba(104,20,38,.18), rgba(10,8,9,.38) 55%, rgba(5,5,6,.22) ) !important; } /* ========================================================== MOBILE ========================================================== */ @media(max-width:700px){ .npp-arena-billboard-media{ inset:-1%; transform: scale(1.02); } .npp-arena-billboard-media img, .npp-arena-billboard-media video{ filter: saturate(.80) contrast(1.04) brightness(.40); } .npp-arena-billboard-shade{ background: linear-gradient( 180deg, rgba(5,5,6,.90) 0%, rgba(5,5,6,.66) 25%, rgba(5,5,6,.48) 50%, rgba(5,5,6,.76) 80%, rgba(5,5,6,.96) 100% ); } .npp-arena-floor, .npp-economy, .floor-module, .crowd-control, .board-stakes, .up-next, .ranking-preview{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } /* ========================================================== N.P.P. ARENA GLASS V3 Match My Arena's futuristic living-world language. ========================================================== */ /* Billboard becomes visible only when live media exists */ .npp-arena-billboard{ opacity:0; transition: opacity .7s ease; } .npp-arena-billboard.is-live{ opacity:1; } /* living media wall */ .npp-arena-billboard-media{ inset:-4%; transform: scale(1.05); animation: nppArenaBillboardDrift 20s ease-in-out infinite alternate; } .npp-arena-billboard-media img, .npp-arena-billboard-media video{ filter: saturate(.78) contrast(1.08) brightness(.58); } /* dark readability veil */ .npp-arena-billboard-shade{ background: linear-gradient( 90deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.72) 30%, rgba(5,5,6,.42) 58%, rgba(5,5,6,.62) 100% ), linear-gradient( 180deg, rgba(5,5,6,.78), rgba(5,5,6,.42) 44%, rgba(5,5,6,.86) 100% ); } /* futuristic wine light field */ .npp-arena-billboard-glow{ background: radial-gradient( circle at 15% 16%, rgba(126,24,50,.34), transparent 28% ), radial-gradient( circle at 84% 38%, rgba(104,20,38,.22), transparent 34% ), radial-gradient( circle at 48% 82%, rgba(76,10,29,.18), transparent 34% ); mix-blend-mode: screen; } /* ========================================= GLASS WORLD SURFACES ========================================= */ .npp-arena-floor, .npp-economy, .floor-module, .crowd-control, .board-stakes, .up-next, .ranking-preview{ position:relative; background: radial-gradient( circle at 18% 0%, rgba(104,20,38,.10), transparent 34% ), linear-gradient( 145deg, rgba(18,12,14,.58), rgba(7,7,8,.38) ) !important; border: 1px solid rgba(255,255,255,.075); box-shadow: 0 30px 90px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.028); backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); } /* modules feel suspended */ .floor-module{ border-radius: 18px; overflow:hidden; } .npp-arena-floor, .npp-economy{ border-radius: 0; } /* glass edge reflection */ .floor-module::before, .npp-economy::before{ content:""; position:absolute; left:8%; right:8%; top:0; height:1px; pointer-events:none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.14), rgba(138,33,56,.20), rgba(255,255,255,.06), transparent ); } /* command bar belongs to same world */ .npp-arena-commandbar{ background: radial-gradient( circle at 18% 0%, rgba(104,20,38,.11), transparent 40% ), rgba(8,7,8,.48) !important; backdrop-filter: blur(24px) saturate(135%) !important; -webkit-backdrop-filter: blur(24px) saturate(135%) !important; } /* category strip nearly disappears into glass */ .arena-tabs{ background: rgba(7,7,8,.30) !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; } /* live broadcast remains foreground */ .broadcast-stage{ background: rgba(4,4,5,.44) !important; } .battle-stage{ background: rgba(2,2,3,.90) !important; } /* ========================================= MOBILE PERFORMANCE + VISIBILITY ========================================= */ @media(max-width:700px){ .npp-arena-billboard-media{ inset:-2%; animation-duration: 24s; } .npp-arena-billboard-media img, .npp-arena-billboard-media video{ filter: saturate(.76) contrast(1.06) brightness(.52); } .npp-arena-billboard-shade{ background: linear-gradient( 180deg, rgba(5,5,6,.84) 0%, rgba(5,5,6,.55) 34%, rgba(5,5,6,.48) 60%, rgba(5,5,6,.90) 100% ); } .npp-arena-floor, .npp-economy, .floor-module, .crowd-control, .board-stakes, .up-next, .ranking-preview{ backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%); } } @keyframes nppArenaBillboardDrift{ 0%{ transform: scale(1.05) translate3d(-.5%,0,0); } 100%{ transform: scale(1.10) translate3d(.6%,-.5%,0); } } /* ========================================================== N.P.P. ARENA REAL GLASS V4 Content-through-glass correction ========================================================== */ /* ---------------------------------------------------------- 1. REMOVE THE SOLID PAGE FEEL ---------------------------------------------------------- */ html{ background:#050506 !important; } body{ background:transparent !important; } main, .floor-discovery, .broadcast-stage{ background:transparent !important; } /* ---------------------------------------------------------- 2. BILLBOARD WORLD Match My Arena concept: media exists as environment, not as a dark image hidden behind cards. ---------------------------------------------------------- */ .npp-arena-billboard{ background: radial-gradient( circle at 82% 12%, rgba(104,20,38,.20), transparent 38% ), #050506; } .npp-arena-billboard-media{ opacity:.34; } .npp-arena-billboard-media img, .npp-arena-billboard-media video{ filter: saturate(.72) contrast(1.12) brightness(.62); } /* lighter veil so media can actually travel through glass */ .npp-arena-billboard-shade{ background: linear-gradient( 180deg, rgba(5,5,6,.38) 0%, rgba(5,5,6,.48) 24%, rgba(5,5,6,.60) 64%, rgba(5,5,6,.80) 100% ), radial-gradient( circle at 50% 25%, transparent 0%, rgba(0,0,0,.10) 54%, rgba(0,0,0,.42) 100% ); } /* ---------------------------------------------------------- 3. TRUE GLASS SURFACES ---------------------------------------------------------- */ .npp-arena-floor, .npp-economy, .floor-module, .crowd-control, .board-stakes, .up-next, .ranking-preview{ background: linear-gradient( 135deg, rgba(255,255,255,.070), rgba(255,255,255,.018) 38%, rgba(104,20,38,.050) 100% ) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.025), 0 35px 100px rgba(0,0,0,.34) !important; backdrop-filter: blur(28px) saturate(130%) !important; -webkit-backdrop-filter: blur(28px) saturate(130%) !important; } /* ---------------------------------------------------------- 4. LET WRAPPER SECTIONS DISAPPEAR ---------------------------------------------------------- */ .floor-discovery, .npp-live-divider, .broadcast-stage{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ---------------------------------------------------------- 5. FLOAT MODULES INSTEAD OF STACKED DARK BLOCKS ---------------------------------------------------------- */ .floor-module{ width: min( 1380px, calc(100% - 34px) ); margin-left:auto; margin-right:auto; border-radius: 28px !important; } /* economy gets same floating architecture */ .npp-economy{ width: min( 1380px, calc(100% - 34px) ); margin: 22px auto !important; border-radius: 28px !important; } /* arena intro surface */ .npp-arena-floor{ width: min( 1380px, calc(100% - 34px) ); margin: 22px auto 0 !important; border-radius: 30px !important; } /* ---------------------------------------------------------- 6. GLASS REFLECTION ---------------------------------------------------------- */ .npp-arena-floor::after, .npp-economy::after, .floor-module::after{ content:""; position:absolute; left:8%; right:8%; top:0; height:1px; pointer-events:none; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.34), transparent ); opacity:.58; } /* ---------------------------------------------------------- 7. COMMAND BAR — ACTUAL GLASS ---------------------------------------------------------- */ .npp-arena-commandbar{ background: linear-gradient( 135deg, rgba(255,255,255,.055), rgba(255,255,255,.012) ), rgba(8,7,8,.24) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.22); backdrop-filter: blur(30px) saturate(135%) !important; -webkit-backdrop-filter: blur(30px) saturate(135%) !important; } /* ---------------------------------------------------------- 8. CATEGORY BAR ---------------------------------------------------------- */ .arena-tabs{ background: rgba(8,7,8,.18) !important; backdrop-filter: blur(24px) saturate(125%) !important; -webkit-backdrop-filter: blur(24px) saturate(125%) !important; } /* ---------------------------------------------------------- 9. BATTLE MEDIA STAYS SOLID ---------------------------------------------------------- */ .battle-stage{ background: rgba(3,3,4,.78) !important; border: 1px solid rgba(255,255,255,.075) !important; box-shadow: 0 32px 90px rgba(0,0,0,.44) !important; } /* ---------------------------------------------------------- 10. BUTTON / SMALL SURFACE LANGUAGE ---------------------------------------------------------- */ .floor-command-rail a, .floor-live-enter, .ranking-preview a{ background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ---------------------------------------------------------- 11. MOBILE ---------------------------------------------------------- */ @media(max-width:700px){ .npp-arena-billboard-media{ opacity:.30; } .npp-arena-billboard-shade{ background: linear-gradient( 180deg, rgba(5,5,6,.42), rgba(5,5,6,.54) 50%, rgba(5,5,6,.78) ); } .npp-arena-floor, .npp-economy, .floor-module{ width: calc( 100% - 20px ); border-radius: 22px !important; backdrop-filter: blur(20px) saturate(125%) !important; -webkit-backdrop-filter: blur(20px) saturate(125%) !important; } }