<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Exo+2:wght@200;300;400;600;700&display=swap" rel="stylesheet"><style> :root { --bg: #e8e8e8; --bg2: #f0f0f0; --surface: #f5f5f5; --card: #ffffff; --xbox-green: #107c10; --xbox-green-light: #52b043; --xbox-green-glow: #3a8a2e; --accent: #52b043; --accent2: #2d6e22; --white: #1a1a1a; --muted: #666; --border: #d0d0d0; --blade-w: 260px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--white); font-family: 'Exo 2', sans-serif; font-weight: 300; overflow-x: hidden; min-height: 100vh; } /* ── AMBIENT BG ── */ .bg-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bg-ambient::before { content: ''; position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(82,176,67,0.10) 0%, transparent 65%); top: -300px; left: -200px; } .bg-ambient::after { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(16,124,16,0.06) 0%, transparent 65%); bottom: -100px; right: -100px; } /* ── NAVBAR ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 52px; background: linear-gradient(180deg, #ffffff 0%, rgba(245,245,245,0.98) 100%); border-bottom: 1px solid #c8c8c8; display: flex; align-items: center; padding: 0 32px; gap: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .nav-logo { display: flex; align-items: center; gap: 10px; /* occupe exactement la meme largeur que le blade, padding nav (32px) deduit car deja applique sur nav */ width: calc(var(--blade-w) - 32px); flex-shrink: 0; } .xbox-ring { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--xbox-green-light); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(82,176,67,0.4), inset 0 0 6px rgba(82,176,67,0.15); position: relative; } .xbox-ring::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--xbox-green-light); box-shadow: 0 0 6px rgba(82,176,67,0.6); } /* quadrants */ .xbox-ring::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient( var(--xbox-green) 0deg 90deg, #3a7a3a 90deg 180deg, var(--xbox-green) 180deg 270deg, #3a7a3a 270deg 360deg ); opacity: 0.5; } .nav-brand { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; color: var(--white); letter-spacing: 2px; text-transform: uppercase; } .nav-tabs { display: flex; height: 100%; list-style: none; } .nav-tab { height: 100%; display: flex; align-items: center; padding: 0 22px; font-size: 13px; font-weight: 400; letter-spacing: 0.5px; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: all 0.2s; text-transform: uppercase; white-space: nowrap; } .nav-tab:hover { color: #111; border-bottom-color: rgba(82,176,67,0.5); } .nav-tab.active { color: #111; border-bottom-color: var(--xbox-green-light); background: linear-gradient(180deg, transparent, rgba(82,176,67,0.08)); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); } .nav-time { font-variant-numeric: tabular-nums; letter-spacing: 1px; } /* ── HERO / BLADE ── */ .hero { position: relative; z-index: 1; min-height: 100vh; padding-top: 52px; display: flex; } /* Left blade */ .blade { width: var(--blade-w); flex-shrink: 0; background: linear-gradient(160deg, #ffffff 0%, #f0f0f0 100%); border-right: 1px solid #d0d0d0; padding: 40px 0; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 2px 0 8px rgba(0,0,0,0.05); } .blade::after { content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--xbox-green-light), transparent); opacity: 0.5; } .blade-section { padding: 0 24px; margin-bottom: 32px; } .blade-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--xbox-green-light); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .blade-label::before { content: ''; width: 14px; height: 1px; background: var(--xbox-green-light); } .blade-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 3px; cursor: pointer; transition: all 0.15s; margin-bottom: 2px; border: 1px solid transparent; text-decoration: none; color: inherit; } .blade-item:hover, .blade-item.active { background: rgba(82,176,67,0.10); border-color: rgba(82,176,67,0.3); } .blade-item.active .blade-item-name { color: var(--xbox-green); } .blade-item-icon { font-size: 18px; width: 24px; text-align: center; } .blade-item-info {} .blade-item-name { font-size: 14px; font-weight: 500; } .blade-item-sub { font-size: 11px; color: var(--muted); margin-top: 1px; } /* Right content */ .hero-content { flex: 1; overflow: auto; padding: 48px 52px; position: relative; } /* ── FEATURED BANNER ── */ .featured-banner { position: relative; border-radius: 6px; overflow: hidden; margin-bottom: 48px; height: 240px; background: linear-gradient(135deg, #107c10 0%, #1a9a1a 50%, #52b043 100%); border: 1px solid #3a9a3a; box-shadow: 0 4px 20px rgba(16,124,16,0.2); } .featured-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.12) 0%, transparent 60%), linear-gradient(90deg, rgba(0,0,0,0.35) 30%, transparent 100%); } .featured-decor { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); font-size: 120px; opacity: 0.12; filter: blur(1px); } .featured-content { position: relative; z-index: 2; padding: 40px 44px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .featured-kicker { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 10px; } .featured-title { font-family: 'Rajdhani', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; text-shadow: 0 2px 20px rgba(0,0,0,0.8); } .featured-sub { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 24px; max-width: 380px; line-height: 1.6; } .x-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 24px; font-family: 'Exo 2', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border: none; border-radius: 3px; transition: all 0.15s; text-decoration: none; } .x-btn-primary { background: linear-gradient(180deg, var(--xbox-green-light) 0%, var(--xbox-green) 100%); color: #fff; box-shadow: 0 2px 12px rgba(82,176,67,0.4); } .x-btn-primary:hover { background: linear-gradient(180deg, var(--xbox-green-glow) 0%, var(--xbox-green-light) 100%); box-shadow: 0 4px 20px rgba(82,176,67,0.6); transform: translateY(-1px); } .x-btn-ghost { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.5); } .x-btn-ghost:hover { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.8); } .btn-icon { width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; } /* ── SECTION TITLES ── */ .section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .section-head-title { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); } .section-head-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .section-head-count { font-size: 13px; color: var(--muted); } /* ── GAME TILES ── */ .tiles-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 40px; scrollbar-width: none; } .tiles-row::-webkit-scrollbar { display: none; } .tile { flex-shrink: 0; width: 160px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); background: var(--card); cursor: pointer; transition: all 0.2s; position: relative; } .tile:hover { border-color: var(--xbox-green-light); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(82,176,67,0.4); } .tile:hover .tile-overlay { opacity: 1; } .tile-art { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; } .tile-art-nes { background: linear-gradient(135deg, #e8d0d0, #d4a0a0); } .tile-art-gb { background: linear-gradient(135deg, #d0d0e8, #a0a0d4); } .tile-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; } .tile-play { width: 36px; height: 36px; border-radius: 50%; background: var(--xbox-green); display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 0 16px rgba(82,176,67,0.6); } .tile-info { padding: 10px 12px; border-top: 1px solid var(--border); } .tile-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile-meta { display: flex; justify-content: space-between; align-items: center; } .tile-platform { font-size: 12px; color: var(--muted); } .tile-free { font-size: 11px; padding: 2px 6px; background: rgba(82,176,67,0.15); border: 1px solid rgba(82,176,67,0.4); border-radius: 2px; color: var(--xbox-green); letter-spacing: 0.5px; } /* ── EMU CARDS ── */ .emu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 48px; } .emu-card { border: 1px solid var(--border); border-radius: 4px; background: var(--card); padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; transition: all 0.2s; cursor: pointer; position: relative; overflow: hidden; } .emu-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--xbox-green-glow), var(--xbox-green)); opacity: 0; transition: opacity 0.2s; } .emu-card:hover { border-color: rgba(82,176,67,0.4); background: #f8fff8; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .emu-card:hover::before { opacity: 1; } .emu-icon-wrap { width: 48px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, rgba(82,176,67,0.12), rgba(82,176,67,0.04)); border: 1px solid rgba(82,176,67,0.2); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .emu-body {} .emu-name { font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 4px; } .emu-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; } .emu-tags { display: flex; gap: 6px; flex-wrap: wrap; } .emu-tag { font-size: 11px; padding: 2px 7px; border: 1px solid var(--border); border-radius: 2px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; } /* ── LICENCE INFO ── */ .licence-bar { background: linear-gradient(90deg, rgba(82,176,67,0.08), rgba(82,176,67,0.03)); border: 1px solid rgba(82,176,67,0.25); border-radius: 4px; padding: 16px 22px; display: flex; gap: 14px; align-items: center; margin-bottom: 20px; } .licence-icon { font-size: 22px; } .licence-text { font-size: 14px; color: #555; line-height: 1.7; } .licence-text strong { color: var(--xbox-green); } /* ── GAME MODAL / INLINE ── */ .inline-game { border: 1px solid #c8c8c8; border-radius: 6px; overflow: hidden; background: #1a2a1a; margin-bottom: 48px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .game-chrome { background: #f0f0f0; border-bottom: 1px solid #d0d0d0; padding: 10px 18px; display: flex; align-items: center; gap: 14px; } .game-chrome-title { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--xbox-green); } .game-chrome-score { margin-left: auto; font-size: 12px; color: var(--muted); } .game-chrome-score span { color: var(--xbox-green); font-weight: 600; } .game-area { position: relative; display: flex; align-items: center; justify-content: center; background: #050505; } canvas#gameCanvas { display: block; image-rendering: pixelated; } .game-start-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .game-start-overlay.hidden { display: none; } .gso-title { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--xbox-green-light); text-shadow: 0 0 20px rgba(82,176,67,0.4); } .gso-hint { font-size: 12px; color: var(--muted); letter-spacing: 1px; } /* ── FOOTER ── */ footer { position: relative; z-index: 1; background: #f0f0f0; border-top: 1px solid #d0d0d0; padding: 20px 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: 0 -2px 8px rgba(0,0,0,0.04); } .footer-brand { display: flex; align-items: center; gap: 10px; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--white); } .footer-text { font-size: 13px; color: var(--muted); } /* ── HAMBURGER BUTTON ── */ .nav-hamburger:hover { background: rgba(82,176,67,0.1); }
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; cursor: pointer; border: none; background: transparent; border-radius: 4px; margin-right: 12px; transition: background 0.15s; -webkit-appearance: none; /* Patch Safari iOS */
}
.nav-hamburger span { display: block; height: 2px; background: #107c10; background-color: #107c10 !important; -webkit-background-color: #107c10; border-radius: 2px; transition: all 0.25s; transform-origin: center; opacity: 1 !important;
} .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── MOBILE DRAWER ── */ .mobile-drawer { display: none; position: fixed; top: 52px; left: 0; right: 0; bottom: 0; z-index: 150; pointer-events: none; } .mobile-drawer.open { pointer-events: all; } .mobile-drawer-inner { width: 280px; height: 100%; background: #ffffff; border-right: 2px solid rgba(82,176,67,0.3); overflow-y: auto; padding: 16px 0 32px; box-shadow: 4px 0 20px rgba(0,0,0,0.15); transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); } .mobile-drawer.open .mobile-drawer-inner { transform: translateX(0); } .mobile-drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s; z-index: -1; } .mobile-drawer.open .mobile-drawer-overlay { opacity: 1; } .mobile-drawer-tabs { padding: 0 16px 16px; border-bottom: 1px solid #e0e0e0; margin-bottom: 8px; } .mobile-drawer-tab-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--xbox-green); margin-bottom: 8px; padding-left: 4px; } .mobile-nav-tab { display: flex; align-items: center; padding: 10px 12px; border-radius: 3px; font-size: 13px; font-weight: 500; color: #444; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .mobile-nav-tab:hover, .mobile-nav-tab.active { background: rgba(82,176,67,0.10); border-color: rgba(82,176,67,0.3); color: var(--xbox-green); } .mobile-nav-tab a { text-decoration: none; color: inherit; display: block; width: 100%;
} /* ── SUPPORT PAGE ── */ .support-wrap { display: flex; align-items: center; justify-content: center; flex: 1; padding: 52px; } .support-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 52px 60px; max-width: 560px; width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,0.08); position: relative; overflow: hidden; } .support-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--xbox-green-light), var(--xbox-green)); } .support-title { font-family: 'Rajdhani', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); margin-bottom: 28px; display: flex; align-items: center; gap: 14px; } .support-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .support-body { font-size: 15px; color: #444; line-height: 1.8; } .support-body a { color: var(--xbox-green); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(16,124,16,0.3); transition: border-color 0.2s, color 0.2s; } .support-body a:hover { color: var(--xbox-green-light); border-bottom-color: var(--xbox-green-light); } .support-arrow { color: var(--xbox-green-light); margin-right: 4px; } .support-reply { margin-top: 16px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .support-reply::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--xbox-green-light); flex-shrink: 0; } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .blade { display: none; } .hero-content { padding: 28px 20px; } .emu-list { grid-template-columns: 1fr; } footer { padding: 20px; } .nav-tabs { display: none; } .nav-hamburger { display: flex; } .mobile-drawer { display: block; } .support-wrap { padding: 28px 20px; } .support-card { padding: 32px 24px; } } /* ── ANIMATIONS ── */ @keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } .hero-content > * { animation: slideIn 0.5s ease both; } .hero-content > *:nth-child(1) { animation-delay: 0.05s; } .hero-content > *:nth-child(2) { animation-delay: 0.12s; } .hero-content > *:nth-child(3) { animation-delay: 0.18s; } .hero-content > *:nth-child(4) { animation-delay: 0.24s; } .hero-content > *:nth-child(5) { animation-delay: 0.30s; } .hero-content > *:nth-child(6) { animation-delay: 0.36s; } .nav-tab a { color: inherit; text-decoration: none; display: flex; align-items: center; width: 100%; height: 100%; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit;
}
/* ── WELCOME PAGE ── */ .welcome-wrap { padding: 48px 52px; max-width: 820px; } .welcome-kicker { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--xbox-green-light); margin-bottom: 12px; } .welcome-title { font-family: 'Rajdhani', sans-serif; font-size: 42px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); line-height: 1.1; margin-bottom: 24px; } .welcome-title span { color: var(--xbox-green-light); } .welcome-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--xbox-green-light), transparent); margin-bottom: 28px; border-radius: 2px; } .welcome-text { font-size: 15px; color: #555; line-height: 1.9; margin-bottom: 16px; max-width: 640px; } .welcome-highlight { display: inline; color: var(--xbox-green); font-weight: 600; } .welcome-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .welcome-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 24px 20px; position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .welcome-card:hover { border-color: rgba(82,176,67,0.4); transform: translateY(-2px); } .welcome-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--xbox-green-light), transparent); } .welcome-card-icon { font-size: 28px; margin-bottom: 12px; } .welcome-card-title { font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--white); margin-bottom: 8px; } .welcome-card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; } @media (max-width: 768px) { .welcome-wrap { padding: 28px 20px; } .welcome-title { font-size: 28px; } .welcome-cards { grid-template-columns: 1fr; } } /* ── NEWS ── */ .news-section { margin-top: 48px; } .news-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .news-header-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .news-list { display: flex; flex-direction: column; gap: 16px; } .news-card { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--xbox-green-light); border-radius: 6px; padding: 22px 24px; transition: border-color 0.2s, box-shadow 0.2s; } .news-card:hover { border-color: rgba(82,176,67,0.5); border-left-color: var(--xbox-green); box-shadow: 0 2px 12px rgba(0,0,0,0.07); } .news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .news-date { font-size: 12px; color: var(--muted); } .news-tag { font-size: 10px; padding: 2px 8px; background: rgba(82,176,67,0.12); border: 1px solid rgba(82,176,67,0.3); border-radius: 2px; color: var(--xbox-green); letter-spacing: 0.5px; text-transform: uppercase; } .news-title { font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); margin-bottom: 8px; } .news-body { font-size: 13px; color: #555; line-height: 1.75; } /* ── LOGIN PAGE ── */ .login-wrap { display: flex; align-items: center; justify-content: center; flex: 1; min-height: calc(100vh - 52px - 65px); padding: 40px 24px; } .login-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 48px 52px; width: 100%; max-width: 420px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); position: relative; overflow: hidden; } .login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--xbox-green), var(--xbox-green-light), transparent); } .login-title { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); margin-bottom: 32px; display: flex; align-items: center; gap: 12px; } .login-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .login-field { margin-bottom: 22px; } .login-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .login-input { width: 100%; background: #f7f7f7; border: 1px solid var(--border); border-radius: 4px; padding: 11px 14px; font-family: 'Exo 2', sans-serif; font-size: 14px; color: var(--white); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .login-input:focus { border-color: var(--xbox-green-light); box-shadow: 0 0 0 3px rgba(82,176,67,0.12); background: #fff; } .login-input::placeholder { color: #bbb; } .login-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 12px; } .login-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--muted); user-select: none; } .login-remember input[type="checkbox"] { appearance: none; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 3px; background: #f7f7f7; cursor: pointer; position: relative; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; } .login-remember input[type="checkbox"]:checked { background: var(--xbox-green-light); border-color: var(--xbox-green); } .login-remember input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } .login-forgot { font-size: 12px; color: var(--xbox-green); text-decoration: none; border-bottom: 1px solid rgba(16,124,16,0.25); transition: color 0.2s, border-color 0.2s; white-space: nowrap; } .login-forgot:hover { color: var(--xbox-green-light); border-bottom-color: var(--xbox-green-light); } .login-submit { width: 100%; background: linear-gradient(135deg, var(--xbox-green), var(--xbox-green-light)); color: #fff; border: none; border-radius: 4px; padding: 13px; font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .login-submit:hover { opacity: 0.9; transform: translateY(-1px); } .login-submit:active { transform: translateY(0); } @media (max-width: 768px) { .login-card { padding: 32px 24px; } } /* ── OPTIONS PAGE ── */ .options-wrap { padding: 48px 52px; max-width: 680px; } .options-page-title { font-family: 'Rajdhani', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); margin-bottom: 36px; display: flex; align-items: center; gap: 14px; } .options-page-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } /* ── SECTION ── */ .options-section { background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .options-section-header { background: #f5f5f5; border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; gap: 10px; } .options-section-header::before { content: ''; width: 3px; height: 16px; background: var(--xbox-green-light); border-radius: 2px; flex-shrink: 0; } .options-section-title { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--white); } .options-section-body { padding: 28px 24px; } /* ── FIELD ── */ .options-field { margin-bottom: 20px; } .options-field:last-child { margin-bottom: 0; } .options-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .options-input { width: 100%; background: #f7f7f7; border: 1px solid var(--border); border-radius: 4px; padding: 11px 14px; font-family: 'Exo 2', sans-serif; font-size: 14px; color: var(--white); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .options-input:focus { border-color: var(--xbox-green-light); box-shadow: 0 0 0 3px rgba(82,176,67,0.12); background: #fff; } .options-input::placeholder { color: #bbb; } .options-save-btn { margin-top: 20px; background: linear-gradient(135deg, var(--xbox-green), var(--xbox-green-light)); color: #fff; border: none; border-radius: 4px; padding: 11px 28px; font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .options-save-btn:hover { opacity: 0.9; transform: translateY(-1px); } .options-save-btn:active { transform: translateY(0); } /* ── UNSUB ── */ .unsub-row { display: flex; align-items: flex-start; gap: 14px; } .unsub-checkbox { appearance: none; width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 3px; background: #f7f7f7; cursor: pointer; position: relative; flex-shrink: 0; margin-top: 2px; transition: border-color 0.2s, background 0.2s; } .unsub-checkbox:checked { background: #d9534f; border-color: #c0392b; } .unsub-checkbox:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 10px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); } .unsub-label { cursor: pointer; line-height: 1.6; } .unsub-label-title { font-size: 14px; color: var(--white); font-weight: 500; margin-bottom: 4px; } .unsub-warning { font-size: 13px; color: #c0392b; font-weight: 600; display: flex; align-items: center; gap: 6px; } .unsub-warning::before { content: '⚠'; font-size: 13px; } @media (max-width: 768px) { .options-wrap { padding: 28px 20px; } } /* ── PASSWORD LOST PAGE ── */ .pwlost-wrap { display: flex; align-items: center; justify-content: center; flex: 1; min-height: calc(100vh - 52px - 65px); padding: 40px 24px; } .pwlost-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 48px 52px; width: 100%; max-width: 420px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); position: relative; overflow: hidden; } .pwlost-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--xbox-green), var(--xbox-green-light), transparent); } .pwlost-icon { font-size: 36px; margin-bottom: 16px; display: block; text-align: center; } .pwlost-title { font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } .pwlost-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .pwlost-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 28px; } .pwlost-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .pwlost-input { width: 100%; background: #f7f7f7; border: 1px solid var(--border); border-radius: 4px; padding: 11px 14px; font-family: 'Exo 2', sans-serif; font-size: 14px; color: var(--white); outline: none; margin-bottom: 22px; transition: border-color 0.2s, box-shadow 0.2s; } .pwlost-input:focus { border-color: var(--xbox-green-light); box-shadow: 0 0 0 3px rgba(82,176,67,0.12); background: #fff; } .pwlost-input::placeholder { color: #bbb; } .pwlost-submit { width: 100%; background: linear-gradient(135deg, var(--xbox-green), var(--xbox-green-light)); color: #fff; border: none; border-radius: 4px; padding: 13px; font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .pwlost-submit:hover { opacity: 0.9; transform: translateY(-1px); } .pwlost-submit:active { transform: translateY(0); } .pwlost-back { display: block; text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; } .pwlost-back:hover { color: var(--xbox-green); } .pwlost-back span { color: var(--xbox-green); font-weight: 600; } /* success state */ .pwlost-success { display: none; text-align: center; padding: 16px 0 4px; } .pwlost-success-icon { font-size: 40px; margin-bottom: 12px; } .pwlost-success-msg { font-size: 14px; color: var(--xbox-green); font-weight: 600; margin-bottom: 6px; } .pwlost-success-sub { font-size: 12px; color: var(--muted); line-height: 1.6; } @media (max-width: 768px) { .pwlost-card { padding: 32px 24px; } } /* ── REGISTER PAGE ── */ .reg-wrap { display: flex; align-items: flex-start; justify-content: center; min-height: calc(100vh - 52px - 65px); padding: 48px 24px; } .reg-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 48px 52px; width: 100%; max-width: 480px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); position: relative; overflow: hidden; } .reg-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--xbox-green), var(--xbox-green-light), transparent); } .reg-title { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } .reg-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .reg-intro { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 32px; } .reg-intro strong { color: var(--xbox-green); } /* ── FIELD ── */ .reg-field { margin-bottom: 24px; } .reg-field-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .reg-label { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); } .reg-required { color: var(--xbox-green-light); font-size: 14px; line-height: 1; } .reg-arrow { color: var(--xbox-green-light); font-size: 13px; margin-left: auto; } .reg-input { width: 100%; background: #f7f7f7; border: 1px solid var(--border); border-radius: 4px; padding: 11px 14px; font-family: 'Exo 2', sans-serif; font-size: 14px; color: var(--white); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .reg-input:focus { border-color: var(--xbox-green-light); box-shadow: 0 0 0 3px rgba(82,176,67,0.12); background: #fff; } .reg-input::placeholder { color: #bbb; } .reg-input.error { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,0.10); } .reg-input.valid { border-color: var(--xbox-green-light); } .reg-hint { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.5; display: flex; align-items: flex-start; gap: 5px; } .reg-hint::before { content: 'ℹ'; font-size: 11px; color: var(--xbox-green-light); flex-shrink: 0; margin-top: 1px; } .reg-hint.error-msg { color: #e74c3c; display: none; } .reg-hint.error-msg::before { content: '✕'; color: #e74c3c; } /* ── DIVIDER ── */ .reg-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; } /* ── SUBMIT ── */ .reg-submit { width: 100%; background: linear-gradient(135deg, var(--xbox-green), var(--xbox-green-light)); color: #fff; border: none; border-radius: 4px; padding: 13px; font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s, transform 0.1s; margin-top: 4px; } .reg-submit:hover { opacity: 0.9; transform: translateY(-1px); } .reg-submit:active { transform: translateY(0); } .reg-login { display: block; text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); text-decoration: none; } .reg-login a { color: var(--xbox-green); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(16,124,16,0.25); } .reg-login a:hover { color: var(--xbox-green-light); } @media (max-width: 768px) { .reg-card { padding: 32px 24px; } .reg-wrap { padding: 28px 20px; } } /* ── GAMECUBE PAGE ── */ .gc-wrap { padding: 44px 52px; max-width: 900px; width: 100%; } .gc-page-title { font-family: 'Rajdhani', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); margin-bottom: 32px; display: flex; align-items: center; gap: 14px; } .gc-page-title span { color: var(--xbox-green-light); } .gc-page-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } /* ── ALPHABET BAR ── */ .alpha-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 36px; padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .alpha-btn { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; padding: 6px 11px; border-radius: 3px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; text-transform: uppercase; } .alpha-btn:hover { background: rgba(82,176,67,0.10); border-color: rgba(82,176,67,0.3); color: var(--xbox-green); } .alpha-btn.active { background: rgba(82,176,67,0.15); border-color: var(--xbox-green-light); color: var(--xbox-green); } .alpha-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* ── TABLE ── */ .gc-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .gc-table { width: 100%; border-collapse: collapse; } .gc-table thead tr { background: #f0f0f0; border-bottom: 2px solid var(--border); } .gc-table th { font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding: 14px 20px; text-align: left; } .gc-table th:last-child { text-align: center; width: 130px; } .gc-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background 0.15s; } .gc-table tbody tr:last-child { border-bottom: none; } .gc-table tbody tr:hover { background: rgba(82,176,67,0.04); } .gc-table tbody tr.hidden { display: none; } .gc-table td { padding: 13px 20px; font-size: 14px; color: #444; vertical-align: middle; } .gc-game-name { font-weight: 500; color: var(--white); } .gc-table td:nth-child(2) { font-size: 22px; text-align: center; } .gc-dl-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: linear-gradient(135deg, var(--xbox-green), var(--xbox-green-light)); color: #fff; border: none; border-radius: 3px; padding: 7px 14px; font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s, transform 0.1s; text-decoration: none; line-height: 1.2; } .gc-dl-btn:hover { opacity: 0.88; transform: translateY(-1px); } .gc-count { font-size: 12px; color: var(--muted); padding: 12px 20px; background: #f8f8f8; border-top: 1px solid var(--border); text-align: right; } .gc-count span { color: var(--xbox-green); font-weight: 600; } /* ── SEARCH ── */ .gc-search-wrap { margin-bottom: 16px; } .gc-search-input { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; font-family: 'Exo 2', sans-serif; font-size: 14px; color: var(--white); outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .gc-search-input:focus { border-color: var(--xbox-green-light); box-shadow: 0 0 0 3px rgba(82,176,67,0.12); } .gc-search-input::placeholder { color: #bbb; } /* ── TOOLTIP ── */ .flag-wrap { position: relative; display: inline-block; cursor: default; } .flag-wrap .tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; white-space: nowrap; padding: 5px 10px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 50; } .flag-wrap .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #111; } .flag-wrap:hover .tooltip { opacity: 1; } @media (max-width: 480px) { .gc-wrap { padding: 28px 16px; } .gc-table th:nth-child(2), .gc-table td:nth-child(2) { display: none; } } /* ── ALPHABET BAR ── */ .alpha-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 36px; padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .alpha-link { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-decoration: none; text-transform: uppercase; transition: color 0.15s; padding: 2px 1px; } .alpha-link:hover { color: var(--xbox-green); } .alpha-link.alpha-link-all { color: var(--xbox-green); font-weight: 700; } .alpha-bar { color: #ccc; font-size: 13px; } .go-back { display: inline-flex; align-items: center; gap: 6px; font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-decoration: none; margin-bottom: 24px; transition: color 0.15s; } .go-back:hover { color: var(--xbox-green); } /* ── GAME PAGE ── */ .game-wrap { padding: 44px 52px; max-width: 960px; width: 100%; } .game-header { display: flex; gap: 32px; margin-bottom: 40px; align-items: flex-start; } .game-cover { flex-shrink: 0; width: 200px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.12); } .game-cover img { width: 100%; height: auto; display: block; } .game-info { flex: 1; } .game-console-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--xbox-green); background: rgba(82,176,67,0.10); border: 1px solid rgba(82,176,67,0.25); border-radius: 3px; padding: 4px 10px; margin-bottom: 14px; } .game-title { font-family: 'Rajdhani', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: 2px; color: var(--white); margin-bottom: 20px; line-height: 1.1; } .game-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .game-meta-row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .game-meta-label { color: var(--muted); width: 90px; flex-shrink: 0; } .game-meta-value { color: #333; font-weight: 500; } .game-dl-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--xbox-green), var(--xbox-green-light)); color: #fff; border: none; border-radius: 4px; padding: 13px 28px; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 4px 12px rgba(16,124,16,0.25); } .game-dl-btn:hover { opacity: 0.9; transform: translateY(-1px); } .game-dl-btn .dl-size { font-size: 11px; font-weight: 400; letter-spacing: 0.5px; opacity: 0.85; border-left: 1px solid rgba(255,255,255,0.4); padding-left: 10px; } .game-dl-btn-fullspeed { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #e65c00, #e08000); color: #fff; border: none; border-radius: 4px; padding: 13px 28px; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 4px 12px rgba(230,92,0,0.35); } .game-dl-btn-fullspeed:hover { opacity: 0.9; transform: translateY(-1px); } .game-dl-btn-fullspeed .dl-size { font-size: 11px; font-weight: 400; letter-spacing: 0.5px; opacity: 0.75; border-left: 1px solid rgba(255,255,255,0.4); padding-left: 10px; } .game-dl-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* ── SCREENSHOTS ── */ .game-section-title { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--white); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .game-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .screenshots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; } .screenshot { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .screenshot:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 6px 20px rgba(0,0,0,0.15); border-color: rgba(82,176,67,0.4); } .screenshot img { width: 100%; height: auto; display: block; } .screenshot-label { font-size: 11px; color: var(--muted); padding: 7px 12px; background: #f8f8f8; border-top: 1px solid var(--border); letter-spacing: 0.5px; text-transform: uppercase; } /* ── LIGHTBOX ── */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 500; align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); } .lightbox-close { position: absolute; top: 20px; right: 28px; font-size: 32px; color: #fff; cursor: pointer; line-height: 1; opacity: 0.7; transition: opacity 0.15s; } .lightbox-close:hover { opacity: 1; } @media (max-width: 768px) { .game-wrap { padding: 28px 16px; } .game-header { flex-direction: column; } .game-cover { width: 100%; max-width: 220px; } .screenshots-grid { grid-template-columns: 1fr; } } /* ── EMULATOR OS LINKS ── */ .emu-os-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 40px; } @media (max-width: 900px) { .emu-os-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .emu-os-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .emu-os-grid { grid-template-columns: 1fr; } } .emu-os-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .emu-os-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #f5f5f5; border-bottom: 1px solid var(--border); } .emu-os-icon { font-size: 18px; } .emu-os-name { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--white); } .emu-os-links { padding: 12px 0; display: flex; flex-direction: column; } .emu-os-link { display: flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: 13px; font-weight: 500; color: #444; text-decoration: none; transition: background 0.15s, color 0.15s; border-left: 3px solid transparent; } .emu-os-link::before { content: '»'; color: var(--xbox-green-light); font-size: 12px; } .emu-os-link:hover { background: rgba(82,176,67,0.07); color: var(--xbox-green); border-left-color: var(--xbox-green-light); } /* ── FULLSPEED LOGIN BLOCK ── */ .fullspeed-block { background: linear-gradient(135deg, #fff8f0, #fff3e0); border: 1px solid #f0c070; border-left: 4px solid #e65c00; border-radius: 8px; padding: 24px 28px; margin-bottom: 28px; } .fullspeed-block-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #e65c00; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .fullspeed-block-subtitle { font-size: 14px; color: #555; margin-bottom: 18px; font-weight: 400; } .fullspeed-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .fullspeed-fields input { flex: 1; min-width: 180px; padding: 10px 14px; border: 1px solid #d0b080; border-radius: 4px; background: #fff; font-family: 'Exo 2', sans-serif; font-size: 14px; color: #1a1a1a; outline: none; transition: border-color 0.2s; } .fullspeed-fields input:focus { border-color: #e65c00; } .fullspeed-cancel { font-size: 12px; color: #999; margin-bottom: 14px; } .fullspeed-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .fullspeed-already { font-size: 13px; color: #666; } .fullspeed-already a { color: #e65c00; text-decoration: none; font-weight: 600; } .fullspeed-already a:hover { text-decoration: underline; } .fullspeed-login-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #e65c00, #f9a825); color: #fff; border: none; border-radius: 4px; padding: 10px 24px; font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 4px 12px rgba(230,92,0,0.3); } .fullspeed-login-btn:hover { opacity: 0.9; transform: translateY(-1px); } /* ── MAME BIOS SECTION ── */ .game-dl-btn-purple { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #6a0dad, #9b59b6); color: #fff; border: none; border-radius: 4px; padding: 13px 28px; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 4px 12px rgba(106,13,173,0.35); } .game-dl-btn-purple:hover { opacity: 0.9; transform: translateY(-1px); }</style><title>WebRoms</title><script async src="https://www.googletagmanager.com/gtag/js?id=G-465F8PLLWC"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-465F8PLLWC'); </script><meta name="identifier-url" content="https://www.webroms.net" /><meta name="keywords" content="roms, isos, download games, emulators, retrogaming, webroms" /><meta name="description" content="" /><meta name="robots" content="index, follow, noarchive" /><link rel="icon" href="/favicon.ico"><meta name="google" value="notranslate" /></head><body><div class="bg-ambient"></div><nav><div class="nav-hamburger" id="hamburger" role="button" aria-label="Menu"><span></span><span></span><span></span></div><a href='/' style='text-decoration:none;'><div class="nav-logo"><span class="nav-brand">WebRoms</span></div></a><ul class="nav-tabs"><li class="nav-tab active"><a href='/'>Home</a></li><li class="nav-tab"><a href="/index.php?page=login">Login</a></li><li class="nav-tab"><a href="/index.php?page=register">Register</a></li><li class="nav-tab"><a href='/index.php?page=support'>Support</a></li></ul></nav><div class="mobile-drawer" id="mobileDrawer"><div class="mobile-drawer-overlay" id="drawerOverlay"></div><div class="mobile-drawer-inner"><div class="mobile-drawer-tabs"><div class="mobile-drawer-tab-label">Navigation</div><li class="mobile-nav-tab active"><a href='/'>Home</a></li><li class="mobile-nav-tab"><a href="/index.php?page=login">Login</a></li><li class="mobile-nav-tab"><a href="/index.php?page=register">Register</a></li><li class="mobile-nav-tab"><a href='/index.php?page=support'>Support</a></li></div><div class="blade-section"><div class="blade-label">Consoles</div><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_NES"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Entertainment System.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">NES</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Famicom"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Famicom.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Famicom</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Master_System"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Master System.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Master System</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Super_Nintendo"><span class="blade-item-icon"><img src='images/icones-launchbox/Super Nintendo Entertainment System.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Super Nintendo</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Mega_Drive"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Genesis.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Mega Drive</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Sega_32X"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega 32X.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Sega 32X</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Sega_CD"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega CD.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Sega CD</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PC_Engine"><span class="blade-item-icon"><img src='images/icones-launchbox/NEC PC Engine.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PC Engine</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PC_Engine_CD"><span class="blade-item-icon"><img src='images/icones-launchbox/NEC PC Engine CD.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PC Engine CD</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Jaguar&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/Atari Jaguar.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Jaguar</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Neo_Geo_CD"><span class="blade-item-icon"><img src='images/icones-launchbox/SNK Neo Geo CD.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Neo-Geo CD</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PlayStation_1"><span class="blade-item-icon"><img src='images/icones-launchbox/Sony Playstation.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PlayStation 1</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_64"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo 64.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Nintendo 64</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_64DD&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo 64DD.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Nintendo 64DD</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Saturn"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Saturn & Japanese.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Saturn</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Dreamcast"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Dreamcast.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Dreamcast</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=GameCube"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo GameCube.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">GameCube</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PlayStation_2"><span class="blade-item-icon"><img src='images/icones-launchbox/Sony Playstation 2.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PlayStation 2</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Wii"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Wii.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Wii</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=WiiWare"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Wii.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">WiiWare</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=XBLA"><span class="blade-item-icon"><img src='images/icones-launchbox/Microsoft Xbox 360.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Xbox Live Arcade</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Wii_U"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Wii U.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Wii U</div></div></a></div><div class="blade-section"><div class="blade-label">Handled (Nintendo)</div><a class="blade-item" href="index.php?page=gamelist&console=Virtual_Boy&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Virtual Boy.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Virtual Boy</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Game_Boy"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Game Boy.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Game Boy</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Game_Boy_Color"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Game Boy Color.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Game Boy Color</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Game_Boy_Advance"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Game Boy Advance.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Game Boy Advance</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_DS"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo DS.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Nintendo DS</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_3DS"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo 3DS.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Nintendo 3DS</div></div></a></div><div class="blade-section"><div class="blade-label">Handled (Others)</div><a class="blade-item" href="index.php?page=gamelist&console=Game_Gear"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Game Gear.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Game Gear</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Neo_Geo_Pocket&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/SNK Neo Geo Pocket.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Neo-Geo Pocket</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Neo_Geo_Pocket_Color&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/SNK Neo Geo Pocket Color.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Neo-Geo Pocket Color</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=WonderSwan&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/WonderSwan.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">WonderSwan</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=WonderSwan_Color&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/WonderSwan Color.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">WonderSwan Color</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PSP"><span class="blade-item-icon"><img src='images/icones-launchbox/Sony PSP.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PSP</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PSP_(PSN)"><span class="blade-item-icon"><img src='images/icones-launchbox/Sony PSP Minis.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PSP (PSN)</div></div></a></div><div class="blade-section"><div class="blade-label">Arcade</div><a class="blade-item" href="index.php?page=gamelist&console=Mame"><span class="blade-item-icon"><img src='images/icones-launchbox/Arcade.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Mame (0.287)</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Final_Burn_Neo"><span class="blade-item-icon"><img src='images/icones-launchbox/SNK Neo Geo MVS.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Final Burn Neo</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=TeknoParrot"><span class="blade-item-icon"><img src='images/icones-launchbox/Arcade2.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">TeknoParrot</div></div></a></div></div></div><div class="hero"><aside class="blade"><div class="blade-section"><div class="blade-label">Consoles</div><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_NES"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Entertainment System.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">NES</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Famicom"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Famicom.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Famicom</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Master_System"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Master System.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Master System</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Super_Nintendo"><span class="blade-item-icon"><img src='images/icones-launchbox/Super Nintendo Entertainment System.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Super Nintendo</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Mega_Drive"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Genesis.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Mega Drive</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Sega_32X"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega 32X.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Sega 32X</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Sega_CD"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega CD.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Sega CD</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PC_Engine"><span class="blade-item-icon"><img src='images/icones-launchbox/NEC PC Engine.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PC Engine</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PC_Engine_CD"><span class="blade-item-icon"><img src='images/icones-launchbox/NEC PC Engine CD.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PC Engine CD</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Jaguar&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/Atari Jaguar.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Jaguar</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Neo_Geo_CD"><span class="blade-item-icon"><img src='images/icones-launchbox/SNK Neo Geo CD.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Neo-Geo CD</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PlayStation_1"><span class="blade-item-icon"><img src='images/icones-launchbox/Sony Playstation.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PlayStation 1</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_64"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo 64.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Nintendo 64</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_64DD&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo 64DD.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Nintendo 64DD</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Saturn"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Saturn & Japanese.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Saturn</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Dreamcast"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Dreamcast.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Dreamcast</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=GameCube"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo GameCube.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">GameCube</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PlayStation_2"><span class="blade-item-icon"><img src='images/icones-launchbox/Sony Playstation 2.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PlayStation 2</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Wii"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Wii.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Wii</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=WiiWare"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Wii.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">WiiWare</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=XBLA"><span class="blade-item-icon"><img src='images/icones-launchbox/Microsoft Xbox 360.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Xbox Live Arcade</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Wii_U"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Wii U.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Wii U</div></div></a></div><div class="blade-section"><div class="blade-label">Handled (Nintendo)</div><a class="blade-item" href="index.php?page=gamelist&console=Virtual_Boy&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Virtual Boy.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Virtual Boy</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Game_Boy"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Game Boy.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Game Boy</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Game_Boy_Color"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Game Boy Color.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Game Boy Color</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Game_Boy_Advance"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo Game Boy Advance.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Game Boy Advance</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_DS"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo DS.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Nintendo DS</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Nintendo_3DS"><span class="blade-item-icon"><img src='images/icones-launchbox/Nintendo 3DS.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Nintendo 3DS</div></div></a></div><div class="blade-section"><div class="blade-label">Handled (Others)</div><a class="blade-item" href="index.php?page=gamelist&console=Game_Gear"><span class="blade-item-icon"><img src='images/icones-launchbox/Sega Game Gear.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Game Gear</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Neo_Geo_Pocket&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/SNK Neo Geo Pocket.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Neo-Geo Pocket</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Neo_Geo_Pocket_Color&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/SNK Neo Geo Pocket Color.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Neo-Geo Pocket Color</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=WonderSwan&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/WonderSwan.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">WonderSwan</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=WonderSwan_Color&lettre=ALL"><span class="blade-item-icon"><img src='images/icones-launchbox/WonderSwan Color.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">WonderSwan Color</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PSP"><span class="blade-item-icon"><img src='images/icones-launchbox/Sony PSP.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PSP</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=PSP_(PSN)"><span class="blade-item-icon"><img src='images/icones-launchbox/Sony PSP Minis.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">PSP (PSN)</div></div></a></div><div class="blade-section"><div class="blade-label">Arcade</div><a class="blade-item" href="index.php?page=gamelist&console=Mame"><span class="blade-item-icon"><img src='images/icones-launchbox/Arcade.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Mame (0.287)</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=Final_Burn_Neo"><span class="blade-item-icon"><img src='images/icones-launchbox/SNK Neo Geo MVS.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">Final Burn Neo</div></div></a><a class="blade-item" href="index.php?page=gamelist&console=TeknoParrot"><span class="blade-item-icon"><img src='images/icones-launchbox/Arcade2.png' alt='' /></span><div class="blade-item-info"><div class="blade-item-name">TeknoParrot</div></div></a></div></aside><main class="hero-content"><div class="welcome-wrap"><div class="welcome-kicker">● Welcome to WebRoms</div><div class="welcome-title"><span>Retro games</span> for you</div><div class="welcome-divider"></div><p class="welcome-text"> Complete your <span class="welcome-highlight">retro gaming</span> collection right row! </p><div class="welcome-cards"><div class="welcome-card"><div class="welcome-card-icon">🕹️</div><div class="welcome-card-title">Emulators</div><div class="welcome-card-desc">A good selection of working and modern emulators for great compatibility!</div></div><div class="welcome-card"><div class="welcome-card-icon">🎮</div><div class="welcome-card-title">Games</div><div class="welcome-card-desc">Are perfeclty ripped, you can play the games without having to worry about a black screen!</div></div><div class="welcome-card"><div class="welcome-card-icon">⚡</div><div class="welcome-card-title">For you</div><div class="welcome-card-desc">No ads, no bad archive, no exes.<br />Enjoy the content and have a good time!</div></div></div><div class="news-section"><div class="news-header"><div class="welcome-kicker" style="margin-bottom:0;">● Latest news</div><div class="news-header-line"></div></div><div class="news-list"><div class="news-card"><div class="news-meta"><span class="news-date">06 May 2026</span><span class="news-tag">Release</span></div><div class="news-title">WebRoms is available</div><div class="news-body">Initial release of WebRoms!</div></div></div></div></div></main></div><footer><div class="footer-brand"></div><p class="footer-text"></p></footer><script>const hamburger=document.getElementById('hamburger'),drawer=document.getElementById('mobileDrawer'),overlay=document.getElementById('drawerOverlay');function toggleDrawer(){const isOpen=drawer.classList.toggle('open');hamburger.classList.toggle('open',isOpen);document.body.style.overflow=isOpen?'hidden':'';}hamburger.addEventListener('click',toggleDrawer);overlay.addEventListener('click',toggleDrawer);document.querySelectorAll('.mobile-nav-tab').forEach(tab=>{tab.addEventListener('click',function(){document.querySelectorAll('.mobile-nav-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active');toggleDrawer();});});</script></body></html>