/*
Theme Name:  NekoNights
Theme URI:   https://nekonights.com
Author:      NekoNights
Description: "Elegant Glass" — Tema ultra-premium para bibliotecas de juegos y videos adultos con glassmorphism avanzado.
Version:     2.2.0
License:     GPL-2.0-or-later
Text Domain: nekonights
Tags:        premium, dark, glassmorphism, anime, adult
*/

/* ── VARIABLES ── */
:root {
  --bg:          #05050a;
  --surface:     rgba(15, 15, 25, 0.7);
  --surface-top: rgba(25, 25, 45, 0.85);
  --glass:       rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  
  --accent-primary:   #f97316;  /* orange */
  --accent-secondary:  #fb923c;  /* light orange */
  --accent-violet:     #ea580c;  /* dark orange */
  --accent-rose:       #f43f5e;
  --accent-gold:       #f59e0b;
  
  --text:        #ffffff;
  --text-muted:  #a0a0b8;
  --text-dim:    #6c6c8c;
  
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 999px;
  
  --trans:       0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --blur:        12px;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;overflow-x:hidden;
}
main { padding-top: 72px; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4{font-weight:800;line-height:1.1;letter-spacing:-0.03em}
.text-gradient{
  background:linear-gradient(135deg, #fff 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ── COMPONENTS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:0.6rem;padding:0.8rem 1.8rem;border-radius:var(--radius-full);
  font-weight:600;font-size:0.95rem;transition:all var(--trans);
}
.btn-primary{ background:white; color:black; }
.btn-secondary{ background:var(--glass); color:white; border:1px solid var(--glass-border); }

.badge-nsfw{
  background:rgba(255, 45, 85, 0.1);color:var(--accent-rose);
  border:1px solid rgba(255, 45, 85, 0.3);
  padding:2px 8px;border-radius:6px;font-size:0.65rem;font-weight:800;
}

/* ── HEADER (WP) ── */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:72px;background:rgba(5,5,10,0.6);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
}
.header-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; }
#primary-nav ul { display: flex; gap: 1rem; }
#primary-nav a { font-size: 0.9rem; color: var(--text-muted); padding: 0.5rem 1rem; border-radius: var(--radius-full); }
#primary-nav a:hover, #primary-nav .current-menu-item a { color: white; background: var(--glass); }

/* ── HERO ── */
.hero{
  position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center;
  padding:8rem 2rem 5rem; text-align:center;
  background: linear-gradient(160deg, rgba(249,115,22,0.15) 0%, rgba(5,5,10,1) 60%);
  border-bottom: 1px solid rgba(249,115,22,0.2);
}
#heroParticles { position:absolute; inset:0; pointer-events:none; width:100%; height:100%; }
.hero-content { position:relative; z-index:1; }
.hero h1 { font-size:clamp(2.5rem,5vw,4.5rem); margin-bottom:1rem; }
.hero-actions { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin-top:2rem; }
.hero-tagline{
  text-transform:uppercase;letter-spacing:0.3em;font-size:0.75rem;
  color:var(--accent-primary);font-weight:700;margin-bottom:1.5rem;display:block;
}

/* ── CATEGORY EXPLORER ── */
.tag-cloud{
  display:flex;flex-wrap:wrap;gap:0.75rem;
  background:var(--glass);padding:2rem;border-radius:var(--radius-lg);
  border:1px solid var(--glass-border); overflow: hidden;
}
.tag-btn{
  background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);
  padding:0.6rem 1.2rem;border-radius:var(--radius-full);
  font-size:0.85rem;color:var(--text-muted);
}
.tag-btn:hover{background:white;color:black;}

/* ── GRID & CARDS ── */
.items-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:2.5rem; }
.glass-card{
  background:rgba(20,20,35,0.4);border-radius:var(--radius-lg);
  border:1px solid var(--glass-border);transition:all var(--trans);
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
}
.glass-card:hover{ transform:translateY(-10px); border-color:rgba(255,255,255,0.2); }

/* Landscape variants (v5.0) */
.glass-card.horizontal { display: grid; grid-template-columns: 320px 1fr; }
@media (max-width: 900px) { .glass-card.horizontal { grid-template-columns: 1fr; } }

