:root { --bg-color: #fff; --text-color: #333; --header-bg: #2e2f36; --highlight-bg: #2e2f36; --search-bg: #444954; --modal-bg: #fff; --category-bg: #f8f8f8; } /* Tema escuro baseado no padrão do Bootstrap (data-bs-theme no ) */ [data-bs-theme="dark"] { --bg-color: #121212; --text-color: #f0f0f0; --header-bg: #1e1e1e; --highlight-bg: #1e1e1e; --search-bg: #333; --modal-bg: #1f1f1f; --category-bg: #1a1a1a; } body { font-family: Arial, sans-serif; background: var(--bg-color); color: var(--text-color); transition: background 0.3s, color 0.3s; } .circle-icons div, .categories-list div { text-align: center; cursor: pointer; transition: transform 0.2s; } .circle-icons div:hover, .categories-list div:hover { transform: scale(1.08); } .circle-icons img, .categories-list img { border: 3px solid #ffc107; border-radius: 50%; width: 60px; height: 60px; } .circle-icons span, .categories-list span { display: block; font-size: 12px; margin-top: 5px; } .highlight { background: var(--highlight-bg); color: #fff; padding: 10px 20px; font-size: 20px; text-align: center; font-weight: bold; } .top-games img { border-radius: 10px; width: 200px; height: 150px; object-fit: cover; cursor: pointer; transition: transform 0.2s; } .top-games img:hover { transform: scale(1.05); } .categories { padding: 20px; background: var(--category-bg); } .categories-list { gap: 15px; } /* ===== MODAL DE JOGOS (NAMESPACEADO) ===== */ .game-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000; } .game-modal-content { background: var(--modal-bg); padding: 20px; border-radius: 8px; text-align: center; max-width: 400px; } /* Botão de tema (se usar) */ .theme-toggle { background: #ffc107; color: #000; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 14px; margin-left: 15px; } /* ===== Console Carousel ===== */ .console-carousel { position: relative; } .console-carousel .cc-track{ display:flex; gap:18px; overflow-x:auto; padding:10px 48px; /* espaço para os botões */ scroll-snap-type: x mandatory; scrollbar-width: thin; } .console-carousel .cc-track::-webkit-scrollbar{ height:8px; } .console-carousel .cc-track::-webkit-scrollbar-thumb{ background:#bbb; border-radius:4px; } .console-item{ flex:0 0 auto; width:92px; text-align:center; scroll-snap-align:start; } .console-item .thumb-wrap{ width:78px; height:78px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: radial-gradient(100% 100% at 50% 50%, #2e2f36 0%, #1f2026 100%); box-shadow: 0 0 0 3px #ffc107, 0 0 0 6px #2e2f36; /* aro amarelo + aro escuro */ } .console-item .thumb{ width:70px; height:70px; object-fit:cover; border-radius:50%; } .console-item .label{ display:block; margin-top:6px; font-size:12px; font-weight:600; color: var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Botões de navegação */ .cc-btn{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); color:#fff; z-index:2; } .cc-prev{ left:6px; } .cc-next{ right:6px; } .cc-btn:disabled{ opacity:.35; cursor:not-allowed; } /* Tema escuro */ [data-bs-theme="dark"] .console-item .label{ color:#f0f0f0; } [data-bs-theme="dark"] .console-item .thumb-wrap{ box-shadow: 0 0 0 3px #ffc107, 0 0 0 6px #1e1e1e; } /* ===== Página de jogo (migrado do arquivo) ===== */ .play-crumb { background: linear-gradient(135deg, rgba(255,193,7,.25), rgba(13,110,253,.25)); backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,.05); border-radius: 14px; padding: .75rem; } .crumb-item { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .6rem; background: var(--bg-color); /* equivalente ao var(--bs-body-bg) */ border: 1px dashed rgba(0,0,0,.1); border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.06); } .crumb-sep { color: var(--text-color); opacity: .6; margin: 0 .35rem; } /* Wrapper que acompanha exatamente a largura/altura do player */ .player-wrap { position: relative; width: max-content; /* acompanha o conteúdo do player */ max-width: 100%; margin: 0 auto .75rem auto; } #playerBox { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.15); background: #2b2b2b; } /* iframe do jogo */ .game-iframe { width: 100% !important; height: 100% !important; border: none; display: block; background: #000; } /* Botão fora do player, colado no canto inferior-direito do box */ .fs-anchor { position: absolute; right: -8px; bottom: -8px; z-index: 20; } .fs-anchor .btn { backdrop-filter: blur(4px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.25); border-radius: 999px; } /* Fallback visual quando não há embed */ .embed-fallback{ min-height:200px; display:flex; align-items:center; justify-content:center; color:#6c757d; } /* loading da lista */ .is-loading { position: relative; } .is-loading::after { content: 'Carregando…'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.6); font-weight: 600; backdrop-filter: blur(1px); } /* ===== NOVO: Games Carousel (reaproveita botões do Console Carousel) ===== */ .games-carousel{ position: relative; } .games-carousel .d-flex{ /* sobrescreve o flex da função render_games_row() */ flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; justify-content: flex-start !important; gap: 1rem !important; padding: 10px 48px; /* espaço para os botões */ } .games-carousel .item-hover{ flex: 0 0 auto; width: 200px; } /* fixa a largura dos cards */