:root { --mario-sky: #5c94fc; --mario-brick: #b03000; --mario-brick-s: #ff704d; --mario-coin: #f1c40f; --mario-q-block: #ff9d3b; --mario-q-light: #ffcd88; } .nes-text-title { font-family: 'Press Start 2P', cursive; font-size: 26px; color: var(--mario-coin); text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; letter-spacing: 2px; } .nes-text-red { color: #EA0404; text-shadow: 4px 4px 0 #000; } .mario-world-slider { position: relative; background-color: transparent; } .nes-scroll-container { width: 100%; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .nes-scroll-container::-webkit-scrollbar { display: none; } .nes-track { display: flex !important; flex-wrap: nowrap !important; gap: 25px; margin: 0; list-style: none; width: max-content; } .nes-column { display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; } .nes-pixel-box { position: relative; border: 5px solid #000; padding: 5px; transition: transform 0.1s steps(2); box-shadow: 10px 10px 0 rgba(0,0,0,0.4); } .block-question .nes-pixel-box { background-color: var(--mario-q-block); box-shadow: inset 6px 6px 0 var(--mario-q-light), inset -6px -6px 0 #a05000, 10px 10px 0 #000; } .block-brick .nes-pixel-box { background-color: var(--mario-brick); box-shadow: inset 6px 6px 0 var(--mario-brick-s), inset -6px -6px 0 #601000, 10px 10px 0 #000; } .is-big .nes-pixel-box { width: 340px; height: 340px; } .is-small .nes-pixel-box { width: 165px; height: 165px; } .nes-img { width: 100%; height: 100%; object-fit: cover; border: 4px solid #000; image-rendering: pixelated; display: block; } .nes-game-block:hover .nes-pixel-box { transform: translateY(-12px); filter: brightness(1.1); } .p-dot { position: absolute; width: 6px; height: 6px; background: #000; opacity: 0.4; } .tl { top: 12px; left: 12px; } .tr { top: 12px; right: 12px; } .bl { bottom: 12px; left: 12px; } .br { bottom: 12px; right: 12px; } .nes-label { position: absolute; bottom: 15px; left: 15px; right: 15px; background: #000; border: 3px solid #fff; padding: 6px; opacity: 0; transform: translateY(10px); transition: 0.1s steps(2); z-index: 10; } .nes-game-block:hover .nes-label { opacity: 1; transform: translateY(0); } .nes-label-text { display: block; color: #fff; font-family: 'Press Start 2P', cursive; font-size: 8px; text-align: center; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mario-nav-system { position: absolute; top: 40%; width: 100%; left: 0; transform: translateY(-50%); z-index: 100; pointer-events: none; } .mario-btn { width: 54px; height: 54px; background: var(--mario-brick) !important; border: 5px solid #000 !important; pointer-events: auto; cursor: pointer; position: absolute; box-shadow: inset 4px 4px 0 var(--mario-brick-s), 5px 5px 0 #000; } .prev-btn { left: -15px; } .next-btn { right: -15px; } .mario-btn:active { transform: scale(0.9); box-shadow: inset 4px 4px 0 #000; } .mario-btn::after { content: ''; display: block; width: 0; height: 0; border: 12px solid transparent; margin: auto; } .prev-btn::after { border-right: 18px solid #fff; margin-right: 18px; } .next-btn::after { border-left: 18px solid #fff; margin-left: 18px; } @media (max-width: 768px) { .mario-nav-system { display: none !important; } .mario-world-slider { padding: 0 10px !important; } .nes-scroll-container { -webkit-overflow-scrolling: touch; } .is-big .nes-pixel-box { width: 280px; height: 280px; } .is-small .nes-pixel-box { width: 135px; height: 135px; } } .mario-category-map { display: flex; gap: 20px; overflow-x: auto; padding: 20px 5px; scrollbar-width: none; -ms-overflow-style: none; image-rendering: pixelated; } .mario-category-map::-webkit-scrollbar { display: none; } .category-item { text-decoration: none !important; flex-shrink: 0; transition: transform 0.1s steps(2); } .warp-pipe-wrapper { display: flex; flex-direction: column; align-items: center; width: 100px; } .pipe-icon { width: 50px; height: 50px; margin-bottom: 6px; z-index: 2; transition: transform 0.2s steps(2); } .pipe-icon img { width: 100%; height: 100%; object-fit: contain; } .warp-pipe { width: 80px; height: 40px; background: #2ecc71; border: 4px solid #000; position: relative; box-shadow: inset 6px 0 0 #27ae60, inset -6px 0 0 #219150, 5px 5px 0 rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; } .warp-pipe::before { content: ''; position: absolute; top: -10px; left: -8px; width: 96px; height: 15px; background: #2ecc71; border: 4px solid #000; box-shadow: inset 6px 0 0 #27ae60; } .pipe-label {     line-height: 1.4;font-family: 'Press Start 2P', cursive; font-size: 7px; color: #000; text-transform: uppercase; text-align: center; z-index: 3; } .category-item:hover { transform: translateY(-10px); } .category-item:hover .pipe-icon { transform: scale(1.2); } .category-item:hover .warp-pipe { background: #27ae60; } @media (max-width: 768px) { .warp-pipe-wrapper { width: 80px; } .warp-pipe { width: 70px; } .warp-pipe::before { width: 86px; } } .mario-world-section { position: relative; margin-top: 50px; image-rendering: pixelated; } .mario-grass-border { height: 20px; background-color: #00a000; border-top: 4px solid #000; border-bottom: 4px solid #000; position: relative; z-index: 2; box-shadow: inset 0 8px 0 #00d000; } .mario-soil-container { background-color: #704000; border: 4px solid #000; border-top: none; padding: 30px; position: relative; box-shadow: inset -8px -8px 0 #502800, inset 8px 0 0 #905000; } .content-stage-collapsed { max-height: 250px; overflow: hidden; transition: max-height 0.4s steps(4); position: relative; } .content-stage-collapsed.expanded { max-height: 5000px; } .mario-inner-text { color: #ffd8a8; font-size: 15px; line-height: 1.7; text-shadow: 2px 2px 0 #000; } .mario-soil-overlay { position: absolute; bottom: 0; width: 100%; height: 80px; background: linear-gradient(to bottom, transparent, #704000); } .expanded .mario-soil-overlay { display: none; } .mario-block-btn { font-family: 'Press Start 2P', cursive; font-size: 11px; padding: 15px 30px; background-color: #ff9d3b; color: #fff; border: 4px solid #000; cursor: pointer; box-shadow: inset 4px 4px 0 #ffcd88, 6px 6px 0 #000; transition: 0.1s steps(2); } .mario-block-btn:hover { transform: scale(1.05); background-color: #f1c40f; } .mario-block-btn:active { transform: scale(0.95) translateY(4px); box-shadow: inset 4px 4px 0 #a05000, 2px 2px 0 #000; } .mario-inner-text { color: #ffffff !important; font-family: Arial, sans-serif; font-size: 15px; line-height: 1.8; } .mario-inner-text h1, .mario-inner-text h2, .mario-inner-text h3, .mario-inner-text h4 { color: #f1c40f !important; font-family: 'Press Start 2P', cursive; text-transform: uppercase; margin-top: 20px; text-shadow: 2px 2px 0 #000; } .mario-inner-text strong, .mario-inner-text b { color: #ff4757 !important; font-weight: bold; } .mario-inner-text a { color: #5c94fc !important; text-decoration: underline; } .mario-inner-text a:hover { color: #f1c40f !important; } .mario-inner-text ul li { list-style: square; color: #ffffff; margin-bottom: 8px; } .mario-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 25px; image-rendering: pixelated; } .mario-card { position: relative; border: 4px solid #000; background-color: #b03000; padding: 6px; box-shadow: inset 4px 4px 0 #ff704d, inset -4px -4px 0 #601000, 6px 6px 0 #000; transition: transform 0.1s steps(2); aspect-ratio: 1/1; display: flex; flex-direction: column; image-rendering: pixelated; } .mario-card:hover { transform: translateY(-8px); background-color: #ff9d3b; box-shadow: inset 4px 4px 0 #ffcd88, inset -4px -4px 0 #a05000, 0 12px 0 rgba(0,0,0,0.2); } .p-dot { position: absolute; width: 6px; height: 6px; background: #000; opacity: 0.5; z-index: 2; } .tl { top: 12px; left: 12px; } .tr { top: 12px; right: 12px; } .bl { bottom: 12px; left: 12px; } .br { bottom: 12px; right: 12px; } .mario-card-img { width: 100%; height: 100%; border: 3px solid #000; overflow: hidden; background: #000; } .mario-card-label { position: absolute; bottom: 10px; left: 10px; right: 10px; background: #000; border: 2px solid #fff; padding: 4px; z-index: 5; opacity: 0.9; } .label-text { display: block; color: #fff; font-family: 'Press Start 2P', cursive; font-size: 8px; text-align: center; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .label-text { display: block; color: #fff; font-family: 'Press Start 2P', cursive; font-size: 7px; text-align: center; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-dot { position: absolute; width: 4px; height: 4px; background: #000; opacity: 0.3; } .tl { top: 8px; left: 8px; } .tr { top: 8px; right: 8px; } .bl { bottom: 8px; left: 8px; } .br { bottom: 8px; right: 8px; } @media (max-width: 768px) { .mario-game-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .mario-card { border-width: 3px; box-shadow: 4px 4px 0 #000; } .is-big, .is-small { width: 100% !important; height: auto !important; } }