.mario-archive-world { background-color: #5c94fc; padding: 60px 0; min-height: 100vh; position: relative; overflow: hidden; image-rendering: pixelated; } .mario-archive-world::before, .mario-archive-world::after { content: ""; position: absolute; width: 120px; height: 40px; background: #fff; opacity: 0.8; box-shadow: 40px 40px 0 #fff, 80px 0 0 #fff, -40px 40px 0 #fff; animation: cloudMove 45s linear infinite; z-index: 0; } .mario-archive-world::before { top: 80px; left: -200px; } .mario-archive-world::after { top: 250px; left: 40%; animation-duration: 70s; animation-delay: -15s; transform: scale(1.8); } @keyframes cloudMove { from { transform: translateX(-300px); } to { transform: translateX(110vw); } } .mario-content-container { position: relative; z-index: 2; } .mario-level-header { display: flex; justify-content: center; margin-bottom: 60px; } .mario-signpost { background: #b03000; border: 4px solid #000; padding: 15px 35px; position: relative; box-shadow: 8px 8px 0 #000; } .mario-signpost::after { content: ""; position: absolute; bottom: -25px; left: 50%; width: 16px; height: 25px; background: #000; transform: translateX(-50%); } .mario-world-title { font-family: 'Press Start 2P', cursive; font-size: 18px; color: #fff; margin: 0; text-transform: uppercase; text-shadow: 4px 4px 0 #000; } .mario-card-brick { position: relative; transition: transform 0.1s steps(2); margin-bottom: 30px; } .mario-brick-link { display: block; background: #f1c40f; border: 4px solid #000; padding: 8px; text-decoration: none !important; box-shadow: inset -6px -6px 0 #d35400, inset 6px 6px 0 #fff200, 8px 8px 0 rgba(0,0,0,0.3); position: relative; } .p-dot { position: absolute; width: 4px; height: 4px; background: #000; opacity: 0.3; } .tl { top: 6px; left: 6px; } .tr { top: 6px; right: 6px; } .bl { bottom: 6px; left: 6px; } .br { bottom: 6px; right: 6px; } .mario-thumb-box { border: 3px solid #000; overflow: hidden; background: #000; aspect-ratio: 1/1; } .mario-img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; } .mario-brick-label { font-family: 'Press Start 2P', cursive; font-size: 8px; color: #000; padding: 10px 0 2px; text-align: center; text-transform: uppercase; } .mario-card-brick:hover { transform: translateY(-15px); } .mario-card-brick:hover .mario-brick-link { background: #fff200; box-shadow: inset -6px -6px 0 #d35400, inset 6px 6px 0 #ffffff, 12px 12px 0 rgba(0,0,0,0.4); } .mario-empty-state { text-align: center; padding: 100px 0; } .game-over-box { display: inline-block; background: #000; border: 6px solid #fff; padding: 40px; box-shadow: 12px 12px 0 #ff4757; } .game-over-text { font-family: 'Press Start 2P', cursive; color: #ff4757; font-size: 32px; margin-bottom: 20px; animation: blink 0.8s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .btn-retry { display: inline-block; background: #2ecc71; color: #000; padding: 12px 25px; font-family: 'Press Start 2P', cursive; font-size: 14px; text-decoration: none !important; border: 4px solid #000; box-shadow: 6px 6px 0 #fff; margin-top: 20px; } .btn-retry:hover { background: #fff; transform: scale(1.1); } @media (max-width: 768px) { .mario-world-title { font-size: 14px; } .mario-signpost { padding: 10px 20px; } .mario-brick-label { font-size: 7px; } } .no_res{ font-family: 'Press Start 2P'; color: #fff; font-size: 10px; }