/*
Theme Name: XxxRN
Theme URI: https://rn.co.mz
Author: Onésio Lourenço Chipindo
Description: Tema responsivo de portal de vídeos otimizado para Web APK.
Version: 1.0
Text Domain: xxxrn
*/

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #0c0c0c; color: #ffffff; user-select: none; -webkit-user-select: none; min-height: 100vh; display: flex; flex-direction: column; }
header { background-color: #1a1a1a; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.8); padding-top: calc(15px + env(safe-area-inset-top)); }
.logo { font-size: 24px; font-weight: 800; color: #e53935; letter-spacing: -1px; text-decoration: none; }
.search-icon { display: flex; align-items: center; cursor: pointer; color: #aaa; transition: color 0.2s; }
.search-icon:active { color: #fff; }
.categories { display: flex; overflow-x: auto; padding: 12px 15px; background-color: #141414; gap: 10px; border-bottom: 1px solid #282828; }
.categories::-webkit-scrollbar { display: none; }
.category-btn { background-color: #2a2a2a; color: #fff; border: none; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.category-btn.active { background-color: #e53935; }
main { flex: 1; padding-bottom: 20px; }
.video-grid { display: grid; gap: 20px; padding: 15px; }
@media (max-width: 767px) { .video-grid { grid-template-columns: 1fr; padding: 10px; gap: 25px; } }
@media (min-width: 768px) { .video-grid { grid-template-columns: repeat(4, 1fr); padding: 30px; max-width: 1600px; margin: 0 auto; } }
.video-card { display: flex; flex-direction: column; cursor: pointer; width: 100%; text-decoration: none; }
.thumbnail-container { position: relative; width: 100%; aspect-ratio: 16/9; background-color: #2a2a2a; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.thumbnail-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
@media (min-width: 768px) { .video-card:hover .thumbnail-container img { transform: scale(1.05); } }
.play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(229, 57, 53, 0.85); color: #ffffff; width: 46px; height: 46px; border-radius: 50%; display: flex; justify-content: center; align-items: center; opacity: 0.8; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.5); z-index: 10; }
.video-card:hover .play-button, .video-card:active .play-button { opacity: 1; background-color: #e53935; transform: translate(-50%, -50%) scale(1.15); }
.duration { position: absolute; bottom: 8px; right: 8px; background-color: rgba(0, 0, 0, 0.85); color: #fff; font-size: 11px; font-weight: bold; padding: 3px 6px; border-radius: 4px; z-index: 10; }
.video-info { padding: 10px 2px 0 2px; }
.video-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: #eee; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
@media (min-width: 768px) { .video-title { -webkit-line-clamp: 1; font-size: 14px; } }
.video-meta { font-size: 12px; color: #999; font-weight: 500; }
.site-footer { text-align: center; padding: 20px 15px 30px 15px; color: #666; font-size: 12px; border-top: 1px solid #1a1a1a; margin-top: 10px; padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.page-title { padding: 20px 15px 0 15px; font-size: 20px; color: #fff; }
.content-area { padding: 20px 15px; color: #ccc; line-height: 1.6; }