.card-meta-overlay {
  position: absolute; top: 1rem; left: 1rem; right: 1rem;
  display: flex; justify-content: space-between; pointer-events: none;
}
.meta-pill {
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  padding: 4px 10px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; color: white;
  border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 4px;
}
.card-status-label {
  position: absolute; bottom: 0.8rem; right: 1rem;
  background: var(--accent-gold); color: black; font-size: 0.65rem; font-weight: 800;
  padding: 3px 10px; border-radius: 2px; text-transform: uppercase;
}
.card-media{ height:240px; position: relative; }
.card-content{ padding:1.8rem; flex: 1; display: flex; flex-direction: column; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tag-item { font-size: 0.65rem; color: var(--text-dim); }

/* ── AGE GATE ── */
.age-gate{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.8);backdrop-filter:blur(30px);
  display:flex;align-items:center;justify-content:center;
}
.age-gate.dismissed{opacity:0;pointer-events:none;}

/* ── FOOTER ── */
.site-footer{
  padding:6rem 2rem 4rem;background:rgba(255,255,255,0.01);
  border-top:1px solid var(--glass-border);
}
/* ── MOBILE OPTIMIZATION ── */
@media (max-width: 768px) {
  .hero { padding: 8rem 1.25rem 4rem; }
  .hero h1 { font-size: 2.2rem; }
  .items-grid { gap: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
  .glass-card.horizontal { grid-template-columns: 1fr; }
  .card-media { height: 200px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.8rem; }
  .hero-actions { flex-direction: column; }
  .btn { width: 100%; }
}

/* ══════════════════════════════════════════
   VARIABLES ADICIONALES
══════════════════════════════════════════ */
:root {
  --subtext: var(--text-muted);
  --border:  var(--glass-border);
}

/* ══════════════════════════════════════════
   LOGO
══════════════════════════════════════════ */
.logo {
  display:flex; align-items:center; gap:0;
  font-size:1.3rem; font-weight:900; letter-spacing:-0.03em;
  text-decoration:none; color:white;
}
.logo span:first-child { color:white; }
.logo span:last-child  { color:var(--accent-primary); }

/* ══════════════════════════════════════════
   SEARCH BOX (header)
══════════════════════════════════════════ */
.search-box {
  background:var(--glass); border:1px solid var(--glass-border);
  color:white; padding:0.55rem 1rem 0.55rem 2.8rem;
  border-radius:var(--radius-full); font-size:0.85rem;
  width:220px; outline:none; transition:all var(--trans);
}
.search-box:focus { border-color:var(--accent-primary); background:rgba(255,255,255,0.06); }
.search-box::placeholder { color:var(--text-dim); }

/* ══════════════════════════════════════════
   HAMBURGER MENU
══════════════════════════════════════════ */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:0.5rem;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background:white; border-radius:2px; transition:all var(--trans);
}
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Hero styles defined earlier in file — see /* ── HERO ── */ section */

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
.content-section  { padding:5rem 0; }
.explorer-section { padding:4rem 0; }
.section-title-wrap { margin-bottom:3rem; display:flex; justify-content:space-between; align-items:flex-end; }
.section-header   { margin-bottom:2.5rem; }
.section-header h2 { font-size:2.2rem; }

/* ══════════════════════════════════════════
   FILTER BAR (archive pages)
══════════════════════════════════════════ */
.filter-bar { display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:2rem; }
.filter-btn {
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-border);
  padding:0.5rem 1.1rem; border-radius:var(--radius-full);
  font-size:0.82rem; color:var(--text-muted); cursor:pointer;
  transition:all var(--trans); text-decoration:none; display:inline-block;
}
.filter-btn:hover, .filter-btn.active { background:white; color:black; border-color:white; }
.tag-btn.active { background:white; color:black; border-color:white; }

/* ══════════════════════════════════════════
   ARCHIVE PAGES
══════════════════════════════════════════ */
.archive-page, .games-section, .videos-section { padding-top:6rem; padding-bottom:6rem; }
.archive-header { margin-bottom:3rem; }
.archive-search-input {
  background:var(--glass); border:1px solid var(--glass-border);
  color:white; padding:0.55rem 1.1rem; border-radius:var(--radius-full);
  font-size:0.9rem; outline:none; width:280px; transition:all var(--trans);
}
.archive-search-input:focus { border-color:var(--accent-primary); }
.archive-search-input::placeholder { color:var(--text-dim); }

