/* ============================================================ EZOIC LIVE GAMES — Retro Gaming Theme Pixel-faithful port of the original retro gaming portal UI ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); * , *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ---- GAP HARDENING: nothing may push the page down or leave white space ---- */ html { margin-top: 0 !important; padding-top: 0 !important; } html { margin-bottom: 0 !important; padding-bottom: 0 !important; } body { margin: 0 !important; padding: 0 !important; background-color: #5C94FC; background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 2px, transparent 3px); background-size: 50px 50px; background-attachment: fixed; font-family: 'Fredoka', ui-sans-serif, system-ui, sans-serif; color: #1e293b; transition: background-color .3s ease, color .3s ease; } img { max-width: 100%; } /* Anything WP plugins/hosts inject directly under (above the header or below the footer) is invisible junk - hide it so no gap can ever appear. */ body > *:not(.eza-app):not(#wpadminbar):not(script):not(style):not(link):not(noscript):not(template) { display: none !important; margin: 0 !important; padding: 0 !important; } /* The WP admin bar must overlay the page, never push it down. */ #wpadminbar { position: fixed !important; top: 0 !important; } body.admin-bar { padding-top: 0 !important; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, textarea { font-family: inherit; } .eza-app { min-height: 100vh; display: flex; flex-direction: column; font-weight: 500; } .eza-main { max-width: 80rem; margin: 3rem auto 0; padding: 0 1rem; flex: 1 1 0%; width: 100%; } /* ============ HEADER ============ */ .eza-header { background-color: #E52521; color: #fff; border-bottom: 8px solid #000; box-shadow: 0 8px 0 rgba(0,0,0,0.3); position: sticky; top: 0; z-index: 50; } .eza-header-inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; height: 6rem; display: flex; align-items: center; justify-content: space-between; } .eza-brand { display: flex; align-items: center; gap: 1rem; cursor: pointer; } .eza-logo-box { background-color: #FBD000; padding: .75rem; border: 4px solid #000; box-shadow: 4px 4px 0 #000; display: inline-flex; align-items: center; justify-content: center; } .eza-logo-box svg { width: 2.5rem; height: 2.5rem; color: #000; display: block; } .eza-brand-text { display: flex; flex-direction: column; } .eza-title { font-size: 1.5rem; line-height: 1.1; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 #000; margin: 0; } .eza-subtitle { font-size: 10px; font-weight: 600; color: #FBD000; letter-spacing: .025em; text-transform: uppercase; text-shadow: 1px 1px 0 #000; display: none; margin-top: 2px; } .eza-header-logo { display: none; pointer-events: none; margin-left: .5rem; } .eza-header-logo img { height: 5rem; object-fit: contain; filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.5)); } .eza-header-actions { display: flex; align-items: center; gap: 1.5rem; } /* search */ .eza-search { position: relative; display: none; width: 20rem; } .eza-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; color: #000; } .eza-search input { width: 100%; padding: 1rem 1rem 1rem 3.5rem; border: 4px solid #000; background: #fff; color: #000; font-weight: 600; font-size: 1.125rem; text-transform: uppercase; box-shadow: 6px 6px 0 #000; outline: none; transition: all .2s; } .eza-search input::placeholder { color: rgba(0,0,0,.5); } .eza-search input:focus { background-color: #FBD000; } /* accent buttons */ .eza-btn-accent { background-color: #FBD000; padding: .75rem; border: 4px solid #000; box-shadow: 4px 4px 0 #000; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #000; } .eza-btn-accent:hover { transform: translateY(2px); box-shadow: 2px 2px 0 #000; } .eza-btn-accent svg { width: 2rem; height: 2rem; color: #000; } .eza-toggle-icon { font-size: 1.25rem; line-height: 1; } /* ============ SIDEBAR MENU ============ */ .eza-overlay { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: all .25s; } .eza-overlay.is-open { opacity: 1; visibility: visible; } .eza-sidebar { width: 100%; max-width: 28rem; background: #5C94FC; height: 100%; border-left: 8px solid #000; box-shadow: -8px 0 0 rgba(0,0,0,.3); position: relative; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s ease; } .eza-overlay.is-open .eza-sidebar { transform: translateX(0); } .eza-sidebar-head { padding: 1.5rem; border-bottom: 8px solid #000; display: flex; justify-content: space-between; align-items: center; background: #E52521; } .eza-sidebar-head h2 { margin: 0; font-size: 1.875rem; font-weight: 700; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 #000; } .eza-sidebar-body { flex: 1 1 0%; overflow-y: auto; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .eza-menu-item { width: 100%; text-align: left; padding: 1rem 1.5rem; font-weight: 700; font-size: 1.5rem; text-transform: uppercase; border: 4px solid #000; transition: all .2s; display: block; } .eza-menu-item.is-active { background: #FBD000; color: #000; box-shadow: inset 0 -4px 0 rgba(0,0,0,.4); transform: translateY(4px); } .eza-menu-item:not(.is-active) { background: #fff; color: #000; box-shadow: 6px 6px 0 #000; } .eza-menu-item:not(.is-active):hover { transform: translateY(2px); box-shadow: 4px 4px 0 #000; } /* ============ CATEGORY MENU ============ */ .eza-cats-margin { margin-bottom: 1rem; } .eza-cats-wrap { position: relative; width: 100%; margin-bottom: 1rem; } .eza-cats { display: flex; overflow-x: auto; gap: 1rem; padding: .5rem 0 1.5rem; scrollbar-width: auto; } .eza-cat-btn { flex-shrink: 0; padding: .75rem 1.5rem; font-weight: 600; font-size: 1.125rem; text-transform: uppercase; border: 4px solid #000; transition: all .2s; white-space: nowrap; } .eza-cat-btn.is-active { background: #E52521; color: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.4); transform: translateY(4px); } .eza-cat-btn:not(.is-active) { background: #FBD000; color: #000; box-shadow: 4px 4px 0 #000; } .eza-cat-btn:not(.is-active):hover { transform: translateY(2px); box-shadow: 2px 2px 0 #000; } .eza-cats-hint { text-align: center; margin-top: 1rem; font-size: .75rem; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center; gap: .5rem; text-transform: uppercase; letter-spacing: .1em; text-shadow: 2px 2px 0 #000; } /* custom scrollbar for category strip */ .eza-cats::-webkit-scrollbar { height: 16px; width: 16px; } .eza-cats::-webkit-scrollbar-track { background: #00439C; border-radius: 12px; border: 4px solid #f0f8ff; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); } .eza-cats::-webkit-scrollbar-thumb { background: #FBD000; border-radius: 12px; border: 3px solid #00439C; } .eza-cats::-webkit-scrollbar-thumb:hover { background: #FFEA00; } /* ============ GRID BAR (section title + count) ============ */ .eza-gridbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; background: #fff; padding: 1.5rem; border: 4px solid #000; box-shadow: 8px 8px 0 #000; } .eza-gridbar h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #000; display: flex; align-items: center; gap: 1rem; text-transform: uppercase; } .eza-gridbar .bar-accent { width: 1rem; height: 2rem; background: #E52521; border: 2px solid #000; } .eza-count { background: #FBD000; color: #000; font-weight: 600; padding: .5rem 1rem; border: 4px solid #000; box-shadow: 4px 4px 0 #000; font-size: 1.125rem; text-transform: uppercase; white-space: nowrap; } /* ============ GAME GRID + CARDS ============ */ .eza-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .eza-grid.mt { margin-top: 1.5rem; } .game-card { position: relative; overflow: hidden; cursor: pointer; background: #fff; border: 4px solid #000; box-shadow: 8px 8px 0 #000; aspect-ratio: 1 / 1; display: block; transition: transform .2s, box-shadow .2s; } .game-card:hover { transform: translateY(4px); box-shadow: 4px 4px 0 #000; } .game-card img.cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; } .game-card:hover img.cover { transform: scale(1.1); } .card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #5C94FC; color: #fff; } .card-placeholder svg { width: 4rem; height: 4rem; filter: drop-shadow(4px 4px 0 #000); } .card-shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); pointer-events: none; z-index: 15; } .game-card:hover .card-shine { animation: shine .9s ease; } @keyframes shine { 0% { left: -100%; } 100% { left: 200%; } } .card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; pointer-events: none; } .card-play-inner { background: #E52521; color: #fff; padding: 1rem; border: 4px solid #000; box-shadow: 6px 6px 0 #000; opacity: 0; transform: scale(.5); transition: all .3s; display: inline-flex; } .game-card:hover .card-play-inner { opacity: 1; transform: scale(1); } .card-play-inner svg { width: 3rem; height: 3rem; fill: #fff; filter: drop-shadow(2px 2px 0 #000); margin-left: .25rem; } /* ============ SECTION HEADINGS ============ */ .eza-sect { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .eza-sect .sect-bar { width: 1rem; height: 2.5rem; border: 2px solid #000; box-shadow: 4px 4px 0 #000; flex-shrink: 0; } .eza-sect.green .sect-bar { background: #43B047; } .eza-sect.red .sect-bar { background: #E52521; } .eza-sect.yellow .sect-bar { background: #FBD000; } .eza-sect h3 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #fff; text-transform: uppercase; display: flex; align-items: center; gap: .75rem; text-shadow: 3px 3px 0 #000; } .eza-sect h3 svg { width: 2rem; height: 2rem; filter: drop-shadow(2px 2px 0 #000); flex-shrink: 0; } .eza-sect.green h3 svg { color: #43B047; fill: #43B047; } .eza-sect.red h3 svg { color: #FBD000; fill: #FBD000; } .eza-sect.yellow h3 svg { color: #FBD000; fill: #FBD000; } .eza-sect-inline { margin-top: 3rem; } .eza-h3-white { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 1.5rem; display: flex; align-items: center; gap: .75rem; text-transform: uppercase; text-shadow: 3px 3px 0 #000; } .eza-h3-white svg { width: 2rem; height: 2rem; color: #FBD000; fill: #FBD000; filter: drop-shadow(2px 2px 0 #000); flex-shrink: 0; } /* White section heading used outside .eza-sect (e.g. EXPLORE CATEGORIES on the game page) - keeps the icon locked at 2rem so it can never blow up. */ .eza-sect-h3 { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 1.5rem; display: flex; align-items: center; gap: .75rem; text-transform: uppercase; text-shadow: 3px 3px 0 #000; } .eza-sect-h3 svg { width: 2rem; height: 2rem; color: #FBD000; fill: #FBD000; filter: drop-shadow(2px 2px 0 #000); flex-shrink: 0; } .eza-review-cta { font-weight: 600; text-transform: uppercase; margin: 0 0 1.5rem; } .eza-nextprev { display: flex; gap: 1rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; } .eza-review-box .review-text { margin-top: .5rem; } /* ============ GAME PLAYER ============ */ .eza-player { background: #fff; border: 8px solid #000; overflow: hidden; display: flex; flex-direction: column; opacity: 1; } .player-bar { background: #00439C; color: #fff; padding: 1.5rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; border-bottom: 8px solid #000; } .player-bar-left { display: flex; align-items: center; gap: 1.5rem; min-width: 0; } .player-back { background: #E52521; padding: .75rem; border: 4px solid #000; box-shadow: 4px 4px 0 #000; display: inline-flex; transition: all .2s; flex-shrink: 0; } .player-back:hover { background: #C41E1A; transform: translateY(2px); box-shadow: 2px 2px 0 #000; } .player-back svg { width: 2rem; height: 2rem; color: #fff; } .player-title { display: flex; align-items: center; gap: 1rem; font-size: 1.25rem; text-transform: uppercase; text-shadow: 2px 2px 0 #000; min-width: 0; } .player-title svg { width: 2rem; height: 2rem; color: #FBD000; flex-shrink: 0; } .player-stage { position: relative; background: #000; width: 100%; height: 70vh; min-height: 500px; } .player-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .player-actions { background: #5C94FC; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-top: 8px solid #000; gap: 1.5rem; } .btn-full { width: 100%; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .75rem 1rem; font-weight: 600; font-size: 1.25rem; border: 4px solid #000; text-transform: uppercase; position: relative; overflow: hidden; border-radius: .75rem; box-shadow: inset 0 4px 0 rgba(255,255,255,0.4), 6px 6px 0 #000; color: #fff; transition: all .2s; } .btn-full:hover { transform: translateY(2px); box-shadow: inset 0 4px 0 rgba(255,255,255,0.4), 4px 4px 0 #000; } .btn-full svg { width: 1.5rem; height: 1.5rem; filter: drop-shadow(2px 2px 0 #000); flex-shrink: 0; } .btn-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); transform: translateX(-100%) skewX(-12deg); transition: transform .7s; } .btn-full:hover::after { transform: translateX(100%) skewX(-12deg); } .btn-vertical { background: linear-gradient(to bottom, #FF6B6B, #E52521); } .btn-vertical:hover { background: linear-gradient(to bottom, #FF8E8E, #C41E1A); } .btn-landscape { background: linear-gradient(to bottom, #6EE7B7, #43B047); } .btn-landscape:hover { background: linear-gradient(to bottom, #93F5D3, #328A35); } /* ============ REVIEW / RATE BOX ============ */ .eza-review-wrap { margin-top: 4rem; position: relative; } .eza-review-gif { position: absolute; top: -4rem; right: 1rem; height: 6rem; object-fit: contain; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); z-index: 10; } .eza-review-box { background: #fff; border: 4px solid #000; box-shadow: 8px 8px 0 #000; padding: 1.5rem; } .eza-review-box h3 { margin: 0 0 1.5rem; font-size: 1.5rem; font-weight: 700; color: #000; text-transform: uppercase; display: flex; align-items: center; gap: .75rem; } .eza-review-box h3 svg { width: 2rem; height: 2rem; color: #FBD000; fill: #FBD000; filter: drop-shadow(2px 2px 0 #000); } .star-row { display: flex; gap: .5rem; margin-bottom: 1.5rem; } .star-btn { background: none; border: none; padding: 0; transition: transform .2s; } .star-btn:hover { transform: scale(1.1); } .star-btn svg { width: 3rem; height: 3rem; color: #d1d5db; fill: #d1d5db; filter: drop-shadow(2px 2px 0 #000); } .star-btn.filled svg { color: #FBD000; fill: #FBD000; } .review-fields { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; } .eza-input, .eza-textarea { width: 100%; border: 4px solid #000; padding: 1rem; font-weight: 600; font-size: 1.125rem; text-transform: uppercase; outline: none; transition: background .2s; box-shadow: inset 4px 4px 0 rgba(0,0,0,0.05); background: #fff; } .eza-input:focus, .eza-textarea:focus { background: rgba(251,208,0,0.1); } .eza-textarea { height: 8rem; resize: none; } .eza-submit { margin-top: 1.5rem; background: #E52521; color: #fff; font-weight: 700; font-size: 1.25rem; padding: 1rem 2rem; border: 4px solid #000; box-shadow: 8px 8px 0 #000; text-transform: uppercase; display: inline-flex; align-items: center; gap: .75rem; transition: all .2s; } .eza-submit svg { width: 1.5rem; height: 1.5rem; } .eza-submit:hover { background: #C41E1A; transform: translateY(4px); box-shadow: 4px 4px 0 #000; } .eza-submit:disabled { background: #9ca3af; transform: translateY(4px); box-shadow: 4px 4px 0 #000; cursor: not-allowed; } .eza-review-note { margin-top: 1rem; font-size: .95rem; font-weight: 600; display: none; } .eza-review-note.ok { color: #15803d; display: block; } .eza-review-note.err { color: #b91c1c; display: block; } /* displayed player reviews */ .eza-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .review-card { background: #fff; border: 4px solid #000; box-shadow: 6px 6px 0 #000; padding: 1.5rem; } .review-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; gap: .5rem; } .review-stars { display: flex; gap: .25rem; } .review-stars svg { width: 1.5rem; height: 1.5rem; color: #FBD000; fill: #FBD000; filter: drop-shadow(1px 1px 0 #000); } .review-stars svg.dim { color: #d1d5db; fill: #d1d5db; } .review-date { font-size: .875rem; font-weight: 600; color: #6b7280; text-transform: uppercase; background: #f3f4f6; padding: .25rem .75rem; border: 2px solid #000; white-space: nowrap; } .review-name { margin: 0 0 .5rem; font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: #E52521; } .review-text { margin: 0; font-weight: 600; font-size: 1.125rem; text-transform: uppercase; } /* ============ STATIC PAGES ============ */ .eza-page { background: #fff; border: 4px solid #000; box-shadow: 8px 8px 0 #000; padding: 2rem; max-width: 56rem; margin: 0 auto; } .eza-page-title { font-size: 2.5rem; font-weight: 700; color: #000; text-transform: uppercase; margin: 0 0 2rem; display: flex; align-items: center; gap: 1rem; } .eza-page-title .bar { width: 1.5rem; height: 3rem; background: #E52521; border: 2px solid #000; } .eza-page-body { font-weight: 600; font-size: 1.125rem; text-transform: uppercase; line-height: 1.625; max-width: none; } .eza-page-body p { margin-bottom: 1.5rem; } .eza-page-body p:last-child { margin-bottom: 0; } .eza-page-body .muted { font-size: 1rem; color: #404040; } .eza-page-body a { color: #E52521; text-decoration: underline; text-decoration-thickness: 4px; } .eza-page-body a:hover { color: #00439C; } .eza-page-body ul { list-style: disc; padding-left: 2rem; margin-bottom: 1.5rem; } .eza-page-body ul li { margin-bottom: .5rem; font-size: 1rem; color: #404040; } .eza-page-body img.banner { width: 100%; height: 16rem; object-fit: cover; margin-bottom: 2rem; border: 4px solid #000; box-shadow: 4px 4px 0 #000; } .eza-page-gif { margin-top: 2rem; display: flex; justify-content: center; } .eza-page-gif img { max-width: 20rem; width: 100%; object-fit: contain; border: 4px solid #000; box-shadow: 4px 4px 0 #000; border-radius: .75rem; } .eza-page-center-img { margin-top: 2rem; display: flex; justify-content: center; } .eza-page-center-img img { max-width: 16rem; width: 100%; object-fit: contain; border: 4px solid #000; box-shadow: 4px 4px 0 #000; border-radius: .75rem; } .eza-contact-form { display: flex; flex-direction: column; gap: 1.5rem; } .eza-contact-form label { display: block; margin-bottom: .5rem; } .eza-contact-direct { margin-top: 3rem; padding-top: 2rem; border-top: 4px solid #000; } .eza-contact-direct p { margin-bottom: .5rem; } .eza-mail-link { color: #00439C !important; font-size: 1.5rem; font-weight: 700; text-decoration: underline; text-decoration-thickness: 4px; } .eza-mail-link:hover { color: #E52521 !important; } /* ============ 404 ============ */ .eza-404 { text-align: center; padding: 6rem 2rem; background: #fff; border: 4px solid #000; box-shadow: 8px 8px 0 #000; margin-top: 2rem; display: flex; flex-direction: column; align-items: center; } .eza-404 .gif-holder { width: 16rem; margin-bottom: 2rem; } .eza-404 .gif-holder img { width: 100%; border: 4px solid #000; box-shadow: 6px 6px 0 #000; } .eza-404 h2 { margin: 0; font-size: 1.875rem; color: #000; font-weight: 700; text-transform: uppercase; text-shadow: 2px 2px 0 #FBD000; word-break: break-word; } .eza-404 p { color: #000; margin-top: 1rem; font-weight: 600; font-size: 1.25rem; } /* ============ FOOTER ============ */ .eza-footer { color: #fff; padding: 3rem 1rem; text-align: center; border-top: 8px solid #000; margin-top: 5rem; background-color: #00439C; } .eza-footer p { margin: 0; font-weight: 600; font-size: 1.125rem; letter-spacing: .1em; text-transform: uppercase; text-shadow: 2px 2px 0 #000; } .eza-footer a { color: #FBD000; transition: color .2s; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; } .eza-footer a:hover { color: #fff; } /* ============ LOADING ============ */ .eza-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 16rem; } .eza-loading .spinner { width: 6rem; height: 6rem; border: 8px solid #000; border-top-color: #FBD000; border-radius: 50%; animation: spin 1s linear infinite; box-shadow: 4px 4px 0 #000; } .eza-loading p { margin-top: 2rem; font-size: 1.5rem; font-weight: 700; color: #fff; text-transform: uppercase; text-shadow: 3px 3px 0 #000; } @keyframes spin { to { transform: rotate(360deg); } } /* ============ RESPONSIVE ============ */ @media (min-width: 640px) { .eza-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { .eza-subtitle { display: block; } .eza-header-logo { display: block; } .review-fields { grid-template-columns: repeat(2, minmax(0,1fr)); } .player-actions { flex-direction: row; } .btn-full { width: 50%; } .eza-reviews-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .eza-page { padding: 3rem; } .eza-page-title { font-size: 3rem; } .eza-review-gif { height: 8rem; right: 2rem; } } @media (min-width: 1024px) { .eza-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .eza-search { display: block; } } @media (min-width: 1280px) { .eza-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ============================================================ DARK THEME — neon glassmorphism layer ============================================================ */ body.dark-theme { background: radial-gradient(circle at top, #0f0c1b, #04010a) !important; background-attachment: fixed; color: #f1f0f5 !important; font-family: 'Space Grotesk', sans-serif !important; } body.dark-theme .eza-header { background: rgba(10, 5, 22, 0.75) !important; backdrop-filter: blur(12px); border-bottom: 2px solid rgba(255,255,255,0.08) !important; box-shadow: 0 4px 30px rgba(0,0,0,0.5) !important; } body.dark-theme .eza-title { color: #fff; text-shadow: none; } body.dark-theme .eza-subtitle { color: #a855f7; text-shadow: none; } body.dark-theme .eza-logo-box, body.dark-theme .eza-btn-accent, body.dark-theme .eza-search input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.15) !important; color: #e2e8f0 !important; } body.dark-theme .eza-btn-accent { color: #e2e8f0 !important; } body.dark-theme .eza-btn-accent svg { color: #e2e8f0 !important; } body.dark-theme .eza-search svg { color: #e2e8f0 !important; } body.dark-theme .eza-search input::placeholder { color: rgba(226,232,240,.4); } body.dark-theme .eza-search input:focus { background: rgba(255,255,255,0.1) !important; } body.dark-theme .eza-overlay { background: rgba(0,0,0,.75); } body.dark-theme .eza-sidebar { background: #0f0c1b !important; } body.dark-theme .eza-sidebar-head { background: rgba(10,5,22,.9) !important; border-bottom: 1px solid rgba(255,255,255,.08); } body.dark-theme .eza-menu-item.is-active { background: linear-gradient(135deg, #a855f7, #ec4899) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 4px 15px rgba(236,72,153,.3) !important; } body.dark-theme .eza-menu-item:not(.is-active) { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; box-shadow: none !important; } body.dark-theme .eza-cat-btn.is-active { background: linear-gradient(135deg, #a855f7, #ec4899) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 4px 15px rgba(236,72,153,.3) !important; } body.dark-theme .eza-cat-btn:not(.is-active) { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; box-shadow: none !important; } body.dark-theme .eza-cats-hint { color: #cbd5e1; text-shadow: none; } body.dark-theme .eza-h3-white { color: #fff; text-shadow: none; } body.dark-theme .eza-review-cta { color: #e2e8f0; } body.dark-theme .eza-gridbar, body.dark-theme .eza-review-box, body.dark-theme .eza-page, body.dark-theme .eza-404, body.dark-theme .review-card { background: rgba(15, 10, 28, 0.6) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.6) !important; border-radius: 1rem !important; color: #fff !important; } body.dark-theme .eza-gridbar h2, body.dark-theme .eza-page-title, body.dark-theme .eza-review-box h3, body.dark-theme .eza-404 h2 { color: #fff !important; text-shadow: none; } body.dark-theme .eza-page-title .bar { border-color: rgba(255,255,255,.2); } body.dark-theme .eza-count { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #e2e8f0 !important; box-shadow: none !important; } body.dark-theme .game-card { background: rgba(15, 10, 28, 0.6) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 1rem !important; box-shadow: 0 8px 32px rgba(168, 85, 247, 0.15) !important; } body.dark-theme .game-card:hover { box-shadow: 0 12px 40px rgba(168, 85, 247, 0.3) !important; } body.dark-theme .card-play-inner { background: linear-gradient(135deg, #a855f7, #ec4899) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3) !important; } body.dark-theme .eza-player { background: rgba(15, 10, 28, 0.6) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 1rem !important; box-shadow: 0 8px 32px rgba(168, 85, 247, 0.15) !important; } body.dark-theme .player-bar { background: rgba(10, 5, 22, 0.75) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } body.dark-theme .player-back { background: linear-gradient(135deg, #a855f7, #ec4899) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 4px 15px rgba(236,72,153,.3) !important; } body.dark-theme .player-stage { background: rgba(5,2,10,.8); border-radius: 0 0 1rem 1rem; } body.dark-theme .player-actions { background: transparent !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } body.dark-theme .btn-vertical { background: linear-gradient(135deg, #a855f7, #ec4899) !important; box-shadow: 0 4px 15px rgba(236,72,153,.3) !important; } body.dark-theme .btn-vertical:hover { background: linear-gradient(135deg, #b96ff5, #f065a5) !important; } body.dark-theme .btn-landscape { background: linear-gradient(135deg, #06b6d4, #3b82f6) !important; box-shadow: 0 4px 15px rgba(59,130,246,.3) !important; } body.dark-theme .btn-landscape:hover { background: linear-gradient(135deg, #22d3ee, #60a5fa) !important; } body.dark-theme .eza-input, body.dark-theme .eza-textarea { background: rgba(5, 2, 10, 0.5) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #fff !important; border-radius: .5rem !important; box-shadow: none !important; } body.dark-theme .eza-input:focus, body.dark-theme .eza-textarea:focus { background: rgba(5,2,10,.7) !important; } body.dark-theme .eza-submit { background: linear-gradient(135deg, #a855f7, #ec4899) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 4px 15px rgba(236,72,153,.3) !important; } body.dark-theme .eza-review-gif { filter: drop-shadow(0 0 20px rgba(168,85,247,.4)); } body.dark-theme .review-date { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.15) !important; color: #94a3b8 !important; } body.dark-theme .review-name { color: #ec4899 !important; } body.dark-theme .eza-page-body { color: #e2e8f0 !important; } body.dark-theme .eza-page-body .muted { color: #94a3b8 !important; } body.dark-theme .eza-page-body ul li { color: #94a3b8 !important; } body.dark-theme .eza-page-body a { color: #ec4899 !important; } body.dark-theme .eza-mail-link { color: #60a5fa !important; } body.dark-theme .eza-404 p { color: #e2e8f0 !important; } body.dark-theme .eza-footer { background: rgba(8, 4, 18, 0.9) !important; border-top: 1px solid rgba(255,255,255,0.08) !important; color: #94a3b8 !important; } body.dark-theme .eza-footer p { text-shadow: none; } body.dark-theme .eza-footer a { color: #a855f7 !important; } body.dark-theme .eza-cats::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); box-shadow: none; } body.dark-theme .eza-cats::-webkit-scrollbar-thumb { background: #a855f7; border-color: rgba(255,255,255,.08); } body.dark-theme .eza-loading p { text-shadow: none; } body.dark-theme .card-placeholder { background: rgba(15,10,28,.8); color: #a855f7; }