/* ══════════════════════════════════════════
   GRIDS (games, videos, search results)
══════════════════════════════════════════ */
.videos-grid, .cards-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:2rem;
}

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
/* paginate_links type=list */
.pagination { margin-top:3rem; }
.pagination ul { display:flex; justify-content:center; gap:0.5rem; list-style:none; padding:0; flex-wrap:wrap; margin:0; }
.pagination li a,
.pagination li span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 1rem; border-radius:var(--radius-full);
  font-size:0.9rem; font-weight:600; transition:all var(--trans); text-decoration:none;
}
.pagination li a { background:var(--glass); border:1px solid var(--glass-border); color:var(--text-muted); }
.pagination li a:hover { background:white; color:black; border-color:white; }
.pagination li.active span,
.pagination .current { background:var(--accent-primary); color:white; border:1px solid var(--accent-primary); }

/* paginate_links flat (used in front-page / single) */
.nk-pagination { display:flex; justify-content:center; gap:0.5rem; margin-top:4rem; flex-wrap:wrap; }
.nk-pagination a,
.nk-pagination span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 1rem; border-radius:var(--radius-full);
  font-size:0.9rem; font-weight:600; transition:all var(--trans); text-decoration:none;
}
.nk-pagination a { background:var(--glass); border:1px solid var(--glass-border); color:var(--text-muted); }
.nk-pagination a:hover { background:white; color:black; border-color:white; }
.nk-pagination .current { background:var(--accent-primary); color:white; border:1px solid var(--accent-primary); }
.nk-pagination .dots { color:var(--text-dim); }

/* WP the_posts_pagination */
.posts-navigation .nav-links { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:3rem; }
.posts-navigation .nav-links a { color:var(--accent-primary); text-decoration:none; font-weight:600; }
.page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 1rem; border-radius:var(--radius-full); font-size:0.9rem; font-weight:600; transition:all var(--trans); text-decoration:none; background:var(--glass); border:1px solid var(--glass-border); color:var(--text-muted); }
a.page-numbers:hover { background:white; color:black; }
.page-numbers.current { background:var(--accent-primary); color:white; border-color:var(--accent-primary); }

/* ══════════════════════════════════════════
   NO RESULTS
══════════════════════════════════════════ */
.no-results-msg { grid-column:1/-1; text-align:center; padding:4rem 2rem; }
.no-results-msg .icon { font-size:3rem; margin-bottom:1rem; }
.no-results-msg p { color:var(--text-muted); font-size:1.1rem; }

/* ══════════════════════════════════════════
   VIDEO MODAL
══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--trans);
}
.modal-overlay.visible { opacity:1; pointer-events:all; }
.modal-box {
  position:relative; width:min(90vw,960px);
  background:rgba(15,15,25,0.97); border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.modal-close {
  position:absolute; top:1rem; right:1rem; z-index:1;
  background:rgba(255,255,255,0.1); border:none; color:white;
  font-size:1.5rem; width:36px; height:36px; border-radius:50%;
  cursor:pointer; transition:background var(--trans);
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.modal-close:hover { background:var(--accent-rose); }
.modal-body { padding:1rem; }

/* ══════════════════════════════════════════
   SINGLE GAME
══════════════════════════════════════════ */
.single-game { padding-top:6rem; padding-bottom:6rem; }
.single-game-grid { display:grid; grid-template-columns:1fr 340px; gap:3rem; align-items:start; margin-top:2rem; }
.single-game-cover img {
  width: 100% !important; height: auto !important; max-width: 100% !important;
  border-radius: var(--radius-md); display: block;
}
.single-game-cover .no-cover {
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; border-radius:var(--radius-md); height:220px;
}
.game-rating-big { font-size:2.5rem; font-weight:800; margin-bottom:1.5rem; color:var(--accent-gold); }
.game-content { line-height:1.8; color:var(--text-muted); }
.game-content p { margin-bottom:1.2rem; }
.game-content h2, .game-content h3 { color:white; margin:2rem 0 1rem; }
.single-game-meta { margin-top:1.5rem; }
.single-game-meta table { width:100%; border-collapse:collapse; font-size:0.875rem; }
.single-game-meta td { padding:0.7rem 0; border-bottom:1px solid var(--glass-border); vertical-align:top; }
.single-game-meta td:first-child { color:var(--text-muted); width:45%; }
.single-game-meta td a { color:var(--accent-primary); text-decoration:none; }
.badge {
  display:inline-block; font-size:0.75rem; font-weight:700;
  color:var(--accent-primary); text-transform:uppercase; letter-spacing:0.1em;
  background:rgba(198,120,221,0.1); padding:4px 12px;
  border-radius:var(--radius-full); border:1px solid rgba(198,120,221,0.2);
}
.related-games { padding-top:3rem; border-top:1px solid var(--glass-border); margin-top:4rem; }
.related-games h2 { font-size:1.8rem; margin-bottom:2rem; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo { font-size:1.5rem; font-weight:900; color:white; margin-bottom:1rem; }
.footer-logo span { color:var(--accent-primary); }
.footer-desc { color:var(--text-muted); font-size:0.9rem; line-height:1.6; }
.footer-links h4 { font-size:0.82rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin-bottom:1.2rem; font-weight:700; }
.footer-links a { display:block; color:var(--text-muted); text-decoration:none; font-size:0.9rem; margin-bottom:0.6rem; transition:color var(--trans); }
.footer-links a:hover { color:white; }
.legal-disclaimer {
  font-size:0.78rem; color:var(--text-dim); line-height:1.6;
  padding:1.5rem; background:rgba(255,255,255,0.02);
  border:1px solid var(--glass-border); border-radius:var(--radius-md); margin-bottom:2rem;
}

/* ══════════════════════════════════════════
   404 PAGE
══════════════════════════════════════════ */
.page-404 {
  min-height:60vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:8rem 2rem; gap:1.5rem;
}
.error-code {
  font-size:clamp(6rem,15vw,12rem); font-weight:900; line-height:1;
  background:linear-gradient(135deg,#fff 0%,var(--accent-primary) 50%,var(--accent-secondary) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ══════════════════════════════════════════
   CARD EXTRAS
══════════════════════════════════════════ */
.glass-card:hover .card-overlay { opacity:1 !important; }

/* ══════════════════════════════════════════
   RESPONSIVE ADDITIONS
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hamburger { display:flex; }
  #primary-nav {
    display:none; position:fixed; top:72px; left:0; right:0; bottom:0;
    background:rgba(5,5,10,0.98); padding:2rem; z-index:999; overflow-y:auto;
  }
  #primary-nav.open { display:block; }
  #primary-nav .nav-list { flex-direction:column; gap:0.5rem; }
  #primary-nav .nav-list li a { font-size:1.1rem; padding:1rem; display:block; }
  .search-box { width:140px; }
  .single-game-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; text-align:center; }
  .videos-grid, .cards-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; align-items:center; }
  .section-title-wrap { flex-direction:column; align-items:flex-start; gap:1rem; }
}
@media (max-width: 480px) {
  .archive-search-input { width:100%; }
  .page-404 { padding:5rem 1.5rem; }
}

/* ══════════════════════════════════════════
   PLANTILLAS DE POSTS (game-container, nekocard, video tabs)
   Estilos globales para las plantillas HTML usadas en el contenido
══════════════════════════════════════════ */

/* ── Plantilla: Tabla de juego + VIP + Descarga ── */
.game-container { width:100%; max-width:700px; display:flex; flex-direction:column; gap:25px; }
.game-table { width:100%; background:#111118; border-collapse:collapse; border-radius:12px; border:1px solid rgba(249,115,22,0.35); box-shadow:0 0 15px rgba(249,115,22,0.1); color:white; font-size:15px; overflow:hidden; }
.game-table th { background:#1a1a1f; color:#f97316; text-align:center; padding:20px 15px; font-size:18px; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid rgba(249,115,22,0.35); }
.game-table h4 { margin:0 0 10px; font-weight:600; }
.game-description { margin:0; font-size:14px; line-height:1.5; color:#e0e0e0; font-weight:normal; text-transform:none; letter-spacing:normal; }
.game-table td { padding:12px 15px; border-bottom:1px solid rgba(249,115,22,0.12); }
.data-label { font-weight:bold; color:#f97316; width:30%; }
.data-value { color:#e0e0e0; }
.data-value a { color:#fff; font-weight:bold; text-decoration:none; }
.data-value a:hover { color:#f97316; text-decoration:underline; }
.translator-vip-section { background:linear-gradient(145deg,#18181f,#111118); border:2px solid rgba(249,115,22,0.5); border-radius:15px; padding:25px 20px; box-sizing:border-box; box-shadow:0 0 20px rgba(249,115,22,0.15),0 10px 15px rgba(0,0,0,.3); position:relative; overflow:hidden; }
.translator-vip-section::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#f97316,#fb923c,#f97316); }
.vip-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.vip-header h3 { margin:0; font-size:24px; color:#f97316; text-transform:uppercase; letter-spacing:1.5px; }
.vip-badge { background:#f97316; color:#fff; font-size:12px; font-weight:bold; padding:5px 10px; border-radius:20px; text-transform:uppercase; }
.vip-description { margin:0 0 20px; font-size:16px; line-height:1.6; text-align:center; color:#e0e0e0; }
.vip-benefits { margin-bottom:25px; }
.benefit-item { display:flex; align-items:center; margin:12px 0; font-size:15px; background:rgba(249,115,22,0.08); padding:10px; border-radius:8px; border-left:3px solid #f97316; transition:transform .2s,background .2s; }
.benefit-item:hover { transform:translateX(5px); background:rgba(249,115,22,0.15); }
.benefit-icon { margin-right:15px; font-size:20px; min-width:25px; text-align:center; }
.vip-action { text-align:center; margin-top:25px; }
.vip-btn { display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#f97316,#ea580c); color:#fff; text-decoration:none; font-size:16px; font-weight:bold; padding:14px 28px; border-radius:30px; border:none; transition:all .3s; box-shadow:0 4px 15px rgba(249,115,22,0.4); }
.vip-btn:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(249,115,22,0.6); background:linear-gradient(145deg,#fb923c,#f97316); color:#fff; }
.download-title { margin:0 0 20px; font-size:20px; color:#fff; text-align:center; text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.platform-row { display:flex; align-items:center; justify-content:space-between; margin:15px 0; flex-wrap:wrap; }
.platform-name { font-weight:bold; color:#e0e0e0; font-size:16px; flex:1; min-width:80px; }
.download-btn { display:inline-flex; align-items:center; background:#111118; color:#fff; text-decoration:none; font-size:14px; font-weight:bold; padding:10px 20px; border-radius:8px; border:2px solid #f97316; transition:all .3s; }
.download-btn:hover { background:#f97316; color:#fff; transform:translateY(-2px); }
.public-notice { margin-top:20px; padding:12px; background:rgba(255,165,0,.1); border-left:3px solid #FFA500; border-radius:5px; font-size:13px; color:#d4d4d4; text-align:center; line-height:1.5; }
.floating-cat { position:absolute; font-size:24px; opacity:.4; z-index:0; user-select:none; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.cat-1 { top:15%; left:5%; animation:float 4s infinite; }
.cat-2 { top:60%; right:5%; animation:float 5s infinite 1s; }
.cat-3 { bottom:10%; left:8%; animation:float 4.5s infinite .5s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(5deg)} }

/* ── Plantilla: Video tabs (.tab-button y .tab-button-cap) ── */
.tab-button, .tab-button-cap { flex:1; background:#111118; color:#fff; border:1px solid rgba(249,115,22,0.3); padding:14px; font-size:16px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:background .3s,color .3s; }
.tab-button-cap + .tab-button-cap { border-left:1px solid rgba(249,115,22,0.3); }
.tab-button:hover, .tab-button-cap:hover { background:#1f1f2a; }
.tab-button.active, .tab-button-cap.active { background:#f97316; color:#fff; border-color:#f97316; }

/* ── Plantilla: Reproductor de video (post content) ── */
#video-container,
.video-player-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}
#video-container iframe,
#video-container video,
.video-player-container iframe,
.video-player-container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
/* Table inside video player (datos del video activo) */
.video-data-table { width:100%; border-collapse:collapse; color:#fff; font-size:15px; background:#111118; }
.video-data-table td { padding:12px; border-top:1px solid rgba(249,115,22,0.12); }
.video-data-table td:first-child { font-weight:bold; color:#f97316; width:30%; }

/* ── Plantilla: Tabla de datos del video (Nuevo desq y video) ── */
.video-details-table-outer {
  display:flex; justify-content:center; padding:20px;
}
.video-details-table-wrap {
  max-width:700px; width:90%; border-radius:8px; overflow:hidden;
  box-shadow:0 0 10px rgba(249,115,22,0.15);
  border:1px solid rgba(249,115,22,0.35);
}
.video-details-table {
  background:#111118; border-collapse:collapse;
  color:#fff; font-family:inherit; font-size:15px; width:100%;
}
.video-details-table thead tr { background:#1a1a1f; }
.video-details-table th {
  border:1px solid rgba(249,115,22,0.25);
  font-size:18px; padding:14px; text-align:center;
  text-transform:uppercase; letter-spacing:1px; color:#f97316;
}
.video-details-table td { border:1px solid rgba(249,115,22,0.15); padding:12px; }
.video-details-table td:first-child { font-weight:bold; }
.video-details-table a { color:#fff; font-weight:bold; text-decoration:none; }
.video-details-table a:hover { color:#f97316; }

/* ── Plantilla: NekoCard (Oni-chan rojo) ── */
.nekocard-wrapper { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; display:flex; justify-content:center; align-items:center; padding:30px; background:transparent; }
.nekocard-wrapper .game-card { background:linear-gradient(145deg,#1a1a1a,#1f1f1f); border:1px solid #e60000; border-radius:15px; max-width:600px; width:100%; padding:30px; text-align:center; color:#e0e0e0; box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 20px rgba(230,0,0,.1); }
.nekocard-wrapper .description-section { margin-bottom:25px; }
.nekocard-wrapper .description-section h2, .nekocard-wrapper .support-section h2, .nekocard-wrapper .download-section h2 { color:#ff3333; font-size:1.5em; margin-bottom:15px; border-bottom:2px solid #e60000; padding-bottom:10px; }
.nekocard-wrapper .description-section p { font-size:16px; line-height:1.6; color:#ccc; }
.nekocard-wrapper .support-block { background:rgba(230,0,0,.1); border:1px solid rgba(230,0,0,.3); border-radius:10px; padding:15px; margin-bottom:15px; }
.nekocard-wrapper .support-block p { font-size:16px; font-weight:bold; margin-bottom:15px; color:#fff; }
.nekocard-wrapper .support-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.nekocard-wrapper .support-buttons a { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(145deg,#e60000,#cc0000); color:white; padding:10px 18px; border-radius:8px; text-decoration:none; font-size:15px; font-weight:bold; transition:.3s; }
.nekocard-wrapper .support-buttons a:hover { background:linear-gradient(145deg,#ff1a1a,#e60000); transform:translateY(-3px); }
.nekocard-wrapper .no-shortener-notice { display:flex; align-items:flex-start; gap:15px; background:rgba(46,204,113,.15); border:1px solid rgba(46,204,113,.4); border-radius:10px; padding:15px; margin-bottom:20px; text-align:left; }
.nekocard-wrapper .no-shortener-notice .notice-icon { color:#2ecc71; font-size:1.5em; }
.nekocard-wrapper .no-shortener-notice p { margin:0; font-size:15px; color:#e0e0e0; }
.nekocard-wrapper .no-shortener-notice strong { color:#2ecc71; }
.nekocard-wrapper .platform-item { display:flex; align-items:center; justify-content:space-between; background:#111; border:1px solid #333; border-radius:8px; padding:12px 15px; margin-bottom:10px; transition:.3s; }
.nekocard-wrapper .platform-item:hover { border-color:#e60000; box-shadow:0 0 10px rgba(230,0,0,.2); }
.nekocard-wrapper .platform-item .platform-name { font-weight:bold; color:#ff3333; font-size:1.1em; }
.nekocard-wrapper .download-btn { display:inline-block; padding:8px 15px; background:#ff3333; color:#fff; text-decoration:none; border-radius:5px; font-size:14px; font-weight:bold; transition:.3s; }
.nekocard-wrapper .download-btn:hover { background:#cc0000; transform:translateY(-2px); }
.nekocard-wrapper .divider { height:1px; background:linear-gradient(to right,transparent,#e60000,transparent); margin:30px 0; }
.nekocard-wrapper .disclaimer { margin-top:30px; padding:15px; font-size:12px; border-radius:8px; background:rgba(255,255,255,.05); text-align:center; color:#999; }
@media (max-width:768px) {
  .nekocard-wrapper { padding:15px; }
  .nekocard-wrapper .game-card { padding:20px; }
  .nekocard-wrapper .support-buttons { flex-direction:column; align-items:center; }
  .nekocard-wrapper .platform-item { flex-direction:column; gap:10px; text-align:center; }
  .platform-row { flex-direction:column; align-items:stretch; }
  .platform-name { margin-bottom:8px; }
  .floating-cat { display:none; }
}

/* ══════════════════════════════════════════
   VERTICAL PORTRAIT CARDS (Code Arc style)
══════════════════════════════════════════ */
.nk-vcard {
  background: #111118;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.25s ease, border-color 0.25s ease;
  display: block;
}
.nk-vcard:hover { transform: translateY(-5px); border-color: rgba(249,115,22,0.5); box-shadow: 0 8px 30px rgba(249,115,22,0.12); }
.nk-vcard-link { display: block; text-decoration: none; color: inherit; }
.nk-vcard-cover {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #1a1a25;
}
.nk-vcard-cover img {
  width: 100% !important; height: 100% !important; max-width: 100% !important;
  object-fit: cover; object-position: center top; display: block;
  transition: transform 0.4s ease;
}
.nk-vcard:hover .nk-vcard-cover img { transform: scale(1.06); }
.nk-vcard-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, #1a1a2e, #f97316);
}
.nk-vcard-cat {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: rgba(249,115,22,0.92);
  color: white; font-size: 0.6rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1.4;
}
.nk-vcard-rank {
  position: absolute; top: 0.4rem; left: 0.6rem;
  font-size: 1.6rem; font-weight: 900; color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9); line-height: 1;
}
.nk-vcard-status {
  position: absolute; bottom: 0.5rem; left: 0.5rem;
  background: rgba(0,0,0,0.75); color: #fb923c;
  font-size: 0.6rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  border: 1px solid rgba(249,115,22,0.4);
}
.nk-vcard-new {
  position: absolute; bottom: 0.5rem; right: 0.5rem;
  background: #16a34a; color: white;
  font-size: 0.6rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
}
.nk-vcard-body { padding: 0.75rem 0.9rem 0.9rem; }
.nk-vcard-title {
  font-size: 0.88rem; font-weight: 700; color: #f0f0f0;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-bottom: 0.4rem; line-height: 1.3;
}
.nk-vcard-meta {
  font-size: 0.72rem; color: rgba(255,255,255,0.4);
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}

/* ── Vertical card grids ── */
.nk-vcard-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 1rem !important;
}
.games-grid .nk-vcard,
.nk-vcard-grid .nk-vcard { width: 100%; max-width: 100%; }

/* ── Fade-in animation (JS adds .visible) ── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible { opacity: 1; transform: none; }

/* ── Horizontal scroll row ── */
.nk-hscroll {
  display: flex; gap: 1rem; overflow-x: auto;
  padding-bottom: 0.75rem; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: rgba(249,115,22,0.3) transparent;
}
.nk-hscroll::-webkit-scrollbar { height: 4px; }
.nk-hscroll::-webkit-scrollbar-track { background: transparent; }
.nk-hscroll::-webkit-scrollbar-thumb { background: rgba(249,115,22,0.35); border-radius: 4px; }
.nk-hscroll .nk-vcard { flex-shrink: 0; width: 160px; scroll-snap-align: start; }

/* ── Section tab navigation ── */
.nk-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid rgba(255,255,255,0.07);
  margin-bottom: 1.5rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nk-tabs::-webkit-scrollbar { display: none; }
.nk-tab {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.45); font-weight: 600; font-size: 0.88rem;
  padding: 0.65rem 1.4rem 0.7rem;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s; white-space: nowrap;
}
.nk-tab:hover { color: rgba(255,255,255,0.8); }
.nk-tab.active { color: #f97316; border-bottom-color: #f97316; }
.nk-tab-panel { display: none !important; }
.nk-tab-panel.active { display: block !important; }

/* ── View-more link ── */
.nk-viewmore {
  font-size: 0.83rem; color: #f97316; text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
  transition: opacity 0.2s;
}
.nk-viewmore:hover { opacity: 0.75; }

/* ── Section separator ── */
.nk-section { padding: 3.5rem 0; }
.nk-section + .nk-section { border-top: 1px solid rgba(255,255,255,0.05); }
.nk-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.nk-section-head h2 { font-size: 1.4rem; font-weight: 800; color: white; }

/* ── Archive grid override for portrait cards ── */
.games-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 1rem !important;
}

@media (max-width: 600px) {
  .nk-vcard-grid,
  .games-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 160px)) !important; gap: 0.75rem; }
  .nk-hscroll .nk-vcard { width: 140px; }
}
